Membuat Floating Action Button Di Android

Floating Action Button (FAB) adalah sebuah tombol yang melayang di atas elemen-elemen lainnya pada sebuah aplikasi Android. FAB digunakan untuk menampilkan aksi utama pada sebuah aplikasi, seperti menambahkan sebuah item baru atau membagikan konten. Pada artikel ini, kita akan membahas bagaimana membuat Floating Action Button di Android dengan menggunakan XML dan Java.

Mengapa Menggunakan Floating Action Button?

Floating Action Button memiliki beberapa kelebihan dibandingkan dengan tombol lainnya. Berikut beberapa alasan mengapa kita harus menggunakan FAB:

1. Mudah Digunakan: FAB sangat mudah digunakan karena posisinya yang menonjol dan berada di atas elemen-elemen lainnya.
2. Meningkatkan Pengalaman Pengguna: FAB dapat membantu meningkatkan pengalaman pengguna dengan menampilkan aksi utama pada sebuah aplikasi.
3. Desain yang Menarik: FAB memiliki desain yang menarik dan dapat disesuaikan dengan tema aplikasi.

Membuat Floating Action Button dengan XML

Untuk membuat Floating Action Button dengan XML, kita dapat menggunakan elemen android.support.design.widget.FloatingActionButton pada file layout XML. Berikut contoh kode XML untuk membuat FAB:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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">

    <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="16dp"
        android:src="@android:drawable/ic_menu_add"
        app:fabSize="normal"
        app:rippleColor="#ff9800" />

</LinearLayout>

Pada contoh kode di atas, kita membuat sebuah FAB dengan id fab dan menempatkannya pada pojok kanan bawah layar. Kita juga menambahkan beberapa atribut lainnya seperti layout_gravity, layout_margin, src, fabSize, dan rippleColor untuk menyesuaikan desain FAB.

Membuat Floating Action Button dengan Java

Untuk membuat Floating Action Button dengan Java, kita dapat menggunakan kode program berikut:

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.v7.app.AppCompatActivity;
import android.view.View;

public class MainActivity extends AppCompatActivity 

    @Override
    protected void onCreate(Bundle savedInstanceState) 
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        FloatingActionButton fab = findViewById(R.id.fab);

        fab.setOnClickListener(new View.OnClickListener() 
            @Override
            public void onClick(View view) 
                // Tambahkan kode untuk menangani klik FAB
            
        );
    

Pada contoh kode di atas, kita membuat sebuah instance dari FloatingActionButton dan menambahkan event listener untuk menangani klik FAB. Kita juga dapat menambahkan kode lainnya untuk menangani aksi lainnya pada FAB.

Mengatur Desain Floating Action Button

Untuk mengatur desain Floating Action Button, kita dapat menggunakan beberapa atribut berikut:

• android:src: untuk menentukan ikon yang akan ditampilkan pada FAB
• app:fabSize: untuk menentukan ukuran FAB
• app:rippleColor: untuk menentukan warna gelombang yang akan ditampilkan ketika FAB diklik
• android:layout_gravity: untuk menentukan posisi FAB pada layar
• android:layout_margin: untuk menentukan jarak antara FAB dengan elemen lainnya

Berikut contoh kode XML untuk mengatur desain FAB:

<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="16dp"
    android:src="@android:drawable/ic_menu_add"
    app:fabSize="normal"
    app:rippleColor="#ff9800"
    app:borderWidth="0dp"
    app:elevation="6dp"
    app:pressedTranslationZ="6dp" />

Pada contoh kode di atas, kita menambahkan beberapa atribut lainnya seperti borderWidth, elevation, dan pressedTranslationZ untuk mengatur desain FAB.

Membuat Floating Action Button dengan Animasi

Untuk membuat Floating Action Button dengan animasi, kita dapat menggunakan beberapa atribut berikut:

• app:useCompatPadding: untuk menentukan apakah FAB akan menggunakan padding yang kompatibel dengan Android 5.0 ke atas
• app:animateOnClick: untuk menentukan apakah FAB akan melakukan animasi ketika diklik

Berikut contoh kode XML untuk membuat FAB dengan animasi:

<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="16dp"
    android:src="@android:drawable/ic_menu_add"
    app:fabSize="normal"
    app:rippleColor="#ff9800"
    app:borderWidth="0dp"
    app:elevation="6dp"
    app:pressedTranslationZ="6dp"
    app:useCompatPadding="true"
    app:animateOnClick="true" />

Pada contoh kode di atas, kita menambahkan atribut useCompatPadding dan animateOnClick untuk membuat FAB dengan animasi.

Kesimpulan

Pada artikel ini, kita telah membahas bagaimana membuat Floating Action Button di Android dengan menggunakan XML dan Java. Kita juga telah membahas beberapa atribut yang dapat digunakan untuk mengatur desain FAB. Dengan menggunakan FAB, kita dapat meningkatkan pengalaman pengguna dan membuat aplikasi kita lebih menarik.

Video terkait Membuat Floating Action Button di Android