Search code examples
androidprogress-barandroid-xmlandroid-progressbar

Customised Horizontal progress bar in Android


I want a customised progress bar in android, like this: enter image description here

I want progress bar same as it is, but unable to achieve this.


Solution

  • This will give you the result that you want:

    <com.google.android.material.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardCornerRadius="100dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginVertical="20dp"
        android:layout_marginHorizontal="20dp"
        >
        <com.google.android.material.progressindicator.LinearProgressIndicator
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:progress="80"
            app:indicatorColor="@color/blue_500"
            app:trackColor="@color/blue_200"
            app:trackThickness="16dp"
            app:trackCornerRadius="100dp"
            />
    </com.google.android.material.card.MaterialCardView>
    

    app:indicatorColor: This is the color of the indicator, it depends on the value of android:progress

    app:trackColor: This is the color of the track, it is the background color of the LinearProgressIndicator

    app:trackThickness: This is the thickness of the track, which means that this value is the height of the LinearProgressIndicator

    Note: The MaterialCardView should be inside a ViewGroup ( ConstraintLayout, LinearLayout ... ).