Wie kann ich den neuen "Floating Action Button" zwischen zwei Widgets / Layouts einfügen?

287

Ich denke, Sie haben die neuen Android-Designrichtlinien mit dem neuen "Floating Action Button", auch bekannt als "FAB", gesehen.

Zum Beispiel dieser rosa Knopf:

Geben Sie hier die Bildbeschreibung ein

Meine Frage klingt dumm und ich habe bereits viele Dinge ausprobiert, aber wie lässt sich dieser Button am besten an der Schnittstelle zweier Layouts platzieren?

Im obigen Beispiel befindet sich diese Schaltfläche perfekt zwischen dem, was wir uns als ImageView und RelativeLayout vorstellen können.

Ich habe bereits viele Optimierungen versucht, bin aber überzeugt, dass es einen richtigen Weg gibt, dies zu tun.

Waza_Be
quelle
Sie können die Layouts in einem Layout positionieren und die Schaltfläche in diesem Layout positionieren
Chrome Penguin Studios
1
Ich denke, diese Bibliothek kann viel helfen: github.com/ksoichiro/Android-ObservableScrollView
Android-Entwickler
Wie verstecke ich es beim Scrollen? Ich stehe vor einem Problem, bei dem beim Scrollen der Seite die Fab oben bleibt und sich nicht versteckt! Bitte helfen Sie
Anish Kumar

Antworten:

473

Beste Übung:

  • In compile 'com.android.support:design:25.0.1'zu gradle Datei
  • Verwenden CoordinatorLayoutals Stammansicht.
  • In layout_anchorzum FAB und legen Sie es auf die Draufsicht
  • In layout_anchorGravityzum FAB und setzen ihn auf:bottom|right|end

Geben Sie hier die Bildbeschreibung ein

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <LinearLayout
            android:id="@+id/viewA"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="0.6"
            android:background="@android:color/holo_purple"
            android:orientation="horizontal"/>

        <LinearLayout
            android:id="@+id/viewB"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="0.4"
            android:background="@android:color/holo_orange_light"
            android:orientation="horizontal"/>

    </LinearLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:clickable="true"
        android:src="@drawable/ic_done"
        app:layout_anchor="@id/viewA"
        app:layout_anchorGravity="bottom|right|end"/>

</android.support.design.widget.CoordinatorLayout>
David
quelle
3
@Aprendiz Ich hätte auch gerne ein Zitat, aber ich kann sehen, warum dies eine bessere Antwort ist als die von HughJeffner. Ich finde es einfacher, flexibler, weniger hackisch. Sie codieren keine layout_height- oder margin-Werte, die zeitlich variieren oder dynamisch definiert werden können. Hughs Antwort könnte in einigen einfachen Fällen arbeitet, und vielleicht eine Abhilfe für einige Bibliotheken von Drittanbietern sein könnte , die nicht vollständig unterstützen CoordinatorLayoutund layout_anchorund layout_anchorGravityFunktionen, wie das er benutzt, futuresimples .
Acrespo
1
Btw futuresimples ist eine wunderbare Bibliothek, und falls jemand es fragt sich eine Gabel , die diese verbinden CoordinatorLayoutAnsatz mit dieser Bibliothek, Blick . Und es gibt auch eine Gabel für ältere Versionen.
Acrespo
2
Ich habe genau DAS gesucht. +1 der Einfachheit halber.
Emiliano De Santis
29
Warum steht das alles nicht in der Android-Dokumentation?
Mostafa
3
Verwenden der App: layout_anchor verursacht ein Rendering-Problem (lineare Layout-Layout-Programme können nicht in das Koordinator-Layout umgewandelt werden. :(
DAVIDBALAS1
91

Der sauberste Weg in diesem Beispiel scheint zu sein:

  • Verwenden Sie ein RelativeLayout
  • Positionieren Sie die beiden benachbarten Ansichten untereinander
  • Richten Sie das FAB am übergeordneten rechten Ende aus und fügen Sie einen rechten Rand hinzu
  • Richten Sie das FAB am unteren Rand der Kopfansicht aus und fügen Sie einen negativen Rand hinzu, der halb so groß ist wie das FAB einschließlich Schatten

Beispiel aus der Schamanland-Implementierung, verwenden Sie ein beliebiges FAB. Angenommen, FAB ist 64 dp hoch, einschließlich Schatten:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <View
        android:id="@+id/header"
        android:layout_width="match_parent"
        android:layout_height="120dp"
    />

    <View
        android:id="@+id/body"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/header"
    />

    <fully.qualified.name.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignBottom="@id/header"
        android:layout_marginBottom="-32dp"
        android:layout_marginRight="20dp"
    />

</RelativeLayout>

Beispiel für ein FAB-Layout

Hugh Jeffner
quelle
Dieses Layout hat den Trick für mich getan! Ich benutze FABvon futuresimple - es ist ziemlich einfach hinzuzufügen und zu verwenden, viel Spaß!
Roman
Wie Sie sagten "Positionieren Sie die 2 benachbarten Ansichten untereinander" -> das war das Problem, das ich bekam, ich habe nur übersehen, dass mein "Container-Layout" durch nicht übereinstimmende Klammern durcheinander gebracht wurde: D Danke: P
Martin Pfeffer
Dies ist keine gute Lösung. Der negative Rand scheint die untere Hälfte des Berührungsziels der Schaltfläche zu eliminieren. Klicks werden nicht registriert, wenn ich auf die untere Hälfte der Fabrik drücke.
Doronz
1
@ Doronz Hmm, ich scheine dieses Problem nicht zu haben. Sind Ihre Ansichten in der richtigen Reihenfolge, dh das FAB ist die oberste Ebene?
Hugh Jeffner
23
android: layout_marginBottom = "- 32dp" fest codierter Wert mit dem wrap_content der Schaltfläche ist eine schlechte Lösung
Lester
51

Sie können das Beispielprojekt von Google in Android Studio importieren, indem Sie auf Datei> Beispiel importieren ...

Beispiel importieren

Dieses Beispiel enthält eine FloatingActionButton-Ansicht, die von FrameLayout erbt.

Bearbeiten Mit der neuen Support Design Library können Sie sie wie in diesem Beispiel implementieren: https://github.com/chrisbanes/cheesesquare

Roel
quelle
1
Sie sollten Android-21 haben, um es auszuführen.
Yuliia Ashomok
Sie sollten die Support Design Library verwenden, wenn Sie einen FloatingActionButton verwenden möchten. Siehe das Käsequadrat von Google.
Roel
16

Mit AppCompat 22 wird das FAB für ältere Geräte unterstützt.

Fügen Sie die neue Support-Bibliothek in Ihr build.gradle (App) ein:

compile 'com.android.support:design:22.2.0'

Dann können Sie es in Ihrer XML verwenden:

<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:src="@android:drawable/ic_menu_more"
    app:elevation="6dp"
    app:pressedTranslationZ="12dp" />

Für die Verwendung elevationund pressedTranslationZEigenschaften wird ein Namespace appbenötigt. Fügen Sie diesen Namespace Ihrem Layout hinzu: xmlns:app="http://schemas.android.com/apk/res-auto"

Oded Breiner
quelle
3
Infos zum appNamespace hinzufügen
Lukasz 'Severiaan' Grela
14

Jetzt ist es Teil der offiziellen Design Support Library.

In deinem Gradle:

compile 'com.android.support:design:22.2.0'

http://developer.android.com/reference/android/support/design/widget/FloatingActionButton.html

Veronnie
quelle
5
Ihre Antwort ist etwas unklar und vage. Können Sie näher erläutern, was Teil des DSL ist, und möglicherweise die relevanten Informationen auf dieser Seite zitieren?
SuperBiasedMan
Entschuldigung, ich habe viele Verweise auf externe Bibliotheken gesehen, daher wollte ich auf die offizielle Bibliothek hinweisen. Die Bibliothek kann nur eine Schaltfläche erstellen, die Positionierung liegt jedoch bei den Entwicklern. Mein Beitrag ist also nicht sehr relevant, sorry.
Veronnie
12

Probieren Sie diese Bibliothek aus ( Javadoc ist hier ), die minimale API-Stufe ist 7:

dependencies {
    compile 'com.shamanland:fab:0.0.8'
}

Es bietet einem einzelnen Widget die Möglichkeit, es über Theme, XML oder Java-Code anzupassen.

Licht zwischen

Es ist sehr einfach zu bedienen. Es sind verfügbar normalund werden minigemäß dem Muster für gesponserte Aktionen implementiert .

<com.shamanland.fab.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_action_my"
    app:floatingActionButtonColor="@color/my_fab_color"
    app:floatingActionButtonSize="mini"
    />

Versuchen Sie, die Demo-App zu kompilieren . Es gibt erschöpfende Beispiel: helle und dunkle Themen, mit ListView, align zwischen zwei Ansichten .

Oleksii K.
quelle
3
Nur um diese Antwort zu ergänzen ^ Sie können auch die anderen verfügbaren Backport-Bibliotheken wie github.com/FaizMalkani/FloatingActionButton und github.com/makovkastar/FloatingActionButton verwenden . Beide scheinen mehr Rückendeckung zu haben. Folgen Sie jedoch einfach der Detailansicht aus der in dieser Antwort aufgeführten Quelle. Funktioniert super.
John Shelley
ist es die offizielle Bibliothek?
Cocorico
Es gibt keine offizielle Bibliothek. Dies ist meine Bibliothek mit geöffneten Quellen.
Oleksii K.
Diese schwebende Aktionsschaltfläche ist ein schlechtes Beispiel für die Implementierung. Es entspricht nicht den tatsächlichen Richtlinien für das Materialdesign.
Michael
@ Mike Milla, was ist los mit dieser Bibliothek? Welche Anforderungen werden nicht erfüllt?
Oleksii K.
9

Hier ist eine zusätzliche kostenlose Floating Action Button-Bibliothek für Android . Es hat viele Anpassungen und erfordert SDK Version 9 und höher

Geben Sie hier die Bildbeschreibung ein

Vollständiges Demo-Video

dependencies {
    compile 'com.scalified:fab:1.1.2'
}
Vladyslav Baidak
quelle
3
Die Frage ist nicht, wie Sie ein FAB verwenden , sondern wie Sie es so positionieren , dass es sich über zwei Ansichten erstreckt. Seufzer.
Scott Biggs
6

Halten Sie es einfach Fügen Sie mithilfe von TextView eine schwebende Aktionsschaltfläche hinzu, indem Sie einen abgerundeten XML-Hintergrund angeben. - Fügen Sie com.android.support:design:23.1.1der Gradle-Datei eine Kompilierung hinzu

  • Verwenden Sie CoordinatorLayout als Stammansicht.
  • Bevor Sie das CoordinatorLayout beenden, führen Sie eine Textansicht ein.
  • Zeichnen Sie in Drawable einen Kreis.

Kreis Xml ist

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <solid
        android:color="@color/colorPrimary"/>
    <size
        android:width="30dp"
        android:height="30dp"/>
</shape>

Layout XML ist

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


<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:weightSum="5"
    >

    <RelativeLayout
        android:id="@+id/viewA"
        android:layout_height="0dp"
        android:layout_width="match_parent"
        android:layout_weight="1.6"
        android:background="@drawable/contact_bg"
        android:gravity="center_horizontal|center_vertical"
        >
        </RelativeLayout>

    <LinearLayout
        android:layout_height="0dp"
        android:layout_width="match_parent"
        android:layout_weight="3.4"
        android:orientation="vertical"
        android:padding="16dp"
        android:weightSum="10"
        >

        <LinearLayout
            android:layout_height="0dp"
            android:layout_width="match_parent"
            android:layout_weight="1"
            >
            </LinearLayout>

        <LinearLayout
            android:layout_height="0dp"
            android:layout_width="match_parent"
            android:layout_weight="1"
            android:weightSum="4"
            android:orientation="horizontal"
            >
            <TextView
                android:layout_height="match_parent"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:text="Name"
                android:textSize="22dp"
                android:textColor="@android:color/black"
                android:padding="3dp"
                />

            <TextView
                android:id="@+id/name"
                android:layout_height="match_parent"
                android:layout_width="0dp"
                android:layout_weight="3"
                android:text="Ritesh Kumar Singh"
                android:singleLine="true"
                android:textSize="22dp"
                android:textColor="@android:color/black"
                android:padding="3dp"
                />

            </LinearLayout>



        <LinearLayout
            android:layout_height="0dp"
            android:layout_width="match_parent"
            android:layout_weight="1"
            android:weightSum="4"
            android:orientation="horizontal"
            >
            <TextView
                android:layout_height="match_parent"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:text="Phone"
                android:textSize="22dp"
                android:textColor="@android:color/black"
                android:padding="3dp"
                />

            <TextView
                android:id="@+id/number"
                android:layout_height="match_parent"
                android:layout_width="0dp"
                android:layout_weight="3"
                android:text="8283001122"
                android:textSize="22dp"
                android:textColor="@android:color/black"
                android:singleLine="true"
                android:padding="3dp"
                />

        </LinearLayout>



        <LinearLayout
            android:layout_height="0dp"
            android:layout_width="match_parent"
            android:layout_weight="1"
            android:weightSum="4"
            android:orientation="horizontal"
            >
            <TextView
                android:layout_height="match_parent"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:text="Email"
                android:textSize="22dp"
                android:textColor="@android:color/black"
                android:padding="3dp"
                />

            <TextView
                android:layout_height="match_parent"
                android:layout_width="0dp"
                android:layout_weight="3"
                android:text="[email protected]"
                android:textSize="22dp"
                android:singleLine="true"
                android:textColor="@android:color/black"
                android:padding="3dp"
                />

        </LinearLayout>


        <LinearLayout
            android:layout_height="0dp"
            android:layout_width="match_parent"
            android:layout_weight="1"
            android:weightSum="4"
            android:orientation="horizontal"
            >
            <TextView
                android:layout_height="match_parent"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:text="City"
                android:textSize="22dp"
                android:textColor="@android:color/black"
                android:padding="3dp"
                />

            <TextView
                android:layout_height="match_parent"
                android:layout_width="0dp"
                android:layout_weight="3"
                android:text="Panchkula"
                android:textSize="22dp"
                android:textColor="@android:color/black"
                android:singleLine="true"
                android:padding="3dp"
                />

        </LinearLayout>

    </LinearLayout>

</LinearLayout>


    <TextView
        android:id="@+id/floating"
        android:transitionName="@string/transition_name_circle"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="16dp"
        android:clickable="false"
        android:background="@drawable/circle"
        android:elevation="10dp"
        android:text="R"
        android:textSize="40dp"
        android:gravity="center"
        android:textColor="@android:color/black"
        app:layout_anchor="@id/viewA"
        app:layout_anchorGravity="bottom"/>

        </android.support.design.widget.CoordinatorLayout>

Klicken Sie hier, um zu sehen, wie es aussehen wird

Ritesh
quelle
5

Fügen Sie dies Ihrer Gradle-Datei hinzu

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:23.0.0'
    compile 'com.android.support:design:23.0.1'
}

Dies zu Ihrer activity_main.xml

<android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <LinearLayout
                android:id="@+id/viewOne"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="0.6"
                android:background="@android:color/holo_blue_light"
                android:orientation="horizontal"/>

            <LinearLayout
                android:id="@+id/viewTwo"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="0.4"
                android:background="@android:color/holo_orange_light"
                android:orientation="horizontal"/>

        </LinearLayout>

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/floatingButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            android:clickable="true"
            android:src="@drawable/ic_done"
            app:layout_anchor="@id/viewOne"
            app:layout_anchorGravity="bottom|right|end"
            app:backgroundTint="#FF0000"
            app:rippleColor="#FFF" />

    </android.support.design.widget.CoordinatorLayout>

Das vollständige Beispiel mit dem Android Studio-Projekt können Sie unter http://www.ahotbrew.com/android-floating-action-button/ herunterladen.

Gurinder Singh
quelle
1

Hier ist Arbeitscode.

Ich benutze AppBarLayout, um meinen FloatingActionButton zu verankern. hoffe das könnte hilfreich sein.

XML-CODE.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_height="192dp"
        android:layout_width="match_parent">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:toolbarId="@+id/toolbar"
            app:titleEnabled="true"
            app:layout_scrollFlags="scroll|enterAlways|exitUntilCollapsed"
            android:id="@+id/collapsingbar"
            app:contentScrim="?attr/colorPrimary">

            <android.support.v7.widget.Toolbar
                app:layout_collapseMode="pin"
                android:id="@+id/toolbarItemDetailsView"
                android:layout_height="?attr/actionBarSize"
                android:layout_width="match_parent"></android.support.v7.widget.Toolbar>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior">

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            tools:context="com.example.rktech.myshoplist.Item_details_views">
            <RelativeLayout
                android:orientation="vertical"
                android:focusableInTouchMode="true"
                android:layout_width="match_parent"
                android:layout_height="match_parent">


                <!--Put Image here -->
                <ImageView
                    android:visibility="gone"
                    android:layout_marginTop="56dp"
                    android:layout_width="match_parent"
                    android:layout_height="230dp"
                    android:scaleType="centerCrop"
                    android:src="@drawable/third" />


                <ScrollView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <RelativeLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_gravity="center"
                        android:orientation="vertical">

                        <android.support.v7.widget.CardView
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            app:cardCornerRadius="4dp"
                            app:cardElevation="4dp"
                            app:cardMaxElevation="6dp"
                            app:cardUseCompatPadding="true">

                            <RelativeLayout
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:layout_margin="8dp"
                                android:padding="3dp">


                                <LinearLayout
                                    android:layout_width="match_parent"
                                    android:layout_height="match_parent"
                                    android:orientation="vertical">


                                    <TextView
                                        android:id="@+id/txtDetailItemTitle"
                                        style="@style/TextAppearance.AppCompat.Title"
                                        android:layout_width="match_parent"
                                        android:layout_height="wrap_content"
                                        android:layout_marginLeft="4dp"
                                        android:text="Title" />

                                    <LinearLayout
                                        android:layout_width="match_parent"
                                        android:layout_height="match_parent"
                                        android:layout_marginTop="8dp"
                                        android:orientation="horizontal">

                                        <TextView
                                            android:id="@+id/txtDetailItemSeller"
                                            style="@style/TextAppearance.AppCompat.Subhead"
                                            android:layout_width="wrap_content"
                                            android:layout_height="wrap_content"
                                            android:layout_marginLeft="4dp"
                                            android:layout_weight="1"
                                            android:text="Shope Name" />

                                        <TextView
                                            android:id="@+id/txtDetailItemDate"
                                            style="@style/TextAppearance.AppCompat.Subhead"
                                            android:layout_width="wrap_content"
                                            android:layout_height="wrap_content"
                                            android:layout_marginRight="4dp"
                                            android:gravity="right"
                                            android:text="Date" />


                                    </LinearLayout>

                                    <TextView
                                        android:id="@+id/txtDetailItemDescription"
                                        style="@style/TextAppearance.AppCompat.Medium"
                                        android:layout_width="match_parent"
                                        android:minLines="5"
                                        android:layout_height="wrap_content"
                                        android:layout_marginLeft="4dp"
                                        android:layout_marginTop="16dp"
                                        android:text="description" />

                                    <LinearLayout
                                        android:layout_width="match_parent"
                                        android:layout_height="wrap_content"
                                        android:layout_marginBottom="8dp"
                                        android:orientation="horizontal">

                                        <TextView
                                            android:id="@+id/txtDetailItemQty"
                                            style="@style/TextAppearance.AppCompat.Medium"
                                            android:layout_width="wrap_content"
                                            android:layout_height="wrap_content"
                                            android:layout_marginLeft="4dp"
                                            android:layout_weight="1"
                                            android:text="Qunatity" />

                                        <TextView
                                            android:id="@+id/txtDetailItemMessure"
                                            style="@style/TextAppearance.AppCompat.Medium"
                                            android:layout_width="wrap_content"
                                            android:layout_height="wrap_content"
                                            android:layout_marginRight="4dp"
                                            android:layout_weight="1"
                                            android:gravity="right"
                                            android:text="Messure in Gram" />
                                    </LinearLayout>


                                    <TextView
                                        android:id="@+id/txtDetailItemPrice"
                                        style="@style/TextAppearance.AppCompat.Headline"
                                        android:layout_width="match_parent"
                                        android:layout_height="wrap_content"
                                        android:layout_marginRight="4dp"
                                        android:layout_weight="1"
                                        android:gravity="right"
                                        android:text="Price" />
                                </LinearLayout>

                            </RelativeLayout>
                        </android.support.v7.widget.CardView>
                    </RelativeLayout>
                </ScrollView>
            </RelativeLayout>

        </android.support.constraint.ConstraintLayout>

    </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        app:layout_anchor="@id/appbar"
        app:fabSize="normal"
        app:layout_anchorGravity="bottom|right|end"
        android:layout_marginEnd="@dimen/_6sdp"
        android:src="@drawable/ic_done_black_24dp"
        android:layout_height="wrap_content" />

</android.support.design.widget.CoordinatorLayout>

Nun, wenn Sie den obigen Code einfügen. Sie sehen folgendes Ergebnis auf Ihrem Gerät. Ergebnisbild

Rk215 Tech
quelle