Membuat FAB (Floating Action Button) Animation

Sejak Material Design menciptakan Floating Action Button, dan menjadi salah satu komponen yang sangat penting. Google juga membuat mudah untuk mengimplementasikan di aplikasi android kita dengan batuan Design Support Library yang release pada Google I/O 2015, Menambahkan FAB itu sangat sederhana.
Di artikel ini saya akan membahas bagaimana cara membuat FAB show dan hide

tampilan screenshot

Membuat Layout

1. Buat project baru file=> new project, pada pemilihan layout, pilih basic activity pada pemilihan jenis activity yang kita gunakan

2. Pada activity_main.xml tambahkan kode dibawah ini untuk menampilkan floating bar dengan membuat 3 floating

3. Kemudian buat folder directory dengan nama anim dan buat file xmlnya seperti gambar

• fab_close
• fab_open
• rotate_backward
• rotate_forward

4. Buka fab_open, disini kita akan menambahkan kode jika tidak di klik chlid dari parent FAB utama akan di invisble dan akan  muncul ketika button di klik .

1. <?xml version="1.0" encoding="utf-8"?>
2. <set xmlns:android="http://schemas.android.com/apk/res/android"
3.     android:fillAfter="true">
4.     <scale
5.         android:duration="300"
6.         android:fromXScale="0.0"
7.         android:fromYScale="0.0"
8.         android:interpolator="@android:anim/linear_interpolator"
9.         android:toXScale="0.8"
10.         android:pivotX="50%"
11.         android:pivotY="50%"
12.         android:toYScale="0.8" />
13.     <alpha
14.         android:fromAlpha="0.0"
15.         android:toAlpha="1.0"
16.         android:interpolator="@android:anim/accelerate_interpolator"
17.         android:duration="300"/>
18. </set>

5. buka fab_close dan tambhakan kode dibawah ini yang fungsinya ketika buttun di klik akan kembali menghilang

1. <?xml version="1.0" encoding="utf-8"?>
2. <set xmlns:android="http://schemas.android.com/apk/res/android">
3. <scale
4.    android:duration="300"
5.    android:fromXScale="0.8"
6.    android:fromYScale="0.8"
7.    android:interpolator="@android:anim/linear_interpolator"
8.    android:toXScale="50%"
9.    android:toYScale="0.0"/>
10.     <alpha android:fromAlpha="1.0"
11.        android:toAlpha="0.0"
12.        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
13.        android:duration="300"/>
14. </set>

6. rotate_fordward, ini akan merotasi 45 derajat, dari gambar plus kemudian diputar akan membentuk ikon silang

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

7. rotate_backward

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

8. kmeudian pada Activy_Main.java tambahkan

9. Kemudian Runing

Terima kasih telah membaca artikel 'Membuat FAB (Floating Action Button) Animation' Semoga bermanfaat.

Bagikan Artikel ini di media sosial kamu:

• Tweet
• Share
• Share
• Share
• Share