Beranda / Android Developer / Material Design

Cara Mengambil Warna Dari Gambar Menggunakan Android Palette

Oleh Wildan M Athoillah
Cara Mengambil Warna Dari Gambar Menggunakan Android Palette

Assalamualaikum Warahmatullahi Wabarakatuh.

Hallo sahabat developer, pada pembaasan kali ini kita akan belajar dan melanjutnya materi mengenai android material design, didalam android material design terdapat sebuah class library yang dapat diguakan untuk mengambil/mengekstrak warna dari gambar, bernama Pelette. Dengan menggunakan class Palette, kita dapat mengambil warna dari gambar yang ditampilkan pada layar aplikasi.

Contohnya seperti pada aplikasi pemutar musik, saat user milih lagu dan menampilkan gambar album dari musik yang dimainkan, warna background dan juga warna tombol pada aplikasi tersebut akan menyesuaikan dengan warna pada gambar yang tampil pada aplikasinya, sehingga tampilan aplikasi lebih selaras dengan gambar yang ditampilkan.

Materi lainnya yang direkomendasikan:

Tidak hanya itu, dalam class Palette warna-warna tersebut akan dibedakan menjadi beberapa tipe, sehingga memudahkan kalian untuk memilih warna yang sesuai untuk tampilan aplikasi yang akan dibuat.

Pada tutorial ini kita akan belajar membuat project sederhana menggunakan class Palette, didalam project tersebut kita siapkan sebuah gambar yang akan ditampilkan pada ImageView, tapi Palette akan mengambil gambar tersebut melalui Bitmap, bukan dari ImageView, warna-warna dari gambar tersebut akan kita tampilkan pada Background TextView.

Cara Menggunakan Android Palette untuk Ambil Warna dari Gambar

1) Buka aplikasi Android Studio kalian, Buat Project Baru.

2) Pertama masukan beberapa library berikut ini didalam dependensies pada file build.gradle (app level), untuk kebutuhan komponen material design kita.
implementation 'com.android.support:appcompat-v7:27.1.1'
implementation 'com.android.support:palette-v7:27.1.1'
3) Buka activity_main.xml kalian, disini kita gunakan ImageView, pastikan kalian sudah menyiapkan gambarnya, lalu Beberapa TextView, untuk menampilkan jenis-jenis warna dari gambar tersebut.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:layout_margin="12dp"
    android:orientation="vertical"
    tools:context="android.cianjur.developer.net.materialdesignexample.MainActivity">

    <ImageView
        android:id="@+id/gambarSinga"
        android:layout_width="wrap_content"
        android:layout_height="170dp"
        android:layout_marginBottom="8dp"
        app:srcCompat="@drawable/singa" />

    <TextView
        android:id="@+id/getVibrant"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="12dp"
        android:text="Vibrant"
        android:textSize="15sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/getVibrantDark"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="12dp"
        android:text="Vibrant Dark"
        android:textSize="15sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/getVibrantLight"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="12dp"
        android:text="Vibrant Light"
        android:textSize="15sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/getMuted"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="12dp"
        android:text="Muted"
        android:textSize="15sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/getMutedDark"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="12dp"
        android:text="Muted Dark"
        android:textSize="15sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/getMutedLight"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="12dp"
        android:text="Muted Light"
        android:textSize="15sp"
        android:textStyle="bold" />

</LinearLayout>
View:


4) Buka class MainActivity.java, pada class ini kita akan implementasikan Paletter untuk mengambil warna dari Gambar Bitmap, secara default Palette akan mengambil 16 jenis warna, tapi disini kita hanya akan mengambil 6 jenis warna saja dari Gambar Bitmap lalu menampilkannya pada warna Background TextView.
package android.cianjur.developer.net.materialdesignexample;

import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.graphics.Palette;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    //Deklarasi Variable
    private TextView Vibrant, VibrantDark, VibrantLight, Muted, MutedDark, MutedLight;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //Inisialisasi
        Vibrant = findViewById(R.id.getVibrant);
        VibrantDark = findViewById(R.id.getVibrantDark);
        VibrantLight = findViewById(R.id.getVibrantLight);
        Muted = findViewById(R.id.getMuted);
        MutedDark = findViewById(R.id.getMutedDark);
        MutedLight = findViewById(R.id.getMutedLight);

        //Mengambil gambar dari Bitmap
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.singa);

        //Menggunakan class Paletter untuk mengekstrak warna dari Gambar Bitmap
        Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {
            @Override
            public void onGenerated(@NonNull Palette palette) {
                //Mengambil Warna dari Gambar menggunakan Palette
                int defaultValue = 0x000000;
                int vibrant = palette.getVibrantColor(defaultValue);
                int vibrantLight = palette.getLightVibrantColor(defaultValue);
                int vibrantDark = palette.getDarkVibrantColor(defaultValue);
                int muted = palette.getMutedColor(defaultValue);
                int mutedLight = palette.getLightMutedColor(defaultValue);
                int mutedDark = palette.getDarkMutedColor(defaultValue);

                //Menerapkan Warna tersebut pada Background TextView
                Vibrant.setBackgroundColor(vibrant);
                VibrantLight.setBackgroundColor(vibrantLight);
                VibrantDark.setBackgroundColor(vibrantDark);
                Muted.setBackgroundColor(muted);
                MutedLight.setBackgroundColor(mutedLight);
                MutedDark.setBackgroundColor(mutedDark);
            }
        });
    }
}
Berikut ini adalah beberapa method yang digunakan untuk mengambil warna dari Gambar Bitmap:
  • getVibrantColor() method untuk mendapatkan warna vibrant.
  • getDarkVibrantColor() method untuk mendapatkan warna vibrant dark.
  • getLightVibrantColor() method untuk mendapatkan warna vibrant light.
  • getMutedColor() method untuk mendapatkan warna muted.
  • getDarkMutedColor() method untuk mendapatkan warna muted dark.
  • getLightMutedColor() method untuk mendapatkan warna muted light.

Demo:

Screenshot menampilkan warna background textView dari palette

Sekian dari saya, mohon maaf bila ada kesalahan, jika ada yang ingin ditanyaka, silakan isi kolom komentar dibawah ini.

Wassalamualaikum Warahmatullahi Wabarakatuh.

Wildan M Athoillah
Wildan M Athoillah Blogger dan spesialis pembuat aplikasi android.