it-swarm.com.ru

Две плавающие кнопки действий рядом друг с другом

В документации по дизайну материала приведен пример Google Maps, на котором две плавные кнопки действий расположены рядом друг с другом (фактически одна над другой).

enter image description here

Как это сделать? У меня есть два 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>
43
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" />

67
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"/>
17
Juan Labrador

Вот мое решение, просто поместите невидимый fab между двумя fabs и хорошо работает с 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" />

Нет Снэк-бар

С Snackbar

7
Nathaniel

Это работает для меня - FABs встроены в Относительный макет:

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

это работа для меня. код ключа Android: layout_margin = "65dp"

4
Blur Studio

Я не могу поверить, что никто не опубликовал правильный ответ.

Оберните кнопки в ViewGroup и примените параметр dodgeInsetEdges layout , Чтобы кнопки двигались вверх по нижнему листу. Для указанного выше использования case мы можем использовать LinearLayout с атрибутом XML app:layout_dodgeInsetEdges="bottom".

Обратите внимание, что мы можем применить это к любому представлению в 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

Этот ответ https://stackoverflow.com/a/33900363/401025 имеет серьезную проблему: мы не можем установить поля между двумя кнопками. Они держатся вместе.

Кажется, что в текущем состоянии библиотеки поддержки проектирования v23.3.0 мы не можем иметь несколько кнопок действий с плавающей запятой в макете координатора, которые ведут себя правильно. Однако в спецификации https://www.google.com/design/spec/components/buttons-floating-action-button.html#buttons-floating-action-button-transitions эта функция описана, чтобы мы могли ожидать этого в будущем.

Насколько я знаю, я нашел обходной путь:

Когда вы посмотрите на приложение Google Maps для Android, вы заметите, что первая (синяя) кнопка с плавающей точкой плавает вместе с нижним листом, а вторая (мое местоположение) - нет. Поэтому для второй кнопки создайте относительный макет обтекания, который охватывает весь макет. Поместите это выше вашего нижнего листа макета:

<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. Недостатком этого решения является то, что вам нужно установить нижнее поле обертки, чтобы расположить кнопку над первой кнопкой. Вы можете сделать это либо в макете, либо программно:

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

Принятый ответ (на момент написания этой статьи) - 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

Три кнопки одна над другой:

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

<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