Membuat Animasi dan Sub Menu pada Floating Action Button
Assalamualaikum Warahmatullahi Wabarakatuh.
Floating Action Button adalah salah satu view Material Design, yang digunakan sebagai indikator utama pada sebuah aplikasi, FAB berbentuk lingkaran dan akan terlihat seakan mengambang pada Layout atau Activity. Pada Tutorial sebelumnya, kita sudah membahas Bagaimana Cara Membuat FAB di Android
Pada materi berikut ini, kita akan belajar cara membuat animasi serta menambahkan Sub Menu Item pada Floating Action Button, sub menu tersebut berguna sebagai indikator utama pada sebuah aplikasi.
Google telah menyediakan FAB dari Android Design Support Library, yang bisa kita gunakan, tetapi untuk menambahkan animasi dan sub menu, kita harus membuatnya secara manual, untuk itu kita menggunakan sebuah library, dalam membuat sub menu dan juga animasi dengan mudah. Library tersebut dibuat oleh Dmytro Tarianyk.
Materi lainnya yang direkomendasikan:
- Belajar Membuat Style Material Design di Android Studio
- Cara Membuat TabLayout di Android Material Design
- Cara Membuat AppBarLayout dan CoordinatorLayout di Android Material Design
- Cara Membuat Swipe Refresh Material Design
Membuat Animasi dan Sub Menu pada Floating Action Button
1) Buka aplikasi Android Studio kalian, Buat Project Baru.2) Buka file build.gradle (direktori app), tambahkan library berikut ini:
compile 'com.github.clans:fab:1.6.4'
4) Selanjutnya buka file activity_main.xml kalian, disini kita akan menambahkan tag <FloatingActionMenu> sebagai pembungkus untuk sub menu dan <FloatingActionButton> digunakan untuk membuat sub menu item.
<?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">
<com.github.clans.fab.FloatingActionMenu
android:id="@+id/fab_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_margin="@dimen/fab_margin"
app:menu_labels_textColor="#000000"
app:menu_labels_colorNormal="#FFFFFF"
app:menu_labels_colorPressed="#BDBDBD"
app:fab_size="normal"
app:menu_backgroundColor="@android:color/transparent"
app:menu_colorNormal="@color/colorAccent"
app:menu_colorPressed="#FF00786D"
app:menu_icon="@drawable/ic_menu_white_24dp"
app:menu_labels_showShadow="true"
app:menu_openDirection="up"
app:menu_showShadow="true">
<com.github.clans.fab.FloatingActionButton
android:id="@+id/location"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:fab_label="Lokasi"
android:src="@drawable/ic_my_location_white_24dp"
app:fab_colorNormal="@color/colorAccent"
app:fab_colorPressed="#FF00786D"
app:fab_size="mini" />
<com.github.clans.fab.FloatingActionButton
android:id="@+id/add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:fab_label="Tambah Teman"
android:src="@drawable/ic_person_add_white_24dp"
app:fab_colorNormal="@color/colorAccent"
app:fab_colorPressed="#FF00786D"
app:fab_size="mini" />
<com.github.clans.fab.FloatingActionButton
android:id="@+id/setting"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:fab_label="Setelan"
android:src="@drawable/ic_settings_white_24dp"
app:fab_colorNormal="@color/colorAccent"
app:fab_colorPressed="#FF00786D"
app:fab_size="mini" />
</com.github.clans.fab.FloatingActionMenu>
</RelativeLayout>
- menu_colorNormal dan menu_colorPressed : digunakan untuk mengset warna pada FAB button, saat button tersebut tidak diklik dan Saat diklik.
- fab_colorNormal dan fab_colorPressed : digunakan untuk mengset warna pada FAB sub menu item, saat tidak diklik dan Saat diklik.
- fab_size : digunakan untuk mengubah ukuran, yaitu normal atau mini, saya sarankan untuk FAB Menu pilih normal dan FAB Button pilih mini.
- menu_labels_colorNormal dan menu_labels_colorPressed : digunakan untuk mengset warna pada Labels, saat labels tersebut tidak diklik dan Saat diklik.
- menu_showShadow dan menu_labels_showShadow : digunakan untuk menampilkan efek bayangan pada FAB dan labels.
- menu_openDirection : untuk menentukan arah pada saat FAB membuka dan menampilkan sub menu item.
- menu_labels_textColor : untuk menentukan warna pada text labels pada sub menu FAB.
- menu_backgroundColor : menentukan warna background.
5) Selanjutnya buka file MainActivity.java, disini kita akan menambahkan onClickListener pada masing-masing sub menu didalam FAB, untuk menangani kejadian saat menu tersebut di klik.
package android.cianjur.developer.net.basicandroid;
/*
Dibuat Oleh WILDAN M ATHOILLAH
*/
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Toast;
import com.github.clans.fab.FloatingActionButton;
public class MainActivity extends AppCompatActivity{
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
FloatingActionButton Lokasi = findViewById(R.id.location);
Lokasi.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(getApplicationContext(), "Pilih Lokasi", Toast.LENGTH_SHORT).show();
}
});
FloatingActionButton AddFriend = findViewById(R.id.add);
AddFriend.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(getApplicationContext(), "Tambah Teman", Toast.LENGTH_SHORT).show();
}
});
FloatingActionButton Setelan = findViewById(R.id.setting);
Setelan.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(getApplicationContext(), "Pengaturan", Toast.LENGTH_SHORT).show();
}
});
}
}
Terimakasih atas kunjungannya, semoga tutorial yang saya berikan bisa bermanfaat untuk kalian semua, selebihnya, mohon maaf bila ada kesalahan.
Wassalamualaikum Warahmatullahi Wabarakatuh.
