web-dev-qa-db-fra.com

Android: créez un bouton d'action flottant plus grand avec une icône plus grande

Je veux créer un bouton d'action flottant (FAB) plus grand, plus que le 56 dp habituel, avec une plus grande icône à l'intérieur. (Dans mon but, une icône ne sera jamais explicite, je vais donc créer un fichier png contenant un court texte et utiliser ce png comme icône.)

L'augmentation de la taille du FAB fonctionne bien:
comme je n'utilise pas le mini-FloatingActionButton, j'ai redéfini la taille du mini-bouton.
dans mon layout-xml je précise:

<Android.support.design.widget.FloatingActionButton
    ...
    app:fabSize="mini"
    ....

et dans dimensions.xml je redéfinis la taille de la mini-fab:

<dimen name="fab_size_mini">80dp</dimen>

Cependant, je n'ai pas réussi à obtenir une plus grande icône sur le FAB. J'ai essayé des icônes avec différents dp de la bibliothèque d'icônes de matériaux - pas de succès. De plus, la définition d'un remplissage sur la mise en page FAB n'a pas fonctionné.

Aucune suggestion? Merci!

androidfloating-action-button
18
gerhard

Vous pouvez essayer de redéfinir la taille maximale de la taille d'image fabuleuse dans votre dimensions.xml:

<resources xmlns:tools="http://schemas.Android.com/tools">
    <dimen name="design_fab_size_mini" tools:override="true">80dp</dimen>
    <dimen name="design_fab_content_size" tools:override="true">48dp</dimen>
</resources>

Vous devez vous assurer de remplacer les ressources d'origine dans la bibliothèque de conception. Essayez design_fab_image_size au lieu de design_fab_content_size si cela ne fonctionne pas pour vous.

À utiliser avec précaution car il ne s'agit pas d'une solution réelle. La solution peut ne pas fonctionner si le nom de la ressource est modifié dans la future version de Design Library. Mon avis est de m'en tenir à la taille définie dans la bibliothèque de conception, car c'est la ligne directrice de conception recommandée basée sur la conception matérielle qui donne à votre application une belle apparence.

31
Grace Coder

Je suis tombé dessus et j'ai trouvé une réponse par essais et erreurs. Il semble que vous pouvez augmenter la taille du bouton d'action flottant si vous définissez les deux layout:width et layout:height à match_parent et envelopper le bouton d'action flottant dans un FrameLayout (cela ne doit pas nécessairement l'être, mais est logique car vous ne souhaitez que définir la taille du bouton).

Ensuite, définissez la largeur et la hauteur FrameLayout à tout ce que vous désirez.

J'ai voté en faveur de la réponse de Grace Coder parce qu'elle résout certainement le problème, mais je pensais que cette méthode serait plus sûre et peut-être plus souhaitable.

<FrameLayout
    Android:layout_width="100dp"
    Android:layout_height="100dp"
    Android:layout_below="@+id/chronometer"
    Android:layout_centerHorizontal="true">

    <Android.support.design.widget.FloatingActionButton
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:layout_below="@+id/chronometer"
        Android:layout_centerHorizontal="true"
        Android:layout_gravity="bottom"
        Android:clickable="true"
        Android:src="@Android:drawable/ic_btn_speak_now"
        Android:id="@+id/record_fab" />
</FrameLayout>

Vous pouvez voir la différence dans cette capture d'écran que j'ai prise:

enter image description here

Le FAB supérieur utilise mon code/solution de contournement, tandis que le FAB inférieur utilise les dimensions standard (principalement immuables).

19
Dog Lover

Depuis Design Support Library 27.1.0, il existe un moyen officiel de définir la taille FAB personnalisée: app:fabCustomSize Attribut XML et correspondant setCustomSize méthode . Pour augmenter la taille de l'icône, vous pouvez utiliser Android:scaleType="center" Et un dessin plus grand. MISE À JOUR: Android:scaleType Est maintenant cassé , utilisez fab.setScaleType(ImageView.ScaleType.CENTER) à la place.

D'autres solutions proposées présentent certains inconvénients:

  • Redéfinir les dimensions FAB par défaut ne peut pas être appliqué à un seul bouton et est essentiellement un hack (utilise une API non publique qui est sujette à changement).
  • Enveloppant FAB dans FrameLayout (ou simplement en définissant layout_width Et layout_height De FAB à la taille désirée, ce qui a le même effet) ressemble énormément aux appareils pré-Lollipop. MISE À JOUR: Maintenant aussi post-Lollipop (voir les captures d'écran ci-dessous).
  • La définition de scaleX et scaleY nécessite un ajustement des marges (car la taille visuelle FAB ne correspond plus à sa taille de mise en page) et met à l'échelle les parties non évolutives: bordure de bouton et (pré- Sucette) largeur de l'ombre.

exemple de disposition tel que rendu sur l'API 19 (à gauche) et l'API 21 (à droite):

10
gmk57

Juste clarifier la réponse de @GraceCoder que @Tim Castelijns a bien noté dans un commentaire ci-dessus

Vous devriez aller dans votre fichier res-> values-> dimensions.xml

enter image description here

et changez-le pour ajouter

<dimen name="design_fab_size" tools:override="true">100dp</dimen>
    <dimen name="design_fab_content_size" tools:override="true">98dp</dimen>

Attention: Il est

design_fab_size

ne pas

design_fab_size_mini

3
HenriqueMS
<dimen name="design_fab_size_mini" tools:override="true">120dp</dimen>
<dimen name="design_fab_size_normal" tools:override="true">150dp</dimen>
1
Boris Levochsky

Dans l'aperçu Android P, avoir le FAB correspondant à la taille de son parent a cessé de fonctionner pour moi, car l'icône a cessé de changer de taille, ce qui le rend beaucoup trop petit et trop décentré.

La méthode la plus simple que j'ai trouvée en remplacement est de placer le FAB dans un FrameLayout, de définir une marge équitable sur le FAB afin que l'ombre ne soit pas coupée (j'ai utilisé 10dp), de définir les deux tailles sur wrap_content, puis ajoutez scaleX et scaleY à FrameLayout.

<FrameLayout
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:scaleX="1.6"
    Android:scaleY="1.6">

    <Android.support.design.widget.FloatingActionButton
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_margin="10dp"
        Android:clickable="true"
        Android:focusable="true"
        Android:src="@drawable/ic_send_white_24dp" />
</FrameLayout>

Cela fonctionne comme prévu, permet de s'adapter facilement à des quantités spécifiques et n'affecte aucun autre bouton d'action flottant.

0
Ullallulloo

Maintenant, vous pouvez facilement personnaliser la taille fab, ajoutez simplement

        app:fabCustomSize="32dp"

comme

    <Android.support.design.widget.FloatingActionButton
        Android:id="@+id/fab_main_unlock"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_gravity="bottom|center_horizontal"
        Android:layout_margin="@dimen/margin_normal"
        Android:src="@drawable/ic_unlock"
        Android:visibility="gone"
        app:backgroundTint="@color/colorPrimary"
        app:fabCustomSize="@dimen/margin_very_massive"
        tools:visibility="visible" />
0
M Moersalin