how to make a progress bar show on top of a button in android

Question

Ok this is something I can do in iOS in like five minutes.. but I can't seem to get it for android:

i simply want to show a progress bar ontop of a button. I managed to render the progress bar just fine beside the button like so

using this code

<RelativeLayout
    android:id="@+id/readBookContainer"
    android:layout_below="@+id/image"
    android:layout_marginLeft="@dimen/margin_medium"
    android:layout_alignRight="@+id/ratingBar"
    android:gravity="center"
    android:layout_width="300dp"
    android:layout_height="40dp">

    <Button
            android:id="@+id/readBook"
            android:background="@drawable/button_read_now"
            android:elevation="@dimen/margin_xsmall"
            android:singleLine="true"
            android:textSize="14sp"
            android:text="@string/download"
            android:layout_width="200dp"
            android:gravity="left"
            android:layout_height="match_parent"
            android:textColor="@color/book_item_bg" />

    <me.zhanghai.android.materialprogressbar.MaterialProgressBar
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/read_progress_bar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:indeterminate="true"
            android:visibility="visible"
            android:tint="#000000"
            android:layout_toLeftOf="@id/readBook"
            android:layout_marginRight="20dp"
            style="@style/Widget.MaterialProgressBar.ProgressBar.Small" />

however i can't seem to be able to do this:

i tried stuff like this (framelayout, relative layout)..

<FrameLayout
    android:id="@+id/readBookContainer"
    android:layout_below="@+id/image"
    android:layout_marginLeft="@dimen/margin_medium"
    android:layout_alignRight="@+id/ratingBar"
    android:gravity="center"
    android:layout_width="100dp"
    android:layout_height="40dp">

    <android.support.v4.widget.ContentLoadingProgressBar
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/read_progress_bar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:indeterminate="true"
            android:visibility="visible"
            android:tint="#000000"
            android:layout_gravity="right|center"
            style="@style/Widget.MaterialProgressBar.ProgressBar.Small" />



    <Button
            android:id="@+id/readBook"
            android:background="@drawable/button_read_now"
            android:elevation="@dimen/margin_xsmall"
            android:singleLine="true"
            android:textSize="14sp"
            android:text="@string/download"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:textColor="@color/book_item_bg" />

but it doesn't work.. (i tried substituting the library progress bar with android's but no luck).. ideas?

update

this is what the final thing looks like (based on the correct answer below):

    <LinearLayout
            android:id="@+id/readBook"
            android:background="@drawable/button_read_now"
            style="@style/Widget.AppCompat.Button"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginLeft="20dp"
                android:text="@string/download"
                android:textAppearance="@style/TextAppearance.AppCompat.Button" android:textColor="#FFFFFF"/>

        <me.zhanghai.android.materialprogressbar.MaterialProgressBar
                xmlns:android="http://schemas.android.com/apk/res/android"
                android:id="@+id/read_progress_bar"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingLeft="5dp"
                android:indeterminate="true"
                android:visibility="invisible"
                android:tint="#ffffff"
                style="@style/Widget.MaterialProgressBar.ProgressBar.Small" />


    </LinearLayout>

Answer 1

Starting from API level 21, a default Button (which is called a raised button in Material Design) has a resting elevation and a pressed elevation. For example in API level 23 The values are 2dp and 6dp respectively.

Your ProgressBar is in the correct position, however it's below the Button because its elevation is 0.

So by simply adding an elevation greater than 6dp to your ProgressBar you can make it appear above the button.

android:elevation="7dp"

Alternatively, you can create a layout to mimic a button and give it a button style:

<LinearLayout
    style="@style/Widget.AppCompat.Button"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:orientation="horizontal">

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:text="Button"
        android:textAppearance="@style/TextAppearance.AppCompat.Button"/>

    <ProgressBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</LinearLayout>

The second approach is more forward compatible since the elevation might change in a future release.

For example in API level 21 the values were 1dp and 3dp

<!-- Elevation when button is pressed -->
<dimen name="button_elevation_material">1dp</dimen>
<!-- Z translation to apply when button is pressed -->
<dimen name="button_pressed_z_material">2dp</dimen>

This is API level 23

<!-- Elevation when button is pressed -->
<dimen name="button_elevation_material">2dp</dimen>
<!-- Z translation to apply when button is pressed -->
<dimen name="button_pressed_z_material">4dp</dimen>

Answer 2

You can wrap it to the RelativeLayout. create parent RelativeLayout having background same as of your button.

Using Buttons will add the borders to view so you can use Textview with selector.xml which will work as Button. check here.

place Textview inside the RelativeLayout and align the ProgressBar to the Right of Textview.

  <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/button_read_now"
        >
    <TextView
        android:id="@+id/readBook"
        android:gravity="center"
        android:clickable="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:background="@drawable/selector"
        android:singleLine="true"
        android:textSize="14sp"
        android:text="download"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/white" />


    <android.support.v4.widget.ContentLoadingProgressBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/readBook"
        style="?android:attr/progressBarStyleSmall"
        android:visibility="visible"/>
    </RelativeLayout>