สร้างแอปสวยด้วย Material Design

หากคุณเป็นนักพัฒนาคนหนึ่งที่อยากมีแอปพลิเคชันเป็นของตนเองแต่ไม่มีดีไซเนอร์แล้วติดปัญหาการออกแบบแอปพลิเคชัน วันนี้เรามาแนะนำวิธีการทำ Material design เบื้องต้นไม่ใช่ดีไซเนอร์ก็ทำเองได้ เนื่องจากเรามีตัวช่วยอยู่เยอะมากและเราจะพาไปรู้จักตัวช่วยเหล่านั้น
การออกแบบแอปพลิเคชันนั้นประกอบด้วยดีไซน์หลายๆส่วน บทความนี้จะยกตัวอย่างส่วนที่สำคัญมาให้ครับ

เครื่องมือที่เราจะแนะนำให้รู้จักมีดังนี้

1.การเลือกสีธีม

2.การเลือกใช้ Tab bar

3.การใช้งาน Card View

4.การใช้งาน Dialog

5.การเลือกใช้ Modal bottom sheets

6.การเลือกใช้ Floating Action Button

7.การเลือกใช้ Components ทั่วไป เช่น Button, Progress Bar, Check box, Radio Button …

วิธีการเลือกสีธีม

1.เข้าไปที่เว็บ https://www.materialpalette.com
2.เลือกสี 2 สีจากนั้นเว็บจะสร้างรหัสสีให้เรา
3.กำหนดรหัสสีที่ได้ในโปรเจค เพียงเท่านี้เราก็จะได้สีหลักในแอปพลิเคชัน

Screen Shot 2559-03-27 at 12.58.26 PM

 

สังเกตว่าเราจะได้สีทั้งหมด 8 สีประกอบด้วย สีหลัก สีรอง สีที่ตัดกัน และ สีตัวหนังสือ

ให้เรากำหนดค่าสีเหล่านี้ลงไปในไฟล์ color.xml ดังนี้

Screen Shot 2559-03-27 at 1.21.37 PM

 

* การตั้งชื่อสีสำคัญมากสำหรับ 3 สีนี้ เนื่องจากระบบแอนดรอยด์ได้ทำการเลือกชื่อสีหากเปลี่ยนเป็นชื่ออื่นต้องไปจัดการที่ไฟล์ style.xml

<color name="colorPrimary">#f26d60</color>
<color name="colorPrimaryDark">#f26d60</color>
<color name="colorAccent">#f26d60</color>

 

การเลือกใช้ Tab bar

1.เลือก Tab Bar ที่เข้ากับธีม Material สามารถทำได้เองหรือเลือกใช้ Library ก็ได้

แนะนำตัวนี้เนื่องจากใช้งานง่ายและทำออกมาได้สวย https://github.com/neokree/MaterialTabs

2.ติดตั้ง Library MaterialTabs

compile 'it.neokree:MaterialTabs:0.11'

Screen Shot 2559-03-27 at 3.31.04 PM

 

การเลือกใช้ Floating Button

1.เลือกใช้ Floating Action Button ที่เข้ากับธีม Material สามารถทำได้เองหรือเลือกใช้ Library ก็ได้

แนะนำตัวนี้เนื่องจากมีลูกเล่นหลายอย่างและทำอนิเมชั่นได้สวย https://github.com/Clans/FloatingActionButton

2.ติดตั้ง Library Floating Action Button

compile 'com.github.clans:fab:1.6.2'

Screen Shot 2559-03-27 at 3.32.09 PM

การใช้งาน Card View

1.เราสามารถใช้งาน Library Google ได้โดยตรง

ติดตั้งจาก Library Google

compile 'com.android.support:cardview-v7:23.1.1'

 

วิธีการใช้งาน

<android.support.v7.widget.CardView
    android:scrollbars="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

 

โดยปกติแล้วหากต้องการ Card View ในรูปแบบอื่นเจ้าของบล็อคจะเขียน xml เพิ่มเองซึ่งทำได้ไม่ยาก

 

2.สำหรับคนที่ต้องการ Card View ที่มีความสามารถเพิ่มแต่ไม่อยากเขียนเองสามารถใช้ Library เพิ่มเติมได้

  • Gabrielemariottihttps://github.com/gabrielemariotti/cardslib นอกจากเพิ่มรูปแบบแล้วยังสามารถเชื่อมโยงกับ Library อื่นๆ ซึ่งอาจจะทำให้พัฒนาง่ายขึ้นมั้ง ( เจ้าของบล็อคยังไม่เคยลองแฮะ 😀 )

Screen Shot 2559-03-27 at 2.37.35 PM

การใช้งาน Dialog

สำหรับมือถือที่ใช้งานเป็น Android version 5.0+ จะสามาถใช้ Material theme ได้ทันที หากใช้ Android version ต่ำกว่า 5.0 ให้ใช้ Library เพิ่มเติมซึ่งจะพูดในหัวข้อสุดท้ายครับ

ตัวอย่างการใช้ Dialog

new AlertDialog.Builder(context)
    .setTitle("Title")
    .setMessage("Sub title")
    .setPositiveButton(android.R.string.yes, new DialogInterface.OnClickListener() {
        @override
        public void onClick(DialogInterface dialog, int which) { 
            // continue with confirm
        }
     })
    .setNegativeButton(android.R.string.no, new DialogInterface.OnClickListener() {
        @override
        public void onClick(DialogInterface dialog, int which) { 
            // do nothing
        }
     })
    .show();
การเลือกใช้ Modal bottom sheets

1.ใช้งานจาก Google Library โดยตรง

2.ใช้งานจาก Library อื่นๆ

Flipboard : https://github.com/Flipboard/bottomsheet

Soarcn : https://github.com/soarcn/BottomSheet

Screen Shot 2559-03-27 at 3.13.13 PM

 

การเลือกใช้ Floating Action Button

1.ใช้งานจาก Library Google โดยตรง

2.ใช้งานจาก Library อื่นๆ 

Clans : https://github.com/Clans/FloatingActionButton มีลูกเล่นหลายแบบให้เลือก

Makovkastar : https://github.com/makovkastar/FloatingActionButton ใช้งานง่าย

Screen Shot 2559-03-27 at 3.19.27 PM

 

การเลือกใช้ Components ทั่วไป

สำหรับมือถือที่เป็น Android version 5.0+ คงไม่มีปัญหาสามารถใช้งานได้ปกติ

แต่ !! สำหรับ version ที่ต่ำกว่า 5.0 ต้องมีตัวช่วยเพิ่ม ซึ่งที่เราแนะนำจะเป็น Library Material Design ในนี้จะมี components ต่างๆที่จำเป็นต้องใช้งานมากมายเช่น Button, CheckBox, Switch, ProgressBar, Dialog และอื่น

Screen Shot 2559-03-27 at 3.25.29 PM

Navasmdc : https://github.com/navasmdc/MaterialDesignLibrary

ถ้าเราเป็นนักพัฒนาที่ไม่ถนัดด้านดีไซน์ สามารถเริ่มต้นได้จากการทำตาม Guide line ที่ Google แนะนำ

สามารถเข้าไปอ่านเพิ่มได้ที่ https://www.google.com/design/spec/material-design/introduction.html

หรืออ่านเพิ่มได้ในบทความ “Material design guideline” ครับ

สรุป

เรามาแนะนำการออกแบบดีไซน์เบื้องต้นด้วย Material Design โดยใช้เครื่องมือต่างๆ

นอกจากช่วยให้แอปพลิเคชันสวยขึ้นแล้ว ยังทำให้เราเห็นไอเดียด้านดีไซต์เพิ่มขึ้นอีกด้วย

ถ้าคุณยังไม่เคยลองทำแอปแนวนี้ มาลองเริ่มต้นกันครับบ :)