How change ProgressBar style?

Question

I'm trying to create my own style for the ProgressBar, but I can't get the desired result.

        <ProgressBar
        android:id="@+id/indicator"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginTop="50dp"
        android:layout_marginStart="10dp"
        android:layout_marginEnd="10dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        style="?android:attr/progressBarStyleHorizontal"
        android:background="@drawable/myprogressbar"
        android:progress="0"/>

Style (tried many options from the most primitive to more complex):

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <color android:color="#2ecc71"></color>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <color android:color="#27ae60"></color>
        </clip>
    </item>
</layer-list>

enter image description here

As a result, I look like this:

Either the bar area is higher than the height of the ProgressBar itself Or the area is equal to the ProgressBar, a thin line cannot be made higher. What am I doing wrong and how to fix it?

Answer 1

The bar area height is not equal to the ProgressBar height because the height of the ProgressBar is determined by its android:layout_height attribute, while the height of the bar area is determined by the height of the items in the layer-list drawable.

To fix this, you can increase the height of the items in the layer-list drawable.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background" android:height="50dp">
        <color android:color="#2ecc71"></color>
    </item>
    <item android:id="@android:id/progress" android:height="50dp">
        <clip>
            <color android:color="#27ae60"></color>
        </clip>
    </item>
</layer-list>