Progressbar along with text in Android

Question

I would like to create ProgressBar along with text same as below.

enter image description here

Please guide me. I developed some design but I am not able to display text exactly right side of ProgressBar as progress bar take min width. Please see below image: enter image description here

I am stuck on this. Thanks in advance.

My Code is:

 <RelativeLayout
            android:layout_width="match_parent"
            android:layout_below="@+id/lnrButtons"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:layout_marginRight="30dp"
            android:padding="5dp"
            android:background="@drawable/white_button_selector">

            <ProgressBar
                android:id="@+id/progressBarHome"
                android:layout_width="match_parent"
                style="?android:attr/progressBarStyleHorizontal"
                android:progressDrawable="@drawable/custom_progress_bar"
                android:layout_height="wrap_content"
                android:progress="50"
                android:layout_alignParentStart="true"
                android:layout_centerVertical="true"
                android:indeterminate="false"/>

            <TextView
                android:id="@+id/txtProgress"
                android:layout_width="wrap_content"
                android:text="10%"
                android:textColor="@color/light_orange"
                android:background="@android:color/transparent"
                android:layout_centerVertical="true"
                android:layout_alignRight="@+id/progressBarHome"

                android:layout_height="wrap_content"/>

        </RelativeLayout>

After implementing code changes output is:

enter image description here

try making a custom new where you increase its width for every tasks done — Rod_Algonquin, Mar 16 '15 at 06:10

Born To Win · Answer 1 · 2015-03-16T09:29:58.680

0

You just design the layout according to that.I think your layout design will be following.

For eg.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <ProgressBar
      style="@android:style/Widget.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
       android:id="@+id/PROGRESS_BAR"
    >
    <TextView
        android:background="#00000000" // transparent background
        android:layout_alignLeft="@id/PROGRESS_BAR"
        android:layout_alignTop="@id/PROGRESS_BAR"
        android:layout_alignRight="@id/PROGRESS_BAR"
        android:layout_alignBottom="@id/PROGRESS_BAR"
    >
</RelativeLayout>

As per your requirement if you want to move your textview you have to pass your progress value to the following txtView.setX((int) ur progress value);

Hope it will helps you.

edited Mar 16 '15 at 09:29

answered Mar 16 '15 at 05:23

Born To Win

3,319
3
19
27

@anddev:Have you add horizontal style to the progressbar? – Born To Win Mar 16 '15 at 06:06
Yes. Please see my updated question. I have added my xml code. – anddev Mar 16 '15 at 07:49
After implementing as per your code, please refer output as per attached image above. – anddev Mar 16 '15 at 07:54
I think its done you just center ur textview by android:centerinparent="true"..it works – Born To Win Mar 16 '15 at 09:15
As I display in my first image I don't need to display text in center or any fix position but as progress will get increase the text view must be moved along with progress. That is my requirement. – anddev Mar 16 '15 at 09:19
@anddev:Is this answer is helps you or not..let me knw. – Born To Win Mar 16 '15 at 11:46
@win:as per my requirement your suggestion was not helpful to me. But then after instead of ProgressBar I added ImageView and create Bitmap programatically. Then It works as per my requirement. Thank you so much for your support and suggesstion. Thanks a ton :) – anddev Mar 18 '15 at 10:03

score 0 · Answer 2 · edited May 23 '17 at 11:43

0

I suppose the Android ValueAnimator should do the trick for you. Basically you need a custom shape for this progress bar, which you can animate to scale its width as and when the progress increases.

You might get some help here ObjectAnimator animate LinearLayout width

edited May 23 '17 at 11:43

Community

1
1

answered Mar 16 '15 at 05:24

Sushant kunal

341
1
2
9

use alignParentRight="true" for your textview – Sushant kunal Mar 16 '15 at 06:01

Progressbar along with text in Android

2 Answers2

Linked