web-dev-qa-db-ja.com

隣り合う2つのフローティングアクションボタン

材料設計のドキュメントには、2つのフローティングアクションボタンが実際には上下に並んでいるGoogleマップの例があります。

enter image description here

これはどのように行われますか？コーディネーターレイアウトには2つのFABがありますが、それらは互いに重なり合っているため、1つのボタンしか表示されません。

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

レイアウトの重力とアンカーの重力の組み合わせと、（アンカーされたアイテムの）マージンを操作することで動作させることができます。以下の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" />
69
Ioannis Daskalopoulos

これを使用してみてください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"/>
18
Juan Labrador

これが私のソリューションです。2つのファブの間に不可視のファブを配置するだけで、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" />

スナックバーなし

スナックバー付き

8
Nathaniel

これは私にとってはうまくいきます-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>
6
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" />

これは私の仕事です。キーコードはAndroid：layout_margin = "65dp"です

4
Blur Studio

誰も正しい答えを投稿していないとは信じられません。

ボタンをViewGroupでラップし、 dodgeInsetEdges レイアウトパラメーターを適用して、ボタンがボトムシートとともに上に移動するようにします。上記の使用例では、XML属性app:layout_dodgeInsetEdges="bottom"でLinearLayoutを使用できます。

これをCoordinatorLayoutのanyビューに適用できることに注意してください。

<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

この答え https://stackoverflow.com/a/33900363/401025 には大きな問題があります。2つのボタンの間にマージンを設定することはできません。彼らはくっつきます。

設計サポートライブラリv23.3.0の現在の状態では、正しく動作するコーディネーターレイアウトに複数のフロートアクションボタンを配置することはできないようです。ただし、仕様では https://www.google.com/design/spec/components/buttons-floating-action-button.html#buttons-floating-action-button-transitions この機能について説明しています将来的に期待できます。

知っているように、私は回避策を発見しました：

GoogleマップAndroidアプリを見ると、最初の（青い）フロートアクションボタンが下のシートで浮いているのに気付き、2番目の（私の場所）ボタンは浮かんでいません。したがって、2番目のボタンでは、レイアウト全体にまたがるラッピング相対レイアウトを作成し、ボトムシートレイアウトの上に配置します。

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

これは、Googleマップのフロートアクションボタンを正確に模倣します。このソリューションの1つの欠点は、最初のボタンの上にボタンを配置するために、ラッパーの下マージンを設定する必要があることです。これは、レイアウトで、またはプログラムで実行できます。

((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
Антон Слобожанинов

（これを書いている時点で）受け入れられた答え- https://stackoverflow.com/a/33900363/4414887 ボタンがくっついているため、部分的にしか機能しませんでした。

他に提供された回答も使用できませんでした。そこで、回避策を見つけました。

2つのFABの間にビューを追加します

<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

上下に3つのボタン：

<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

間に100dpのスペースがある2つのフローティングアクションボタンは次のとおりです。

<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