How to make an indication of progress at the top of a button in android

Question

Ok, this is what I can do in iOS in five minutes. But I can not get it for Android:

I just want to show the progress bar on the button. I managed to display a progress bar next to the button 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 cannot do this:

I tried such things (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 does not work. (I tried replacing the library execution bar with android, but no luck) .. ideas?

Update

here is what it actually 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 at API level 21, by default, a Button (which is called a raised button in Material Design) has an upward mark and a pressed height. For example, at API level 23, Values ​​are 2dp and 6dp, respectively.

Your ProgressBar is in the correct position, but below the Button , because its height is 0.

So, just by adding a height of more than 6 dp to your ProgressBar , you can do it above the button.

 android:elevation="7dp" 

In addition, you can create a layout to simulate a button and create 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 compatible with hyphenation, since the height may change in a future version.

For example, at 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 transfer it to RelativeLayout. create a parent RelativeLayout that has the same background as your button.

Using buttons will add borders for viewing so you can use Textview with selector.xml, which will work like a button. here.

place the Textview inside the RelativeLayout and align the ProgressBar to the right of the text view.

  <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> 

Answer 3

The problem is the Button style. You can find more information in this answer fooobar.com/questions/708956 / ...

Answer 4

Delete next

 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"