Friday, September 18, 2015

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:
Dan setiap Swatch memiliki method:
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

No comments:

Post a Comment