GULANGGULING.COM | ANDROID – Halo teman-teman programmer. Pada artikel ini saya akan berbagi pengalaman tentang bagaimana cara membuat animasi menu pada aplikasi Android.
Tutorial ini cocok bagi Anda yang sedang ingin mempercantik tampilan menu pada aplikasi Android yang Anda buat. Animasi yang akan kita buat adalah animasi pada menu berbentuk bulat/bundar. Kira-kira tampilannya begini.
Pembuatan animasi ini sangat mudah, saya hanya menggunakan library yang sudah dibuat oleh ImangazalievM, Beliau ini telah membuatkan sebuah library yang sangat simple dan sederhana untuk digunakan.
Sebelum melanjutkan membaca artikel ini, Anda bisa juga menonton videonya tanpa meneruskan membaca artikel ini.
Untuk pembuatan Animasi menu pada aplikasi Android, kita cukup memanggil library yang telah dibuat dan sedikit membuat configurasi pada file xml kita. Untuk membuatnya akan saya coba jabarkan pada langkah-langkah dibawah :
Pertama yang harus Anda lakukan adalah load library pada file gradle :
|
1 |
compile 'com.github.imangazalievm:circlemenu:1.0.3' |
Setelah load library diatas, Anda tinggal menggunakannya pada file xml, caranya seperti dibawah, jangan lupa resource file drawable-nya ya.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<com.imangazaliev.circlemenu.CircleMenu android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:id="@+id/circleMenu" > <com.imangazaliev.circlemenu.CircleMenuButton android:id="@+id/favorite" android:layout_width="wrap_content" android:layout_height="wrap_content" app:colorNormal="#2196F3" app:colorPressed="#1E88E5" app:icon="@drawable/ic_favorite" /> <com.imangazaliev.circlemenu.CircleMenuButton android:id="@+id/search" android:layout_width="wrap_content" android:layout_height="wrap_content" app:colorNormal="#4CAF50" app:colorPressed="#43A047" app:icon="@drawable/ic_search"/> <com.imangazaliev.circlemenu.CircleMenuButton android:id="@+id/alert" android:layout_width="wrap_content" android:layout_height="wrap_content" app:colorNormal="#F44336" app:colorPressed="#E53935" app:icon="@drawable/ic_alert"/> </com.imangazaliev.circlemenu.CircleMenu> |
Sampai dilangkah ini, Anda sudah memiliki tampilan menu dengan animasi berputar-putar (circle). Selanjutnya, Anda tinggal menambahkan sedikit coding untuk membuat action pada file java, seperti cara dibawah :
|
1 2 3 4 5 6 7 |
CircleMenu circleMenu = (CircleMenu) findViewById(R.id.circleMenu); circleMenu.setOnItemClickListener(new CircleMenu.OnItemClickListener() { @Override public void onItemClick(MenuButton menuButton) { } }); |
Sampai disini, Anda telah berhasil membuat menu dengan Animasi pada Android. Jika Anda masih bingung atau ingini download full source codenya bisa langsung meluncur ke github saya atau langsung fork dari github aslinya miliki ImangazalievM.
Sekian dan semoga bermanfaat, simak tutorial Android lainnya pada halaman Daftar tutorial Android berserta Source code.
