[Dev] ทำ Hamburger Icon Animation บน Action Bar กับ Navigation Drawer ง่าย ๆ ไม่ต้องใช้ตัวช่วย

ตั้งแต่ Google ได้เปิดตัว Android 5.0 Lollipop และ Material Design ออกมา จะเห็นว่า App ของ Google ส่วนใหญ่ จะใช้ Hamburger icon (ไอค่อนรูปขีด 3 ขีด) และมีการทำ Animation กับ Icon บน Action Bar เมื่อมีการลาก Navigation Drawer ออกมาจากด้านข้าง

Hamburger-Icon-Animation-Logo

ซึ่งก็มี Developer ทำ Library ออกมาให้ใช้งานกันมากมาย ไม่ว่าจะเป็น LDrawer, DrawerArrowDrawable หรือ Material Menu แต่ว่า… ใน Support Library ของ Google เอง ก็มีให้ใช้งานอยู่แล้ว

เรามาดูกันว่า จะทำ Animation แบบนี้ ด้วย Support Library ได้อย่างไร…

สำหรับใครที่นึกไม่ออกว่า Animation เป็นแบบไหน ดูรูปตัวอย่างนี้ครับ

ตัวอย่าง Hamburger Icon Animation
ตัวอย่าง Hamburger Icon Animation

รูปจาก https://github.com/ChrisRenke/DrawerArrowDrawable

 

บทความนี้จะใช้ Android Studio 1.1 Stable แต่ได้ทดสอบกับ Android Studio 1.2 Preview 3 แล้ว ให้ผลเหมือนกัน

 

List of contents

 

Create new project with Navigation Drawer Activity

ก่อนอื่นก็… สร้าง Project ใหม่บน Android Studio…

Android Studio Welcome Screen
Android Studio Welcome Screen
Create New Project Dialog
Create New Project Dialog

เลือก Minimum SDK เป็น API 14 (หรือ API ที่ต่ำกว่า 21) เพื่อให้ Project ที่สร้าง เรียกใช้งาน Support AppCompat v7 ด้วย

Create New Project Dialog
Create New Project Dialog

แล้วเลือก Navigation Drawer Activity

Create New Project Dialog
Create New Project Dialog

กำหนดชื่อต่าง ๆ ให้เรียบร้อย

Create New Project Dialog
Create New Project Dialog

รอสักครู่ ให้ Android Studio ทำการสร้าง Project และรอ Sync Gradle ให้เรียบร้อย สังเกตุที่ build.gradle ของ Module app ว่ามีการใช้งาน Dependencies Support AppCompat v7 แล้วหรือยัง

เรียบร้อยแล้ว รันเลยคร๊าบบบบบบ รันเลยยยยยยย…

รูปด้านล่าง ผมทดสอบบน Android 5.0 และ 4.3 สำหรับ Version ก่อน 5.0 นั้น สามารถแสดงผล Action Bar แบบ Material ได้เพราะใช้ Theme Material จาก Support AppCompat v7 นั่นเอง แต่จะแสดงผล Hamburger icon ต่างกันเล็กน้อยตอนลาก Navigation Drawer ออกมา Icon จะเลื่อนตำแหน่งไปทางซ้ายนิดนึง แบบเดียวกับที่ใช้บน Theme Holo

Hamburger icon บน Action Bar ทดสอบบน Android 5.0
Hamburger icon บน Action Bar ทดสอบบน Android 5.0
Hamburger icon บน Action Bar ทดสอบบน Android 4.3
Hamburger icon บน Action Bar ทดสอบบน Android 4.3

จะเห็นว่า ได้ Hamburger icon มาแล้วววววววว… จบ…………….

เฮ้ย~!! เด๋วนะ.. อย่าเพิ่งด่าพ๊มมมม มีต่อ ๆๆๆๆ

จะเห็นว่า Hamburger icon นั้น มันดูสั้น ๆ แล้วเวลาลาก Navigation Drawer ออกมา (หรือแตะที่ Icon) ก็ไม่เห็นจะมี Animation อะไรเลย…

ก็เพราะว่า Template ที่ Android Studio ที่สร้างมาให้นั้น ยังใช้ Class ActionBarDrawerToggle จาก Support Library v4 อยู่ ซึ่ง Deprecated ไปแล้ว

ที่มี Support Library v4 มาให้ เพราะ Support AppCompat v7 ใช้งานมันอยู่ด้วย Gradle มันก็ดูดมาให้ด้วย สบ๊ายยยยย Eclipse+ADT ทำอะไรแบบนี้ไม่ได้นะ

Class ActionBarDrawerToggle จาก Support Library v4
Class ActionBarDrawerToggle จาก Support Library v4

ตรงนี้ผมแอบผิดหวังเล็กน้อย เห็นจุดนี้มาตั้งแต่ก่อน Android Studio 1.0 ออก และคิดว่าจะแก้ไขให้ใน Version ต่อ ๆ ไป จนถึงตอนนี้ Android Studio 1.2 Preview 3 แล้ว ก็ยังไม่แก้ไข

ถ้าลองไปส่องดูใน Android Developer Reference ในส่วนของ ActionBarDrawerToggle จาก Support Library v4 นั้น แจ้งไว้เช่นกันว่า Deprecated แล้วเช่นกัน แต่มีคำแนะนำให้เปลี่ยนไปใช้ ActionBarDrawerToggle จาก Support AppCompat v7 แทน

ActionBarDrawerToggle Class จาก Support Library v4
ActionBarDrawerToggle Class จาก Support Library v4
ActionBarDrawerToggle Class จาก Support AppCompat v7
ActionBarDrawerToggle Class จาก Support AppCompat v7

 

Update ActionBarDrawerToggle Class

สำหรับการเปลี่ยนไปใช้ ActionBarDrawerToggle จาก Support AppCompat v7 ให้เปิดไฟล์ NavigationDrawerFragment.java ขึ้นมา แล้วเปลี่ยนตรง Import จาก v4 เป็น v7 ดังนี้

เมื่อเปลี่ยนไปใช้ ActionBarDrawerToggle จาก Support AppCompat v7 แล้ว จะพบ Error ดังรูปด้านล่าง ฟ้องว่า Parameter ตัวที่ 3 ไม่ถูกต้อง เนื่องจาก Parameter ตัวที่ 3 ต้องการ Toolbar แต่ของเดิมเป็น Resource ID ของ Drawable รูป

Error ที่ Constructor ของ ActionBarDrawerToggle
Error ที่ Constructor ของ ActionBarDrawerToggle

แต่ Constructor ของ ActionBarDrawerToggle นั้น มีให้ใช้งาน 2 Overloads กรณีไม่ได้ใช้ Toolbar สามารถใช้ Overload แรกได้ ก็จะเหลือ Parameter ที่ต้องใส่แค่ 4 ตัว

Constructor ของ ActionBarDrawerToggle
Constructor ของ ActionBarDrawerToggle

และในเมื่อ ic_drawer ไม่ใช้งานแล้ว จะรออะไรล่ะ ลบทิ้งโลดดดดดด…

Project Explorer มุมมอง Android
Project Explorer มุมมอง Android

เสร็จแล้วววววววว รันดูเลยยยยยย

Hamburger icon animation บน Action Bar ทดสอบบน Android 5.0
Hamburger icon animation บน Action Bar ทดสอบบน Android 5.0
Hamburger icon animation บน Action Bar ทดสอบบน Android 4.3
Hamburger icon animation บน Action Bar ทดสอบบน Android 4.3

จะเห็นว่า ทั้งบน Android 5.0 และ 4.3 สามารถแสดง Animation ที่ Hamburger icon ได้แล้วววว และแสดงผลเหมือนกันเป๊ะ ๆ เลย

 

ActionBarDrawerToggle with Toolbar

สำหรับการใช้งานกับ Toolbar นั้น จะเห็นในหัวข้อที่แล้วว่า ใน Constructor ของ ActionBarDrawerToggle นั้น มีอีก Overload นึง ที่สามารถกำหนด Toolbar ได้

บทความนี้ไม่สอนสร้าง Toolbar นะ ใครยังไม่รู้จัก Toolbar แนะนำให้อ่าน Blog ของ Layer NET ตอน มาทำความรู้จักกับ Android Toolbar ก่อนนะครับ

ก็เพียงแค่ประกาศตัวแปร Toolbar แล้วทำการอ้างอิงไปยัง Toolbar Widget ที่อยู่ใน Layout ของเรา ดังนี้

แล้วไปกำหนดให้กับ ActionBarDrawerToggle ดังนี้

เสร็จแล้วววววววววว ง่ายใช่ไม๊ล่ะครับ~!!

 

สำหรับบทความนี้ สามารถไปดู Source Code ได้ที่ GitHub นะครับ

Leave a Reply

Your email address will not be published. Required fields are marked *

 

This site uses Akismet to reduce spam. Learn how your comment data is processed.