Membuat Smooth Progressbar di Android Seperti yang Google Gunakan

Seperti yang dijelaskan pada pembukaan postingan-postingan
sebelumnya, tampilan User Interface aplikasi mobile dari waktu ke waktu selalu mengalami perkembangan. Efek efek pada UI mobile yang bermuculan juga makin bagus. Efek-efek mobile yang dimaksud bisa dilihat dari semua produk google. Google play store contohnya selain desain tata letak layout yang bagus, tedapat juga efek-efek transisi yang sangat indah, baik itu efek perpindahan Activity, fragment, Image maupun tampilan saat loadingnya.

Kali ini saya akan membawah mengenai efek loading pada Android. Efek loading yang saya masud adalah yang terbaru, tampilannya smooth dan rasanya tampilan google juga seperti ini deh.

Kalo dilihat dari gambarnya pasti kalian pernah melihat loading atau progressbar semacam ini, terutama di aplikasi buatan google, seperti playstore, dan lain, lainnya. 


Kabar gembira buat kita para developer yang sedang belajar pemrograman, seseorang diluar sana telah mengembangkan sebuah library progressbar yang serupa dengan tampilan google.
Nama pengembang tersebut menggunakan akun github dengan nama Antonio Merle, lihat disini profilenya. Dia mengambangkan sebuah library ini dan diberi nama SmoothProgressBar. Cara penggunaannya juga sangat mudah.
PENGGUNAAN
Untuk dapat menggunakan SmoothProgressBar dan CicularProgressBar, terlebih dahulu kalian compile beberapa library berikut :


di gradle selanjutnya, yaitu build.gradle (Project : SmoothProgressBar), tambahkan repository mavennya, seperti ini :
Jika kalian bingung masalah struktur folder, kenapa gradle ada dua, dan lain-lainnya, coba perhatikan gambar berikut ini :

Disitu terdapat dua build.gradle yang akan kalian pasangi library nya. semoga sudah jelas.

Setelah selesai dengan urusan library, yang kalian harus lakukan sekarang mempersiapkan hal-hal atau keperluan lainnya, berikut persiapannya :

  1. pocket_interpolar.xml > ini adalah bagian dari animasi interpolar progressbar
  2. style.xml > menambahkan beberapa style di style.xml
  3. strings.xml > menambahkan beberapa string di strings.xml
  4. colors.xml > menambahkan beberapa warna di colors.xml
  5. activity_main.xml > layout utama tempat menampilkan progressbar
  6. MainActivity.java > class utama tempat dimana penulisan file javanya

Jika sudah tau apa yang dipersiapkan, mari kita mulai sesuai dengan number urut diatas

Pertama buat pocket_interpolar.xml, seperti penjelasannya di adalah bagian dari anim (animasi), sedangkan di directory Android Studio tidak ada folder animasi. Caranya yaitu kita buat foldernya, seperti ini :

  1. Klik kanan di folder res, pilih new, selanjutnya pilih directory
  2. beri nama anim pada calon directory tersebut

Setelah directory anim sudah jadi, tinggal buat file xml nya, caranya sama yaitu klik kanan pada folder anim, pilih new, pilih Animation Resource File, buat file animasi dengan nama pocket_interpolan.xml

Kedua, rubah style.xml menjadi seperti berikut ini

Ketiga, rubah strings.xml menjadi seperti berikut ini

Keempat, rubah colors.xml menjadi seperti dibawah ini

Kelima, kita buat layoutnya beri nama activity_main.xml, kodingannya seperti dibawah ini

Terakhir buat file javanya beri nama MainActivity.java, kodingannya seperti berikut ini

Coba kalian running aplikasinya, Semoga berhasil hehe. Sebelumnya saya coba kodingan ini berhasil dengan sampurna (mild :D).

Semoga bermanfaat postingan saya kali ini. Jika ada problem silakang berkomentar disini. happy coding!! have fun!!

(Visited 180 times, 1 visits today)



Baca juga :


About The Author

Related Posts

Add Comment

Berlangganan Artikel

Untuk mendaftarkan tutorial pemrograman terbaru dari putuguna[dot]com, silakan tuliskan email kalian dibawah ini