Contoh FloatingActionButton dengan Perpustakaan Dukungan

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.

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:

• Halaman Perpustakaan Dukungan Desain Google
• dokumen FloatingActionButton
• Pembicaraan "Material Now" dari Google I / O 2015 - Perpustakaan Desain Dukungan diperkenalkan pada 17m22s
• Sampel Desain Dukungan Perpustakaan / showcase

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

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.

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.

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

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