Comment puis-je ajouter le nouveau "bouton d'action flottante" entre deux widgets / mises en page

287

Je suppose que vous avez vu les nouvelles directives de conception Android, avec le nouveau "Floating Action Button" alias "FAB"

Par exemple, ce bouton rose:

entrez la description de l'image ici

Ma question semble stupide et j'ai déjà essayé beaucoup de choses, mais quelle est la meilleure façon de placer ce bouton à l'intersection de deux dispositions?

Dans l'exemple ci-dessus, ce bouton est parfaitement placé entre ce que nous pouvons imaginer être une ImageView et une relativeLayout.

J'ai déjà essayé beaucoup de réglages, mais je suis convaincu qu'il existe une bonne façon de le faire.

android  android-coordinatorlayout  floating-action-button 
— Waza_Be
source
Vous pouvez positionner les mises en page à l'intérieur d'une mise en page et positionner le bouton sur cette mise en page
— Chrome Penguin Studios
1
Je pense que cette bibliothèque peut beaucoup aider: github.com/ksoichiro/Android-ObservableScrollView
— développeur Android
Comment le masquer lors du défilement? Je suis confronté à un problème, où si je fais défiler la page, fab reste au top et ne se cache pas! S'il vous plaît aider
— Anish Kumar

Réponses:

473

Meilleur entrainement:

  • Ajouter compile 'com.android.support:design:25.0.1'au fichier gradle
  • Utiliser CoordinatorLayoutcomme vue racine.
  • Ajoutez layout_anchorau FAB et réglez-le en vue de dessus
  • Ajoutez layout_anchorGravityau FAB et réglez-le sur:bottom|right|end

entrez la description de l'image ici

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <LinearLayout
            android:id="@+id/viewA"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="0.6"
            android:background="@android:color/holo_purple"
            android:orientation="horizontal"/>

        <LinearLayout
            android:id="@+id/viewB"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="0.4"
            android:background="@android:color/holo_orange_light"
            android:orientation="horizontal"/>

    </LinearLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:clickable="true"
        android:src="@drawable/ic_done"
        app:layout_anchor="@id/viewA"
        app:layout_anchorGravity="bottom|right|end"/>

</android.support.design.widget.CoordinatorLayout>
— David
source
3
@Aprendiz J'aimerais aussi une citation mais je peux voir pourquoi c'est une meilleure réponse que celle de HughJeffner. Je le trouve plus simple, plus flexible, moins hackish. Vous ne codez pas en dur les valeurs layout_height ou margin, qui peuvent varier dans le temps ou être définies dynamiquement. La réponse de Hugh pourrait fonctionner dans certains cas simples, et pourrait peut-être une solution pour certaines bibliothèques tierces qui ne prennent pas pleinement CoordinatorLayoutet layout_anchoret layout_anchorGravityfonctionnalités, comme celui qu'il utilise, futuresimples .
— acrespo
1
Btw futuresimples est une bibliothèque IMPRESSIONNANTE, et au cas où quelqu'un se demanderait s'il existe une fourchette qui combine cette CoordinatorLayoutapproche avec cette bibliothèque, regardez . Et il y a aussi une fourchette pour les anciennes versions.
— acrespo
2
Je cherchais exactement CECI. +1 pour plus de simplicité.
— Emiliano De Santis
29
Pourquoi tout cela n'est-il pas dans la documentation d'Android?
— Mostafa
3
l'aide de l'application: layout_anchor me pose un problème de rendu (les paramètres de mise en page linéaires ne peuvent pas être convertis en coordinatorlayout. :(
— DAVIDBALAS1
91

Il semble que la façon la plus propre dans cet exemple soit de:

  • Utiliser un RelativeLayout
  • Positionnez les 2 vues adjacentes l'une au-dessous de l'autre
  • Alignez le FAB sur la droite / extrémité parent et ajoutez une marge droite / extrémité
  • Alignez le FAB sur le bas de la vue d'en-tête et ajoutez une marge négative , la moitié de la taille du FAB, y compris l'ombre

Exemple adapté de l'implémentation de shamanland, utilisez le FAB de votre choix. Supposons que FAB a une hauteur de 64dp, ombre comprise:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <View
        android:id="@+id/header"
        android:layout_width="match_parent"
        android:layout_height="120dp"
    />

    <View
        android:id="@+id/body"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/header"
    />

    <fully.qualified.name.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignBottom="@id/header"
        android:layout_marginBottom="-32dp"
        android:layout_marginRight="20dp"
    />

</RelativeLayout>

Exemple de mise en page FAB

— Hugh Jeffner
source
Cette disposition a fait l'affaire pour moi! J'utilise FABpar futuresimple - c'est assez simple à ajouter et à utiliser, profitez-en!
— Roman
Comme vous l'avez dit "Positionnez les 2 vues adjacentes l'une au-dessous de l'autre" -> c'était le problème que j'ai eu, j'ai juste oublié que ma "disposition de conteneur" était foirée en ne faisant pas correspondre les crochets: D Merci: P
— Martin Pfeffer
Ce n'est pas une bonne solution. La marge négative semble éliminer la moitié inférieure de la cible tactile du bouton. Les clics ne sont pas enregistrés si j'appuie sur la moitié inférieure de la fab.
— Doronz
1
@ Doronz Hmm, je ne semble pas avoir ce problème. Vos vues sont-elles dans le bon ordre, c'est-à-dire que le FAB est la couche supérieure?
— Hugh Jeffner
23
android: layout_marginBottom = "- 32dp" la valeur codée en dur avec wrap_content du bouton est une mauvaise solution
— Lester
51

Vous pouvez importer l'exemple de projet de Google dans Android Studio en cliquant sur Fichier> Importer un échantillon ...

Importer un échantillon

Cet exemple contient une vue FloatingActionButton qui hérite de FrameLayout.

Modifier Avec la nouvelle bibliothèque de conception de support, vous pouvez l'implémenter comme dans cet exemple: https://github.com/chrisbanes/cheesesquare

— Roel
source
1
Vous devriez avoir android-21 pour l'exécuter.
— Yuliia Ashomok
Vous devez utiliser la bibliothèque de conception de support si vous souhaitez utiliser un FloatingActionButton. Voir la place du fromage de Google.
— Roel
16

Avec AppCompat 22, le FAB est pris en charge pour les appareils plus anciens.

Ajoutez la nouvelle bibliothèque de support dans votre build.gradle (application):

compile 'com.android.support:design:22.2.0'

Ensuite, vous pouvez l'utiliser dans votre xml:

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:src="@android:drawable/ic_menu_more"
    app:elevation="6dp"
    app:pressedTranslationZ="12dp" />

Pour utiliser elevationet pressedTranslationZpropriétés, un espace de noms appest nécessaire, alors ajoutez cet espace de noms à votre mise en page: xmlns:app="http://schemas.android.com/apk/res-auto"

— Breed Oded
source
3
ajouter des informations sur l' appespace de noms
— Lukasz 'Severiaan' Grela
14

Maintenant, il fait partie de la bibliothèque officielle de support de conception.

Dans votre gradle:

compile 'com.android.support:design:22.2.0'

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

— Veronnie
source
5
Votre réponse est un peu floue et vague, pourriez-vous expliquer davantage ce qui fait partie de la DSL et peut-être citer les informations pertinentes de cette page.
— SuperBiasMan
Désolé, j'ai vu beaucoup de références à des bibliothèques externes, donc je voulais signaler la bibliothèque officielle. La bibliothèque ne peut créer qu'un bouton, mais le positionnement est sur les développeurs. Donc mon message n'est pas très pertinent, désolé.
— Veronnie
12

Essayez cette bibliothèque ( javadoc est ici ), le niveau minimum de l'API est 7:

dependencies {
    compile 'com.shamanland:fab:0.0.8'
}

Il fournit un widget unique avec la possibilité de le personnaliser via le thème, le xml ou le code java.

lumière entre

C'est très simple à utiliser. Ils sont disponibles normalet miniimplémentés selon le modèle Actions promues .

<com.shamanland.fab.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_action_my"
    app:floatingActionButtonColor="@color/my_fab_color"
    app:floatingActionButtonSize="mini"
    />

Essayez de compiler l' application de démonstration . Il existe un exemple exhaustif: les thèmes clairs et sombres, en utilisant avec ListView, s'alignent entre deux vues .

— Oleksii K.
source
3
Juste pour ajouter à cette réponse ^ Vous pouvez également utiliser les autres bibliothèques de backport disponibles comme: github.com/FaizMalkani/FloatingActionButton et github.com/makovkastar/FloatingActionButton . Les deux pourraient sembler avoir plus de soutien. Mais suivez simplement la vue détaillée de la source répertoriée dans cette réponse. Fonctionne très bien.
— John Shelley
est-ce la bibliothèque officielle?
— Cocorico
il n'y a pas de bibliothèque officielle. celui-ci est ma bibliothèque avec des sources ouvertes.
— Oleksii K.
Ce bouton d'action flottant est un mauvais exemple de mise en œuvre. Il ne suit pas les véritables directives de conception des matériaux.
— Michael
@Mike Milla, quel est le problème avec cette bibliothèque? quelles exigences ne sont pas satisfaites?
— Oleksii K.
6

Restez simple en ajoutant un bouton d'action flottant à l'aide de TextView en donnant un arrière-plan xml arrondi. - Ajouter la compilation com.android.support:design:23.1.1au fichier gradle

  • Utilisez CoordinatorLayout comme vue racine.
  • Avant de terminer le CoordinatorLayout, introduisez un textView.
  • À l'intérieur, Drawable dessine un cercle.

Circle Xml est

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

    <solid
        android:color="@color/colorPrimary"/>
    <size
        android:width="30dp"
        android:height="30dp"/>
</shape>

La mise en page xml est

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:weightSum="5"
    >

    <RelativeLayout
        android:id="@+id/viewA"
        android:layout_height="0dp"
        android:layout_width="match_parent"
        android:layout_weight="1.6"
        android:background="@drawable/contact_bg"
        android:gravity="center_horizontal|center_vertical"
        >
        </RelativeLayout>

    <LinearLayout
        android:layout_height="0dp"
        android:layout_width="match_parent"
        android:layout_weight="3.4"
        android:orientation="vertical"
        android:padding="16dp"
        android:weightSum="10"
        >

        <LinearLayout
            android:layout_height="0dp"
            android:layout_width="match_parent"
            android:layout_weight="1"
            >
            </LinearLayout>

        <LinearLayout
            android:layout_height="0dp"
            android:layout_width="match_parent"
            android:layout_weight="1"
            android:weightSum="4"
            android:orientation="horizontal"
            >
            <TextView
                android:layout_height="match_parent"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:text="Name"
                android:textSize="22dp"
                android:textColor="@android:color/black"
                android:padding="3dp"
                />

            <TextView
                android:id="@+id/name"
                android:layout_height="match_parent"
                android:layout_width="0dp"
                android:layout_weight="3"
                android:text="Ritesh Kumar Singh"
                android:singleLine="true"
                android:textSize="22dp"
                android:textColor="@android:color/black"
                android:padding="3dp"
                />

            </LinearLayout>



        <LinearLayout
            android:layout_height="0dp"
            android:layout_width="match_parent"
            android:layout_weight="1"
            android:weightSum="4"
            android:orientation="horizontal"
            >
            <TextView
                android:layout_height="match_parent"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:text="Phone"
                android:textSize="22dp"
                android:textColor="@android:color/black"
                android:padding="3dp"
                />

            <TextView
                android:id="@+id/number"
                android:layout_height="match_parent"
                android:layout_width="0dp"
                android:layout_weight="3"
                android:text="8283001122"
                android:textSize="22dp"
                android:textColor="@android:color/black"
                android:singleLine="true"
                android:padding="3dp"
                />

        </LinearLayout>



        <LinearLayout
            android:layout_height="0dp"
            android:layout_width="match_parent"
            android:layout_weight="1"
            android:weightSum="4"
            android:orientation="horizontal"
            >
            <TextView
                android:layout_height="match_parent"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:text="Email"
                android:textSize="22dp"
                android:textColor="@android:color/black"
                android:padding="3dp"
                />

            <TextView
                android:layout_height="match_parent"
                android:layout_width="0dp"
                android:layout_weight="3"
                android:text="ritesh.singh@betasoftsystems.com"
                android:textSize="22dp"
                android:singleLine="true"
                android:textColor="@android:color/black"
                android:padding="3dp"
                />

        </LinearLayout>


        <LinearLayout
            android:layout_height="0dp"
            android:layout_width="match_parent"
            android:layout_weight="1"
            android:weightSum="4"
            android:orientation="horizontal"
            >
            <TextView
                android:layout_height="match_parent"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:text="City"
                android:textSize="22dp"
                android:textColor="@android:color/black"
                android:padding="3dp"
                />

            <TextView
                android:layout_height="match_parent"
                android:layout_width="0dp"
                android:layout_weight="3"
                android:text="Panchkula"
                android:textSize="22dp"
                android:textColor="@android:color/black"
                android:singleLine="true"
                android:padding="3dp"
                />

        </LinearLayout>

    </LinearLayout>

</LinearLayout>


    <TextView
        android:id="@+id/floating"
        android:transitionName="@string/transition_name_circle"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="16dp"
        android:clickable="false"
        android:background="@drawable/circle"
        android:elevation="10dp"
        android:text="R"
        android:textSize="40dp"
        android:gravity="center"
        android:textColor="@android:color/black"
        app:layout_anchor="@id/viewA"
        app:layout_anchorGravity="bottom"/>

        </android.support.design.widget.CoordinatorLayout>

Cliquez ici pour voir à quoi cela ressemblera

— Ritesh
source
5

Ajoutez ceci à votre fichier de notes

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:23.0.0'
    compile 'com.android.support:design:23.0.1'
}

Ceci à votre activity_main.xml

<android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <LinearLayout
                android:id="@+id/viewOne"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="0.6"
                android:background="@android:color/holo_blue_light"
                android:orientation="horizontal"/>

            <LinearLayout
                android:id="@+id/viewTwo"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="0.4"
                android:background="@android:color/holo_orange_light"
                android:orientation="horizontal"/>

        </LinearLayout>

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/floatingButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            android:clickable="true"
            android:src="@drawable/ic_done"
            app:layout_anchor="@id/viewOne"
            app:layout_anchorGravity="bottom|right|end"
            app:backgroundTint="#FF0000"
            app:rippleColor="#FFF" />

    </android.support.design.widget.CoordinatorLayout>

Vous pouvez trouver l'exemple complet avec le projet de studio Android à télécharger sur http://www.ahotbrew.com/android-floating-action-button/

— Gurinder Singh
source
1

voici le code de travail.

j'utilise appBarLayout pour ancrer mon flottantActionButton. j'espère que cela pourrait être utile.

CODE XML.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_height="192dp"
        android:layout_width="match_parent">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:toolbarId="@+id/toolbar"
            app:titleEnabled="true"
            app:layout_scrollFlags="scroll|enterAlways|exitUntilCollapsed"
            android:id="@+id/collapsingbar"
            app:contentScrim="?attr/colorPrimary">

            <android.support.v7.widget.Toolbar
                app:layout_collapseMode="pin"
                android:id="@+id/toolbarItemDetailsView"
                android:layout_height="?attr/actionBarSize"
                android:layout_width="match_parent"></android.support.v7.widget.Toolbar>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior">

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            tools:context="com.example.rktech.myshoplist.Item_details_views">
            <RelativeLayout
                android:orientation="vertical"
                android:focusableInTouchMode="true"
                android:layout_width="match_parent"
                android:layout_height="match_parent">


                <!--Put Image here -->
                <ImageView
                    android:visibility="gone"
                    android:layout_marginTop="56dp"
                    android:layout_width="match_parent"
                    android:layout_height="230dp"
                    android:scaleType="centerCrop"
                    android:src="@drawable/third" />


                <ScrollView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <RelativeLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_gravity="center"
                        android:orientation="vertical">

                        <android.support.v7.widget.CardView
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            app:cardCornerRadius="4dp"
                            app:cardElevation="4dp"
                            app:cardMaxElevation="6dp"
                            app:cardUseCompatPadding="true">

                            <RelativeLayout
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:layout_margin="8dp"
                                android:padding="3dp">


                                <LinearLayout
                                    android:layout_width="match_parent"
                                    android:layout_height="match_parent"
                                    android:orientation="vertical">


                                    <TextView
                                        android:id="@+id/txtDetailItemTitle"
                                        style="@style/TextAppearance.AppCompat.Title"
                                        android:layout_width="match_parent"
                                        android:layout_height="wrap_content"
                                        android:layout_marginLeft="4dp"
                                        android:text="Title" />

                                    <LinearLayout
                                        android:layout_width="match_parent"
                                        android:layout_height="match_parent"
                                        android:layout_marginTop="8dp"
                                        android:orientation="horizontal">

                                        <TextView
                                            android:id="@+id/txtDetailItemSeller"
                                            style="@style/TextAppearance.AppCompat.Subhead"
                                            android:layout_width="wrap_content"
                                            android:layout_height="wrap_content"
                                            android:layout_marginLeft="4dp"
                                            android:layout_weight="1"
                                            android:text="Shope Name" />

                                        <TextView
                                            android:id="@+id/txtDetailItemDate"
                                            style="@style/TextAppearance.AppCompat.Subhead"
                                            android:layout_width="wrap_content"
                                            android:layout_height="wrap_content"
                                            android:layout_marginRight="4dp"
                                            android:gravity="right"
                                            android:text="Date" />


                                    </LinearLayout>

                                    <TextView
                                        android:id="@+id/txtDetailItemDescription"
                                        style="@style/TextAppearance.AppCompat.Medium"
                                        android:layout_width="match_parent"
                                        android:minLines="5"
                                        android:layout_height="wrap_content"
                                        android:layout_marginLeft="4dp"
                                        android:layout_marginTop="16dp"
                                        android:text="description" />

                                    <LinearLayout
                                        android:layout_width="match_parent"
                                        android:layout_height="wrap_content"
                                        android:layout_marginBottom="8dp"
                                        android:orientation="horizontal">

                                        <TextView
                                            android:id="@+id/txtDetailItemQty"
                                            style="@style/TextAppearance.AppCompat.Medium"
                                            android:layout_width="wrap_content"
                                            android:layout_height="wrap_content"
                                            android:layout_marginLeft="4dp"
                                            android:layout_weight="1"
                                            android:text="Qunatity" />

                                        <TextView
                                            android:id="@+id/txtDetailItemMessure"
                                            style="@style/TextAppearance.AppCompat.Medium"
                                            android:layout_width="wrap_content"
                                            android:layout_height="wrap_content"
                                            android:layout_marginRight="4dp"
                                            android:layout_weight="1"
                                            android:gravity="right"
                                            android:text="Messure in Gram" />
                                    </LinearLayout>


                                    <TextView
                                        android:id="@+id/txtDetailItemPrice"
                                        style="@style/TextAppearance.AppCompat.Headline"
                                        android:layout_width="match_parent"
                                        android:layout_height="wrap_content"
                                        android:layout_marginRight="4dp"
                                        android:layout_weight="1"
                                        android:gravity="right"
                                        android:text="Price" />
                                </LinearLayout>

                            </RelativeLayout>
                        </android.support.v7.widget.CardView>
                    </RelativeLayout>
                </ScrollView>
            </RelativeLayout>

        </android.support.constraint.ConstraintLayout>

    </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        app:layout_anchor="@id/appbar"
        app:fabSize="normal"
        app:layout_anchorGravity="bottom|right|end"
        android:layout_marginEnd="@dimen/_6sdp"
        android:src="@drawable/ic_done_black_24dp"
        android:layout_height="wrap_content" />

</android.support.design.widget.CoordinatorLayout>

Maintenant, si vous collez le code ci-dessus. vous verrez le résultat suivant sur votre appareil. Image du résultat

— Rk215 Tech
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.