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>

did you tried to place `PorgressBar` after `Button` in `FrameLayout` ? — Alex, Apr 29 '16 at 09:15
it's a spinner https://github.com/DreaminginCodeZH/MaterialProgressBar — abbood, Apr 29 '16 at 09:16
@abbood It is progressbar because spinner means something like dropdown menu in android. So Do you want to want this progressbar to show over button to indicate some loading process? — Parsania Hardik, Apr 29 '16 at 09:18
@abbood this is not a spinner in context of Android. It is known as Progress Bar and spinner is a drop down menu in Android — Vivek Mishra, Apr 29 '16 at 09:19
can u please tell the definition of `@style/Widget.MaterialProgressBar.ProgressBar.Small` — Pankaj, Feb 05 '17 at 04:55

Benito Bertoli · Accepted Answer · 2016-10-10T06:04:00.887

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>

Thanks. When displayed first time, an elevation > 0 was enough but since i hide and show the progress, 1 was not working. Elevation=7 works well ! Thanks — Nk54, Sep 27 '22 at 11:36

score 3 · Answer 2 · edited May 23 '17 at 11:53

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>

@abbood did this work? update if worked with upvote. Thanks! — Nilesh Deokar, Apr 29 '16 at 09:50

score 1 · Answer 3 · edited May 23 '17 at 11:53

1

The problem is in Button style. You can find more information in this answer https://stackoverflow.com/a/32898915/1554094

edited May 23 '17 at 11:53

Community

1
1

answered Apr 29 '16 at 09:33

Alexander

857
6
10

score 1 · Answer 4 · answered Apr 29 '16 at 09:35

Remove following

android:layout_toLeftOf="@id/readBook"

from

<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"// remove this
        android:layout_marginRight="20dp"
        style="@style/Widget.MaterialProgressBar.ProgressBar.Small" />

android:layout_toLeftOf="@id/readBook"

@abbood Tell me what happened after doing this – Parsania Hardik Apr 29 '16 at 09:39 — Parsania Hardik, Apr 29 '16 at 09:39

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

update

4 Answers4

Linked