Ajustar el tamaño del icono del botón de acción flotante (fab)


172

Botón flotante El nuevo botón de acción flotante debe ser 56dp x 56dp y el ícono dentro debe ser 24dp x 24dp . Entonces, el espacio entre el icono y el botón debe ser de 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>

Y este es el resultado que obtengo:
Resultado del botón flotante
utilicé el ícono de \ material-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

¿Cómo hacer que el tamaño del icono dentro del botón sea exactamente como se describe en las pautas?

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



@InsaneCat Quizás sea al revés porque la pregunta que mencionaste es más reciente que la mía.
vovahost

Respuestas:


184

Como su contenido es de 24dp x 24dp, debe usar el icono de 24dp . Y luego configure android:scaleType="center"su ImageButton para evitar el cambio de tamaño automático.


¿Puede explicar o soltar un enlace a algún sitio? Por qué, por ejemplo, en la carpeta drawable-hdpi hay _18dp.png, _24dp.png, _36dp.png, _48dp.png imágenes.
vovahost

No entiendo su pregunta, hay 18dp, 24dp, 36dp y 48dp para imágenes de diferentes tamaños.
Gaëtan M.

¿Recuerdas el viejo Android_Design_Icons que tenía solo una variante del icono en la carpeta hdpi que era 48px x 48px. ¿Por qué ahora en la carpeta hdpi hay 4 resoluciones diferentes para el mismo icono, es decir, 27 px x 27 px, 36 px x 36 px, 54 px x 54 px, 72 px x 72 px?
vovahost

1
ImageButton es una subclase de ImageView, por lo que tiene un atributo scaleType y el scaleType predeterminado es ScaleType.FIT_CENTER
Gaëtan M.

44
Ya no funciona con com.android.support:support-v4:28.0.0-rc01
StarWind0

116

Haga esta entrada en dimens

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

Aquí 36dp es el tamaño del icono en el botón de coma flotante. Esto establecerá un tamaño de 36dp para todos los iconos del botón de acción flotante.

Actualizaciones según comentarios

Si desea establecer el tamaño del icono en un botón de acción flotante en particular, simplemente vaya con los atributos del botón de acción flotante como app: fabSize = "normal" y android: scaleType = "center".

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

3
Esto es justo lo que necesitaba: simple y fácil. Gracias por publicar.
Blisterpeanuts

1
Si. No funciona con github.com/Clans/FloatingActionButton . Funciona cuando está usando los androides FloatingActionButton
Abhishek

2
Sí, pero no quiero hacerlo a través de la aplicación.
StarWind0

@ StarWind0 I tiene que usar los atributos fabSize y scaleType si desea solicitar un solo botón de acción flotante. He actualizado mi respuesta.
Abhishek

110

Intente utilizar en app:maxImageSize="56dp"lugar de las respuestas anteriores después de actualizar su biblioteca de soporte a v28.0.0


1
De cualquier manera, no obtienes esto en la versión 28.0.0, lo obtendrás en androidx.
Khemraj

1
No me he cambiado a AndroidX, esto es lo que estoy usando: api 'com.android.support:design:28.0.0'
Robin

3
Esto funcionó para mí, pero me gustaría obtener más información para entender por qué definir un maxIconSizecambio en el tamaño del icono.
stramin

45

Existen tres atributos XML clave para los FAB personalizados:

  • app:fabSize: "Mini" (40dp), "normal" (56dp) (predeterminado) o "auto"
  • app:fabCustomSize: Esto decidirá el tamaño total de FAB.
  • app:maxImageSize: Esto decidirá el tamaño del icono.

Ejemplo:

app:fabCustomSize="64dp" 
app:maxImageSize="32dp"

El relleno FAB (el espacio entre el icono y el círculo de fondo, también conocido como ondulación ) se calcula implícitamente por:

4-edge padding = (fabCustomSize - maxImageSize) / 2.0 = 16

Tenga en cuenta que los márgenes del fab se pueden establecer mediante las android:marginpropiedades habituales de la etiqueta xml.


27

Las pautas de diseño definen dos tamaños y, a menos que haya una razón sólida para desviarse del uso, el tamaño se puede controlar con el fabSizeatributo XML del FloatingActionButtoncomponente.

Considere especificar el uso de cualquiera app:fabSize="normal"o app:fabSize="mini", por ejemplo:

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

15
<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 el fondo que proporcionó, aparece el siguiente botón en mi dispositivo (Nexus 7 2012)

ingrese la descripción de la imagen aquí

Me parece bien.


77
Configuré el relleno pero no hace nada. Y el relleno correcto sería 16 dp no 32dp
vovahost

10

¿Cual es tu meta?

Si establece el tamaño de la imagen del icono en uno más grande:

  1. Asegúrese de tener un tamaño de imagen mayor que el tamaño de destino (so you can set max image size for your icon)

  2. El tamaño de la imagen de mi icono objetivo es 84dp y el tamaño fab es 112dp :

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:src= <image here>
        app:fabCustomSize="112dp"
        app:fabSize="auto"
        app:maxImageSize="84dp" />

6

Si está utilizando androidx 1.0.0 y está utilizando un tamaño fab personalizado, deberá especificar el tamaño personalizado utilizando

app:fabCustomSize="your custom size in dp"

Por defecto, el tamaño es de 56dp y hay otra variación que es el fab de pequeño tamaño que es de 40dp, si está usando algo, tendrá que especificarlo para que el relleno se calcule correctamente


¡Esto es exactamente lo que estaba buscando! Ni siquiera necesita configurar layout_widthy layout_height. Simplemente funciona Esto también está disponible encom.android.support:design:28.0.0
PNDA

4

Como FABes ImageViewasí, puede usar el scaleTypeatributo para cambiar el tamaño del icono de la misma manera ImageView. El valor predeterminado scaleTypepara a FABes fitCenter. Puede usar centery centerInsidepara hacer que el icono sea pequeño y grande respectivamente.

Todos los valores para el scaleTypeatributo son - center, centerCrop, centerInside, fitCenter, fitEnd, fitStart, fitXYy matrix.

Consulte https://developer.android.com/reference/android/widget/ImageView.ScaleType.html para obtener más detalles.


3

fuera de la respuesta de @ IRadha en la configuración de dibujo vectorial android:height="_dp" y la configuración del tipo de escala para android:scaleType="center" establecer el dibujo en cualquier tamaño establecido


2

Puedes jugar con la siguiente configuración de FloatingActionButton: android: scaleType y app: maxImageSize. En cuanto a mí, obtuve un resultado deseable si android: scaleType = "centerInside" y la aplicación: maxImageSize = "56dp".

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.