progressbar in the middle of a button

Question

I want to create a progress bar in the middle of a standard button, something like this :

In the xml layout, when i click the progressbar, i do see that it's located where i wish it to be, but on realtime, i can't see it, it feels like its hiding below the button.

I've tried :

1. Changing the view's positioning (button above/below progressbar)
2. indeterminate
3. Playing with ProgressBar's style

Nothing seemed to be working.

Here's my xml :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button_id"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:elevation="1dp"
        android:text="test button" />

    <ProgressBar
        android:id="@+id/progress"
        style="?android:attr/progressBarStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/button_id"
        android:layout_alignTop="@+id/button_id"
        android:layout_centerHorizontal="true"
        android:indeterminate="true"
        android:indeterminateTint="@android:color/holo_blue_dark"
        android:visibility="visible" />

</RelativeLayout>

Answer 1

The problem is related with elevation. Add elevation to the ProgressBar

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button_id"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:elevation="1dp"
        android:text="test button" />

    <ProgressBar
        android:id="@+id/progress"
        style="?android:attr/progressBarStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/button_id"
        android:layout_alignTop="@+id/button_id"
        android:layout_centerHorizontal="true"
        android:indeterminate="true"
        android:elevation="2dp"
        android:indeterminateTint="@android:color/holo_blue_dark"
        android:visibility="visible" />

</RelativeLayout>