Android - Adaptive Color

Dengan rilisnya Android Lollipop, beberapa support libraries pun telah release. Salah satu library-nya adalah Palette API. Palette membantu kita untuk mempermudah mengekstrak warna yang menonjol dari gambar bitmap.

Google telah mempermudah kita untuk melakukan adaptive theming di Android berdasarkan warna dalam gambar dan sangat mudah untuk di implementasikan. Yang kita butuhkan adalah gambar bitmap dan Palette API. Dengan ini Android aplikasi kita bisa memiliki banyak warna sesuai dengan pedoman Material Design. Contoh seperti gambar dibawah:

Tambahkan dependecy di gradle anda:

compile 'com.android.support:palette-v7:21.0.0'

Untuk men-generate warna menggunakan Palette hanya berlaku untuk Bitmap. Dan dapat di generate secara synchronous dan asynchronous.

 // Synchronous
 Palette p = Palette.from(bitmap).generate();
 // Asynchronous
 Palette.from(bitmap).generate(new PaletteAsyncListener() {
     public void onGenerated(Palette p) {
         // Use generated instance
     }
 }); 

Secara default Palette object(Swatch) akan mencari 16 warna dari sebuah gambar dan ada 6 method untuk mendapatkan warna, yaitu:

• Vibrant dark. Palette.getDarkVibrantSwatch()
• Vibrant light. Palette.getLightVibrantSwatch()
• Muted. Palette.getMutedSwatch()
• Muted dark. Palette.getDarkMutedSwatch()
• Muted light. Palette.getLightMutedSwatch()
• Vibrant. Palette.getVibrantSwatch()

Dan setiap Swatch memiliki method:

• getPopulation(): jumlah piksel yang mewakili swatch.
• getRgb(): nilai RGB dari warna.
• getHsl(): nilai HSL dari warna
• getBodyTextColor(): nilai RGB dari warna yang sesuai untuk body text dan dijamin memiliki cukup kontras.
• getTitleTextColor(): nilai RGB dari warna yang sesuai untuk title text dan dijamin memiliki cukup kontras.

Catatan:

The different text colors roughly match up to the material design standard styles of the same name. The title text color will be more translucent as the text is larger and thus requires less color contrast. The body text color will be more opaque as text is smaller and thus requires more contrast from color. (source https://chris.banes.me/2014/10/20/palette-v21)

Oke, saya akan memberikan contoh penggunaannya:

1. Buat Activity dan desain layout seperti dibawah dan siapkan dua bawah gambar untuk kita dapatkan nilai warnanya.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:orientation="vertical">

    <LinearLayout
        android:layout_marginBottom="10dp"
        android:orientation="vertical"
        android:background="@android:color/black"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="@dimen/abc_action_bar_default_height_material"
            android:title="@string/app_name"
            />

        <ImageView
            android:id="@+id/image"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/gambar1"
            android:scaleType="fitXY"
            />

    </LinearLayout>

    <LinearLayout
        android:orientation="vertical"
        android:background="@android:color/black"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        >

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar2"
            android:layout_width="match_parent"
            android:layout_height="@dimen/abc_action_bar_default_height_material"
            android:title="@string/app_name"
            />

        <ImageView
            android:id="@+id/image2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/gambar2"
            android:scaleType="fitXY"
            />

    </LinearLayout>
</LinearLayout>

2. Buka kelas Activity. Disini class saya bernama PaletteActivity

3. Hasilnya seperti ini:

Menarik bukan ? mau sesuatu yang lebih keren ? nantikan blog saya berikutnya. Sekian dan terima kasih.

Sumber:

https://chris.banes.me/2014/10/20/palette-v21/

http://blog.brightinventions.pl/playing-with-material-design-toolbar-palette/

http://code.tutsplus.com/tutorials/coloring-android-apps-with-palette--cms-24096