Android : How to show overflow in toolbar menu

สำหรับใครที่กำลังพัฒนาแอนดรอย์แอปปลิเคชัน และสร้าง Toolbar เพื่อใส่เมนูปุ่มต่างๆ ซึ่งเราจะสร้างปุ่มเมนูต่างๆที่ไฟล์ xml ภายใต้โฟลเดอร์ res->menu ซึ่งมีรูปแบบดังนี้

สมมติว่าสร้างเมนูไฟล์ชื่อ myMenu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

<item
    android:id="@+id/menu_shareapp"
    android:icon="@drawable/menu_share"
    android:title="@string/menu_shareapp"
    app:showAsAction="always"/>

</menu>

จากตัวอย่างจะได้ปุ่มเมนู share app ขึ้นมาโดยในโค้ด java file จะต้องเรียกใช้ฟังก์ชันสร้างเมนูขึ้นมาด้วย onCreateOptionsMenu() ดังตัวอย่าง

@Override
public boolean onCreateOptionsMenu(Menu menu) {
  
        getMenuInflater().inflate(R.menu.myMenu, menu);
        this.menu = menu;

        return super.onCreateOptionsMenu(menu);
}

เมื่อรันเราจะได้ปุ่มขึ้นมาบน Toolbar เป็นเมนูให้กดได้ แต่เราต้องเรียกใช้ฟังก์ชัน onOptionsItemSelected(MenuItem menuItem) เพื่อกำหนดว่ากดปุ่มแล้วจะให้ทำอะไรต่อ

แต่วันนี้เราไม่ได้มาพูดถึงการสร้างเมนู เราจะพูดถึงการสร้าง Overflow menu ( จุด 3 จุดแนวตั้งบนเมนู) ซึ่งไว้ใช้กรณีที่เรามีปุ่มเยอะมากจนล้น Toolbar วิธีการย้าย menu items ไปยัง Overflow menu ทำได้ง่ายดายเพียงกำหนด app:showAsAction=”never” เพียงเท่านี้จะมี Overflow menu เกิดขึ้นแล้ว ดังตัวอย่าง

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

<item
    android:id="@+id/menu_shareapp"
    android:icon="@drawable/menu_share"
    android:title="@string/menu_shareapp"
    app:showAsAction="never"/>

</menu>

แต่ทว่าปุ่มที่ย้ายไป จะไม่แสดงรูปไอคอน จะแสดงเพียงข้อความ Title ที่กำหนดเท่านั้น

สำหรับการแสดงไอคอนใน Overflow menu เราจะพูดถึงในตอนหน้าครับ