come fare una barra di avanzamento mostra sulla cima di un pulsante in Android

Question

Ok questa è una cosa che posso fare in iOS in come cinque minuti .. ma io non riesco a farlo per Android:

ho semplicemente vuoi mostrare una barra di avanzamento ontop di un pulsante. Sono riuscito a rendere la barra di avanzamento bene accanto il pulsante mi piace in modo

utilizzando questo codice

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

però io non riesco a essere in grado di fare questo:

ho provato cose del genere (framelayout, relativo 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" /> 

ma non funziona .. (ho provato sostituendo la barra di avanzamento biblioteca con Android, ma senza fortuna) .. idee?

aggiornamento

questo è ciò che l'ultima cosa assomiglia (in base alla risposta corretta sotto):

<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

partire da API di livello 21, un predefinito Button (che è chiamato un bottone sporgente in Materiale disegno) presenta un'elevazione riposo e elevazione pressata. Ad esempio in livello API 23 I valori sono rispettivamente 2dp e 6dp.

tuo ProgressBar è nella posizione corretta, tuttavia è al di sotto della Button perché la sua altezza è di 0.

Così semplicemente aggiungendo un'elevazione maggiore di 6DP al vostro ProgressBar è possibile far apparire sopra il pulsante.

android:elevation="7dp" 

In alternativa, è possibile creare un layout per imitare un pulsante e dare uno stile tasto:

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

Il secondo approccio è più avanti compatibile in quanto l'elevazione potrebbe cambiare in un versione futura.

Ad esempio nel livello API 21 i valori erano 1DP e 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> 

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

Il problema è in Button stile. È possibile trovare ulteriori informazioni in questa risposta https://stackoverflow.com/a/32898915/1554094

Answer 3

È possibile eseguire il wrapping su RelativeLayout. crea parent RelativeLayout con lo stesso sfondo del tuo pulsante.

Utilizzo dei pulsanti aggiungerà i bordi da visualizzare in modo da poter utilizzare Textview con selector.xml che funzionerà come pulsante. check here.

posizionare Textview all'interno di RelativeLayout e allineare la barra di avanzamento alla destra di 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

Rimuovere seguente

android:layout_toLeftOf="@id/readBook" 

da

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