Membuat Animasi Floating Action Button

Oleh Pojok Guru

Sabtu, 03 September 2016

Bagikan :

Tweet

Hai sobat, masih di artikel ihwal pemrograman android, pada artikel kemarin yang berjudul Android Pull/Swipe to Refresh. telah dijelaskan bagaimana cara untuk memperlihatkan 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 manis dan menarik. Tampilan dari UI ini menyerupai dengan tumpukan kertas, dan tumpukan ini mempunyai ketinggian yang sanggup membuat bayangan.Nah, bayangan ini dibentuk dengan memakai sudut z, fitur gres dalam UI Material Design yang membuat objek yang tampil menyerupai melayang.

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

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

Di dalam website resminya, google telah memperlihatkan isu 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 referensi Floating Action Button pada aplikasi Hangout yang mempunyai 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 teman simak langkah-langkahnya menyerupai berikut in :

Membuat Project Baru

Pertama teman buat project gres dengan nama FAB Animation, kemudian 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 menyerupai 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 isyarat atau pengaturan animasi dengan cara membuat directory gres dengan nama anim, dan buat beberapa layout animasi. Berikut masing-masing layout animasi untuk masing-masing objeknya

Animasi Floating Action Button

Buat layout gres di dalam directory anim dengan nama fab_open.xml dan fab_close.xml. Buat kodenya menyerupai 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 menyerupai 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 menyerupai 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 menyerupai 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 jikalau 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 kafe if it is present.         getMenuInflater().inflate(R.menu.menu_main, menu);         return true;     }      @Override     public boolean onOptionsItemSelected(MenuItem item) {         // Handle action kafe item clicks here. The action kafe 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, kini jalankan aplikasinya dengan menentukan hidangan Run 'app'. Maka tampilannya akan menyerupai berikut ini

Dalam membuat animasi di dalam aplikasi android menyerupai membuat animasi di tombol Floating Action Button ini, diharapkan sebuah layout yang menampung isyarat untuk pengaturan animasi yang akan dijalankan.

Sekian artikel tentang Membuat Animasi Floating Action Button, biar bermanfaat. Terus ikuti dan temukan artikel menarik lainya.

Tag : Pemrograman, Pemrograman Android