webentwicklung-frage-antwort-db.com.de

Zwei schwebende Aktionsschaltflächen nebeneinander

Die Dokumentation zum Materialentwurf enthält ein Beispiel für Google Maps, in dem zwei nebeneinander liegende Aktionsschaltflächen (eigentlich übereinander) angezeigt werden.

enter image description here

Wie wird das gemacht? Ich habe zwei FABs in einem Koordinatorlayout, aber sie enden übereinander, so dass Sie nur eine Schaltfläche sehen.

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

Es ist eine Kombination aus Layout-Schwerkraft und Ankerschwerkraft zusammen mit dem Spiel mit den Rändern (des verankerten Gegenstands), die es funktionieren lassen können. Schauen Sie sich die XML an, unter der ich erfolgreich gearbeitet habe: 

<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

Versuchen Sie, diesen app:useCompatPadding="true" zu verwenden.

<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

Hier ist meine Lösung, fügen Sie einfach eine unsichtbare Fab zwischen den beiden Fabs ein und funktioniert gut mit 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" />

Keine Snackbar

Mit Snackbar

7
Nathaniel

Das funktioniert für mich - FABs sind in relatives Layout eingebettet:

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

das ist Arbeit für mich. Der Schlüsselcode lautet Android: layout_margin = "65dp"

4
Blur Studio

Ich kann nicht glauben, dass niemand die richtige Antwort gepostet hat.

Wickeln Sie die Schaltflächen in eine ViewGroup ein und wenden Sie den Parameter dodgeInsetEdges layout An, damit sich die Schaltflächen mit dem unteren Blatt nach oben bewegen. Für das obige usecase können wir eine LinearLayout mit dem XML-Attribut app:layout_dodgeInsetEdges="bottom" verwenden.

Beachten Sie, dass wir dies auf any - Ansicht in einer CoordinatorLayout anwenden können.

<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

Diese Antwort https://stackoverflow.com/a/33900363/401025 hat ein schwerwiegendes Problem: Wir können keine Ränder zwischen den beiden Schaltflächen festlegen. Sie bleiben zusammen.

Es scheint, dass wir beim aktuellen Stand der Design-Support-Bibliothek v23.3.0 nicht in der Lage sind, mehrere Float-Aktionsschaltflächen in einem Koordinator-Layout zu haben, die sich korrekt verhalten. In der Spezifikation https://www.google.com/design/spec/components/buttons-floating-action-button.html#buttons-floating-action-button-transitions wird diese Funktion beschrieben Erwarten Sie es in der Zukunft.

Soweit ich weiß, habe ich eine Problemumgehung entdeckt:

Wenn Sie einen Blick auf die Google Maps-Android-App werfen, werden Sie feststellen, dass die erste (blaue) Float-Aktionsschaltfläche mit dem untersten Blatt gleitet, während die zweite (mein Standort) -Schalter nicht angezeigt wird. Erstellen Sie für die zweite Schaltfläche ein relatives Umbruchlayout, das das gesamte Layout umfasst. Platziere es über deinem unteren Blattlayout:

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

Dies wird die Float-Aktionsschaltflächen von Google Maps genau nachahmen. Ein Nachteil dieser Lösung besteht darin, dass Sie den unteren Rand des Wrappers einstellen müssen, um die Schaltfläche über der ersten Schaltfläche zu positionieren. Sie können dies entweder im Layout oder programmgesteuert tun:

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

Die akzeptierte Antwort (zum Zeitpunkt des Schreibens) - https://stackoverflow.com/a/33900363/4414887 funktionierte nur teilweise, da die Tasten zusammenklebten.

Ich konnte auch keine anderen bereitgestellten Antworten verwenden. Also habe ich einen Workaround gefunden.

Füge eine Ansicht zwischen den 2 FABs hinzu -

<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

Drei Knöpfe übereinander:

<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

Zwei schwebende Aktionsschaltflächen mit einem Abstand von 100dp sind wie folgt:

<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