26 เมษายน 2558

[Android Code] รู้จักกับ Palette & Swatch ลูกเล่นใหม่เพื่อเพิ่มสีสันให้กับแอพ



        สำหรับ Palette และ Swatch นั้นเป็น API ตัวใหม่ที่ทาง Google ได้ปล่อยออกมาใน Android Lollipop ซึ่งเป็น API ที่จะช่วยเพิ่มลูกเล่นเกี่ยวกับสีในแอพ และเจ้าของบล็อกก็สังเกตเห็นว่าตัว API มันมีอยู่ใน Android Support Library อยู่ด้วย

        โดยเจ้าของบล็อกสังเกตเห็นชุดคำสั่งของคลาสนี้จากงาน Google Developer Summit Thailand แล้วลองหาข้อมูลดูก็พบว่ามันน่าสนใจดี ดังนั้นก็เลยขอหยิบมาพูดถึงซักหน่อย เพื่อที่ว่าผู้ที่หลงเข้ามาอ่านจะได้เอาไปใช้กับแอพจะได้เป็นลูกเล่นที่มีสีสันยิ่งขึ้น

        ในการใช้งาน Palette กับ Swatch นั้นจะต้องใช้ Android Support Library ด้วยนะ ไม่สามารถเรียกจาก API ได้โดยตรง ถ้าใช้ Eclipse ADT ก็เพิ่มไลบรารีเข้าไปให้เรียบร้อย และถ้าใช้ Android Studio ก็ให้เพิ่มผ่าน Remote Dependencies ดังนี้

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

Palette 

        เป็นคลาสที่มีหน้าที่แยกแยะสีของภาพนั้นๆให้ ซึ่งการแยกแยะสีที่ว่าคือการบอกว่าภาพนั้นๆมีสีโทนอะไรเป็นหลัก เพื่อให้สามารถดึงสีนั้นๆไปใช้งานให้เหมาะกับภาพ


        ถ้าผู้ที่หลงเข้ามาอ่านคนใดเคยศึกษา Material Design Principle แล้ว ก็อาจจะคุ้นๆกับภาพข้างบนอยู่บ้าง

        ให้ลองสังเกตที่ชื่อเพลงและชื่อวงดนตรี จะเห็นว่าสีพื้นหลังนั้นมีสีโทนเดียวกับภาพหน้าปกเพลงทั้งหมด ปกไหนเป็นสีออกโทนน้ำเงิน ก็จะมีพื้นหลังข้อความเป็นสีน้ำเงิน ถ้าตรงไหนเป็นสีออกแดง พื้นหลังก็จะเป็นสีแดง ซึ่งตรงนี้เป็นความสามารถของคลาส Palette ล้วนๆเลย

        โดยคลาส Palette นั้นจะค้นหาสีสองประเภทด้วยกันคือ Vibrant (สีสด) และ Muted (สีหม่น) แถมยังแยกให้อีกด้วยว่าเป็น Light หรือ Dark หรือว่า Normal

        อะไรนะ ไม่ค่อยเข้าใจ? ถ้างั้นดูภาพตัวอย่างข้างล่างนี้เลยดีกว่า


        ภาพขวามือนั้นคือภาพตั้งต้นที่ให้ Palette หาค่าสีให้ ส่วนกรอบสี่เหลี่ยมจำนวน 6 ช่องนั้นคือค่าสีในแบบต่างๆที่คลาส Palette แสดงออกมาให้

        Light Vibrant สีสดออกสว่าง
        Vibrant สีสดที่สุดในภาพ
        Dark Vibrant สีสดออกมืด
        Light Muted สีหม่นออกสว่าง
        Muted สีหม่นปานกลาง
        Dark Muted สีหม่นออกมืด

        และในกรณีที่หาค่าสีในบางช่วงไม่เจอ ก็สามารถกำหนด Default ได้ว่าจะให้เป็นสีอะไรแทนที่ ยกตัวอย่างเช่น สีขาว เป็นต้น


การใช้งานคลาส Palette

        คลาส Palette เรียกใช้งานง่ายมากกกกกก มีทั้งแบบ Synchronous และ Asynchronous

        Synchronous
Bitmap bitmap = getBitmapFromAnywhere;

Palette palette = Palette.generate(bitmap);
// Do something with palette

        Asynchronous
Bitmap bitmap = getBitmapFromAnywhere;

Palette.generateAsync(bitmap, new Palette.PaletteAsyncListener() {
    @Override
    public void onGenerated(Palette palette) {
        // Do something with palette
    }
});

        ถ้าให้แนะนำเจ้าของบล็อกแนะนำว่าใช้ Asynchronous จะดีกว่า เพราะมันจะได้ไม่ไปหยุดการทำงานของ Main Thread ถึงแม้ว่าจากการลองทดสอบดูพบว่ามันใช้เวลาไป 50ms ก็ตาม (ขึ้นอยู่กับขนาดภาพ) และเอาเข้าจริงตอนดึงภาพมาเป็น Bitmap ใช้เวลานานกว่าอีก ฮ่าๆ

        สำหรับ Instance ของ Palette ที่ได้จากคำสั่งก็จะมีคำสั่งสำคัญๆเพื่อดึงสีจากแต่ละแบบ

int default_color = Color.WHITE;

int light_vibrant_color = palette.getLightVibrantColor(default_color);
int vibrant_color = palette.getVibrantColor(default_color);
int dark_vibrant_color =  palette.getDarkVibrantColor(default_color);
int light_muted_color =  palette.getLightMutedColor(default_color);
int muted_color =  palette.getMutedColor(default_color);
int dark_muted_color =  palette.getDarkMutedColor(default_color);

        กรณีนี้จะดึงค่าสีที่ได้ในแต่ละแบบออกมาเป็น Color Integer โดยจะมีการกำหนด Default Colotไว้เป็นสีขาว กรณีที่ไม่สามารถหาค่าสีในแบบนั้นๆได้

Swatch light_vibrant_swatch = palette.getLightVibrantSwatch();
Swatch vibrant_swatch = palette.getVibrantSwatch();
Swatch dark_vibrant_swatch =  palette.getDarkVibrantSwatch();
Swatch light_muted_swatch =  palette.getLightMutedSwatch();
Swatch muted_swatch =  palette.getMutedSwatch();
Swatch dark_muted_swatch =  palette.getDarkMutedSwatch();

        ส่วนกรณีนี้จะเป็นการดึงค่าสีของแต่ละแบบออกมาในรูปคลาส Swatch ซึ่งเดี๋ยวเจ้าของบล็อกจะอธิบายในหัวข้อถัดไปให้

        ข้อควรระวัง เนื่องจาก Swatch เป็น Object Class ตัวหนึ่ง ดังนั้นจึงมีการ Return ค่าออกมาเป็น Null ถ้าไม่สามารถดึงค่าสีออกมาได้ ซึ่งต่างจาก Color Integer ที่สามารถกำหนด Default Color ได้


        ถ้าสมมติว่าเจ้าของบล็อกมีภาพอยู่ 4 ภาพดังนี้


        แล้วเจ้าของบล็อกดึงค่าสีจากภาพเหล่านี้ด้วย Palette โดยดึงทั้ง Vibrant และ Swatch มาแสดงด้วยคำสั่ง

private FrameLayout layoutLightMuted1;
private FrameLayout layoutLightMuted2;
private FrameLayout layoutLightMuted3;
private FrameLayout layoutLightMuted4;

private FrameLayout layoutMuted1;
private FrameLayout layoutMuted2;
private FrameLayout layoutMuted3;
private FrameLayout layoutMuted4;

private FrameLayout layoutDarkMuted1;
private FrameLayout layoutDarkMuted2;
private FrameLayout layoutDarkMuted3;
private FrameLayout layoutDarkMuted4;

private FrameLayout layoutLightVibrant1;
private FrameLayout layoutLightVibrant2;
private FrameLayout layoutLightVibrant3;
private FrameLayout layoutLightVibrant4;

private FrameLayout layoutVibrant1;
private FrameLayout layoutVibrant2;
private FrameLayout layoutVibrant3;
private FrameLayout layoutVibrant4;

private FrameLayout layoutDarkVibrant1;
private FrameLayout layoutDarkVibrant2;
private FrameLayout layoutDarkVibrant3;
private FrameLayout layoutDarkVibrant4;

private TextView tvHeader1;
private TextView tvHeader2;
private TextView tvHeader3;
private TextView tvHeader4;

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

    layoutLightVibrant1 = (FrameLayout) findViewById(R.id.layout_light_vibrant1);
    layoutLightVibrant2 = (FrameLayout) findViewById(R.id.layout_light_vibrant2);
    layoutLightVibrant3 = (FrameLayout) findViewById(R.id.layout_light_vibrant3);
    layoutLightVibrant4 = (FrameLayout) findViewById(R.id.layout_light_vibrant4);

    layoutVibrant1 = (FrameLayout) findViewById(R.id.layout_vibrant1);
    layoutVibrant2 = (FrameLayout) findViewById(R.id.layout_vibrant2);
    layoutVibrant3 = (FrameLayout) findViewById(R.id.layout_vibrant3);
    layoutVibrant4 = (FrameLayout) findViewById(R.id.layout_vibrant4);

    layoutDarkVibrant1 = (FrameLayout) findViewById(R.id.layout_dark_vibrant1);
    layoutDarkVibrant2 = (FrameLayout) findViewById(R.id.layout_dark_vibrant2);
    layoutDarkVibrant3 = (FrameLayout) findViewById(R.id.layout_dark_vibrant3);
    layoutDarkVibrant4 = (FrameLayout) findViewById(R.id.layout_dark_vibrant4);

    layoutLightMuted1 = (FrameLayout) findViewById(R.id.layout_light_muted1);
    layoutLightMuted2 = (FrameLayout) findViewById(R.id.layout_light_muted2);
    layoutLightMuted3 = (FrameLayout) findViewById(R.id.layout_light_muted3);
    layoutLightMuted4 = (FrameLayout) findViewById(R.id.layout_light_muted4);

    layoutMuted1 = (FrameLayout) findViewById(R.id.layout_muted1);
    layoutMuted2 = (FrameLayout) findViewById(R.id.layout_muted2);
    layoutMuted3 = (FrameLayout) findViewById(R.id.layout_muted3);
    layoutMuted4 = (FrameLayout) findViewById(R.id.layout_muted4);

    layoutDarkMuted1 = (FrameLayout) findViewById(R.id.layout_dark_muted1);
    layoutDarkMuted2 = (FrameLayout) findViewById(R.id.layout_dark_muted2);
    layoutDarkMuted3 = (FrameLayout) findViewById(R.id.layout_dark_muted3);
    layoutDarkMuted4 = (FrameLayout) findViewById(R.id.layout_dark_muted4);

    tvHeader1 = (TextView) findViewById(R.id.tv_header1);
    tvHeader2 = (TextView) findViewById(R.id.tv_header2);
    tvHeader3 = (TextView) findViewById(R.id.tv_header3);
    tvHeader4 = (TextView) findViewById(R.id.tv_header4);

    Bitmap bitmap1 = BitmapFactory.decodeResource(getResources(), R.drawable.photo_001);
    Bitmap bitmap2 = BitmapFactory.decodeResource(getResources(), R.drawable.photo_002);
    Bitmap bitmap3 = BitmapFactory.decodeResource(getResources(), R.drawable.photo_003);
    Bitmap bitmap4 = BitmapFactory.decodeResource(getResources(), R.drawable.photo_004);

    Palette palette = Palette.generate(bitmap1);
    Palette palette1 = Palette.generate(bitmap1);
    Palette palette2 = Palette.generate(bitmap2);
    Palette palette3 = Palette.generate(bitmap3);
    Palette palette4 = Palette.generate(bitmap4);

    layoutLightVibrant1.setBackgroundColor(palette1.getLightVibrantColor(Color.WHITE));
    layoutLightVibrant2.setBackgroundColor(palette2.getLightVibrantColor(Color.WHITE));
    layoutLightVibrant3.setBackgroundColor(palette3.getLightVibrantColor(Color.WHITE));
    layoutLightVibrant4.setBackgroundColor(palette4.getLightVibrantColor(Color.WHITE));

    layoutVibrant1.setBackgroundColor(palette1.getVibrantColor(Color.WHITE));
    layoutVibrant2.setBackgroundColor(palette2.getVibrantColor(Color.WHITE));
    layoutVibrant3.setBackgroundColor(palette3.getVibrantColor(Color.WHITE));
    layoutVibrant4.setBackgroundColor(palette4.getVibrantColor(Color.WHITE));

    layoutDarkVibrant1.setBackgroundColor(palette1.getDarkVibrantColor(Color.WHITE));
    layoutDarkVibrant2.setBackgroundColor(palette2.getDarkVibrantColor(Color.WHITE));
    layoutDarkVibrant3.setBackgroundColor(palette3.getDarkVibrantColor(Color.WHITE));
    layoutDarkVibrant4.setBackgroundColor(palette4.getDarkVibrantColor(Color.WHITE));

    layoutLightMuted1.setBackgroundColor(palette1.getLightMutedColor(Color.WHITE));
    layoutLightMuted2.setBackgroundColor(palette2.getLightMutedColor(Color.WHITE));
    layoutLightMuted3.setBackgroundColor(palette3.getLightMutedColor(Color.WHITE));
    layoutLightMuted4.setBackgroundColor(palette4.getLightMutedColor(Color.WHITE));

    layoutMuted1.setBackgroundColor(palette1.getMutedColor(Color.WHITE));
    layoutMuted2.setBackgroundColor(palette2.getMutedColor(Color.WHITE));
    layoutMuted3.setBackgroundColor(palette3.getMutedColor(Color.WHITE));
    layoutMuted4.setBackgroundColor(palette4.getMutedColor(Color.WHITE));

    layoutDarkMuted1.setBackgroundColor(palette1.getDarkMutedColor(Color.WHITE));
    layoutDarkMuted2.setBackgroundColor(palette2.getDarkMutedColor(Color.WHITE));
    layoutDarkMuted3.setBackgroundColor(palette3.getDarkMutedColor(Color.WHITE));
    layoutDarkMuted4.setBackgroundColor(palette4.getDarkMutedColor(Color.WHITE));
}

        จะได้ดังนี้


        ตัวอย่างนี้จะไม่มีอะไรซับซ้อนมากนัก เพียงแค่ดึง Bitmap ของภาพเหล่านี้มาให้คลาส Palette จัดการดึงสีที่เป็น Vibrant และ Muted จากนั้นก็เอาค่าสีที่ได้ในแต่ละแบบมากำหนดเป็นสีพื้นหลังใน Frame Layout ที่เตรียมไว้ (ขี้เกียจอธิบาย Layout)

        และจะเห็นว่ามีบางภาพที่มีสีขาวด้วย เนื่องจากเจ้าของบล็อกกำหนด Default Color เป็นสีขาว ดังนั้นบางภาพที่ดึงค่าสีในแต่ละแบบไม่ได้ ก็จะแสดงเป็นสีขาวแทน

     
        ทีนี้เวลาใช้งานกันก็มักจะเอาไปทำเป็นแถบ Title ที่มีสีเข้ากับภาพหลัก แต่ทว่าเจ้าของบล็อกแนะนำให้ใช้สีแบบ Dark Vibrant แทน เพื่อไม่ให้สีที่แถบ Title นั้นเด่นหรือกลมกลืนกับภาพหลักจนเกินไป


private TextView tvHeader1;
private TextView tvHeader2;
private TextView tvHeader3;
private TextView tvHeader4;

tvHeader1 = (TextView) findViewById(R.id.tv_header1);
tvHeader2 = (TextView) findViewById(R.id.tv_header2);
tvHeader3 = (TextView) findViewById(R.id.tv_header3);
tvHeader4 = (TextView) findViewById(R.id.tv_header4);

tvHeader1.setBackgroundColor(palette1.getDarkVibrantColor(Color.WHITE));
tvHeader2.setBackgroundColor(palette2.getDarkVibrantColor(Color.WHITE));
tvHeader3.setBackgroundColor(palette3.getDarkVibrantColor(Color.WHITE));
tvHeader4.setBackgroundColor(palette4.getDarkVibrantColor(Color.WHITE));


Swatch

        คลาส Swatch เป็นคลาสที่มีไว้เก็บค่าชุดสีเพื่อใช้งานใน Palette

Palette palette = getPaletteFromSomewhere;
Palette.Swatch swatch = palette.getLightVibrantSwatch();
int bodyTextColor = swatch.getBodyTextColor();
int titleTextColor = swatch.getTitleTextColor();
float[] hsl = swatch.getHsl();
int rgb = swatch.getRgb();
int population = swatch.getPopulation();

        ยกตัวอย่างเช่นดึง Swatch ของ Light Vibrant จาก Palette ออกมา

        โดยที่คลาสตัวนี้เก็บค่าสีทั้งแบบ HSL และ RGB และเก็บค่าสีของตัวหนังสือที่เหมาะสมกับสีใน Palette นั้นๆ

        เหมาะสมกับสีใน Palette นั้นๆ? 

        ใช่ครับ ค่าสี Vibrant หรือ Muted ที่เก็บไว้ใน Instance นั้นๆ จะสามารถดึง Instance ของคลาส Swatch มาได้ โดยที่ใน Swatch ก็จะมีค่าสีสำหรับใช้กำหนดในข้อความให้ด้วย เพื่อช่วยให้สีของข้อความและพื้นหลังตัดกันและเห็นได้ชัดเจน โดยแบ่งออกเป็นหัวข้อเนื้อหา (Title) และตัวเนื้อหา (Body) ด้วยคำสั่ง getBodyTextColor และ getTitleTextColor


        สำหรับค่า rgb ก็จะเป็น Color Integer ของ Palette นั้นๆที่สามารถเอาไปใช้งานได้เลย โดยที่

Palette palette = getPaletteFromSomewhere;
Palette.Swatch swatch = palette.getVibrantSwatch();
int color1 = palette.getDarkMutedColor();
int color2 = swatch.getRgb();

        color1 และ color2 มีค่าเท่ากันนะครับ ดังนั้นถ้าจะใช้แค่สีหลักก็ไม่จำเป็นต้องดึงค่า Swatch ก็ได้

        สำหรับ HSL เป็นรูปแบบค่าสีอีกแบบที่ต่างไปจาก RGB โดยจะประกอบไปด้วยค่า Hue, Saturation และ Lightness โดยค่าที่ได้จะเป็น Float Array ที่ประกอบไปด้วยสมาชิก 3 ตัวดังนี้

Palette palette = getPaletteFromSomewhere;
Palette.Swatch swatch = palette.getVibrantSwatch();
float[] hsl = swatch.getHsl();
int hue = hsl[0];
int saturation = hsl[1];
int lightness = hsl[2];

        โดยค่าของแต่ละตัวจะอยู่ระหว่าง 0 ถึง 360

        ส่วน Population จะเป็นจำนวนพิกเซลในภาพที่มีค่าสีตรงกับสีหลักใน Swatch นั้นๆ


สรุป

        Palette และ Swatch ถือว่าเป็นคลาสเพิ่มเติมที่จะช่วยให้ผู้ที่หลงเข้ามาอ่านสามารถสร้างสีสันให้กับแอพได้มากขึ้น เพราะค่าสีที่ได้จาก Palette จะไม่ตายตัว แต่จะขึ้นอยู่กับ Bitmap ที่เอามาใช้งาน ดังนั้นการใช้งาน Palette และ Swatch นั้นจะเหมาะกับการแสดงเนื้อหาประกอบกับภาพใดๆเป็นหลัก    

        และสรุปโค๊ดให้ดูคร่าวๆของบทความนี้ก็จะเป็นแบบนี้แทน

MainActivity.java
package com.akexorcist.palette;

import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.support.v7.graphics.Palette;
import android.util.Log;
import android.widget.FrameLayout;
import android.widget.TextView;

public class MainActivity extends ActionBarActivity {
    private FrameLayout layoutLightMuted1;
    private FrameLayout layoutLightMuted2;
    private FrameLayout layoutLightMuted3;
    private FrameLayout layoutLightMuted4;

    private FrameLayout layoutMuted1;
    private FrameLayout layoutMuted2;
    private FrameLayout layoutMuted3;
    private FrameLayout layoutMuted4;

    private FrameLayout layoutDarkMuted1;
    private FrameLayout layoutDarkMuted2;
    private FrameLayout layoutDarkMuted3;
    private FrameLayout layoutDarkMuted4;

    private FrameLayout layoutLightVibrant1;
    private FrameLayout layoutLightVibrant2;
    private FrameLayout layoutLightVibrant3;
    private FrameLayout layoutLightVibrant4;

    private FrameLayout layoutVibrant1;
    private FrameLayout layoutVibrant2;
    private FrameLayout layoutVibrant3;
    private FrameLayout layoutVibrant4;

    private FrameLayout layoutDarkVibrant1;
    private FrameLayout layoutDarkVibrant2;
    private FrameLayout layoutDarkVibrant3;
    private FrameLayout layoutDarkVibrant4;

    private TextView tvHeader1;
    private TextView tvHeader2;
    private TextView tvHeader3;
    private TextView tvHeader4;

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

        initialWidget();
        generatePalette();
    }

    private void initialWidget() {
        layoutLightVibrant1 = (FrameLayout) findViewById(R.id.layout_light_vibrant1);
        layoutLightVibrant2 = (FrameLayout) findViewById(R.id.layout_light_vibrant2);
        layoutLightVibrant3 = (FrameLayout) findViewById(R.id.layout_light_vibrant3);
        layoutLightVibrant4 = (FrameLayout) findViewById(R.id.layout_light_vibrant4);

        layoutVibrant1 = (FrameLayout) findViewById(R.id.layout_vibrant1);
        layoutVibrant2 = (FrameLayout) findViewById(R.id.layout_vibrant2);
        layoutVibrant3 = (FrameLayout) findViewById(R.id.layout_vibrant3);
        layoutVibrant4 = (FrameLayout) findViewById(R.id.layout_vibrant4);

        layoutDarkVibrant1 = (FrameLayout) findViewById(R.id.layout_dark_vibrant1);
        layoutDarkVibrant2 = (FrameLayout) findViewById(R.id.layout_dark_vibrant2);
        layoutDarkVibrant3 = (FrameLayout) findViewById(R.id.layout_dark_vibrant3);
        layoutDarkVibrant4 = (FrameLayout) findViewById(R.id.layout_dark_vibrant4);

        layoutLightMuted1 = (FrameLayout) findViewById(R.id.layout_light_muted1);
        layoutLightMuted2 = (FrameLayout) findViewById(R.id.layout_light_muted2);
        layoutLightMuted3 = (FrameLayout) findViewById(R.id.layout_light_muted3);
        layoutLightMuted4 = (FrameLayout) findViewById(R.id.layout_light_muted4);

        layoutMuted1 = (FrameLayout) findViewById(R.id.layout_muted1);
        layoutMuted2 = (FrameLayout) findViewById(R.id.layout_muted2);
        layoutMuted3 = (FrameLayout) findViewById(R.id.layout_muted3);
        layoutMuted4 = (FrameLayout) findViewById(R.id.layout_muted4);

        layoutDarkMuted1 = (FrameLayout) findViewById(R.id.layout_dark_muted1);
        layoutDarkMuted2 = (FrameLayout) findViewById(R.id.layout_dark_muted2);
        layoutDarkMuted3 = (FrameLayout) findViewById(R.id.layout_dark_muted3);
        layoutDarkMuted4 = (FrameLayout) findViewById(R.id.layout_dark_muted4);

        tvHeader1 = (TextView) findViewById(R.id.tv_header1);
        tvHeader2 = (TextView) findViewById(R.id.tv_header2);
        tvHeader3 = (TextView) findViewById(R.id.tv_header3);
        tvHeader4 = (TextView) findViewById(R.id.tv_header4);
    }

    private void generatePalette() {
        Bitmap bitmap1 = BitmapFactory.decodeResource(getResources(), R.drawable.photo_001);
        Bitmap bitmap2 = BitmapFactory.decodeResource(getResources(), R.drawable.photo_002);
        Bitmap bitmap3 = BitmapFactory.decodeResource(getResources(), R.drawable.photo_003);
        Bitmap bitmap4 = BitmapFactory.decodeResource(getResources(), R.drawable.photo_004);

        Palette.generateAsync(bitmap1, new Palette.PaletteAsyncListener() {
            public void onGenerated(Palette p) {
                layoutLightVibrant1.setBackgroundColor(p.getLightVibrantColor(Color.WHITE));
                layoutVibrant1.setBackgroundColor(p.getVibrantColor(Color.WHITE));
                layoutDarkVibrant1.setBackgroundColor(p.getDarkVibrantColor(Color.WHITE));
                layoutLightMuted1.setBackgroundColor(p.getLightMutedColor(Color.WHITE));
                layoutMuted1.setBackgroundColor(p.getMutedColor(Color.WHITE));
                layoutDarkMuted1.setBackgroundColor(p.getDarkMutedColor(Color.WHITE));
                tvHeader1.setBackgroundColor(p.getDarkVibrantColor(Color.WHITE));

                Palette.Swatch swatch = p.getDarkVibrantSwatch();
                tvHeader1.setTextColor(swatch.getTitleTextColor());
            }
        });

        Palette.generateAsync(bitmap2, new Palette.PaletteAsyncListener() {
            public void onGenerated(Palette p) {
                layoutLightVibrant2.setBackgroundColor(p.getLightVibrantColor(Color.WHITE));
                layoutVibrant2.setBackgroundColor(p.getVibrantColor(Color.WHITE));
                layoutDarkVibrant2.setBackgroundColor(p.getDarkVibrantColor(Color.WHITE));
                layoutLightMuted2.setBackgroundColor(p.getLightMutedColor(Color.WHITE));
                layoutMuted2.setBackgroundColor(p.getMutedColor(Color.WHITE));
                layoutDarkMuted2.setBackgroundColor(p.getDarkMutedColor(Color.WHITE));
                tvHeader2.setBackgroundColor(p.getDarkVibrantColor(Color.WHITE));

                Palette.Swatch swatch = p.getDarkVibrantSwatch();
                tvHeader2.setTextColor(swatch.getTitleTextColor());
            }
        });

        Palette.generateAsync(bitmap3, new Palette.PaletteAsyncListener() {
            public void onGenerated(Palette p) {
                layoutLightVibrant3.setBackgroundColor(p.getLightVibrantColor(Color.WHITE));
                layoutVibrant3.setBackgroundColor(p.getVibrantColor(Color.WHITE));
                layoutDarkVibrant3.setBackgroundColor(p.getDarkVibrantColor(Color.WHITE));
                layoutLightMuted3.setBackgroundColor(p.getLightMutedColor(Color.WHITE));
                layoutMuted3.setBackgroundColor(p.getMutedColor(Color.WHITE));
                layoutDarkMuted3.setBackgroundColor(p.getDarkMutedColor(Color.WHITE));
                tvHeader3.setBackgroundColor(p.getDarkVibrantColor(Color.WHITE));

                Palette.Swatch swatch = p.getDarkVibrantSwatch();
                tvHeader3.setTextColor(swatch.getTitleTextColor());
            }
        });

        Palette.generateAsync(bitmap4, new Palette.PaletteAsyncListener() {
            public void onGenerated(Palette p) {
                layoutLightVibrant4.setBackgroundColor(p.getLightVibrantColor(Color.WHITE));
                layoutVibrant4.setBackgroundColor(p.getVibrantColor(Color.WHITE));
                layoutDarkVibrant4.setBackgroundColor(p.getDarkVibrantColor(Color.WHITE));
                layoutLightMuted4.setBackgroundColor(p.getLightMutedColor(Color.WHITE));
                layoutMuted4.setBackgroundColor(p.getMutedColor(Color.WHITE));
                layoutDarkMuted4.setBackgroundColor(p.getDarkMutedColor(Color.WHITE));
                tvHeader4.setBackgroundColor(p.getDarkVibrantColor(Color.WHITE));

                Palette.Swatch swatch = p.getDarkVibrantSwatch();
                tvHeader4.setTextColor(swatch.getTitleTextColor());
            }
        });
    }
}

        โดยเจ้าของบล็อกใช้ Asynchronous แทน และสำหรับ Bitmap ที่นำมาใช้ในตัวอย่างนี้เจ้าของบล็อกไม่แนะนำวิธีแบบนี้นะครับ เจ้าของบล็อกใช้วิธีนี้เพื่อรวบรัดคำสั่งให้ดูสั้นๆ เพราะจะโฟกัสไปที่การใช้งาน Palette กับ Swatch ซึ่งการเรียก Bitmap แบบนี้จะมีข้อเสียคือถ้าภาพใหญ่และเยอะจะทำให้แอพค้างไปชั่วขณะระหว่างโหลดได้ เพราะมันทำงานแบบ Synchronous ดังนั้นในการใช้งานจริงๆควรใช้วิธีดึง Bitmap แบบอื่นแทนนะครับ

        และภาพที่ใช้ในบทความนี้ก็เก็บไว้แค่ที่ drawble-xhdpi เท่านั้น ถ้าจะให้ดีก็ควรทำ Multiple Size แยกเก็บตามโฟลเดอร์อื่นๆด้วย


        สำหรับโค๊ดตัวอย่างในบทความนี้สามารถดาวน์โหลดได้จาก

        • Google Drive
        • Sleeping for Less

มาเพิ่มสีสันให้กับแอพกันเถอะ~





เหล่าพันธมิตรแอนดรอยด์

Devahoy Layer Net NuuNeoI The Cheese Factory Somkiat CC Mart Routine Artit-K Arnondora Kamonway Try to be android developer Oatrice Benz Nest Studios Kotchaphan@Medium Jirawatee@Medium Travispea@Medium