web-dev-qa-db-fra.com

Deux boutons d'action flottants l'un à côté de l'autre

La documentation sur la conception du matériel contient un exemple de Google Maps montrant deux boutons d'action flottants l'un à côté de l'autre (en réalité, l'un au-dessus de l'autre).

enter image description here

Comment est-ce fait? J'ai deux FAB dans une disposition de coordinateur, mais ils se superposent, de sorte que vous ne voyez qu'un seul bouton.

<?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">

    <!-- Use ThemeOverlay to make the toolbar and tablayout text
             white -->
    <Android.support.design.widget.AppBarLayout
        Android:id="@+id/abl_top"
        Android:layout_height="wrap_content"
        Android:layout_width="match_parent"
        Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <Android.support.v7.widget.Toolbar
            Android:id="@+id/toolbar"
            Android:fitsSystemWindows="true"
            Android:layout_width="match_parent"
            Android:layout_height="?attr/actionBarSize"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
    </Android.support.design.widget.AppBarLayout>

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

        <ImageView
            Android:id="@+id/img_photo"
            Android:layout_width="match_parent"
            Android:layout_height="256dp"
            Android:background="#C5C5C5"/>
        <EditText
            Android:id="@+id/text_name"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:layout_below="@id/img_baby"
            Android:layout_alignParentStart="true"
            Android:layout_alignParentLeft="true"
            Android:hint="Name"
            Android:drawableLeft="@drawable/ic_account"
            Android:drawablePadding="20dp"
            Android:textAppearance="?android:attr/textAppearanceSmall" />
        <TextView
            Android:id="@+id/text_dob"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:layout_below="@id/text_name"
            Android:layout_alignParentStart="true"
            Android:layout_alignParentLeft="true"
            Android:hint="Date of birth"
            Android:drawableLeft="@drawable/ic_cake"
            Android:drawablePadding="20dp"
            style="@Android:style/Widget.Holo.Spinner"/>

    </LinearLayout>

    <Android.support.design.widget.FloatingActionButton
        Android:id="@+id/fab_camera"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_margin="16dp"
        Android:src="@drawable/ic_camera"
        Android:clickable="true"
        app:fabSize="mini"
        app:layout_anchor="@id/img_photo"
        app:layout_anchorGravity="bottom|right|end"/>

    <Android.support.design.widget.FloatingActionButton
        Android:id="@+id/fab_gallery"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_margin="16dp"
        Android:src="@drawable/ic_image"
        Android:clickable="true"
        app:fabSize="mini"
        app:layout_anchor="@id/img_photo"
        app:layout_anchorGravity="bottom|right|end"/>

</Android.support.design.widget.CoordinatorLayout>
androidmaterial-designfloating-action-button
43
Jon

C’est une combinaison de la gravité de la mise en page et de la gravité de l’ancre, ainsi que du fait de jouer avec les marges (de l’article ancré) qui peuvent le faire fonctionner. Regardez le xml en dessous duquel j’ai utilisé avec succès: 

<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:layout_margin="@dimen/fab_margin"
    Android:src="@Android:drawable/ic_dialog_info" />

<Android.support.design.widget.FloatingActionButton
    Android:id="@+id/fab2"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_gravity="top|end"
    Android:layout_marginBottom="0dp"
    Android:layout_marginEnd="0dp"
    Android:layout_marginLeft="0dp"
    Android:layout_marginRight="0dp"
    Android:layout_marginStart="0dp"
    Android:layout_marginTop="0dp"
    Android:src="@Android:drawable/ic_media_play"
    app:layout_anchor="@id/fab"
    app:layout_anchorGravity="top" />

67
Ioannis Daskalopoulos

Essayez d'utiliser ce app:useCompatPadding="true"

<Android.support.design.widget.FloatingActionButton
    Android:id="@+id/fabBottom"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:tint="@Android:color/white"
    Android:src="@mipmap/ic_search"
    app:fabSize="normal"
    Android:scaleType="center"
    app:layout_anchor="@+id/bottomSheet"
    app:layout_anchorGravity="top|end"
    app:useCompatPadding="true"/>

<Android.support.design.widget.FloatingActionButton
    Android:id="@+id/fabTop"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:tint="@color/accent"
    Android:src="@mipmap/ic_location_on"
    app:backgroundTint="@Android:color/white"
    app:fabSize="normal"
    Android:scaleType="center"
    Android:layout_gravity="top|end"
    app:layout_anchor="@+id/fabSearch"
    app:layout_anchorGravity="top|end"
    Android:layout_margin="12dp"/>
17
Juan Labrador

Voici ma solution: il suffit de placer une unité de fabrication invisible entre les deux unités et fonctionne bien avec CoordinatorLayout.

<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:layout_margin="@dimen/fab_margin"
    Android:src="@drawable/ic_check" />

<Android.support.design.widget.FloatingActionButton
    Android:id="@+id/fab_invisible"
    Android:layout_width="@dimen/fab_margin"
    Android:layout_height="@dimen/fab_margin"
    Android:layout_gravity="top|end"
    Android:layout_margin="@dimen/fab_margin"
    Android:visibility="invisible"
    app:layout_anchor="@id/fab"
    app:layout_anchorGravity="top" />

<Android.support.design.widget.FloatingActionButton
    Android:id="@+id/fab_follow"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_gravity="top|end"
    Android:layout_margin="@dimen/fab_margin"
    Android:src="@drawable/ic_gps_fixed_follow"
    app:backgroundTint="@Android:color/white"
    app:layout_anchor="@id/fab_invisible"
    app:layout_anchorGravity="top" />

Pas de Snackbar

Avec Snackbar

7
Nathaniel

Cela fonctionne pour moi - les FAB sont incorporés dans la disposition relative:

<?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"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:id="@+id/main_content"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:fitsSystemWindows="true"
    tools:context="com.github.openeet.openeet.SaleDetailActivity">

    <Android.support.design.widget.AppBarLayout
        Android:id="@+id/appbar"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:paddingTop="@dimen/appbar_padding_top"
        Android:theme="@style/AppTheme.AppBarOverlay">

        <Android.support.v7.widget.Toolbar
            Android:id="@+id/toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="?attr/actionBarSize"
            Android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/AppTheme.PopupOverlay">

        </Android.support.v7.widget.Toolbar>

        <Android.support.design.widget.TabLayout
            Android:id="@+id/tabs"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content" />

    </Android.support.design.widget.AppBarLayout>

    <Android.support.v4.view.ViewPager
        Android:id="@+id/container"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <RelativeLayout
        Android:layout_width="wrap_content"
        Android:layout_height="match_parent"
        Android:layout_margin="@dimen/fab_margin"
        Android:layout_gravity="end|bottom" >


        <Android.support.design.widget.FloatingActionButton
            Android:id="@+id/fab_share"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:layout_gravity="end|bottom"
            Android:src="@Android:drawable/ic_menu_share"
            Android:layout_alignParentBottom="true"
            Android:layout_alignLeft="@+id/fab_print"
            Android:layout_alignStart="@+id/fab_print" />

        <Android.support.design.widget.FloatingActionButton
            Android:id="@+id/fab_print"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:layout_gravity="end|bottom"
            Android:src="@Android:drawable/ic_media_next"
            Android:layout_above="@+id/fab_share"
            Android:layout_alignParentLeft="true"
            Android:layout_alignParentStart="true"
            Android:layout_marginBottom="46dp" />

    </RelativeLayout>

</Android.support.design.widget.CoordinatorLayout>
5
LRA
<Android.support.design.widget.FloatingActionButton
    Android:id="@+id/fab_scrolling"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_margin="@dimen/big_activity_fab_margin"
    Android:src="@drawable/ic_share_white_24dp"
    app:layout_anchor="@id/app_bar_scrolling"
    app:layout_anchorGravity="bottom|end" />
<Android.support.design.widget.FloatingActionButton
    Android:id="@+id/fab_scrolling2"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_margin="65dp"
    Android:src="@drawable/ic_share_white_24dp"
    app:layout_anchor="@id/app_bar_scrolling"
    app:layout_anchorGravity="bottom|end" />

c'est un travail pour moi. le code de la clé est Android: layout_margin = "65dp"

4
Blur Studio

Je ne peux pas croire que personne n'a posté la bonne réponse.

Enroulez les boutons dans une ViewGroup et appliquez le paramètre dodgeInsetEdges layout Afin que les boutons se déplacent vers le haut avec la feuille du bas. Pour l'utilisation ci-dessuscase, nous pouvons utiliser une LinearLayout avec l'attribut XML app:layout_dodgeInsetEdges="bottom".

Notez que nous pouvons appliquer cela à la vue any dans une variable CoordinatorLayout.

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

    <!-- We can use any ViewGroup here. LinearLayout is the
         obvious choice for the questioner's use case. -->
    <LinearLayout
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_gravity="bottom|end"
        Android:layout_margin="@dimen/fab_margin"
        Android:orientation="vertical"
        app:layout_dodgeInsetEdges="bottom">

        <Android.support.design.widget.FloatingActionButton
            Android:id="@+id/upperFab"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:layout_marginBottom="@dimen/fab_margin"
            Android:src="@drawable/upper_fab_icon" />

        <Android.support.design.widget.FloatingActionButton
            Android:id="@+id/lowerFab"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:src="@drawable/lower_fab_icon" />

    </LinearLayout>

</Android.support.design.widget.CoordinatorLayout>
3
McMath

Cette réponse https://stackoverflow.com/a/33900363/401025 présente un problème majeur: nous ne sommes pas en mesure de définir des marges entre les deux boutons. Ils collent ensemble.

Il semble qu’à l’état actuel de la bibliothèque de support de conception v23.3.0, il ne soit pas possible d’avoir plusieurs boutons d’actions flottantes dans une présentation de coordinateur qui se comportent correctement. Cependant, dans la spéc https://www.google.com/design/spec/components/buttons-floating-action-button.html#buttons-floating-action-button-transitions cette fonctionnalité est décrite pour nous attendez-vous à l'avenir.

Pour ce qui est de savoir, j'ai découvert une solution de contournement:

Lorsque vous consultez l'application Google Maps pour Android, vous remarquerez que le premier bouton d'action flottant (bleu) flotte avec la feuille du bas, tandis que le second bouton (ma position) ne le fait pas. Donc, pour le deuxième bouton, créez une mise en page relative enveloppante qui couvre toute la mise en page. Placez-le au-dessus de votre mise en page de fond:

<RelativeLayout
    Android:id="@+id/wrapper"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">

    <Android.support.design.widget.FloatingActionButton
        Android:id="@+id/secondButton"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_margin="15dp"
        Android:layout_alignParentBottom="true"
        Android:layout_alignParentRight="true"
        Android:layout_alignParentEnd="true"/>

</RelativeLayout>

<Android.support.design.widget.FloatingActionButton
    Android:id="@+id/firstButton"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_margin="15dp"
    app:layout_anchor="@id/bottomSheet"
    app:layout_anchorGravity="top|right|end"/>

Cela imitera exactement les boutons d’action float de Google Maps. Un inconvénient de cette solution est que vous devez définir la marge inférieure de l'emballage pour positionner le bouton au-dessus du premier bouton. Vous pouvez le faire soit dans la mise en page, soit par programme:

((CoordinatorLayout.LayoutParams) wrapper.getLayoutParams()).setMargins(0, 0, 0, bottomMargin);
2
Artjom Zabelin
    <Android.support.design.widget.FloatingActionButton
        Android:id="@+id/fab_camera"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:src="@drawable/ic_camera"
        Android:layout_gravity="bottom|right"
        Android:layout_margin="16dp"
        app:fabSize="normal" />

    <Android.support.design.widget.FloatingActionButton
        Android:id="@+id/fab_image"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:src="@drawable/ic_image"
        app:useCompatPadding="true"
        app:layout_anchor="@id/fab_camera"
        app:layout_anchorGravity="top|center"
        Android:layout_gravity="top|center"
        app:fabSize="normal" />
1
Антон Слобожанинов

La réponse acceptée (au moment de la rédaction de cet article) - https://stackoverflow.com/a/33900363/4414887 ne fonctionnait que partiellement, car les boutons étaient collés.

Je n'ai pas pu utiliser d'autres réponses fournies. J'ai donc trouvé une solution de contournement.

Ajouter une vue entre les 2 FABs comme suit -

<com.google.Android.material.floatingactionbutton.FloatingActionButton
    Android:id="@+id/fab2"
    Android:src="@drawable/ic_delete_white_24dp"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_gravity="top|end"
    app:layout_anchor="@id/view"/>

<View
    Android:id="@+id/view"
    Android:layout_width="10dp"
    Android:layout_height="10dp"
    Android:layout_gravity="top|end"
    app:layout_anchor="@id/fab"
    />

<com.google.Android.material.floatingactionbutton.FloatingActionButton
    Android:id="@+id/fab"
    Android:src="@drawable/ic_done_white_24dp"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    app:backgroundTint="@color/colorPrimary"
    app:layout_anchor="@id/bar2" />
0
anAmaka

Trois boutons superposés:

<Android.support.design.widget.FloatingActionButton
    Android:id="@+id/fab_zoom_out"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_gravity="end|bottom"
    Android:layout_margin="@dimen/fab_margin"
    app:srcCompat="@drawable/ic_fab_zoom_out"
    app:elevation="0dp"
    app:useCompatPadding="true"
    />

<Android.support.design.widget.FloatingActionButton
    Android:id="@+id/fab_zoom_in"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_gravity="end|top"
    app:srcCompat="@drawable/ic_fab_zoom_in"
    app:elevation="0dp"
    app:useCompatPadding="true"
    app:layout_anchor="@id/fab_zoom_out"
    app:layout_anchorGravity="start"
    />

<Android.support.design.widget.FloatingActionButton
    Android:id="@+id/fab_reset_orientation"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_gravity="end|top"
    Android:visibility="gone"
    app:srcCompat="@drawable/ic_fab_reset_orientation"
    app:elevation="0dp"
    app:useCompatPadding="true"
    app:layout_anchor="@id/fab_zoom_in"
    app:layout_anchorGravity="start"
    />
0
Eugene Maksymenko

Deux boutons d'action flottants avec un espace de 100 pdp sont les suivants:

<Android.support.design.widget.FloatingActionButton
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_alignParentBottom="true"
    Android:layout_alignParentEnd="true"
    Android:layout_alignParentRight="true"
    Android:layout_gravity="top|end"
    Android:layout_marginBottom="100dp"
    Android:src="@Android:drawable/ic_input_add"
    app:layout_anchor="@id/fab"
    app:layout_anchorGravity="top" />

<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:layout_margin="@dimen/fab_margin"
    Android:src="@Android:drawable/ic_delete />
0
AjayCodes