Android Custom Toolbar

คับ วันนี้ผมจะมาทำการสร้าง Toolbar ของ Application ของผมเองนะคับ คือปกติ App ของเรานั้นจะมี Toolbar อยู่แล้วใช่ไมครับ แต่มันยังไม่ถูกใจสำหรับเรา Blog นี้ก็จะมาลองทำ Toolbar ที่เราสร้างขึ้นมาเองคับ อย่างแรกจะให้ดูว่า Toolbar หรือ Actionbar ของเราค่าเริ่มต้นมันเป็นยังไง

รูปข้างบนคือรูปของ Toolbar ที่ทาง Android Studio ตั้งค่า Default มาให้ ถ้าเราอยากทำเองบ้างละจะทำยังไง เดียวผมจะเริ่มจากขั้นตอนแรกก็คือเราต้องไปเพิ่ม Library ใน Gradle ของ Module App ก่อนนะคับ

compile 'com.android.support:design:26.1.0'

นี้คือ lib ที่เราจะใช้กันนะคับ เพิ่มเข้าไปเลย ใน module app นะคับ และต่อไปเข้าไปใน AndroidManifest

เข้าไปก็จะเห็นคำว่า theme

เราสามารถ กด Ctrl ค้างไว้และ Click เข้าไปใน “@style/AppTheme” เพื่อเราจะไปปิด Toolbar ของ App ได้

โดย Default ของ App จะตั้งมาเป็น DarkActionBar หรือ LightActionBar ก็ตามให้เราเปลี่ยนให้มันเป็น “NoActionBar” คับ

เท่านี้ App เราก็จะไม่มี Toolbar หรือ ActionBar แล้ว และลอง Run ใหม่ดูคับ
Toolbar เราจะหายไปแล้วคับ

ต่อเราก็จะไปเริ่มสร้าง layout ใหม่กันคับ layout นี้สำหรับ Toolbar โดยเฉพาะคับ
ให้ไปสร้างที่ res/layout นะคับ

ตั้งชื่อตามที่ต้องการคับ

เสร็จแล้วก็จะได้ไฟล์ xml หน้าเปล่าๆ มา 1 ไฟล์

ถึงขั้นตอนนี้เราก็จะเริ่มการเขียน Toolbar กันแล้วนะคับ โดยผมจะทำทีเดียวให้เสร็จเลยนะคับ

เสร็จแล้วหน้าตาจะออกมาเป็นแบบนี้คับ

ต่อไปก็การเรียกใช้งานของ Toolbar ใน main_activity คับ และ เรียกใช้โดยใช้คำสั่ง include คับ

ยังไม่เสร็จนะคับ เราต้องที่ MainActivity.kt ก่อน เพื่อลง code เรียกใช้งานอีกที

รูปภาพข้างบนก็จะเป็นการเรียกใช้ Toolbar ที่เราสร้างขึ้นมาคับ หน้าตาที่ได้ก็จะเป็นแบบนี้

ก็เสร็จแล้วนะคับสำหรับการ Custom Toolbar สำหรับ Style ที่ชอบ ยังไงก็ขอลาไปก่อนขอบคุณคับ ^^