Android DeveloperDeveloperFeatured

เขียนแอพ Android การปรับ UI ด้วย Material Design

หลังจากที่ Android ออกเวอร์ชัน Lollipop หรือ SDK V 21-23 ออกมานั้นก็ได้มี Material Design ออกมาให้เราได้ตกแต่ง UI แอพของเราครับ

การออกแบบของ Material Design นั้นก็สามารถไปหาดูได้ในเว็บไซต์นี้ครับ http://www.materialup.com

Material Design Android
Material Design Android

เรามาเริ่มกันดีกว่าครับ ให้เปิด Android Studio ขึ้นมาครับ ทำการ Update SDK ของ V21 ไปจนถึง 23 กันก่อนนะครับ อย่าลืมอัพเด็ตตัว Android Studio เองด้วยล่ะ สร้าง Project ใหม่ขึ้นมาเลยครับ

สร้าง Project ใหม่ขึ้นมา
สร้าง Project ใหม่ขึ้นมา
เลือก Blank Activity
เลือก Blank Activity

เมื่อสร้าง Project มาแล้วให้เราไปศึกษาทฟษฏีการออกแบบ และชุดสีสำหรับ Material Design กันก่อนนะครับ

ศึกษาที่นี่: http://www.google.co.in/design/spec/style/color.html#color-color-palette

ถ้าเล็งชุดสีที่จะใช้กันแล้วให้เราเปิด ไฟล์ res -> values -> strings.xml ขึ้นมาครับ

Screen Shot 2558-09-05 at 1.47.17 PM

ให้เราสร้างชุด String มาเตรียมไว้ก่อนคือ app_name ชื่อ MaterialDeisng ครับ ตามด้วย action ทั้งหมดคือ Setting, Search, Open และ Close ตามด้วย Navigation คือ Home ครับ

<resources>
    <string name="app_name">MaterialDesign</string>
    <string name="action_settings">Settings</string>
    <string name="action_search">Search</string>
    <string name="drawer_open">Open</string>
    <string name="drawer_close">Close</string>

    <string name="nav_item_home">Home</string>

    <!-- navigation -->
    <string-array name="nav_drawer_labels">
        <item>@string/nav_item_home</item>

    </string-array>

    <string name="title_home">Home</string>
</resources>

ต่อมาสร้างไฟล์ชุดสีของเราครับ คือ colors.xml ให้เราคลิกขวาที่ res เลือกสร้าง Values XML ขึ้นมาครับ ตามภาพ

Screen Shot 2558-09-05 at 1.51.23 PM

สร้างไฟล์ชื่อ colors.xml ครับ

Screen Shot 2558-09-05 at 1.57.21 PM

สังเกต แถบสีด้านหน้าครับ เราสามารถปรับเลือกสีได้ตรงบริเวณนั้นเลย

ส่วนนี่คือไฟล์ colors.xml ข้างบนครับ

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#ff9adc2b</color>
    <color name="colorPrimaryDark">#ff32a546</color>
    <color name="textColorPrimary">#FFFFFF</color>
    <color name="windowBackground">#FFFFFF</color>
    <color name="navigationBarColor">#ff1c4ca5</color>
    <color name="colorAccent">#ffff577e</color>
</resources>

ไปที่ res->values->styles.xml ครับแก้ไขจาก

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
    </style>

</resources>

เป็น

<resources>

    <style name="DaydevTheme" parent="MyMaterialTheme.Base">

    </style>

    <style name="MyMaterialTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

ผมตั้งชื่อธีมของผมว่า “DaydevTheme” ครับ ดังนั้นเราต้องไปที่ app -> manifests-> AndroidManiFest.xml ครับ

Screen Shot 2558-09-05 at 2.03.14 PM

แก้ส่วนของ AppTheme เป็นชื่อ ธีมของเราครับ

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.daydev.materialdesign" >

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/DaydevTheme" >
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

 

เวลา Preview ให้เลือก V 22 ครับ เปลี่ยนธีมเป็น Manifests Theme เลือกชื่อธีมของตัวเองที่สร้างไว้ครับ สังเกตตอน Preview แถบสีส่วนของ colorPrimaryDark ก็จะมาละ

Screen Shot 2558-09-05 at 2.05.14 PM

ส่วนนี้ถ้าหลายคนไม่สามารถโชว์ได้ให้เปิด gradle ขึ้นมาครับ

Screen Shot 2558-09-05 at 2.11.07 PM

เปลี่ยน version เล็กน้อยให้เป็นแบบนี้ใน build.gradle ครับ

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:22.2.0'
}

สร้าง toolbar.xml ขึ้นมาบน res->layout-> toolbar.xml ครับ

Screen Shot 2558-09-05 at 2.13.19 PM

สร้าง id ให้มันชื่อว่า toolbar ครับ โดย code ส่วนนี้

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:local="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    local:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    local:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

ลอง Preview ส่วนของ toolbar.xml

Screen Shot 2558-09-05 at 2.15.07 PM

เราสามารถนำ toolbar.xml ไปแสดงผลที่ activity_main.xml ได้โดยการ include เข้าไปครับ

<include
            android:id="@+id/toolbar"
            layout="@layout/toolbar" />

เวลาใส่ก็คือแบบนี้

<RelativeLayout 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" tools:context=".MainActivity">

    <include
        android:id="@+id/toolbar"
        layout="@layout/toolbar" />


</RelativeLayout>

Preview ก็จะเป็นแบบนี้ครับ

Screen Shot 2558-09-05 at 2.19.07 PM

เป็นตัวอย่างการใช้งาน Material Design การ include หน้า Layout 2 ตัวมาใช้ร่วมกันครับ

ตัวอย่างต่อไปจะเป็นการใช้ CareViews และ RecyclerView ที่เป็นส่วนของ ViewGroup ของ Material Design ครับ

อ่านต่อ: เขียนแอพ Android การใช้ CardView ร่วมกับ UI

Asst. Prof. Banyapon Poolsawas

อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์ ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)

Related Articles

Back to top button

Adblock Detected

เราตรวจพบว่าคุณใช้ Adblock บนบราวเซอร์ของคุณ,กรุณาปิดระบบ Adblock ก่อนเข้าอ่าน Content ของเรานะครับ, ถือว่าช่วยเหลือกัน