drawable from progress bar cover text view

Issue

I have a progress bar and need to put some text over it. I've search for solutions but none of it worked. I've realized that what covers my Textview is the drawer from my progress bar (if I remove it, the text is visible) Here's my layout code:

<RelativeLayout
            android:id="@+id/progressbarContainer"
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:gravity="center_vertical">
            <!--      BARRA DE PROGRESSO DOS MEMES    -->
            <ProgressBar
                android:elevation="10dp"
                android:id="@+id/progressBar"
                style="@style/myProgressBar"
                android:layout_width="match_parent"
                android:layout_height="20dp"
                android:layout_marginStart="10dp"
                android:layout_marginEnd="10dp"
                android:progressDrawable="@drawable/progress_bar"/>
            <TextView
                android:background="#00000000"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignBottom="@+id/progressBar"
                android:layout_alignTop="@+id/progressBar"
                android:layout_alignEnd="@+id/progressBar"
                android:layout_alignStart="@+id/progressBar"
                android:layout_above="@+id/progressBar"
                android:text="00:99"
                android:textColor="#ff0000"/>
</RelativeLayout>

and here is my drawable xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id = "@android:id/background">
        <shape>
            <corners android:radius="10dp"/>
            <solid android:color="#ffff"/>
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="10dp" />
                <solid android:color="@color/progressBlue"/>
            </shape>
        </clip>
    </item>
</layer-list>

The progress bar style has nothing but "Base.Widget.AppCompat.ProgressBar.Horizontal" as its parent and max and min height. I've changed those and that doesn't seem to be the problem.

Solution

You have 2 options.

Option 1: Remove android:elevation="10dp" from ProgressBar in xml file.

<ProgressBar
            android:id="@+id/progressBar"
            style="@style/myProgressBar"
            android:layout_width="match_parent"
            android:layout_height="20dp"
            android:layout_marginStart="10dp"
            android:layout_marginEnd="10dp"
            android:progressDrawable="@drawable/progress_bar"/>

Option 2: If you want to keep android:elevation="10dp" for ProgressBar, then add android:elevation="11dp" for TextView in xml file.

<RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/progressbarContainer"
        android:layout_width="match_parent"
        android:layout_height="30dp" android:gravity="center_vertical">
    <!--      BARRA DE PROGRESSO DOS MEMES    -->
    <ProgressBar
            android:elevation="10dp"
            android:id="@+id/progressBar"
            style="@style/myProgressBar"
            android:layout_width="match_parent"
            android:layout_height="20dp"
            android:layout_marginStart="10dp"
            android:layout_marginEnd="10dp"
            android:progressDrawable="@drawable/progress_bar"/>
    <TextView
            android:elevation="11dp"
            android:background="#00000000"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/progressBar"
            android:layout_alignTop="@+id/progressBar"
            android:layout_alignEnd="@+id/progressBar"
            android:layout_alignStart="@+id/progressBar"
            android:layout_above="@+id/progressBar"
            android:text="00:99"
            android:textColor="#ff0000"/>
</RelativeLayout>

You can see this post to understand how android:elevation works in Android.

Answered By - Son Truong