Android DeveloperDeveloperFeatured

เขียนแอพ Android แต่ง UI ToolBar ด้วย Material Design

Android มี Material Design และ CardView ให้เราได้ใช้งานในการออกแบบ UI แล้วทีนี้ก็มาเรื่องของการดีไซน์ UI ด้วย Icon บน Toolbar ครับแบบสวยเรียสะอาดตา

บทความที่ควรศึกษาก่อนหน้านี้

หรือหมวดหมู่สำหรับนักพัฒนาแอพพลิเคชันบน Android

http://www.daydev.com/category/developer/android-developer

เราอาจจะหยิบตัวอย่างจาก 2 บทก่อนมาใช้งานดูก่อนก็ได้ครับ โดยบทเรียนนี้จะเป็นการออกแบบ icon บน ToolBar ครับ

เราสามารถไปหา Icon สำหรับทำ Action Bar หรือ Tab Bar ที่เป็นแบบ Material Design ได้จากเว็บไซต์ https://www.google.com/design/icons/

ผมต้องการทำไอคอน ค้นหา สมาชิก และ Side Menu ครับ ให้ไปเลือกไอคอนมาใช้งานเลย

เวลาจะนำเข้าใน Project ให้คลิกขวาที่ res ครับเลือก Image Asset ตามรูปข้างล่าง

Screen Shot 2558-09-05 at 9.37.48 PM

เราจะเจอหน้าจอ  Import ให้เราทำ 3 สะเตปคือเลือกเป็น Tab Bar Icon หาไฟล์ของเราที่เราเซฟไว้ในเครื่องคอม แล้วสุดท้ายคือการเปลี่ยนชื่อให้เราเรียกใช้สะดวกๆ

Screen Shot 2558-09-05 at 9.40.26 PM

เปิดไฟล์ res->menu->menu_main.xml ครับ แก้ไขตามนี้

ทดสอบเราก็จะได้ icon เป็นแว่นขยายปรากฏบน Tool Bar ของเราแล้วครับเอาไปเขียนร่วมกับ Intent Activity ได้เรียบร้อยเลย

Screenshot_2015-09-05-21-48-42

หวังว่าคงจะช่วยเหลือคนที่ต้องออกแบบ UI กันได้บ้างนะครับ

Tags

Asst. Prof. Banyapon Poolsawas

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

Related Articles

Back to top button
Close
Close

Adblock Detected

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