Tutorial Menggunakan Android Palette untuk Ambil Warna dari Gambar

Last Updated on 2 years by Mas Herdi

Halo semua, melengkapi series tutorial saya tentang Android Material Design. Kali ini saya akan membahas salah satu fitur dari library Android Material Design yang sering digunakan, yaitu Palette. Dengan menggunakan class Palette, kita bisa dengan mudah mengekstrak/mengambil warna dari sebuah gambar, yang akan berguna dalam penerapan style/tema aplikasi supaya sesuai dengan images/gambar yang sedang ditampilkan. Contohnya pada aplikasi MP3 player, dimana dengan menggunakan Palette tema warna background dan warna tombol bisa disesuaikan dengan gambar cover album yang dimainkan, sehingga terasa serasi

Di benak kita mungkin mengekstrak warna dari gambar terdengar susah dan butuh skill coding tingkat tinggi, namun untungnya Palette class sangat mempermudah kita dalam hal ini. Tidak hanya itu Palette class bahkan membedakan warna ke dalam beberapa tipe sehingga memudahkan kalian untuk mengambil mana warna yang benar-benar cocok untuk aplikasi kalian.

Membuat UI cantik dan serasi di Android menggunakan Palette library Material Design

Sebelum lanjut, ada baiknya kalian membaca-baca dahulu tutorial-tutorial di bawah ini :

Pre-requisites :

• Membuat Tema/Style pada Android Material Design
• Tutorial Lengkap Android Material Design

Jika sudah, kita akan mulai dengan membuat sebuah project Android baru di Android Studio terlebih dahulu.

Kemudian update dependencies pada file build.gradle kalian dengan mengimport Palette library seperti di bawah ini :

dependencies {
    ...
    compile 'com.android.support:palette-v7:24.2.1'
    ...
}

Jika sudah, kita akan membuat style baru yang akan digunakan untuk TextView pada res/values/styles.xml  bernama tvPalleteStyle

    <style name="tvPalleteStyle">
        <item name="android:layout_height">40dp</item>
        <item name="android:layout_width">match_parent</item>
        <item name="android:textColor">@android:color/white</item>
        <item name="android:textStyle">bold</item>
        <item name="android:paddingLeft">5dp</item>
    </style>

Selanjutnya, kita menambahkan beberapa strings baru juga pada strings.xml :

    <string name="vibrant">Vibrant</string>
    <string name="vibrant_light">Vibrant Light</string>
    <string name="vibrant_dark">Vibrant Dark</string>
    <string name="muted">Muted</string>
    <string name="muted_light">Muted Light</string>
    <string name="muted_dark">Muted Dark</string>

Kemudian untuk margin kita akan mengupdate dimens.xml :

<resources>
    <!-- Default screen margins, per the Android Design guidelines. -->
    <dimen name="activity_horizontal_margin">16dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>
    <dimen name="card_margin">16dp</dimen>
</resources>

Setelah itu, pada file activity_main.xml masukkan kode seperti di bawah ini :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:orientation="vertical">   

        <ImageView
            android:id="@+id/ivWallpaper"
            android:layout_width="match_parent"
            android:layout_height="275dp"
            android:src="@drawable/face2" />

        <TextView
            android:id="@+id/tvVibrant"
            style="@style/tvPalleteStyle"
            android:layout_marginTop="10dp"
            android:text="@string/vibrant" />

        <TextView
            android:id="@+id/tvVibrantLight"
            style="@style/tvPalleteStyle"
            android:text="@string/vibrant_light" />

        <TextView
            android:id="@+id/tvVibrantDark"
            style="@style/tvPalleteStyle"
            android:text="@string/vibrant_dark" />

        <TextView
            android:id="@+id/tvMuted"
            style="@style/tvPalleteStyle"
            android:text="@string/muted" />

        <TextView
            android:id="@+id/tvMutedLight"
            style="@style/tvPalleteStyle"
            android:text="@string/muted_light" />

        <TextView
            android:id="@+id/tvMutedDark"
            style="@style/tvPalleteStyle"
            android:text="@string/muted_dark" />
</LinearLayout>

Yang terakhir, kita akan mengupdate class MainActivity.java. Di class inilah kita akan menggunakan Palette untuk mengambil warna dari gambar Bitmap, Di dalam Palette sendiri, kita akan mempunyai banyak Swatch (mirip seperti Photoshop), dan di tiap Swatch ada satu color. Palette secara default akan mencoba untuk mengambil 16 tipe warna, namun pada praktiknya hanya ada 6 profil warna yang akan sering kita gunakan, yaitu :

Vibrant – gunakan getVibrantColor() method untuk mendapatkan warna vibrant.
Vibrant dark – gunakan getDarkVibrantColor() method untuk mendapatkan warna vibrant dark.
Vibrant light – gunakan getLightVibrantColor() method untuk mendapatkan warna vibrant light.
Muted – gunakan getMutedColor() method untuk mendapatkan warna muted.
Muted dark – gunakan getDarkMutedColor() method untuk mendapatkan warna muted dark.
Muted light – gunakan getLightMutedColor() method untuk mendapatkan warna muted light.

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

/**
 * Created by Herdi_WORK on 18.09.16.
 */
public class MainActivity extends AppCompatActivity{

    private TextView vibrantView;
    private TextView vibrantLightView;
    private TextView vibrantDarkView;
    private TextView mutedView;
    private TextView mutedLightView;
    private TextView mutedDarkView;

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

        initViews();
        paintTextBackground();
    }

    private void initViews() {
        vibrantView = (TextView) findViewById(R.id.tvVibrant);
        vibrantLightView = (TextView) findViewById(R.id.tvVibrantLight);
        vibrantDarkView = (TextView) findViewById(R.id.tvVibrantDark);
        mutedView = (TextView) findViewById(R.id.tvMuted);
        mutedLightView = (TextView) findViewById(R.id.tvMutedLight);
        mutedDarkView = (TextView) findViewById(R.id.tvMutedDark);
    }

    private void paintTextBackground() {

        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.lena);

        Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {
            @Override
            public void onGenerated(Palette palette) {
                // ambil 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);

                vibrantView.setBackgroundColor(vibrant);
                vibrantLightView.setBackgroundColor(vibrantLight);
                vibrantDarkView.setBackgroundColor(vibrantDark);
                mutedView.setBackgroundColor(muted);
                mutedLightView.setBackgroundColor(mutedLight);
                mutedDarkView.setBackgroundColor(mutedDark);
            }
        });

    }
}

Demo

Oke langsung saja, kita akan mencoba dengan 3 gambar :

Palette dari gambar tema Kuning

Palette dari gambar yang tidak ada Vibrant Dark

Palette dari gambar Lena

That’s all ! Semoga membantu. ? Dan jangan lupa untuk clone project nya sebagai Android Studio module di GitHub saya ya, dengan terlebih dahulu follow dan star project tersebut. ?Silahkan bertanya di bagian komentar jika ada yang kurang jelas.