web-dev-qa-db-fra.com

Comment changer la forme du bouton d'action flottant (FAB) sur Android?

Dans notre application Android, nous devons créer un bouton d'action flottant qui n'est pas le cercle par défaut, mais un carré à trois coins arrondis. La fab ressemble à l'image ci-dessous: 

 enter image description here

J'ai réussi à créer un tel formulaire mais je ne sais pas comment l'appliquer à mon usine, ni même si c'est possible. Le fichier XML de la forme ressemble à ceci:

   <shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
      Android:shape="rectangle">
    <solid Android:color="@color/red" />
    <corners
      Android:topLeftRadius="90dp"
      Android:topRightRadius="90dp"
      Android:bottomRightRadius="90dp"/>
   </shape>

J'ai essayé de changer le formulaire avec 

Android:src="@drawable/my_shape"

mais cela ne change que l'icône à l'intérieur de mon bouton. Je pense que j'ai besoin d'étendre FloatingActionButton mais je ne sais pas comment.

Y a-t-il un moyen de changer la forme de la fab? Si quelqu'un a déjà réalisé cela, j'apprécierais de voir un échantillon.

18
AthaMit

Le FloatingActionButton fourni par les bibliothèques de support ne peut pas être étendu car les méthodes devant être remplacées sont définies sur private. Composants matériels (qui est le remplacement officiel d'AndroidX pour la bibliothèque de support) a Shape Theming sur la feuille de route pour ~ octobre-décembre, ce qui vous permettra de le faire officiellement et facilement (sans avoir à étendre la vue).

Mais il n’est pas disponible pour le moment, et dans l’intervalle, j’ai créé customFloatingActionButton de robertlevonyan, et avec quelques légères modifications, il vous permet d’utiliser votre propre forme personnalisée. Le code source est disponible ici .

Pour l'ajouter à votre projet avec Gradle, vous devez utiliser jitpack . Vous pouvez l'ajouter comme ceci:

allprojects {
   repositories {
       ...
       maven { url 'https://jitpack.io' }
   }
}

Alors implémentez ma fourche:

implementation 'com.github.JediBurrell:customFloatingActionButton:-SNAPSHOT'

Nous allons ensuite créer la forme, celle que vous avez créée devrait bien fonctionner.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:shape="rectangle">
    <corners
        Android:topLeftRadius="@dimen/fab_circle_radius"
        Android:topRightRadius="@dimen/fab_circle_radius"
        Android:bottomRightRadius="@dimen/fab_circle_radius" />
    <solid Android:color="@color/colorAccent" />
</shape>

Enfin, ajoutez-le enfin à votre mise en page (plus d'options FAB sont listées dans le dépôt Github):

<com.jediburrell.customfab.FloatingActionButton
    Android:id="@+id/floating_action_button"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_gravity="bottom|right"
    Android:layout_margin="16dp"
    app:fabType="custom"
    app:fabShape="@drawable/fab_teardrop"
    app:fabIcon="@drawable/ic_add_24dp"
    app:fabColor="@color/red" />

Et voici à quoi ça ressemble:

 

13
JediBurrell

Dans votre question, vous avez dit que vous avez essayé d’ajuster Android:src, ce qui est manifestement une mauvaise approche car elle concerne le contenu de FloatingActionButton.

Le paramètre Android:background changera votre forme. Notez que il est supposé être rond .

Je pense que cette question n’est tout simplement pas un dupliquer , car cette autre question ne concerne que la couleur.

Vous devrez utiliser ceci dans votre fichier XML:

Android:background="@drawable/my_shape"

Ce que vous cherchez, c'est changer l'arrière-plan de votre bouton

Android:background="@drawable/my_shape"
0
Saurabh Lalwani