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

เขียนแอพ 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 ครับ

ต่อมาสร้างไฟล์ชุดสีของเราครับ คือ 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 ข้างบนครับ

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

เป็น

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

Screen Shot 2558-09-05 at 2.03.14 PM

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

 

เวลา 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 ครับ

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

Screen Shot 2558-09-05 at 2.13.19 PM

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

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

Screen Shot 2558-09-05 at 2.15.07 PM

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

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

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

Screen Shot 2558-09-05 at 2.19.07 PM

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

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

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

Comments

daydevthailand@gmail.com

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

Review overview
NO COMMENTS

Sorry, the comment form is closed at this time.