Ajuster la taille de l'icône du bouton d'action flottant (fab)


172

Bouton flottant Le nouveau bouton d'action flottant doit être 56dp x 56dp et l'icône à l'intérieur doit être 24dp x 24dp . L'espace entre l'icône et le bouton doit donc être 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>

Et voici le résultat que j'obtiens:
Résultat du bouton flottant
j'ai utilisé l'icône 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

Comment faire en sorte que la taille de l'icône à l'intérieur du bouton soit exactement celle décrite dans les directives?

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



@InsaneCat Peut-être l'inverse car la question que vous avez évoquée est plus récente que la mienne.
vovahost

Réponses:


184

Comme votre contenu est de 24dp x 24dp, vous devez utiliser l' icône 24dp . Et puis définissez android:scaleType="center"dans votre ImageButton pour éviter le redimensionnement automatique.


Pouvez-vous expliquer ou supprimer un lien vers un site, pourquoi, par exemple, dans le dossier drawable-hdpi , il y a des images _18dp.png, _24dp.png, _36dp.png, _48dp.png.
vovahost

Je ne comprends pas votre question, il y a 18dp, 24dp, 36dp et 48dp pour des images de différentes tailles.
Gaëtan M.

Vous souvenez-vous de l'ancien Android_Design_Icons qui n'avait qu'une seule variante de l'icône dans le dossier hdpi qui faisait 48px x 48px. Pourquoi maintenant dans le dossier hdpi il y a 4 résolutions différentes pour la même icône, c'est-à-dire 27px x 27 px, 36px x 36px, 54px x 54px, 72px x 72px?
vovahost

1
ImageButton est une sous-classe d'ImageView, vous avez donc un attribut scaleType et scaleType par défaut est ScaleType.FIT_CENTER
Gaëtan M.

4
Ne fonctionne plus avec com.android.support:support-v4:28.0.0-rc01
StarWind0

116

Faire cette entrée en dimens

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

Ici, 36dp est la taille de l'icône sur le bouton à virgule flottante. Cela définira une taille de 36dp pour toutes les icônes du bouton d'action flottant.

Mises à jour selon les commentaires

Si vous souhaitez définir la taille de l'icône sur un bouton d'action flottant particulier, utilisez simplement les attributs du bouton d'action flottant comme app: fabSize = "normal" et 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
C'est exactement ce dont j'avais besoin - simple et facile. Merci d'avoir posté.
Blisterpeanuts

1
Oui. Cela ne fonctionne pas avec github.com/Clans/FloatingActionButton . Cela fonctionne lorsque vous utilisez des androïdes FloatingActionButton
Abhishek

2
Ouais, mais je ne veux pas le faire sur l'application!
StarWind0

@ StarWind0 I vous devez utiliser les attributs fabSize et scaleType si vous souhaitez appliquer un bouton d'action flottant unique. J'ai mis à jour ma réponse.
Abhishek

110

Essayez d'utiliser à la app:maxImageSize="56dp"place des réponses ci-dessus après avoir mis à jour votre bibliothèque de support vers la v28.0.0


1
De toute façon, vous ne l'obtiendrez pas dans la version 28.0.0, vous l'obtiendrez dans androidx.
Khemraj

1
Je ne suis pas passé à AndroidX, voici ce que j'utilise: api 'com.android.support:design:28.0.0'
Robin

3
Cela a fonctionné pour moi, mais j'aimerais plus d'informations pour comprendre pourquoi la définition d'un maxIconSizechange la taille de l'icône.
stramin

45

Il existe trois attributs XML clés pour les FAB personnalisés:

  • app:fabSize: Soit «mini» (40dp), «normal» (56dp) (par défaut) ou «auto»
  • app:fabCustomSize: Ceci décidera de la taille globale du FAB.
  • app:maxImageSize: Cela décidera de la taille de l'icône.

Exemple:

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

Le remplissage FAB (l'espace entre l'icône et le cercle d'arrière-plan, aka ondulation ) est calculé implicitement par:

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

Notez que les marges du fab peuvent être définies par les android:marginpropriétés habituelles des balises xml.


27

Les directives de conception définissent deux tailles et à moins qu'il n'y ait une bonne raison de ne pas utiliser l'une ou l'autre, la taille peut être contrôlée avec l' fabSizeattribut XML du FloatingActionButtoncomposant.

Pensez à spécifier en utilisant soit app:fabSize="normal"ou app:fabSize="mini", par exemple:

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

Avec l'arrière-plan que vous avez fourni, le bouton ci-dessous apparaît sur mon appareil (Nexus 7 2012)

entrez la description de l'image ici

Cela me semble correct.


7
J'ai mis le rembourrage mais ça ne fait rien. Et le bon rembourrage serait 16 dp pas 32dp
vovahost

10

Quel est ton but?

Si la taille de l'image de l'icône est plus grande:

  1. Assurez-vous d'avoir une taille d'image plus grande que votre taille cible (so you can set max image size for your icon)

  2. La taille d'image de mon icône cible est de 84dp et la taille fab est de 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" />

7

Si vous utilisez androidx 1.0.0 et utilisez une taille fab personnalisée, vous devrez spécifier la taille personnalisée en utilisant

app:fabCustomSize="your custom size in dp"

Par sourd, la taille est de 56dp et il y a une autre variation qui est la fab petite taille qui est de 40dp, si vous utilisez quelque chose, vous devrez le spécifier pour que le remplissage soit calculé correctement


Ceci est exactement ce que je cherchais! Vous n'avez même pas besoin de définir layout_widthet layout_height. Cela fonctionne juste. Ceci est également disponible surcom.android.support:design:28.0.0
PNDA le

4

Comme FABc'est le ImageViewcas Vous pouvez également utiliser l' scaleTypeattribut pour modifier la taille de l'icône ImageView. La valeur par défaut scaleTypepour a FABest fitCenter. Vous pouvez utiliser centeret centerInsidepour rendre l'icône respectivement petite et grande.

Toutes les valeurs d' scaleTypeattribut sont - center, centerCrop, centerInside, fitCenter, fitEnd, fitStart, fitXYet matrix.

Voir https://developer.android.com/reference/android/widget/ImageView.ScaleType.html pour plus de détails.


3

hors de la réponse de @ IRadha dans le paramètre de dessin vectoriel android:height="_dp" et en définissant le type d'échelle pour android:scaleType="center" définir le dessinable à la taille définie


2

Vous pouvez jouer avec les paramètres suivants de FloatingActionButton: android: scaleType et app: maxImageSize. Quant à moi, j'ai un résultat souhaitable si android: scaleType = "centerInside" et app: maxImageSize = "56dp".

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.