Comment créer un bouton d'action flottant sous Android avec AppCompat v21?
J'aimerais créer un bouton d'action flottant (pour ajouter des éléments à une liste), comme un agenda Google, en maintenant la compatibilité avec les versions antérieures à Lollipop Android (antérieures à la version 5.0).
J'ai créé cette mise en 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>
Fab.xml dessinable:
<?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 d'ombrage, caractéristique du design des matériaux:
Bouton d'action flottant du calendrier:
Le bouton d'action flottant de mon application:
Comment puis-je ajouter l'ombrage à mon bouton?
J'ai déjà utilisé l'attribut altitude, mais ne fonctionne pas
Il n'est plus nécessaire de créer votre propre FAB ni d'utiliser une bibliothèque tierce, elle était incluse dans AppCompat 22.
https://developer.Android.com/reference/Android/support/design/widget/FloatingActionButton.html
Ajoutez simplement la nouvelle bibliothèque de support appelée design in dans votre fichier de classement:
compile 'com.Android.support:design:22.2.0'
... et vous êtes prêt à partir:
<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" />
J'ai généralement utilisé XML Drawables pour créer une ombre/élévation sur un widget pré-Lollipop. Voici, par exemple, un dessin XML pouvant être utilisé sur des appareils pré-Lollipop pour simuler l’élévation du bouton d’action flottante.
<?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>
Au lieu de ?attr/colorPrimary, vous pouvez choisir n'importe quelle couleur. Voici une capture d'écran du résultat:
Il existe de nombreuses bibliothèques qui ajoutent un FAB (bouton d'action flottant) à votre application. En voici quelques-unes que je connais.
bibliothèque de conception de matériaux incluant FAB également
Toutes ces bibliothèques sont supportées sur les périphériques pré-Lollipop, minimum à api 8
Voici une version supplémentaire gratuite bibliothèque de boutons d'action flottants pour Android Elle comporte de nombreuses personnalisations et nécessite le SDK version 9 ou ultérieure.
@Justin Pollard Le code XML fonctionne vraiment bien. En guise de remarque, vous pouvez ajouter un effet d'entraînement avec les lignes XML suivantes.
<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>
Essayez cette bibliothèque , il supporte les ombres, il y a minSdkVersion=7 et prend également en charge Android:elevation l'attribut pour API-21 implicitement.
La publication originale est ici .
Ajouter un rembourrage et une élévation:
Android:elevation="10dp"
Android:padding="10dp"