Custom progressbar how to

debugcn 投稿 Dev

Martin Dusek

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?

Tamir Abutbul

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.

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]