两个浮动动作按钮彼此相邻

The material design documentation has an example of Google Maps showing two floating action buttons next to one another (actually, one above the other).

材料设计文档中有一个Google地图示例，其中显示了两个彼此相邻的浮动操作按钮（实际上，一个在另一个之上）。

How is this done? I have two FAB's in a coordinator layout, but they end up on top of one another, so you only see one button.

这是怎么做到的？我在协调器布局中有两个FAB，但它们最终相互叠加，因此您只能看到一个按钮。

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

9 个解决方案

#1

It is a combination of layout gravity and anchor gravity together with playing with the margins (of the anchored item) that can make it work, have a look at the xml below which I have used successfully:

它是布局重力和锚重力的组合，同时玩边缘（锚定项目）可以使其工作，看看我成功使用的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: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" />

#2

Try to use this app:useCompatPadding="true"

尝试使用此应用程序：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"/>

#3

Here is my solution, just put an invisible fab between the two fabs, and works well with CoordinatorLayout.

这是我的解决方案，只是在两个工厂之间放置一个看不见的工厂，并与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" />

No Snackbar

没有Snackbar

With Snackbar

随着Snackbar

#4

This works for me - FABs are embedded in Relative layout:

这对我有用 - FAB嵌入在相对布局中：

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

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

---

this is work for me. the key code is android:layout_margin="65dp"

这对我有用。关键代码是android：layout_margin =“65dp”

#6

This answer https://*.com/a/33900363/401025 has a major problem: we are not able to set any margins between the two buttons. They stick together.

这个答案https://*.com/a/33900363/401025有一个主要问题：我们无法在两个按钮之间设置任何边距。他们团结在一起。

It seems that at the current state of the design support library v23.3.0 we are not able to have multiple float actions buttons in a coordinator layout that behave correctly. However in the spec https://www.google.com/design/spec/components/buttons-floating-action-button.html#buttons-floating-action-button-transitions this feature is described so we can expect it in the future.

似乎在设计支持库v23.3.0的当前状态下，我们无法在协调器布局中具有正确行为的多个浮动操作按钮。但是，在规范https://www.google.com/design/spec/components/buttons-floating-action-button.html#buttons-floating-action-button-transitions中描述了此功能，因此我们可以在未来。

As for know I discovered a workaround:

至于知道我发现了一个解决方法：

When you have a look at the google maps android app, you will notice that the first (blue) float action button is floating with the bottom sheet, while the second (my location) button is not. So for the second button create a wrapping relative layout that spans the entire layout. Put it above your bottom sheet layout:

当你看看谷歌地图安卓应用程序时，你会注意到第一个（蓝色）浮动动作按钮是浮动底部工作表，而第二个（我的位置）按钮不是。因此，对于第二个按钮，创建一个横跨整个布局的包装相对布局。将它放在底部工作表布局上方：

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

This will exactly mimic the float action buttons of google maps. One drawback with this solution is that you have to set the bottom margin of the wrapper to position the button above the first button. You can do this either in the layout or programmatically:

这将完全模仿谷歌地图的浮动动作按钮。此解决方案的一个缺点是您必须设置包装器的底部边距，以将按钮定位在第一个按钮上方。您可以在布局中或以编程方式执行此操作：

((CoordinatorLayout.LayoutParams) wrapper.getLayoutParams()).setMargins(0, 0, 0, bottomMargin);

#7

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

#8

Two floating action buttons with 100dp space in between them is as follows:

两个浮动动作按钮，它们之间有100dp空间，如下所示：

<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 />

#9

Three buttons one above other:

其他三个按钮：

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