如何製作進度條顯示上的按鈕的頂部的Android

Question

確定這是我可以在iOS的像5分鐘做..但我似乎無法得到它的Android：

我根本想要在按鈕頂部顯示進度條。我設法使用此代碼

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

但是我似乎無法能夠做到這一點渲染進度條就好旁邊像這樣

按鈕：

我試過這樣的東西（framelayout，relative layo ut）..

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

但它不工作..（我試圖用Android的代替庫進度條，但沒有運氣）..想法？

更新

這是最後的事情看起來像什麼（基於下面的正確答案）：

<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

從API級別21開始，默認Button（被稱爲材料設計一個凸起按鈕）有一個休息的高度和按高程。 例如在API級別23中，值分別爲2dp和6dp。

你ProgressBar是在正確的位置，但它的Button之下，因爲它的海拔爲0

因此，通過簡單地增加一個海拔超過6DP您ProgressBar你可以把它顯示在按鈕上方更大。

android:elevation="7dp" 

或者，你可以創建一個佈局模仿一個按鈕，並給它一個按鈕樣式：

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

第二種方法更向前兼容，因爲高度可能會在改變未來版本。

例如，在API級別21的值分別爲1DP和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> 

這是API級別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

的問題是在按鈕風格。你可以在這個答案中找到更多的信息https://stackoverflow.com/a/32898915/1554094

Answer 3

你可以把它包裝到RelativeLayout。 創建背景與您的按鈕背景相同的父親RelativeLayout。

使用按鈕將添加邊框以查看，以便您可以使用Textview和selector.xml，它將作爲Button使用。 check here.

將Textview放在RelativeLayout中，並將ProgressBar對齊到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> 

Answer 4

刪除以下

android:layout_toLeftOf="@id/readBook" 

從

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