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.
Post a Comment