abbood abbood - 1 month ago 18
Java Question

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

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

enter image description here

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:

enter image description here

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

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>