Regolare le dimensioni icona di pulsante di azione (FAB)

Question

galleggiante Il nuovo pulsante di azione galleggiante deve essere 56dp x 56dp e l'icona interno dovrebbe essere 24dp x 24dp. Quindi lo spazio tra l'icona e il pulsante dovrebbe essere 16dp.

<ImageButton 
    android:id="@+id/fab_add" 
    android:layout_width="56dp" 
    android:layout_height="56dp" 
    android:layout_gravity="bottom|right" 
    android:layout_marginBottom="16dp" 
    android:layout_marginRight="16dp" 
    android:background="@drawable/ripple_oval" 
    android:elevation="8dp" 
    android:src="@drawable/ic_add_black_48dp" /> 

ripple_oval.xml

<ripple xmlns:android="http://schemas.android.com/apk/res/android" 
    android:color="?android:colorControlHighlight"> 
    <item> 
     <shape android:shape="oval"> 
      <solid android:color="?android:colorAccent" /> 
     </shape> 
    </item> 
</ripple> 

E questo è il risultato che ottengo:

ho usato l'icona dalla \ materiale-design-icons-1.0.0 \ content \ drawable-hdpi \ ic_add_black_48dp.png
https://github.com/google/material-design-icons/releases/tag/1.0.1

Come rendere la dimensione all'interno del pulsante esattamente come descritto nelle linee guida?

http://www.google.com/design/spec/components/buttons.html#buttons-floating-action-button

Answer 1

Poiché il contenuto è 24 dp x 24 dp, è necessario utilizzare 24dp icon. Quindi imposta android:scaleType="center" nel tuo ImageButton per evitare il ridimensionamento automatico.

Answer 2

<ImageButton 
     android:background="@drawable/action_button_bg" 
     android:layout_width="56dp" 
     android:layout_height="56dp" 
     android:padding="16dp" 
     android:src="@drawable/ic_add_black_48dp" 
     android:scaleType="fitXY" 
     android:elevation="8dp"/> 

Con lo sfondo che hai fornito il risultato e pulsante in basso sul mio dispositivo (Nexus 7 2012)

Sembra buono con me.

Answer 3

Rendi la voce nel dimens

<!--Floating action button--> 
<dimen name="design_fab_image_size" tools:override="true">36dp</dimen> 

Qui 36dp è formato icona sul pulsante in virgola mobile. Questo imposterà la dimensione 36dp per tutte le icone per il pulsante di azione mobile.

Aggiornamenti Come da Commenti

Se si desidera impostare la dimensione delle icone a particolari Floating pulsante di azione poi si deve andare con pulsante di azione galleggiante attributi come app: fabSize = "normal" e Android: scaleType =" centro".

<!--app:fabSize decides size of floating action button You can use normal, auto or mini as per need--> 
    app:fabSize="normal" 

    <!--android:scaleType decides how the icon drawable will be scaled on Floating action button. You can use center(to show scr image as original), fitXY, centerCrop, fitCenter, fitEnd, fitStart, centerInside.--> 
    android:scaleType="center" 

Answer 4

Le linee guida di progettazione definisce due dimensioni e se non c'è un forte motivo di deviare da utilizzando, le dimensioni possono essere controllate con l'attributo fabSize XML del componente FloatingActionButton.

Considerare specificando utilizzando app:fabSize="normal" o app:fabSize="mini", ad es .:

<android.support.design.widget.FloatingActionButton 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:src="@drawable/ic_done_white_24px" 
    app:fabSize="mini" /> 

Answer 5

Come FAB è come ImageView modo da poter utilizzare l'attributo scaleType per modificare la dimensione delle icone allo stesso modo ImageView. L'impostazione predefinita scaleType per un FAB è fitCenter.È possibile utilizzare center e centerInside per rendere rispettivamente l'icona piccola e grande.

Tutti i valori per l'attributo scaleType sono - center, centerCrop, centerInside, fitCenter, fitEnd, fitStart, fitXY e matrix.

Vedere https://developer.android.com/reference/android/widget/ImageView.ScaleType.html per ulteriori dettagli.

Answer 6

off di @ risposta di IRadha nel vettore impostazione android:height="_dp" e impostare il tipo di scala per android:scaleType="center" drawable imposta drawable a qualsiasi dimensione è stata impostata