Contoh FloatingActionButton dengan Perpustakaan Dukungan


129

Baru-baru ini, saya membaca posting ini:

Perpustakaan Dukungan Desain Android

Perpustakaan Dukungan Android, revisi 22.2.0

Tombol FloatingAction

Tapi, tidak satu pun dari mereka memberi saya contoh detail tentang cara membuat yang baru FloatingActionButton. Sangat sulit dimengerti, saya mengajukan pertanyaan ini.

Adakah yang bisa memberi saya contoh tentang hal itu?

Bantuan apa pun sangat dihargai. Terima kasih sebelumnya.

EDIT

Saya baru saja menemukan beberapa masalah pada FloatingActionButton(FAB), dan saya ingin meningkatkan jawaban lain. Lihat jawaban saya di bawah ini.


Jawaban:


274

Jadi di build.gradlefile Anda , tambahkan ini:

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

AndroidX Catatan: Google sedang memperkenalkan perpustakaan ekstensi AndroidX baru untuk menggantikan Perpustakaan Dukungan yang lebih lama. Untuk menggunakan AndroidX, pertama-tama pastikan Anda telah memperbarui gradle.propertiesfile Anda , diedit build.gradleuntuk mengatur compileSdkVersionke 28(atau lebih tinggi), dan menggunakan baris berikut alih-alih yang sebelumnya compile.

implementation 'com.google.android.material:material:1.0.0'

Selanjutnya, di themes.xmlatau styles.xmlatau apa pun Anda, pastikan Anda mengatur ini- itu adalah warna aksen aplikasi Anda - dan warna FAB Anda kecuali Anda menimpanya (lihat di bawah):

        <item name="colorAccent">@color/floating_action_button_color</item>

Dalam XML tata letak:

<RelativeLayout
 ...
 xmlns:app="http://schemas.android.com/apk/res-auto">

       <android.support.design.widget.FloatingActionButton
            android:id="@+id/myFAB"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_plus_sign"
            app:elevation="4dp"
            ... />

</RelativeLayout>

Atau jika Anda menggunakan pustaka materi AndroidX di atas, Anda sebaiknya menggunakan ini:

<RelativeLayout
 ...
 xmlns:app="http://schemas.android.com/apk/res-auto">

       <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/myFAB"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:srcCompat="@drawable/ic_plus_sign"
            app:elevation="4dp"
            ... />

</RelativeLayout>

Anda dapat melihat lebih banyak opsi dalam dokumen (dokumen materi di sini) ( setRippleColor, dll.), Tetapi salah satu catatan adalah:

    app:fabSize="mini"

Satu lagi yang menarik - untuk mengubah warna latar belakang hanya satu FAB, tambahkan:

    app:backgroundTint="#FF0000"

(misalnya untuk mengubahnya menjadi merah) ke XML di atas.

Lagi pula, dalam kode, setelah tampilan Aktivitas / Fragmen meningkat ....

    FloatingActionButton myFab = (FloatingActionButton)  myView.findViewById(R.id.myFAB);
    myFab.setOnClickListener(new View.OnClickListener() {
        public void onClick(View v) {
            doMyThing();
        }
    });

Pengamatan:

  • Jika Anda memiliki salah satu tombol yang berada di "jahitan" yang memisahkan dua tampilan (menggunakan RelativeLayout, misalnya) dengan, katakanlah, margin tata letak bawah negatif untuk tumpang tindih perbatasan, Anda akan melihat masalah: ukuran FAB sebenarnya sangat berbeda pada lollipop vs pre-lollipop. Anda benar-benar dapat melihat ini di editor tata letak visual AS ketika Anda beralih di antara API - tiba-tiba "puffs" ketika Anda beralih ke pra-lollipop. Alasan untuk ukuran ekstra tampaknya karena bayangan memperluas ukuran tampilan di setiap arah. Jadi, Anda harus memperhitungkan ini ketika Anda menyesuaikan margin FAB jika dekat dengan hal-hal lain.
  • Berikut cara untuk menghapus atau mengganti bantalan jika ada terlalu banyak:

    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
        RelativeLayout.LayoutParams p = (RelativeLayout.LayoutParams) myFab.getLayoutParams();
        p.setMargins(0, 0, 0, 0); // get rid of margins since shadow area is now the margin
        myFab.setLayoutParams(p);
    }
  • Juga, saya akan secara program menempatkan FAB pada "jahitan" antara dua area dalam RelativeLayout dengan meraih ketinggian FAB, membaginya dengan dua, dan menggunakannya sebagai margin offset. Tapi myFab.getHeight () mengembalikan nol, bahkan setelah tampilan meningkat, sepertinya. Alih-alih, saya menggunakan ViewTreeObserver untuk mendapatkan ketinggian hanya setelah diletakkan dan kemudian mengatur posisi. Lihat tip ini di sini . Itu terlihat seperti ini:

        ViewTreeObserver viewTreeObserver = closeButton.getViewTreeObserver();
        if (viewTreeObserver.isAlive()) {
            viewTreeObserver.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
                @Override
                public void onGlobalLayout() {
                    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {
                        closeButton.getViewTreeObserver().removeGlobalOnLayoutListener(this);
                    } else {
                        closeButton.getViewTreeObserver().removeOnGlobalLayoutListener(this);
                    }
                    // not sure the above is equivalent, but that's beside the point for this example...
                    RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) closeButton.getLayoutParams();
                    params.setMargins(0, 0, 16, -closeButton.getHeight() / 2); // (int left, int top, int right, int bottom)
                    closeButton.setLayoutParams(params);
                }
            });
        }

    Tidak yakin apakah ini cara yang tepat untuk melakukannya, tetapi tampaknya berhasil.

  • Tampaknya Anda dapat membuat ruang bayangan tombol lebih kecil dengan mengurangi ketinggian.
  • Jika Anda ingin FAB pada "jahitan" yang dapat Anda gunakan layout_anchordan layout_anchorGravityberikut adalah contohnya:

    <android.support.design.widget.FloatingActionButton
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        app:layout_anchor="@id/appbar"
        app:layout_anchorGravity="bottom|right|end"
        android:src="@drawable/ic_discuss"
        android:layout_margin="@dimen/fab_margin"
        android:clickable="true"/>

Ingatlah bahwa Anda dapat secara otomatis memiliki tombol yang melompat ketika Snackbar muncul dengan membungkusnya di CoordinatorLayout .

Lebih:


1
Tentu. Cukup tambahkan android:backgroundTint="#FF0000"misalnya ke FloatingActionBar di XML. (menambahkan untuk menjawab)
fattire

1
Hmm. Oke saya akan mengubahnya di atas itu. Terima kasih! Dark Leonhart - Saya belum melihat apa pun tentang pengembalian cepat built-in tetapi ada sampel melakukannya di tempat lain di stackoverflow yang saya kira masih akan berfungsi. Plus beberapa perpustakaan tersedia yang melakukannya juga.
Fattire

1
Komponen ini, pada 22.2.0, menurut saya, belum siap produksi. Btw, mungkin salah ketik, tapi jangan gunakan spdi properti evelation. Seharusnyaapp:elevation="4dp"
Joao Sousa

1
Catatan jika Anda menambahkan a FloatingActionButtonke CoordinatorLayout, Anda dapat menggunakan app:layout_anchor="element_with_seam"dan app:layout_anchorGravity="bottom|right|end"memposisikan FAB dengan benar di atas jahitan - lihat tata letak activity_detail dari cheesesquare
ianhanniballake

2
@DarkLeonhart - lihat contoh saya menunjukkan / menyembunyikan FAB pada gulir dengan memperluas perilakunya.
ianhanniballake

49

Saya baru saja menemukan beberapa masalah pada FAB dan saya ingin meningkatkan jawaban lain.


masalah setRippleColor

Jadi, masalah akan muncul setelah Anda mengatur warna riak (warna FAB saat ditekan) secara terprogram setRippleColor. Namun, kami masih memiliki cara alternatif untuk mengaturnya, yaitu dengan menelepon:

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
ColorStateList rippleColor = ContextCompat.getColorStateList(context, R.color.fab_ripple_color);
fab.setBackgroundTintList(rippleColor);

Proyek Anda perlu memiliki struktur ini:

/res/color/fab_ripple_color.xml

masukkan deskripsi gambar di sini

Dan kode dari fab_ripple_color.xmladalah:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:color="@color/fab_color_pressed" />
    <item android:state_focused="true" android:color="@color/fab_color_pressed" />
    <item android:color="@color/fab_color_normal"/>
</selector>

Akhirnya, ubah FAB Anda sedikit:

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_action_add"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    app:fabSize="normal"
    app:borderWidth="0dp"
    app:elevation="6dp"
    app:pressedTranslationZ="12dp"
    app:rippleColor="@android:color/transparent"/> <!-- set to transparent color -->

Untuk API level 21 dan lebih tinggi, setel margin kanan dan bawah ke 24dp:

...
android:layout_marginRight="24dp"
android:layout_marginBottom="24dp" />

Panduan desain FloatingActionButton

Seperti yang Anda lihat pada kode xml FAB saya di atas, saya menetapkan:

        ...
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        app:elevation="6dp"
        app:pressedTranslationZ="12dp"
        ...
  • Dengan mengatur atribut ini, Anda tidak perlu mengatur layout_marginTopdan layout_marginRightlagi (hanya di pra-Lollipop). Android akan menempatkannya secara otomatis di sisi kanan layar kornet, yang sama dengan FAB normal di Android Lollipop.

        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"

Atau, Anda dapat menggunakan ini di CoordinatorLayout:

        android:layout_gravity="end|bottom"
  • Anda harus memiliki 6dp elevationdan 12dp pressedTranslationZ, menurut panduan ini dari Google.

Aturan FAB


5
jempol untuk penelitian yang terlibat. ditambah 1 untuk pressedTranslationZ. Saya tidak tahu itu.
Joao Sousa

app: elevation = "6dp" app: pressedTranslationZ = "12dp" melakukan trik untuk pre-lollipop, tetapi fab saya benar-benar di sudut layar pada Lollipop
Thiago

1
Anda menggunakan nilai yang salah untuk "pressedTranslationZ". Ini bukan nilai elevasi pada kondisi tertekan. PressedElevation = elevasi + pressedTranslationZ. Jadi nilai yang benar adalah app: elevation = "6dp" app: pressedTranslationZ = "6dp"
e.shishkin

3
Sebenarnya Anda tidak perlu mengatur app:elevationdan app:pressedTranslationZnilai - nilai. Nilai standarnya adalah yang ditentukan dalam pedoman desain Material. Bagaimanapun, e.shishkin benar, nilainya adalah app:elevation:6dpdan pressedTranslationZ:6dp. Anda dapat memeriksanya di com.android.support.design kode sumber
Christian García

12

FloatingActionButtonmeluas ImageView. Jadi, itu sederhana seperti memperkenalkan sebuah ImageViewtata letak Anda. Berikut ini adalah contoh XML.

<android.support.design.widget.FloatingActionButton   xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/somedrawable"
    android:layout_gravity="right|bottom"
    app:borderWidth="0dp"
    app:rippleColor="#ffffff"/>

app:borderWidth="0dp" ditambahkan sebagai solusi untuk masalah ketinggian.


4

untuk AndroidX gunakan suka

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:srcCompat="@drawable/ic_add" />

1

Jika Anda sudah menambahkan semua perpustakaan dan masih tidak berfungsi gunakan:

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:srcCompat="@drawable/ic_add" 
/>

dari pada:

<android.support.design.widget.FloatingActionButton
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   app:srcCompat="@drawable/ic_add"
 />

Dan semua akan bekerja dengan baik :)

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.