Cara Membuat Floating Action Button Material Design

Assalamualaikum Warahmatullahi Wabarakatuh.

Floating Action Button adalah salah satu view atau layout Material Design, yang terdapat pada Android Design Support Library, Floating Action Button pada aplikasi android, berbentuk lingkaran dan akan terlihat seakan mengambang pada Layout atau Activity. Sebutan lain dari Floating Action Button adalah FAB yang digunakan sebagai indikator utama pada sebuah aplikasi.

Contohnya aplikasi Whatsapp, pada aplikasi tersebut terdapat sebuah indikator dengan menggunakan FAB, yaitu untuk memilih kontak, membuat status dan juga menelpon. Menurut yang aturan yang ditetepkan Google, didalam sebuah acrivity, kita hanya diperbolehakan memasang satu buah FAB, karena digunakan sebagai main Actionnya.

Materi Lainnya Yang Direkomendasikan:

• Cara Membuat Swipe Refresh Material Design
• Tutorial Membuat RecyclerView Material Design
• Tutorial Membuat TabLayout Material Design

Pada tutorial Material Design kali ini, saya akan mengajarkan pada kalian, bagaimana cara mengimplementasikan Floating Action Button pada aplikasi Android, mari kita simak tutorial berikut ini.

Cara Membuat Floating Action Button Material Design

Buatlah project baru pada Andoid Studio kalian, pertama, untuk membuat Floating Action Button, kita perlu menambahkan beberapa library pada dependencies di project aplikasi kalian.

Buka file build.gradle, yang berada didalam direktori app. lalu masukan library berikut ini didalam dependencies :

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

Sebelum membuat FAB, terlebih dahulu kita akan membuat sebuah icon yang berukuran 36×36 pixel. Kalian dapat membuat icon sembarang dengan cara, klik kanan pada direktori res > new > Image Asset.

Disana saya memilih Tema HOLO_DARK pada icon tersebut, karena warna yang akan saya gunakan pada FAB, yaitu biru gelap atau biru tua, kalian dapat menyesuaikan warnanya.
Jika sudah selesai, buka file activity_main.xml, untuk membuat Floating Action Button, kita dapat menggunakan kode xml seperti berikut ini:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="android.cianjur.developer.net.basicandroid.MainActivity">

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/FAB"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_marginBottom="10dp"
        android:layout_marginRight="10dp"
        android:background="@color/colorPrimary"
        android:src="@drawable/floaticon"
        app:fabSize="normal"
        android:layout_marginEnd="10dp" />

</RelativeLayout>

Pada umunya, posisi FAB terdapat pada bagian sisi kanan bawah, tapi kalian dapat menyesuaikannya sendiri.

Agar lebih mudah, kalian dapat langsung mendrag/drop view tersebut pada acivity, seperti berikut ini, dan atur atribut-atribut yang diperlukannya.

Selanjutnya, buka file MainActiviy.java pada project kalian, masukan source code berikut ini:

package android.cianjur.developer.net.basicandroid;

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

public class MainActivity extends AppCompatActivity {

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

        //Menginisialisasi Floating Action Button
        FloatingActionButton fab = findViewById(R.id.FAB);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //Statement disini akan dijalankan saat FAB di Klik
                Toast.makeText(getApplicationContext(), "Tambahkan Teman", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Demo:

Terimakasih atas kunjungannya, semoga tutorial yang saya berikan bisa bermanfaat untuk kalian semua, selebihnya, mohon maaf bila ada kesalahan.

Wassalamualaikum Warahmatullahi Wabarakatuh.