Bagaimana saya bisa menambahkan "Tombol Aksi Terapung" baru di antara dua widget / tata letak

287

Saya kira Anda telah melihat pedoman desain Android baru, dengan "Tombol Aksi Terapung" alias "FAB" yang baru

Misalnya tombol merah muda ini:

masukkan deskripsi gambar di sini

Pertanyaan saya terdengar bodoh, dan saya sudah mencoba banyak hal, tapi apa cara terbaik untuk meletakkan tombol ini di persimpangan dua tata letak?

Dalam contoh di atas, tombol ini ditempatkan dengan sempurna di antara apa yang dapat kita bayangkan sebagai ImageView dan relativeLayout.

Saya sudah mencoba banyak tweak, tetapi saya yakin ada cara yang tepat untuk melakukannya.

android android-coordinatorlayout floating-action-button Waza_Be
sumber
Anda dapat memposisikan tata letak di dalam tata letak dan memposisikan tombol pada tata letak itu
Chrome Penguin Studios
1
Saya pikir perpustakaan ini dapat banyak membantu: github.com/ksoichiro/Android-ObservableScrollView
pengembang android
Bagaimana cara menyembunyikannya saat menggulir? Saya menghadapi masalah, di mana jika saya menggulir halaman, fab tetap di atas dan tidak bersembunyi! Tolong bantu
Anish Kumar

Jawaban:

473

Praktek terbaik:

  • Tambahkan compile 'com.android.support:design:25.0.1'ke file gradle
  • Gunakan CoordinatorLayoutsebagai tampilan root.
  • Tambahkan layout_anchorke FAB dan atur ke tampilan atas
  • Tambahkan layout_anchorGravityke FAB dan atur ke:bottom|right|end

masukkan deskripsi gambar di sini

<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
sumber
3
@Aprendiz Saya juga ingin kutipan tetapi saya bisa melihat mengapa ini jawaban yang lebih baik daripada HughJeffner. Saya merasa lebih sederhana, lebih fleksibel, lebih sedikit hackish. Anda tidak melakukan hardcode tata letak atau nilai margin, yang dapat bervariasi dalam waktu atau ditentukan secara dinamis. Jawaban Hugh dapat bekerja dalam beberapa kasus sederhana, dan mungkin bisa menjadi solusi untuk beberapa perpustakaan pihak ketiga yang tidak sepenuhnya mendukung CoordinatorLayoutdan layout_anchordan layout_anchorGravityfitur, seperti yang dia gunakan, futuresimples .
acrespo
1
Btw futuresimples adalah perpustakaan yang MENGAGUMKAN, dan jika seseorang bertanya-tanya ada garpu yang menggabungkan CoordinatorLayoutpendekatan ini dengan perpustakaan itu, lihat . Dan ada juga garpu untuk versi yang lebih lama.
acrespo
2
Saya mencari persis INI. +1 untuk kesederhanaan.
Emiliano De Santis
29
Mengapa semua ini tidak ada dalam dokumentasi Android?
Mostafa
3
menggunakan aplikasi: layout_anchor membuat saya masalah rendering (linearlayout layoutparams tidak dapat dilemparkan ke koordinatorlayout. :(
DAVIDBALAS1
91

Sepertinya cara terbersih dalam contoh ini adalah dengan:

  • Gunakan RelativeLayout
  • Posisikan 2 tampilan yang berdekatan satu di bawah yang lain
  • Sejajarkan FAB ke kanan / akhir induk dan tambahkan margin kanan / akhir
  • Sejajarkan FAB ke bagian bawah tampilan header dan tambahkan margin negatif , setengah dari ukuran FAB termasuk bayangan

Contoh diadaptasi dari implementasi perdukunan, gunakan FAB apa pun yang Anda inginkan. Asumsikan FAB adalah 64dp tinggi termasuk bayangan:

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

Contoh Layout FAB

Hugh Jeffner
sumber
Tata letak ini sangat membantu saya! Saya menggunakan FABoleh futuresimple - itu cukup sederhana untuk menambahkan & digunakan, nikmatilah!
Roman
Seperti yang Anda katakan "Posisikan 2 pandangan yang berdekatan satu di bawah yang lain" -> ini adalah masalah yang saya dapatkan, saya hanya mengabaikan bahwa "tata letak wadah" saya berantakan karena tidak cocok dengan tanda kurung: D Terima kasih: P
Martin Pfeffer
Ini bukan solusi yang baik. Margin negatif tampaknya menghilangkan setengah bagian bawah target sentuh tombol. Klik tidak terdaftar jika saya menekan bagian bawah fab.
Doronz
1
@ Doronz Hmm, sepertinya saya tidak punya masalah itu. Apakah pandangan Anda dalam urutan yang benar yaitu FAB adalah lapisan teratas?
Hugh Jeffner
23
android: layout_marginBottom = "- 32dp" nilai hardcoded dengan wrap_content tombol adalah solusi buruk
Lester
51

Anda dapat mengimpor proyek sampel Google di Android Studio dengan mengklik File> Impor Sampel ...

Sampel impor

Sampel ini berisi Tampilan FloatingActionButton yang mewarisi dari FrameLayout.

Sunting Dengan Perpustakaan Desain Dukungan baru Anda dapat menerapkannya seperti dalam contoh ini: https://github.com/chrisbanes/cheesesquare

Roel
sumber
1
Anda harus memiliki android-21 untuk menjalankannya.
Yuliia Ashomok
Anda harus menggunakan Perpustakaan Desain Dukungan jika Anda ingin menggunakan FloatingActionButton. Lihat cheesesquare dari Google.
Roel
16

Dengan AppCompat 22, FAB didukung untuk perangkat yang lebih lama.

Tambahkan pustaka dukungan baru di build.gradle (aplikasi) Anda:

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

Kemudian Anda bisa menggunakannya di xml Anda:

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

Untuk menggunakan elevationdan pressedTranslationZproperti, namespace appdiperlukan, jadi tambahkan namespace ini ke tata letak Anda: xmlns:app="http://schemas.android.com/apk/res-auto"

Oded Breiner
sumber
3
tambahkan info tentang appnamespace
Lukasz 'Severiaan' Grela
14

Sekarang ini adalah bagian dari Perpustakaan Dukungan Desain resmi.

Di kelas Anda:

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

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

Veronnie
sumber
5
Jawaban Anda agak tidak jelas dan tidak jelas, dapatkah Anda menjelaskan lebih lanjut apa yang merupakan bagian dari DSL dan mungkin mengutip informasi yang relevan dari halaman itu.
SuperBiasedMan
Maaf, saya telah melihat banyak referensi ke perpustakaan eksternal, jadi saya ingin menunjukkan ke perpustakaan resmi. Perpustakaan hanya dapat membuat tombol, tetapi pemosisiannya ada pada pengembang. Jadi posting saya tidak terlalu relevan, maaf.
Veronnie
12

Coba pustaka ini ( javadoc ada di sini ), level min API adalah 7:

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

Ini menyediakan widget tunggal dengan kemampuan untuk menyesuaikannya melalui Tema, xml atau kode java.

cahaya antara

Ini sangat mudah digunakan. Ada tersedia normaldan miniimplementasi sesuai dengan pola Tindakan yang Dipromosikan .

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

Cobalah untuk mengkompilasi aplikasi demo . Ada contoh lengkap: tema terang dan gelap, menggunakan dengan ListView, menyelaraskan antara dua Tampilan .

Oleksii K.
sumber
3
Untuk menambah jawaban ini ^ Anda juga dapat menggunakan perpustakaan backport lain yang tersedia seperti: github.com/FaizMalkani/FloatingActionButton , dan github.com/makovkastar/FloatingActionButton . Keduanya mungkin tampaknya memiliki lebih banyak dukungan. Tetapi ikuti saja tampilan Detail dari sumber yang tercantum dalam jawaban ini. Bagus sekali.
John Shelley
apakah itu perpustakaan resmi?
Cocorico
tidak ada perpustakaan resmi. ini adalah lib saya dengan sumber terbuka.
Oleksii K.
Tombol tindakan mengambang ini adalah contoh buruk bagaimana menerapkannya. Itu tidak mengikuti pedoman desain material yang sebenarnya.
Michael
@ Mike Milla, apa yang salah dengan Lib ini? persyaratan mana yang tidak dipenuhi?
Oleksii K.
9

Berikut adalah salah satu perpustakaan Floating Action Button gratis tambahan untuk Android . Ini memiliki banyak penyesuaian dan membutuhkan SDK versi 9 dan lebih tinggi

masukkan deskripsi gambar di sini

Video Demo Penuh

dependencies {
    compile 'com.scalified:fab:1.1.2'
}
Vladyslav Baidak
sumber
3
Pertanyaannya bukan bagaimana Anda menggunakan FAB , tetapi bagaimana Anda memposisikannya sehingga mengangkangi dua Tampilan. Mendesah.
Scott Biggs
6

Keep it Simple Menambahkan Tombol Tindakan Mengambang menggunakan TextView dengan memberikan latar belakang xml bulat. - Tambahkan kompilasicom.android.support:design:23.1.1 ke file gradle

  • Gunakan CoordinatorLayout sebagai tampilan root.
  • Sebelum Mengakhiri CoordinatorLayout, perkenalkan textView.
  • Di dalam Drawable menggambar sebuah lingkaran.

Lingkaran Xml adalah

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

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

Klik di sini untuk melihat bagaimana tampilannya

Ritesh
sumber
5

Tambahkan ini ke file gradle Anda

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

Ini ke activity_main.xml Anda

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

Anda dapat menemukan contoh lengkap dengan proyek android studio untuk diunduh di http://www.ahotbrew.com/android-floating-action-button/

Gurinder Singh
sumber
1

di sini adalah kode kerja.

saya menggunakan appBarLayout untuk melabuhkan floatingActionButton saya. Semoga ini bisa membantu.

KODE XML

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

Sekarang jika Anda menempelkan kode di atas. Anda akan melihat hasil berikut pada perangkat Anda. Gambar Hasil

Rk215 Tech
sumber