สร้างโปรเจ็ค Android ให้รับรอง Material Design

บทความนี้เป็นการทดลองเล่นๆของผมเองครับ เนื่องจากว่าตั้งแต่ Android ออก Material Design มาตั้งแต่ปีที่แล้ว ส่วนตัวยังไม่ได้เขียนหรือพัฒนาแอพอะไรให้มันลองรับหรือได้ใช้งานเลยซักอย่าง ตั้งแต่เขียน Android L Developer Preview : ทดลองเล่น RecyclerView ก็ไม่ได้แตะอีกเลย เครื่องจริงรองรับ Lollipop ก็ไม่มี Emulator ขี้เกียจเปิด :) วันนี้ว่างๆ ก็เลยนั่งลองสร้างโปรเจ็คแบบ Material ดูว่ามันยากหรือไม่ และสามารถรอบรับกับเวอร์ชันก่อน Lollipop ได้หรือไม่ ปรากฎว่าไม่มีปัญหา เพียงแค่บาง feature อาจจะไม่รองรับเท่านั้นเอง

Step 1 : Create Project

ขั้นตอนการสร้างโปรเจ็คแบบ Material ขั้นแรกเลยก็สร้างโปรเจ็คขึ้นมาก่อน เลือก API 21 ไปเลย เพื่อจะให้รองรับ Material

จริงๆตอนหลังผมจะปรับลดเหลือ minSDK14 เพื่อให้รองรับเวอร์ชันต่ำด้วย แต่ตอนนี้เลือกไป่ก่อนครับ :)

Step 2 : Add Dependency

ทำการเพิ่ม dependencies appcompat ลงไป โดยการเปิดไฟล์ build.gradle ของโมดูล app

1
dependencies {
2
    compile 'com.android.support:appcompat-v7:21.0.+'
3
}

จากนั้นทำการกด Sync Project with gradle file หรือ Sync now

Step 3 : Material Theme

จะเห็นว่าที่โฟลเดอร์ resource res จะมีโฟลเดอร์ values 2 ตัวคือ

• values : สำหรับ SDK ที่เวอร์ชันต่ำกว่า 21
• values-v21 : สำหรับ SDK เวอร์ชัน 21 (Lollipop)

ทำการเปิดไฟล์ values-v21/styles.xml จะเห็นโครงสร้างไฟล์ดังนี้

1
<?xml version="1.0" encoding="utf-8"?>
2
<resources>
3
    <style name="AppTheme" parent="android:Theme.Material">
4

5
    </style>
6
</resources>

สังเกตที่ parent เราสามารถเลือกได้หลายแบบ เช่น

• android:Theme.Material : สำหรับเวอร์ชัน Dark
• android:Theme.Material.Light : สำหรับเวอร์ชัน Light
• android:Theme.Material.Light.DarkActionBar : เวอร์ชัน Light แต่ actionbar เป็น Dark เป็นต้น

รูปภาพแสดง Theme Dark และ Light ของ Material

Step 4 : Custom Theme/Color

ต่อมามารู้จักกับส่วนต่างๆของ Status Bar กันครับ โดยดูจากรูปด้านล่างได้เลย มีอธิบายว่า แต่ละส่วนเรียกว่าอะไร และเราสามารถที่จะปรับเปลี่ยนสีได้ตามชื่อเรียกเลย

จากรูปด้านบน เราจะเห็นส่วนประกอบต่างๆ โดยเราสามารถที่จะ custom ได้ตามที่เราต้องการ เช่น เปิดไฟล์เดิม values-v21/styles.xml

1
<?xml version="1.0" encoding="utf-8"?>
2
<resources>
3
    <style name="AppTheme" parent="android:Theme.Material.Light">
4

5
        <item name="android:colorPrimary">@color/primary</item>
6
        <item name="android:colorPrimaryDark">@color/primary_dark</item>
7
        <item name="android:colorAccent">@color/accent</item>
8
        <item name="android:textColorPrimary">@color/text</item>
9

10
    </style>
11
</resources>

และผมทำการสร้างไฟล์ values/colors.xml ดังนี้

1
<?xml version="1.0" encoding="utf-8"?>
2
<resources>
3
    <!-- Color : http://www.materialpalette.com/deep-orange/blue-grey -->
4
    <color name="primary">#FF5722</color>
5
    <color name="primary_dark">#E64A19</color>
6
    <color name="primary_light">#FFCCBC</color>
7
    <color name="accent">#9E9E9E</color>
8
    <color name="primary_text">#212121</color>
9
    <color name="secondary_text">#727272</color>
10
    <color name="text">#FFFFFF</color>
11
    <color name="divider">#B6B6B6</color>
12
</resources>

Step 5 : รองรับเวอร์ชันตำกว่า Lollipop

ให้ทำการสร้างไฟล์ styles.xml ไว้ในโฟลเดอร์ res/values โดยมีรูปแบบเหมือนกับ Material Theme ในไฟล์ res/values-v21/styles.xml

1
<resources>
2
    <style name="AppTheme" parent="Android:Theme:Holo">
3
        <item name="colorPrimary">@color/primary</item>
4
        <item name="colorPrimaryDark">@color/primary_dark</item>
5
        <item name="colorAccent">@color/accent</item>
6
    </style>
7
</resources>

สิ่งที่ต่างกันคือ ไม่มี prefix android: ซึ่งใช้เฉพาะ Theme Material

จากนั้นเปลี่ยนเลขเวอร์ชัน min SDK เป็น 14 ใน build.gradle

1
android {
2
    ...
3
    defaultConfig {
4
        minSdkVersion 14
5
    }
6
}

หากว่าเราใช้ Material Theme แต่ว่าไม่ได้เตรียมพวกไฟล์ values ไว้ให้สำหรับเวอร์ชันที่่ตำกว่า ตัวแอพจะไม่สามารถรันได้ จะรันได้เฉพาะ Lollipop เท่านั้น

Step 6 : Animations

สำหรับ Android 5.0 มี APIs ตัวใหม่สำหรับทำ custom animation ด้วย อย่างเช่น activity transitions เป็นอนิเมชันขณะที่เราเปิด/เปลี่ยน activity อย่างเช่น

1
Intent intent = new Intent(getApplicationContext(),
2
        SecondActivity.class);
3
startActivity(intent,
4
            ActivityOptions
5
                .makeSceneTransitionAnimation(MainActivity.this).toBundle());

แต่ถ้าหากเราทำเพื่อรองรับเวอร์ชันเก่าๆด้วย ก็ต้องทำการเช็คเวอร์ชันก่อน เพราะมันใช้ได้เฉพาะ 5.0 ถ้าเป็นเวอร์ชันต่ำ ก็ให้ startActivity() แบบปกติไม่ต้องมี transition อะไร

1
Intent intent = new Intent(getApplicationContext(),
2
        SecondActivity.class);
3
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
4
    startActivity(intent,
5
            ActivityOptions
6
                .makeSceneTransitionAnimation(MainActivity.this).toBundle());
7
} else {
8
    startActivity(intent);
9
}

สรุป

ช่วงที่ผมทดสอบ เวลารันบน Android 5.0 โดยใช้ Material Theme ตัว Activity มันใช้ extends Activity แต่เวลาที่ผมลองเปลี่ยน Material Theme ในไฟล์ values/styles.xml ไปใช้ Theme.Appcomt ปรากฎว่า actionbar ไม่แสดง ต้องใช้ extends ActionBarActivity สรุปไม่รู้ถูกหรือผิด :) ว่า

• ใช้ Theme.Material ร่วมกับ Activity ธรรมดา
• ใช้ Theme.AppCompat ร่วมกับ ActionBarActivity
• ใช้ Theme.Mateiral ร่วมกับ ActionBarActivity ไม่ได้
• ใช้ Theme.AppCompat ใน values-v21 และใช้ ActionBarActivity ก็รัน Material ได้

สุดท้ายลองไปเล่นกันดูครับ ส่วนตัวผมก็ได้ลองเล่นแบบพื้นฐานๆ หากใครมีอะไรเจ๋งๆ มาแชร์กันได้นะครับ :)

Reference

• Android Material