Membuat Animasi Floating Action Button

Hai sobat, masih di artikel tentang pemrograman android, pada artikel kemarin yang berjudul Android Pull/Swipe to Refresh. telah dijelaskan bagaimana cara untuk memberikan fungsi refresh atau merefresh data dengan cara menggeser layar ke bawah atau menscroll ke bawah. Dan pada artikel kali ini, akan dijelaskan bagaimana cara untuk membuat animasi pada objek Floating Action Button, bagaimana cara membuatnya? berikut untuk lebih jelasnya.

Semenjak keluarnya material design dari Google, maka muncullah sebuah desain cantik dan menarik. Tampilan dari UI ini mirip dengan tumpukan kertas, dan tumpukan ini memiliki ketinggian yang dapat menciptakan bayangan.Nah, bayangan ini dibuat dengan menggunakan sudut z, fitur baru dalam UI Material Design yang membuat objek yang tampil seperti melayang.

Dan di dalam UI Material Design, terdapat sebuah objek yang sangat penting dan bagus unutk setiap aplikasi, yaitu Floating Action Button (bisa disingkat FAB). FAB ini merupakan tombol berbentuk material yang bersifat melayang, sehingga bisa diterapkan di atas objek apapun. Untuk lebih jelasnya tentang Floating Action Button, silahkan bisa dibaca di sini (Floating Action Button).

Baca juga "Mengirim JSON Object ke Activity Lain dengan Intent" 

Di dalam website resminya, google telah memberikan informasi tentanf FAB, mulai dari bentuknya, ukuranya, sifatnya, animasinya, dan peraturan untuk menampilkan Floating Action Button. Dan di dalam artikel ini, akan dijelaskan bagaimana untuk membuat animasi pada Floating Action Button. Dalam arikel ini, mengambil contoh Floating Action Button pada aplikasi Hangout yang memiliki animasi pada objek floating action button. Jika tombol diklik, maka akan muncul sub tombol sebagai pilihan lain, juga akan dimunculkan objek CarView sebagai keterangan tombol. Untuk membuatnya, silahkan sobat simak langkah-langkahnya seperti berikut in :

Membuat Project Baru

Pertama sobat buat project baru dengan nama FAB Animation, lalu pilih Basic Activity pada jendela pengaturan activity

Membuta tampilan

Saat kita memiilih Basic Activity, FAB akan secara otomatis muncul di activity_main.xml. Untuk membuat sub tombol, tambahkan dua lagi objek FAB dan dua objek CardView pada activity_main.xml seperti di bawah ini

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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"
    android:fitsSystemWindows="true"
    tools:context="com.blogsetyaaji.fabanimation.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_main" />

    <android.support.v7.widget.CardView
        android:id="@+id/card1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_marginBottom="90dp"
        android:layout_marginRight="75dp"
        android:visibility="invisible">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="2dp"
            android:text="New conversation" />
    </android.support.v7.widget.CardView>

    <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="@dimen/fab_margin"
        android:src="@mipmap/ic_new"
        app:backgroundTint="@color/colorAccent"
        app:elevation="6dp"
        app:pressedTranslationZ="12dp" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_marginBottom="130dp"
        android:layout_marginRight="@dimen/fab_margin"
        android:visibility="invisible"
        android:src="@mipmap/ic_phone"
        app:backgroundTint="#a4a4a4"
        app:elevation="6dp"
        app:pressedTranslationZ="12dp" />

    <android.support.v7.widget.CardView
        android:id="@+id/card2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_marginBottom="140dp"
        android:layout_marginRight="85dp"
        android:visibility="invisible">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="2dp"
            android:text="New call" />
    </android.support.v7.widget.CardView>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_marginBottom="80dp"
        android:layout_marginRight="@dimen/fab_margin"
        android:src="@mipmap/ic_chat"
        android:visibility="invisible"
        app:backgroundTint="#a4a4a4"
        app:elevation="6dp"
        app:pressedTranslationZ="12dp" />

</android.support.design.widget.CoordinatorLayout>

Pastikan objek yang nantinya muncul secara default diatur tidak terlihat dan letak objek tersususn secara benar dan tepat.

Membuat Animasi

Selanjutnya, buat terlebih dahulu kode atau pengaturan animasi dengan cara membuat directory baru dengan nama anim, dan buat beberapa layout animasi. Berikut masing-masing layout animasi untuk masing-masing objeknya

Animasi Floating Action Button

Buat layout baru di dalam directory anim dengan nama fab_open.xml dan fab_close.xml. Buat kodenya seperti berikut ini

fab_open.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">
    <scale
        android:duration="300"
        android:fromXScale="0.0"
        android:fromYScale="0.0"
        android:interpolator="@android:anim/linear_interpolator"
        android:pivotX="50%"
        android:pivotY="100%"
        android:toXScale="0.8"
        android:toYScale="0.8" />
    <alpha
        android:duration="300"
        android:fromAlpha="0.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:toAlpha="1.0" />
</set>

fab_close.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">
    <scale
        android:duration="300"
        android:fromXScale="0.8"
        android:fromYScale="0.8"
        android:interpolator="@android:anim/linear_interpolator"
        android:pivotX="50%"
        android:pivotY="100%"
        android:toXScale="0.0"
        android:toYScale="0.0" />
    <alpha
        android:duration="300"
        android:fromAlpha="1.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:toAlpha="0.0" />
</set>

Animasi Rotasi Floating Action Button

Untuk membuat objek Floating Action Button berputar sedikit, buat dua layout animasi dengan nama rotate_backward.xml dan rotate_forward.xml. Untuk kodenya seperti berikut ini

rotate_backward.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">
    <rotate
        android:duration="300"
        android:fromDegrees="45"
        android:interpolator="@android:anim/linear_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="0" />
</set>

rotate_forward.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">
    <rotate
        android:duration="300"
        android:fromDegrees="0"
        android:interpolator="@android:anim/linear_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="45" />
</set>

Animasi CardView

Saat sub tombol keluar, maka objek CardView juga akan keluar sesuai sub tombol. Buat animasinya dengan nama card_open.xml dan card_close.xml. Untuk kodenya seperti berikut

card_open.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">
    <scale
        android:duration="300"
        android:fromXScale="0.0"
        android:fromYScale="0.0"
        android:interpolator="@android:anim/linear_interpolator"
        android:pivotX="100%"
        android:pivotY="50%"
        android:toXScale="0.8"
        android:toYScale="0.8" />
    <alpha
        android:duration="300"
        android:fromAlpha="0.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:toAlpha="1.0" />
</set>

card_close.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">
    <scale
        android:duration="300"
        android:fromXScale="0.8"
        android:fromYScale="0.8"
        android:interpolator="@android:anim/linear_interpolator"
        android:pivotX="100%"
        android:pivotY="50%"
        android:toXScale="0.0"
        android:toYScale="0.0" />
    <alpha
        android:duration="300"
        android:fromAlpha="1.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:toAlpha="0.0" />
</set>

Membuat Activity

Setelah embuta tampilan animasi, selanjutnya terapkan pada MainActivity.java. Kita perlu mengenalkan terlebih dahulu layout animasi ke dalam MainActivity.java dan menerapkanya pada objek yany bersangkutan. Untuk membuatnya, buka MainActivity.java dan buat kodenya seperti berikut ini

package com.blogsetyaaji.fabanimation;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.CardView;
import android.support.v7.widget.Toolbar;
import android.util.Log;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    private Boolean isFabOpen = false;
    private FloatingActionButton fab, fab1, fab2;
    private CardView card1, card2;
    private Animation fab_open, fab_close, rotate_forward, rotate_backward, card_open, card_close;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        /*kenalkan tombol*/
        fab = (FloatingActionButton) findViewById(R.id.fab);
        fab1 = (FloatingActionButton) findViewById(R.id.fab1);
        fab2 = (FloatingActionButton) findViewById(R.id.fab2);
        card1 = (CardView) findViewById(R.id.card1);
        card2 = (CardView) findViewById(R.id.card2);

        /*kenalkan animasi*/
        fab_open = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.fab_open);
        fab_close = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.fab_close);
        rotate_forward = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.rotate_forward);
        rotate_backward = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.rotate_backward);
        card_open=AnimationUtils.loadAnimation(getApplicationContext(), R.anim.card_open);
        card_close=AnimationUtils.loadAnimation(getApplicationContext(), R.anim.card_close);

        /*perintah jika tombol diklik, maka jalankan method animateFAB()*/
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                animateFAB();
            }
        });
        
        fab1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(MainActivity.this, "New Message", Toast.LENGTH_SHORT).show();
            }
        });
        fab2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(MainActivity.this, "New Call", Toast.LENGTH_SHORT).show();
            }
        });
    }

    /*metode untuk menjalankan animasi
            pastikan apakah tombol dalam keadaan true atau false*/
    /*default fab dalam keadaan false/close*/
    public void animateFAB() {
        /*jika fab dalam keadaan false*/
        if (isFabOpen) {
            fab.startAnimation(rotate_backward);
            fab1.startAnimation(fab_close);
            fab2.startAnimation(fab_close);
            card1.startAnimation(card_close);
            card2.startAnimation(card_close);
            fab1.setClickable(false);
            fab2.setClickable(false);
            isFabOpen = false;
        } else {
            /*jika dalam keadaan true*/
            fab.startAnimation(rotate_forward);
            fab1.startAnimation(fab_open);
            fab2.startAnimation(fab_open);
            card1.startAnimation(card_open);
            card2.startAnimation(card_open);
            fab1.setClickable(true);
            fab2.setClickable(true);
            isFabOpen = true;
        }
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

Jika sudah, sekarang jalankan aplikasinya dengan memilih menu Run 'app'. Maka tampilannya akan seperti berikut ini

Dalam membuat animasi di dalam aplikasi android seperti membuat animasi di tombol Floating Action Button ini, diperlukan sebuah layout yang menampung kode untuk pengaturan animasi yang akan dijalankan.

Sekian artikel tentang Membuat Animasi Floating Action Button, semoga bermanfaat. Terus ikuti Blog Setya Aji dan temukan artikel menarik lainya.