2016-04-29 2 views
5

Ok это то, что я могу сделать в прошивке в как пяти минут .. но я не могу показаться, чтобы получить его для андроид:как сделать прогресс бар показать на верхних кнопки в Android

я просто хотите показать индикатор выполнения на кнопке. Мне удалось оказать прогресс бар просто отлично рядом кнопку, как так

enter image description here

используя этот код

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

однако я не могу показаться, чтобы быть в состоянии сделать это:

enter image description here

Я пробовал такие вещи (framelayout, relative layo ут) ..

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

, но он не работает .. (я пытался подставляя прогресс бар библиотека с андроида, но не повезло) .. идеи?

обновление

это то, что последнее, что выглядит (на основе правильного ответа ниже):

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

ли Spinner или ProgressBar? –

+1

Вы пытались разместить 'PorgressBar' после' Button' в 'FrameLayout'? – Alex

+0

это spinner https://github.com/DreaminginCodeZH/MaterialProgressBar – abbood

ответ

5

Начиная с уровня API 21, по умолчанию Button (который называется приподнятый кнопку в Material Design) имеет высоту отдыха и прессованная высота. Например, в уровне 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> 
3

Вы можете обернуть его в RelativeLayout. создать родительский элемент RelativeLayout, имеющий тот же фон, что и на вашей кнопке.

Использование кнопок добавит границы для просмотра, чтобы вы могли использовать Textview с selector.xml, который будет работать как кнопка. check here.

место Textview внутри RelativeLayout и выровнять ProgressBar справа от текстового поля.

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

@abbood сделал эту работу? обновить, если работать с upvote. Благодаря! –

1

Снимите следующие

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

@abbood Расскажите мне, что произошло после этого –