android - icon - floating action button menu

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

Question

El nuevo botón de acción flotante debería ser 56dp x 56dp y el ícono dentro debería 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:

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

Answer 1

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

Answer 2

Como FAB es como ImageView puede usar el atributo scaleType para cambiar el tamaño del icono de la misma manera que ImageView . scaleType predeterminado para un FAB es fitCenter . Puede usar center y centerInside para hacer que el icono sea pequeño y grande respectivamente.

Todos los valores para el atributo scaleType son: center, centerCrop, centerInside, fitCenter, fitEnd, fitStart, fitXY y matrix .

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

Answer 3

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

Answer 4

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:

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

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:

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

Tenga en cuenta que los márgenes del fab pueden establecerse mediante las propiedades habituales de la etiqueta android:margin xml.

Answer 5

Hacer 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 ícono 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"

Answer 6

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

Answer 7

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 atributo fabSize XML del componente FloatingActionButton .

Considere especificar el uso de cualquiera de las 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" />

Answer 8

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

Answer 9

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 tamaño pequeño que es de 40dp, si está usando algo, tendrá que especificarlo para que el relleno se calcule correctamente

Answer 10

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

Answer 11

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

Con el fondo que proporcionó, aparece el siguiente botón en mi dispositivo (Nexus 7 2012)

Me parece bien.