Zwei schwebende Aktionstasten nebeneinander

Lesezeit: 11 Minuten

Benutzer-Avatar
Jon

Die Materialdesign-Dokumentation enthält ein Beispiel von Google Maps, das zwei schwebende Aktionsschaltflächen nebeneinander (eigentlich übereinander) zeigt.

Geben Sie hier die Bildbeschreibung ein

Wie wird das gemacht? Ich habe zwei FABs in einem Koordinator-Layout, aber sie landen übereinander, sodass 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="https://stackoverflow.com/questions/31205720/@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>

  • Können Sie den Code geben, den Sie bereits haben? Das erleichtert es uns, Ihnen zu helfen.

    – ndsmyter

    3. Juli 2015 um 11:27 Uhr

  • Poste mal den getesteten Code

    – Fouad Wahabi

    3. Juli 2015 um 11:27 Uhr

  • Ich habe nicht mit gespielt CoordinatorLayout noch, aber gibt es einen Grund, warum Sie Ihre beiden FABs nicht in einen packen würden? LinearLayoutdie Art und Weise, wie Sie die anderen Sachen in ihre eigenen gewickelt haben LinearLayout?

    – CommonsWare

    3. Juli 2015 um 11:42 Uhr

  • @CommonsWare Als ich das erste Mal versuchte, konnte ich die FABs überhaupt nicht sehen. Ich habe seitdem die Höheneigenschaft entdeckt und die Anwendung auf das Layout scheint zu funktionieren. Ich mische das mit der Antwort von PageNotFound, um den richtigen Abstand zwischen den Schaltflächen zu erhalten. Vielen Dank.

    – Jon

    3. Juli 2015 um 11:49 Uhr

Es ist eine Kombination aus Layout-Schwerkraft und Anker-Schwerkraft zusammen mit dem Spielen mit den Rändern (des verankerten Elements), die es zum Laufen bringen können. Schauen Sie sich die folgende XML an, die ich erfolgreich verwendet 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="https://stackoverflow.com/questions/31205720/@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" />

  • Ich bekomme kein Leerzeichen zwischen die beiden Tasten. Sie kleben zusammen

    – Jyotman Singh

    13. April 2016 um 7:53 Uhr

  • @JyotmanSingh versuchen Sie, den unteren Rand einzustellen – z android:layout_marginBottom="85dp"

    – smukow

    17. Juli 2016 um 17:07 Uhr

  • Genial! Vielen Dank

    – Achmedzianov Danilian

    28. Januar 2018 um 0:59 Uhr

  • Ich konnte keine richtige Polsterung zwischen den beiden fabelhaften Schaltflächen hinzufügen, aber ich konnte sie ein wenig “hacken”, indem ich Folgendes verwendete: android:translationY="-16dp"

    – Logo

    23. Juni 2020 um 9:53 Uhr

Versuchen Sie, dies zu verwenden 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="https://stackoverflow.com/questions/31205720/@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"/>

  • Dies sollte die richtige Antwort sein, es funktioniert auch ohne relative Layouts und mit Animationen perfekt. Danke Juan

    – Sebastian Korradi

    21. Dezember 2016 um 13:38 Uhr

  • Was sind bottomSheet und fabSearch hier?

    – Aritz

    28. Dezember 2017 um 9:00 Uhr

  • @XtremeBiker der Beitrag spricht nur über zwei fabelhafte Knöpfe

    – Juan Labrador

    28. Dezember 2017 um 12:00 Uhr

  • Hat für mich funktioniert. Da ich bei meiner Hauptaktivität ein DrawerLayout verwendet habe, musste ich das CoordinatorLayout als untergeordnetes Element des DrawerLayout platzieren. Die schwebenden Schaltflächen wären untergeordnete Elemente des CoordinatorLayout.

    – keshav.bahadoor

    13. März 2018 um 2:11 Uhr

Benutzer-Avatar
Nathanael

Hier ist meine Lösung, platziere einfach ein unsichtbares FAB zwischen den beiden Fabs 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

  • Funktioniert bei mir auch.. Nur Ränder hinzufügen und alles funktioniert nicht beim Ankern..

    – Neela

    26. Oktober 2016 um 5:54 Uhr

  • Funktioniert bei mir auch. Ich verwende eine -Ansicht, um die Fabs zu trennen, und daher ist es aus meiner Sicht keine seltsame Lösung mehr. Sollte die akzeptierte Antwort sein, da sie das Ankerkonzept richtig nutzt, ohne das Layout mit Rändern auszutricksen.

    – Mx

    8. Juni 2017 um 20:22 Uhr

  • Funktioniert nicht bei Änderung der Geräteausrichtung (das zweite Fab verschwindet)

    – Sagismus

    20. Juni 2018 um 19:22 Uhr

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

Wickeln Sie die Knöpfe in a ViewGroup und wende die an dodgeInsetEdges Layout-Parameter, sodass die Schaltflächen mit dem unteren Blatt nach oben rücken. Für den obigen Anwendungsfall können wir a verwenden LinearLayout mit dem XML-Attribut
app:layout_dodgeInsetEdges="bottom".

Beachten Sie, dass wir dies anwenden können irgendein Ansicht in a 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="https://stackoverflow.com/questions/31205720/@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>

Das funktioniert für mich – FABs sind in Relative 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="https://stackoverflow.com/questions/31205720/@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>

  • Diese Lösung funktioniert (dh der Abstand bleibt erhalten), selbst wenn die Größe des Fensters aufgrund des Öffnens des Eingabefelds geändert wird. Bei anderen Lösungen geht der Abstand verloren.

    – hfann

    30. Januar 2018 um 23:37 Uhr

Benutzer-Avatar
Blur-Studio

<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="https://stackoverflow.com/questions/31205720/@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="https://stackoverflow.com/questions/31205720/@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 ist android:layout_margin=”65dp”

  • Diese Lösung funktioniert (dh der Abstand bleibt erhalten), selbst wenn die Größe des Fensters aufgrund des Öffnens des Eingabefelds geändert wird. Bei anderen Lösungen geht der Abstand verloren.

    – hfann

    30. Januar 2018 um 23:37 Uhr

Benutzer-Avatar
Shn_Android_Dev

Eine sehr einfache Möglichkeit (das hat bei mir funktioniert!) bestand darin, die beiden schwebenden Schaltflächen einfach in einem vertikalen linearen Layout am unteren / Ende des übergeordneten Elements zu platzieren.

    <LinearLayout
    android:layout_gravity="bottom|end"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    >
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_marginEnd="@dimen/fab_margin"
        app:srcCompat="@android:drawable/ic_menu_send" />
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        app:srcCompat="@android:drawable/ic_menu_send" />
</LinearLayout>

Passen Sie einfach die layout_margin-Attribute für die schwebenden Schaltflächen an, um den gewünschten Abstand zu erhalten.

Beispiel

1174920cookie-checkZwei schwebende Aktionstasten nebeneinander

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy

Contact - Terms and Conditions - Privacy Policy