Android L - Flottant Bouton d'Action (FAB)
est-ce que Google a déjà publié un style défini ou un composant pour ce nouveau bouton circulaire FAB ou dois-je mettre en œuvre le design moi-même?
Le bouton est décrit ici: Google Design | Flottant Boutons d'Action
MODIFIER (05/2015): cochez la Case Lukas " réponse / Gabriele réponse montrant un moyen facile à mettre en œuvre avec le support à la conception de la bibliothèque.
4 réponses
mise à jour : il y a maintenant un widget officiel pour FAB: FloatingActionButton, voir la réponse de Gabriele Mariotti pour plus d'informations.
selon Adam Powell et Chet Haase, ils n'ont pas créé de widget pour le bouton FAB car c'est un composant très facile à reproduire.
il y avait une question dans le discours de Google IO 2014 "Google I / O 2014-science des matériaux: développement D'applications Android avec le design des matériaux", à la fin du discours (à environ 37: 50) Il y avait exactement cette question, vous pouvez l'entendre ici: https://www.youtube.com/watch?v=lSH9aKXjgt8#t=2280
Chet Haase dit qu'il y a un Rondbitmapdrawable (Je n'ai pas vérifié si c'est le nom) qui devrait déjà faire le travail de définir le contour.
mais vous pouvez le faire avec votre propre dessiner, mettre une élévation à elle et définir un contour de cercle programmatically.
cela devrait vous donner le bouton rond avec l'ombre sur le relâchement L. Mais je pense que vous devrez construire L'ombre pré-L sur votre propre.
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 ne donne les détails, je le ferai après avoir trouvé le temps d'aller vérifier.
EDIT:
Gabriele Mariotti (voir sa réponse ci-dessous, merci you) a ajouté du code pour vous montrer comment le faire.
grâce aux commentaires de @shomeser, il a écrit une bibliothèque pour faire 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 / layouts
mise à jour: 30/05/2015 avec la bibliothèque officielle D'appui aux dessins et modèles
il y a un widget officiel maintenant.
il suffit d'ajouter 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 l'utiliser:
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
//TODO
}
});
de la Documentation:
mise à jour: 02/12/2014 avec Android 5 code
vous pouvez aussi ajouter et stateListAnimator à votre bouton:
<Button
android:stateListAnimator="@anim/anim"
/>
où anim.le 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érifiez la réponse de Daniele.
À propos de contour mentionné par Daniele. Ajouter l'attribut elevation à votre bouton, et définir le Outline via 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 design, contenant le bouton Fab . Il suffit d'ajouter 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é Fab des étiquettes (comme dans les applis Evernote ou Inbox) a été ajoutée à cette impressionnante bibliothèque n'hésitez pas à l'utiliser:
Grade dependency:
compile 'com.getbase:floatingactionbutton:1.3.0'
Mise en page.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>
Profitez-en!