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

เขียนแอพ 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 กันได้บ้างนะครับ

Comments

daydevthailand@gmail.com

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

Review overview
NO COMMENTS

Sorry, the comment form is closed at this time.

%d bloggers like this: