Comment créer un flottant sur le bouton d'action (FAB) en android, en utilisant AppCompat v21?

Je voudrais créer un flottant sur le bouton d'action (pour ajouter des éléments à une liste), tels que google agenda, le maintien de la compatibilité avec les pré-versions d'Android lollipop (avant 5.0).

J'ai créé cette page:

Activité main_activity.xml:

<LinearLayout ... >

     <include
         layout="@layout/toolbar"/>

     <RelativeLayout ... >

     <!-- My rest of the layout -->

          <!-- Floating action button -->
          <ImageButton style="@style/AppTheme"
                     android:layout_width="60dp"
                     android:layout_height="60dp"
                     android:text="New Button"
                     android:id="@+id/button"
                     android:src="@drawable/ic_fab"
                     android:background="@drawable/fab"
                     android:layout_alignParentBottom="true"
                     android:layout_alignParentRight="true"
                     android:layout_marginBottom="24dp"
                     android:layout_marginRight="24dp"/>

     </RelativeLayout>

 </LinearLayout>

Drawable fab.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="oval">
    <solid android:color="#ffa48bc0"/>
</shape>

Style styles.xml

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">#ff1d79b1</item>
        <item name="colorPrimaryDark">#ff084d95</item>
    </style>
</resources>

Le résultat est similaire, mais il n'y a pas l'ombre, une caractéristique de la conception de matériel:

Calendrier variable du bouton d'action:

Comment créer un flottant sur le bouton d'action (FAB) en android, en utilisant AppCompat v21?

Mon application flottant sur le bouton d'action:

Comment créer un flottant sur le bouton d'action (FAB) en android, en utilisant AppCompat v21?

Comment puis-je ajouter les ombres à mon bouton?

J'ai déjà utilisé l'attribut d'élévation, mais ne fonctionne pas

L'élévation de l'API est en Sucette uniquement, avez-vous essayer sur une Sucette appareil?
C'est probablement le moment où vous acceptez l'une des réponses données.
En fait, sur mon 4.4.2 Samsung Galaxy S III, l'ombre est là, grâce à AppCompat.

InformationsquelleAutor FirestormXYZ | 2014-11-16

99

Il n'est plus nécessaire pour la création de votre propre FAB, ni l'utilisation d'un tiers de la bibliothèque, il a été inclus dans AppCompat 22.

https://developer.android.com/reference/android/support/design/widget/FloatingActionButton.html

Il suffit d'ajouter le nouveau support de la bibliothèque de conception dans votre gradle-fichier:
```
compile 'com.android.support:design:22.2.0'
```
...et vous êtes bon pour aller:
```
<android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_margin="16dp"
        android:clickable="true"
        android:src="@drawable/ic_happy_image" />
```
- comment voulez-vous changer la couleur d'arrière-plan?
- Par défaut, la couleur de fond de la "colorAccent" de votre thème. Cependant, vous pouvez également utiliser floatingActionButton.setRippleColor(couleur), ne laissez pas le nom "d'entraînement" vous effrayer, il fonctionne sur les pré-sucette appareils également.
- Je n'ai pas colorAccent, et si j'ajoute de l'un et de définir la couleur de quelque chose d'autre, il ne marche pas - bâtons de couleur vert / turquise.
- super meilleure réponse
- J'ai été à l'aide d'un tiers pour cette. Vraiment m'a beaucoup aidé. Merci. Un seul problème avec cela est, il se sent toujours comme sa pas complètement développé.
- Cela fonctionne sous android lollipop? Flottante, barre d'action se cache au fond et fonctionne bien en version basse! Pourquoi est-il si?
- Oui, cela fonctionne en sucette. Il est très difficile de t'aider sans voir votre code, je vous suggère de poster une question avec plus de détails au sujet de votre mise en œuvre. @RethinavelPillai
- Savez-vous comment faire de l'expansion jusqu'petits boutons pour les sous-actions?
- Je Suppose que vous pourriez par exemple mettre un tas de mini Fab dans un LinearLayout. Assurez-vous que la taille de la Fab correspondre à la conception de matériel de modèle: google.com/design/spec/components/...
- Thx! des exemples de l'animation lors de l'expansion? 🙂 (comme dans Evernote)
- Je crains que je n'ai pas d'exemples en ce moment. Cependant, je pense que vous devriez être en mesure de faire quelques animations superbes, avec l'aide d'un CoordinatorLayout et les Comportements, afin de garder un œil sur les exemples relatifs à ceux-ci.
- yep, expandOrCollapse méthode fonctionne avec LinearLayout rempli avec des boutons supplémentaires à partir d'ici: stackoverflow.com/a/23932782/2842750
- Voici un excellent exemple pour l'utilisation de out-of-the-box widget pour FAB technotalkative.com/part-1-floating-action-button
- de docs The background color of this view defaults to the your theme's colorAccent. If you wish to change this at runtime then you can do so via setBackgroundTintList(ColorStateList).
- Pour changer la couleur d'arrière-plan, l'utilisation de l'app:backgroundTint="@couleur/yourcustomcolor" et pas rippleColor
InformationsquelleAutor user1354603
43

J'ai généralement utilisé xml un drawable pour créer de l'ombre/altitude sur un pré-sucette widget. Ici, par exemple, est un xml drawable qui peut être utilisé sur la pré-sucette appareils pour simuler le floating action du bouton d'élévation.
```
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="8px">
<layer-list>
<item>
<shape android:shape="oval">
<solid android:color="#08000000"/>
<padding
android:bottom="3px"
android:left="3px"
android:right="3px"
android:top="3px"
/>
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#09000000"/>
<padding
android:bottom="2px"
android:left="2px"
android:right="2px"
android:top="2px"
/>
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#10000000"/>
<padding
android:bottom="2px"
android:left="2px"
android:right="2px"
android:top="2px"
/>
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#11000000"/>
<padding
android:bottom="1px"
android:left="1px"
android:right="1px"
android:top="1px"
/>
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#12000000"/>
<padding
android:bottom="1px"
android:left="1px"
android:right="1px"
android:top="1px"
/>
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#13000000"/>
<padding
android:bottom="1px"
android:left="1px"
android:right="1px"
android:top="1px"
/>
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#14000000"/>
<padding
android:bottom="1px"
android:left="1px"
android:right="1px"
android:top="1px"
/>
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#15000000"/>
<padding
android:bottom="1px"
android:left="1px"
android:right="1px"
android:top="1px"
/>
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#16000000"/>
<padding
android:bottom="1px"
android:left="1px"
android:right="1px"
android:top="1px"
/>
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#17000000"/>
<padding
android:bottom="1px"
android:left="1px"
android:right="1px"
android:top="1px"
/>
</shape>
</item>
</layer-list>
</item>
<item>
<shape android:shape="oval">
<solid android:color="?attr/colorPrimary"/>
</shape>
</item>
</layer-list>
```
En place de ?attr/colorPrimary vous pouvez choisir n'importe quelle couleur. Voici une capture d'écran du résultat:
- Merci pour ce partage. J'ai été redoutant de creuser le code XML pour re-créer cette.
- J'ai mis en place tout à l'heure et il est grand, il y a seulement une chose bizarre. Il semble que lorsque vous faites pivoter le téléphone de l'ombre/altitude est de se perdre. Des idées à ce sujet? Merci à l'avance de Justin
- c'est une bonne question. J'ai rencontré des choses similaires avec d'autres xml un drawable, mais j'ai fait l'extraction d'une image à partir de la drawable lui-même. Pour le résoudre, j'ai essentiellement utilisé le drawable comme un singleton; une seule fois donc il n'est pas établi de nouveau. Peut-être que vous pouvez obtenir le drawable comme une variable statique et la définir comme fond dans onCreate?
- Aussi j'ai ajouté un accessoire, vous pouvez ajouter un riple effet vraiment facile, ci-dessous est le code.
- Merci Justin, je vais essayer votre suggestion. Merci encore mate.
- Pour de futures références, c'est un grand exemple pour éviter les ombres et les élévations --> curious-creature.com/2008/12/18/avoid-memory-leaks-on-android/...
- j'aperçois l'ombre problème n'arrivent qu'aux lolipop, pourriez-vous donner quelques exemple de ce problème?
- Je ne suis pas exactement sûr de ce que vous me demandez. Pouvez-vous développer?
- Les 7 dernières formes sont au même endroit de tous les côtés que je.e 1 px. n'est pas la première 6 formes obtenez cacher par le septième un je.e <solid android:color="#17000000"/> Pouvez vous s'il vous plaît le but de créer sept ovales couches à la même position?
- il est intéressant de voir comment les <padding/> attribut travaille dans la liste des couches. Plutôt que de chaque forme en agissant comme un frère pour les autres, les uns par la suite défini la forme agit comme un enfant de la précédemment défini la forme quand il s'agit de rembourrage. De plus, chaque par la suite défini la forme est dessinée au-dessus de la précédemment défini la forme. Donc, rembourrage de 1px sur la première forme de ses frontières seront 1px l'extérieur des frontières du côté de la forme, même si la prochaine forme est dessinée au-dessus d'elle.
InformationsquelleAutor Justin Pollard
20

Il y a un tas de bibliothèques ajouter un FAB(Flottant sur le Bouton d'Action) dans votre application, Voici quelques-uns d'entre eux, je le Sais.

makovkastar FAB

futuersimple Composite FAB

La Conception de matériel de bibliothèque qui comprend FAB trop

Toutes ces bibliothèques sont pris en charge sur les pré-sucette appareils, minimum api 8

InformationsquelleAutor QAMAR
8

Ici est un supplément gratuit Flottant sur le Bouton d'Action de la bibliothèque pour Android
Il a de nombreuses personnalisations et nécessite SDK de la version 9

Démo Vidéo
- Veuillez lire: meta.stackexchange.com/questions/57497/...
InformationsquelleAutor Vladyslav Baidak

4

@Justin Pollard code xml fonctionne vraiment bien. Comme une note de côté, vous pouvez ajouter un effet d'entraînement par le code xml suivant les lignes.

    <item>
<ripple
xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorControlHighlight" >
<item android:id="@android:id/mask">
<shape android:shape="oval" >
<solid android:color="#FFBB00" />
</shape>
</item>
<item>
<shape android:shape="oval" >
<solid android:color="@color/ColorPrimary" />
</shape>
</item>
</ripple>
</item>

InformationsquelleAutor Amilcar Andrade

2

Essayer cette bibliothèque, il prend en charge l'ombre, il n'y a minSdkVersion=7 et prend également en charge android:elevation attribut pour API-21 implicitement.

Post Original est ici.

InformationsquelleAutor Oleksii K.
0

Ajouter le remplissage et l'altitude:
```
 android:elevation="10dp"
android:padding="10dp"
```
- elevation a été ajouté dans l'api 21, comment cela pourrait-il fonctionner?
InformationsquelleAutor Simas

Vous devez vous connecter pour publier un commentaire.