Add Dots To Textview Like In The Receipt

February 28, 2024 Post a Comment

I want to implement something like a product list in the receipt: Beer ......................................... 20 Milk .......................................... 10 Cookies with

Solution 1:

You should create THREE TextViews for each row, layed out one next to another:

TextView With product name (e.g. 'beer')
TextView with dots
TextView with number (e.g. '20')

Then put one product in one row. The Row should be relative layout where:

TextView no. 1 is aligned to left edge, with width set to wrap content
TextView no. 3 is aligneg to right edge, with width set to wrap content
TextView no. 2 is toLeftOf TV no. 3 and toRightOf TV no.1 and it should be filled with big amount of dots in XML file. this will never be changed.

This will work, since the TV no.2 will have width that will shrink and will always be fitted between product name and the price. believe me :)

Solution 2:

I have the solution. Maybe it will help someone.

File check_info_item.xml:

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="horizontal"><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"><TextViewandroid:layout_height="wrap_content"android:layout_width="wrap_content"android:id="@+id/txt_fake_value"android:textSize="18dp"android:textColor="@android:color/transparent"android:layout_alignParentRight="true"/><example.com.CheckInfoTextViewandroid:layout_height="wrap_content"android:layout_width="match_parent"android:id="@+id/txt_fake_info"android:textSize="18dp"android:textColor="@android:color/transparent"android:layout_alignParentLeft="true"android:layout_toLeftOf="@id/txt_fake_value"/><TextViewandroid:layout_height="wrap_content"android:layout_width="wrap_content"android:id="@+id/txt_check_info_value"android:text=""android:textSize="18dp"android:textColor="#000"android:layout_alignParentRight="true"android:layout_alignBottom="@id/txt_fake_info"/><example.com.CheckInfoTextViewandroid:layout_height="wrap_content"android:layout_width="match_parent"android:textSize="18dp"android:textColor="#000"android:id="@+id/txt_check_info"android:text=""android:layout_alignParentLeft="true"android:layout_toLeftOf="@id/txt_check_info_value"/></RelativeLayout></LinearLayout>

Code to fill the info fields (in the Activity):

Viewrow= getLayoutInflater().inflate(R.layout.check_info_item, null);
    //Fake fields needed to align base fields in the xml fileTextViewtxtFakeValue= (TextView) row.findViewById(R.id.txt_fake_value);
    txtFakeValue.setText(String.valueOf(pair.second));

    TextViewtxtFake= (TextView) row.findViewById(R.id.txt_fake_info);
    txtFake.setText(pair.first);

    TextViewtxtValue= (TextView) row.findViewById(R.id.txt_check_info_value);
    txtValue.setText(String.valueOf(pair.second));

    TextViewtxtTitle= (TextView) row.findViewById(R.id.txt_check_info);
    txtTitle.setText(pair.first);

And the CheckInfoTextView:

publicclassCheckInfoTextViewextendsTextView {


    publicCheckInfoTextView(Context context) {
        super(context);
    }

    publicCheckInfoTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    publicCheckInfoTextView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @OverridepublicvoidonWindowFocusChanged(boolean hasWindowFocus) {
        super.onWindowFocusChanged(hasWindowFocus);
        if(!hasWindowFocus) return;

        intrequiredDots= getRequiredDotsNumber();
        if(requiredDots == 0) {
            Stringtext= getText().toString();
            StringBuilderresult=newStringBuilder();
            result.append(text.substring(0, text.lastIndexOf(' ')));
            result.append("\n");
            result.append(text.substring(text.lastIndexOf(' ') + 1));
            setText(result.toString());

            requiredDots = getRequiredDotsNumber();
        }
        Stringdots="";
        for (inti=0; i < requiredDots; ++i) {
            dots += " .";
        }
        setText(getText() + dots);
    }

    privateintgetRequiredDotsNumber() {
        finalintwidth= getWidth();
        finalintlastLineWidth= (int) getLayout().getLineWidth(getLineCount() - 1);
        finalintavailableWidthForDots= width - lastLineWidth;
        finalintwidthOfOneDot= getWidthOfOneDot();
        finalintwidthOfTwoDotsWithSpace= getWidthOfTwoDotsWithSpace();
        finalintwidthOfSpace= widthOfTwoDotsWithSpace - (widthOfOneDot * 2);
        finalintwidthOfDotWithSpace= widthOfSpace + widthOfOneDot;
        intnumberOfDots= availableWidthForDots / widthOfDotWithSpace;
        return numberOfDots;
    }

    privateintgetWidthOfTwoDotsWithSpace() {
       return getStringWidth(". .");
    }

    privateintgetWidthOfOneDot() {
       return getStringWidth(".");
    }

    privateintgetStringWidth(String text) {
        RectdotBounds=newRect();
        getPaint().getTextBounds(text,0,text.length(),dotBounds);
        return dotBounds.width();
    }
}

Solution 3:

I've changed Serg_'s CheckinfoTextView class so that it both works in the eclipse layout editor, but also adds spaces if possible, to put the page number as close to the right side as possible. I've also changed a bit how it is used.

To accomplish:

Milk...................23
Chocolate cookies......24

set the text to 'Milk 23' and 'Chocolate cookies 24' respectively

The number of spaces is rounded to nearest rather than rounded down, so it's better to put the number a little bit over to the right rather than too much to the left

publicclassDotAutofillTextViewextendsTextView {

privateint availableWidthForDots;
privateint widthOfSpace;
privateint widthOfDotWithSpace;

publicDotAutofillTextView(Context context) {
    super(context);
}

publicDotAutofillTextView(Context context, AttributeSet attrs) {
    super(context, attrs);
}

publicDotAutofillTextView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
}

@OverrideprotectedvoidonLayout(boolean changed, int left, int top, int right, int bottom) {
    intwidth= getWidth() - getPaddingLeft() - getPaddingRight();
    intlastLineWidth= (int) getLayout().getLineWidth(getLineCount() - 1);
    availableWidthForDots = width - lastLineWidth;
    intwidthOfOneDot= getWidthOfOneDot();
    intwidthOfTwoDotsWithSpace= getWidthOfTwoDotsWithSpace();
    widthOfSpace = widthOfTwoDotsWithSpace - (widthOfOneDot * 2);
    widthOfDotWithSpace = widthOfSpace + widthOfOneDot;
    intrequiredDots= getRequiredDotsNumber();
    if (requiredDots != 0) {
        intspaces= getRequiredSpacesNumber(requiredDots);
        StringBuilderresult=newStringBuilder();
        Stringtext= getText().toString();
        result.append(text.substring(0, text.lastIndexOf(' ')));
        setText(result.toString());
        StringBuilderdots=newStringBuilder();
        for (inti=0; i < requiredDots; ++i) {
            dots.append(" .");
        }
        for (inti=0; i < spaces; ++i) {
            dots.append(" ");
        }
        result.append(dots.toString());
        result.append(text.substring(text.lastIndexOf(' ') + 1));
        setText(result.toString());
    }
    super.onLayout(changed, left, top, right, bottom);
}

privateintgetRequiredSpacesNumber(int requiredDots) {
    floatremain= (1f * availableWidthForDots) % (1f * widthOfDotWithSpace);
    return (int) ((remain / widthOfSpace) + 0.5f);
}

privateintgetRequiredDotsNumber() {
    if (getLayout() == null) {
        return1;
    }
    intnumberOfDots= availableWidthForDots / widthOfDotWithSpace;
    return numberOfDots;
}

privateintgetWidthOfTwoDotsWithSpace() {
    return getStringWidth(". .");
}

privateintgetWidthOfOneDot() {
    return getStringWidth(".");
}

privateintgetStringWidth(String text) {
    RectdotBounds=newRect();
    getPaint().getTextBounds(text, 0, text.length(), dotBounds);
    return dotBounds.width();
}

}

Baca Juga

Solution 4:

If '.'(dots) is your basic requirement then you can try like this..

My suggestion, Use only I TextView to fit in Beer...10 (hitch)

try like this..

intlabel_len=10;//Edit as per your requirementStringMoneyValue="20";
    TextViewtv= (TextView)findViewById(your id);
    tv.setText("Beer");

    if(tv.getText().length() < label_len){
        for(inti= tv.getText().length(); i < label_len; i++){

           tv.setText(tv.getText()+".");
        }
    }
tv.setText(tv.getText() + MoneyValue);

This is a sample with hardcoded value, you can try to add dynamically...

Hope this helps...

Solution 5:

enter image description here You can achieve this by using layout.xml only.

<?xml version="1.0" encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent"android:![enterimagedescriptionhere][2]layout_height="fill_parent"><LinearLayoutandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:weightSum="1"><TextViewandroid:layout_height="wrap_content"android:layout_width="0dp"android:layout_weight="0.9"android:text="Milk.................................................................................................................................." /><TextViewandroid:layout_height="wrap_content"android:layout_width="0dp"android:layout_weight="0.1"android:text="20" /></LinearLayout></LinearLayout>

This solution will work for all the device with different resolutions.

iklangratisku7