Custom progressbar how to

Question

I would like to create a custom rectangular progress bar with white background colour. There is a text centered in the progress bar which defines the height of the progressbar. There is another view with black background colour which grows in width from the left side depending on the progress. I have this but it doesn't work:

                    <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    android:gravity="center"
                    android:background="#FFFFFF"   // this defines background colour
                    android:weightSum="1.0">

                    <LinearLayout // this should be aligned to the left side
                        android:layout_width="0dp"
                        android:layout_weight="0.25" // this should define percentage width
                        android:layout_height="fill_parent" // it should have height same as the TextView
                        android:background="#FF000000" />

                    <TextView
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:textColor="#FFFFFF"
                        android:textSize="40dp"
                        android:gravity="center" // it should be displayed in the center of the progress bar
                        android:text="some text"/>

EDIT: OK, I have this:

                    <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:background="#FFFFFFFF">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="fill_parent"
                        android:orientation="horizontal"
                        android:gravity="left"
                        android:weightSum="1.0">

                        <LinearLayout
                            android:layout_width="0dp"
                            android:layout_weight="0.25"
                            android:layout_height="fill_parent"
                            android:background="#FF000000" />
                    </LinearLayout>

                    <TextView
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:textColor="#777777"
                        android:textSize="40dp"
                        android:gravity="center"
                        android:text="@{data.remainingTime}"/>

                </RelativeLayout>

The only problem is: how to tell LinearLayout to be exactly as high as the TextView?

Do you have an image of what you want to achieve? It would make things easier to understand. — Tamir Abutbul, Feb 07 '20 at 15:44

score 1 · Accepted Answer · answered Feb 07 '20 at 16:15

You can use something like this with ConstraintLayout

  <androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button3"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:background="#A496D8"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_percent="0.1"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:padding="0dp"
        android:background="#000000"
        android:elevation="6dp"
        app:layout_constraintBottom_toBottomOf="@+id/button3"
        app:layout_constraintStart_toStartOf="@+id/button3"
        app:layout_constraintTop_toTopOf="@+id/button3" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:elevation="6dp"
        android:text="Some text"
        android:textAlignment="center"
        android:textColor="#000000"
        app:layout_constraintBottom_toBottomOf="@+id/button3"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="@+id/button3"
        app:layout_constraintTop_toTopOf="@+id/button3"
        app:layout_constraintVertical_bias="0.0" />

</androidx.constraintlayout.widget.ConstraintLayout>

It will look like this:

But to be honest, I think you better use some library that already handling a lot of logic for you. for example:

NumberProgressBar

ProgressView

Android-RoundCornerProgressBar

Another easy option that you have is to use a horizontal progress bar (How to create a horizontal loading progress bar?) and just put some text on it.

Custom progressbar how to

1 Answers1