Android Palette

Mendapatkan Daftar Warna pada Gambar dengan Android Palette

Saat mengembangkan aplikasi, pernah terpikirkankah jika warna tema aplikasi kita itu bisa menyesuaikan dengan konten yang ditampilkan? Misal, warna untuk widget Toolbar bisa menyesuaikan dengan warna dominan sebuah gambar yang sedang ditampilkan. Tentu lebih menarik loh. Mau tahu bagaimana caranya bisa seperti itu? Yuk kenalan dengan Android Palette.

Android Palette

Apa itu Android Palette

Palette merupakan sebuah API yang disediakan google yang dapat membantu kita untuk mendapatkan informasi warna dari sebuah gambar. Mekanisme dari Palette ini adalah mengekstrak gambar bitmap dan disesuaikan dengan beberapa profil. Berikut adalah 6 profil warna utama yang bisa kita dapatkan dari sebuah gambar menggunakan Palette:

  • Light Vibrant
  • Vibrant
  • Dark Vibrant
  • Light Muted
  • Muted
  • Dark Muted

Selain itu, kita juga bisa mendapatkan informasi yang lebih detail dari setiap profil warna di atas dengan memanfaatkan Palette.Swatch. Dengannya, kita bisa mendapatkan informasi seperti nilai HSL dan nilai populasi warna setiap pixel. Kita bisa menggunakannya untuk membuat skema warna yang komprehensif untuk aplikasi yang kita kembangkan.

Menggunakan Android Palette

Untuk menggunakan Android Palette sendiri cukup mudah. Kita tinggal menambahkan dependensi berikut ke dalam build.gradle:

Nah, untuk mendapatkan daftar warna, terdapat 2 cara. Pertama, dengan memanfaatkan fungsi sinkronus yaitu fungsi generate. Contohnya seperti berikut:

 Kedua, memanfaatkan fungsi asinkron seperti berikut:

Cara di atas digunakan jika kita ingin memakai Palette dari thread lain. Cukup sederhana bukan?

Implementasi Android Palette ke dalam proyek

Baik, mari coba kita implementasi bersama Palette ke dalam proyek Android. Dimulai dengan membuat project baru pada Android studio dilanjutkan dengan menambahkan dependensi Palette seperti yang sudah disebutkan di atas. Setelah selesai, buka berkas activity_main.xml dan ubah isinya menjadi seperti berikut:

Susunan layout di atas terdapat sebuah SpinnerImageView serta beberapa TextView dan View. Beberapa View di atas akan kita gunakan untuk menampilkan cuplikan warna setiap profil sebuah gambar. Tampilan dari susunan layout di atas kurang lebih akan seperti berikut:

Android Palette

Berikutnya, mari kita tambahkan beberapa buah gambar yang akan kita coba dapatkan daftar warnanya. Untuk gambarnya sendiri bisa diunduh di sini. Setelah diunduh, tambahkan gambar ke dalam project yang sudah dibuat. Pastikan gambar tersebut berada di dalam folder drawable, bukan di dalam drawable-v24 agar dapat berjalan dengan baik pada device dengan level di bawah API 24.

Selanjutnya, mari kita modifikasi sedikit isi dari kelas MainActivity. Langsung saja buka kelas tersebut kemudian tambahkan beberapa baris kode berikut:

Variable images di atas akan digunakan sebagai variabel yang akan menampung resources gambar yang akan coba kita dapatkan daftar warnanya. Sedangkan variabel spinnerItems, seperti namanya, variabel tersebut akan kita gunakan untuk ditampilkan pada Spinner yang akan mewakili setiap gambar yang akan kita gunakan. 

Masih di kelas MainActivity, tambahkan fungsi untuk mendapatkan warna berikut:

Fungsi di atas memiliki parameter dengan tipe bitmap yang digunakan sebagai argumen untuk fungsi generate. Kemudian di dalam fungsi generate itu sendiri, terdapat beberapa fungsi lagi yang digunakan untuk mendapatkan warna berdasarkan profil yang sudah disebutkan di awal.

Nah, jika diperhatikan lagi kode di atas, di dalam fungsi generate terdapat 1 (satu) variabel yaitu defValue. Fungsinya apa? Variabel tersebut akan digunakan sebagai nilai default ketika nilai dari warna yang ingin didapat tidak tersedia.

Terakhir, ubahlah isi dari fungsi onCreate menjadi seperti berikut:

Seperti halnya ketika kita membuat sebuah Spinner, fungsi onCreate di atas terdapat inisialisasi adapter untuk Spinner dan event listener ketika item yang ada pada Spinner dipilih. Oke, sampai di sini kita sudah selesai dan isi dari kelas MainActivity kurang lebih seperti berikut:

Jika dirasa sudah selesai, proyeknya bisa langsung dijalankan. Jika tidak terdapat error, maka akan seperti berikut:

Android Palette

Kesimpulan

Menentukan warna untuk sebuah style adalah sesuatu yang tidak mudah dalam pengembangan aplikasi. Sebabnya, ketika kita salah menentukan warna, pengguna aplikasi akan cepat bosan berlama-lama berselancar di dalam aplikasi. Dengan Android Palette, kita bebas membiarkan pengguna memilih warna yang akan digunakan berdasarkan konten yang akan ditampilkan.

Sampai disini dulu ya tutorial kali ini. Jika ada yang kurang jelas atau ada yang mau ditanyakan, silakan tulis di kolom komentar. Untuk yang mau melihat kode sumber dari project yang sudah kita buat, teman-teman bisa cek di laman Github ini.

Salam!

Artikel terkait:

https://www.dicoding.com/blog/kenal-lebih-dekat-dengan-constraintlayout/

 

Di mana kamu bisa mengaplikasikan materi Android Palette ini?

Android Palette

Belajar mengembangkan aplikasi atau game dengan kurikulum yang telah divalidasi langsung oleh industri dengan Dicoding Academy.

Belajar di Dicoding Sekarang →
Share this:

Code Reviewer Dicoding Indonesia