Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Android Programming / Basic Android / Material Design

Membuat Animasi dan Sub Menu pada Floating Action Button

by Admin Posting Komentar

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:

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'
3) Disini saya sudah menyiapkan beberapa icon, dengan ukuran 24dp, yang nantinya akan kita gunakan pada Floating Action Button, kalian dapat membutnya dengan cara, klik kanan pada direktori res > New > Vector Asset.

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>
Ada beberapa atribut yang akan saya jelaskan, diantaranya:
  • 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.

View:


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();
            }
        });
    }
}
Demo:


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

Wassalamualaikum Warahmatullahi Wabarakatuh.

Posting Komentar untuk "Membuat Animasi dan Sub Menu pada Floating Action Button "