web-dev-qa-db-fra.com

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

Je suppose que vous avez déjà vu les nouvelles directives de conception de Android, avec le nouveau "bouton d'action flottante" a.k.a "FAB"

Par exemple ce bouton rose:

enter image description here

Ma question a l'air stupide et j'ai déjà essayé pas mal de choses, mais quel est le meilleur moyen de placer ce bouton à l'intersection de deux mises en page?

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

J'ai déjà essayé de nombreuses modifications, mais je suis convaincu qu'il existe une manière appropriée de le faire.

androidandroid-coordinatorlayoutfloating-action-button
281
Waza_Be

Meilleur entrainement:

  • Ajouter compile 'com.Android.support:design:25.0.1' au fichier dégradé
  • Utilisez CoordinatorLayout comme vue racine.
  • Ajoutez layout_anchorà la FAB et placez-la en vue de dessus
  • Ajoutez layout_anchorGravity au FAB et réglez-le sur: bottom|right|end

enter image description here

<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>
471
David

On dirait que la manière la plus propre dans cet exemple est de:

  • Utilisez un RelativeLayout
  • Positionnez les 2 vues adjacentes l'une en dessous de l'autre
  • Aligner le FAB sur le parent droit/fin et ajouter une marge droite/fin
  • 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 la mise en œuvre 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>

FAB Layout example

91
Hugh Jeffner

Vous pouvez importer le projet exemple de Google dans Android Studio en cliquant sur Fichier> Importer un exemple ...

Import sample

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

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

51
Roel

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 (app):

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 les propriétés elevation et pressedTranslationZ, il est nécessaire d'utiliser un espace de noms app. Vous devez donc ajouter cet espace de noms à votre présentation: xmlns:app="http://schemas.Android.com/apk/res-auto"

16
Oded Breiner

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

Dans ton grade:

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

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

14
Veronnie

Essayez cette bibliothèque ( javadoc is here ), le niveau minimal 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 Theme, xml ou Java-code.

lightbetween

C'est très simple à utiliser. Il existe des implémentations normal et mini disponibles selon le modèle Actions sponsorisées .

<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 le application de démonstration . Il existe un exemple exhaustif: les thèmes clairs et sombres, en utilisant avec ListView, s'alignent entre deux vues .

11
Oleksii K.

Voici une bibliothèque supplémentaire de boutons d’action flottants pour Android . Il comporte de nombreuses personnalisations et nécessite le SDK version 9 ou supérieure.

enter image description here

Vidéo de démonstration complète

dependencies {
    compile 'com.scalified:fab:1.1.2'
}
9
Vladyslav Baidak

Keep it Simple Ajout d'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.1 au fichier de dégradé

  • Utilisez CoordinatorLayout comme vue racine.
  • Avant de terminer CoordinatorLayout, introduisez un textView.
  • Inside 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>

Layout 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="[email protected]"
                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 ça va ressembler

6
Ritesh

Ajoutez ceci à votre fichier de classement

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 à l’adresse suivante: http://www.ahotbrew.com/Android-floating-action-button/

5
Gurinder Singh

voici le code de travail.

J'utilise appBarLayout pour ancrer mon floatingActionButton. 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. Result Image

1
Rk215 Tech