web-dev-qa-db-fra.com

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

Floating button Le nouveau bouton d'action flottante doit être 56dp x 56dp et l'icône à l'intérieur de celui-ci doit être 24dp x 24dp . Ainsi, l’espace entre l’icône et le bouton doit ê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 obtenu:
Floating button result
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 pour que la taille de l'icône à l'intérieur du bouton soit exactement décrit dans les directives?

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

150
vovahost

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

181
Gaëtan M.

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 des icônes sur le bouton en virgule flottante. Cela définira la taille de 36dp pour toutes les icônes du bouton d'action flottante.

Mises à jour selon les commentaires

Si vous souhaitez définir la taille de l'icône sur un bouton d'action flottant particulier, associez-lui des attributs de bouton d'action flottant tels que 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"
105
Abhishek

Essayez d’utiliser app:maxImageSize="56dp" au lieu des réponses ci-dessus après avoir mis à jour votre bibliothèque de support vers la version 28.0.0.

68
Robin

Les instructions de conception définissent deux tailles et, sauf en cas de fortes raisons d’écarter l’une ou l’autre, la taille peut être contrôlée à l’aide de l’attribut XML fabSize du composant FloatingActionButton.

Pensez à spécifier avec 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" />
26
Cristian Almstrand
<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, il en résulte un bouton ci-dessous sur mon appareil (Nexus 7 2012)

enter image description here

Cela me semble correct.

15
Chris K.

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

  • app:fabSize: "mini" (40dp), "normal" (56dp) (par défaut) ou "auto"
  • app:fabCustomSize: Ceci déterminera la taille globale du FAB.
  • app:maxImageSize: Ceci déterminera 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, alias ondulation ) est calculé implicitement par:

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

Notez que les marges de la fab peuvent être définies par les propriétés habituelles de la balise Android:margin xml.

11
varun

Quel est ton but?

Si vous définissez une taille d'image plus grande pour l'icône:

  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 de l'image de mon icône cible est 84dp et la taille de la fab est 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
Shem Alexis Chavez

Si vous utilisez androidx 1.0.0 et utilisez une taille de fabrication personnalisée, vous devrez spécifier la taille personnalisée à l'aide de

app:fabCustomSize="your custom size in dp"

Par défaut, la taille est de 56dp et il existe une autre variante: la fab de petite taille, qui est de 40dp. Si vous utilisez quoi que ce soit, vous devrez le spécifier pour que le remplissage soit calculé correctement.

4
Suhaib Roomy

Comme FAB ressemble à ImageView, vous pouvez donc utiliser l'attribut scaleType pour modifier la taille de l'icône de la même manière ImageView. Par défaut, scaleType pour un FAB est fitCenter. Vous pouvez utiliser center et centerInside pour rendre les icônes petites et grandes respectivement.

Toutes les valeurs pour l'attribut scaleType sont - center, centerCrop, centerInside, fitCenter, fitEnd, fitStart, fitXY et matrix.

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

4
lRadha

la réponse de @ IRadha dans le paramètre dessinable vectoriel Android:height="_dp" et le réglage du type d'échelle sur Android:scaleType="center" définit le format dessinable à la taille définie.

3
Daniel Dube

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

2
Andrew Glukhoff