Google a-t-il déjà publié un style ou un composant défini pour ce nouveau bouton FAB circulaire ou dois-je implémenter lui-même le design?
Le bouton est décrit ici: Google Design | Boutons d'action flottante
EDIT (05/2015): Vérifiez réponse de Lukas / réponse de Gabriele montrant un moyen simple de l'implémenter avec la bibliothèque de support de conception.
[~ # ~] update [~ # ~] : il existe maintenant un widget officiel pour FAB: FloatingActionButton, voir la réponse de Gabriele Mariotti pour des informations complètes.
Selon Adam Powell et Chet Haase, ils n’ont pas créé de widget pour le bouton FAB, c’est un composant très facile à reproduire.
Il y avait une question dans le Google IO discours de 2014 "Google I/O 2014 - Science des matériaux: développement Android applications avec conception matérielle"), à la fin de le discours (à environ 37h50), il y avait exactement cette question, vous pouvez l'entendre ici: https://www.youtube.com/watch?v=lSH9aKXjgt8#t=228
Chet Haase dit qu'il y a un RoundedBitmapDrawable (je n'ai pas vérifié si c'est bien le nom) qui devrait déjà faire le travail de définition du contour.
Mais vous pouvez le faire avec votre propre dessin, lui définir une altitude et définir un contour de cercle par programme.
Cela devrait vous donner le bouton rond avec une ombre sur le déclencheur gauche. Mais je pense que vous devrez construire vous-même le Shadow Pre-L.
Je devrais vérifier le code de CardView pour voir comment il reproduit l’ombre pré-L. Je vais probablement le faire, mais je n'ai pas le temps maintenant. Si personne n'apparaît avec les détails, je le ferai après avoir trouvé le temps d'aller le vérifier.
MODIFIER:
Gabriele Mariotti (voir sa réponse ci-dessous, merci) a ajouté du code pour vous montrer comment faire.
Grâce aux commentaires de @shomeser, il a écrit une bibliothèque pour créer le bouton fab:
https://github.com/shamanland/floating-action-button
Pour l'utiliser:
dependencies {
compile 'com.shamanland:fab:0.0.3'
}
Vous pouvez également lire sa réponse à une autre question: Comment puis-je ajouter le nouveau "Bouton d'action flottant" entre deux widgets/mises en page
MIS À JOUR: 16/08/2019 avec les composants matériels officiels de la Android bibliothèque
Avec le nouveau Composants matériels pour Android , ajoutez à votre build.gradle
:
implementation 'com.google.Android.material:material:1.0.0'
Ajoutez ensuite votre mise en page:
<com.google.Android.material.floatingactionbutton.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:srcCompat="@drawable/ic_plus_24"/>
Et utilisez-le:
FloatingActionButton floatingActionButton =
(FloatingActionButton) findViewById(R.id.floating_action_button);
floatingActionButton.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
// Handle the click.
}
});
Si vous utilisez un thème de matériau comme Theme.MaterialComponents
Votre FAB héritera du style de matériau. Sinon, appliquez simplement le style @style/Widget.MaterialComponents.FloatingActionButton
<com.google.Android.material.floatingactionbutton.FloatingActionButton
....
style="@style/Widget.MaterialComponents.FloatingActionButton"
..../>
Plus info ici .
À JOUR: 30/05/2015 avec la bibliothèque officielle d'aide à la conception
Il y a un widget officiel maintenant.
Ajoutez simplement cette dépendance à votre build.gradle
compile 'com.Android.support:design:22.2.0'
Ajoutez cette vue à votre mise en page:
<Android.support.design.widget.FloatingActionButton
Android:id="@+id/fab"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:layout_gravity="end|bottom"
Android:src="@drawable/ic_done" />
Et utilisez-le:
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
//TODO
}
});
À JOUR: 12/12/2014 avec Android 5 codes
Aussi, vous pouvez ajouter et stateListAnimator à votre bouton:
<Button
Android:stateListAnimator="@anim/anim"
/>
Où anim.xml est:
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
<item
Android:state_enabled="true"
Android:state_pressed="true">
<objectAnimator
Android:duration="@Android:integer/config_shortAnimTime"
Android:propertyName="translationZ"
Android:valueFrom="@dimen/button_elevation"
Android:valueTo="@dimen/button_press_elevation"
Android:valueType="floatType" />
</item>
<item>
<objectAnimator
Android:duration="@Android:integer/config_shortAnimTime"
Android:propertyName="translationZ"
Android:valueFrom="@dimen/button_press_elevation"
Android:valueTo="@dimen/button_elevation"
Android:valueType="floatType" />
</item>
</selector>
Dimens.xml est
<resources>
<dimen name="fab_size">56dp</dimen>
<dimen name="button_elevation">2dp</dimen>
<dimen name="button_press_elevation">4dp</dimen>
</resources>
Vérifie la réponse de Daniele.
A propos de Outline mentionné par Daniele. Ajoutez l'attribut altitude à votre bouton et définissez le contour via le code :
<ImageButton
Android:background="@drawable/ripple"
Android:stateListAnimator="@anim/anim"
Android:src="@drawable/ic_action_add"
Android:elevation="4dp"
/>
À propos de Outline:
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.layoutfab);
//Outline: OLD METHOD IN L-PREVIEW
//int size = getResources().getDimensionPixelSize(R.dimen.fab_size);
//Outline outline = new Outline();
//outline.setOval(0, 0, size, size);
//findViewById(R.id.fab).setOutline(outline);
Button fab = (Button) findViewById(R.id.fab);
ViewOutlineProvider viewOutlineProvider = new ViewOutlineProvider() {
@Override
public void getOutline(View view, Outline outline) {
// Or read size directly from the view's width/height
int size = getResources().getDimensionPixelSize(R.dimen.fab_size);
outline.setOval(0, 0, size, size);
}
};
fab.setOutlineProvider(viewOutlineProvider);
}
}
Google fournit maintenant une bibliothèque officielle , appelée bibliothèque de conception , contenant le bouton Fab Ajoutez simplement la dépendance Gradle suivante:
compile 'com.Android.support:design:22.2.0'
Ensuite, vous pouvez utiliser le bouton fab comme ceci:
<Android.support.design.widget.FloatingActionButton
Android:id="@+id/fab"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"/>
Plus d'informations peuvent être trouvées dans leur annonce
http://Android-developers.blogspot.ch/2015/05/Android-design-support-library.html
ou sur la page javadoc
http://developer.Android.com/reference/Android/support/design/widget/FloatingActionButton.html
Depuis que la fonctionnalité Labels FAB (comme dans les applications Evernote ou Inbox) a été ajoutée à cet impressionnant bibliothèque , n'hésitez pas à l'utiliser:
Dépendance de Gradle:
compile 'com.getbase:floatingactionbutton:1.3.0'
Layout.xml:
<com.getbase.floatingactionbutton.FloatingActionsMenu
Android:id="@+id/multiple_actions"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:layout_alignParentBottom="true"
Android:layout_alignParentRight="true"
Android:layout_alignParentEnd="true"
fab:fab_addButtonColorNormal="@color/white"
fab:fab_addButtonColorPressed="@color/white_pressed"
fab:fab_addButtonPlusIconColor="@color/half_black"
fab:fab_labelStyle="@style/menu_labels_style"
Android:layout_marginBottom="16dp"
Android:layout_marginRight="16dp"
Android:layout_marginEnd="16dp">
<com.getbase.floatingactionbutton.FloatingActionButton
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
fab:fab_colorNormal="@color/white"
fab:fab_title="Action A"
fab:fab_colorPressed="@color/white_pressed"/>
<com.getbase.floatingactionbutton.FloatingActionButton
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
fab:fab_colorNormal="@color/white"
fab:fab_title="Action B"
fab:fab_colorPressed="@color/white_pressed"/>
</com.getbase.floatingactionbutton.FloatingActionsMenu>
menu_labels_style.xml:
<style name="menu_labels_style">
<item name="Android:background">@drawable/fab_label_background</item>
<item name="Android:textColor">@color/white</item>
</style>
fab_label_background.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android">
<solid Android:color="@color/black_semi_transparent"/>
<padding
Android:left="16dp"
Android:top="4dp"
Android:right="16dp"
Android:bottom="4dp"/>
<corners
Android:radius="2dp"/>
</shape>
Prendre plaisir!