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:

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.

Belum ada Komentar untuk "Cara Membuat Floating Action Button Material Design"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Daftar Situs Idn Poker Online di 18Dewa dan juga Poker Qiu atau di sebut Pokerqiu adalah situs ceme online terpercaya sama dengan 18Dewapoker dan situs poker pkv yang terkenal adalah Masterdomino88 atau nama lain Domino88 bersaing di dunia game online poker Bandar389 dan poker idn lainnya yang memberikan kemenangan tinggi yaitu Big Poker88 baru lagi agen poker bernama Rekan Poker yang punya banyak peluang besar.