วิธีเปลี่ยนไอคอน Overflow Menu แบบโปรแกรมใน Android

ภาพรวม

ตัวอย่างนี้สาธิตวิธีปรับแต่ง Overflow Menu (เมนู 3 จุด) ใน Toolbar รวมถึงการเปลี่ยนไอคอน เมนู และควบคุมการแสดง/ซ่อนเมนูไอเทมแบบไดนามิก

ขั้นตอนที่ 1: สร้างโปรเจกต์ใหม่

สร้างโปรเจกต์ Android ใหม่ใน Android Studio

ขั้นตอนที่ 2: จัดทำ Layout (activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </android.support.v7.widget.Toolbar>
</LinearLayout>

ขั้นตอนที่ 3: สร้าง Menu Resource (res/menu/mymenu.xml)

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/option1"
        android:orderInCategory="1"
        android:title="Bluetooth"
        android:icon="@drawable/ic_bluetooth"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/option2"
        android:orderInCategory="2"
        android:title="Call"
        android:icon="@drawable/ic_call"
        app:showAsAction="ifRoom|collapseActionView" />
    <item
        android:id="@+id/option4"
        android:title="Chat"
        android:visible="false"
        android:orderInCategory="3"
        android:icon="@drawable/ic_chat"
        app:showAsAction="ifRoom|collapseActionView"/>
    <item
        android:id="@+id/option3"
        android:title="About"
        app:showAsAction="never" />
</menu>

ขั้นตอนที่ 4: MainActivity.java

import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    Toolbar toolbar;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        toolbar = findViewById(R.id.toolbar);
        toolbar.setTitle("MyToolBar");
        toolbar.setTitleTextColor(Color.WHITE);
        // setSupportActionBar(toolbar); // ถ้าใช้ ActionBar
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        MenuInflater inflater = getMenuInflater();
        inflater.inflate(R.menu.mymenu, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.option1:
                Toast.makeText(this, "Bluetooth ถูกเลือก", Toast.LENGTH_SHORT).show();
                return true;
            case R.id.option2:
                Toast.makeText(this, "Call ถูกเลือก", Toast.LENGTH_SHORT).show();
                return true;
            case R.id.option3:
                Toast.makeText(this, "About ถูกเลือก", Toast.LENGTH_SHORT).show();
                return true;
            case R.id.option4:
                Toast.makeText(this, "Chat ถูกเลือก", Toast.LENGTH_SHORT).show();
                return true;
            default:
                return super.onOptionsItemSelected(item);
        }
    }

    @Override
    public boolean onPrepareOptionsMenu(Menu menu) {
        // เรียกทุกครั้งก่อนแสดงเมนู - เหมาะสำหรับ dynamic update
        invalidateOptionsMenu();
        menu.findItem(R.id.option2).setVisible(false); // ซ่อน Call
        menu.findItem(R.id.option4).setVisible(true);  // แสดง Chat
        return super.onPrepareOptionsMenu(menu);
    }
}

แอตทริบิวต์ app:showAsAction

เปลี่ยนไอคอน Overflow Menu เอง (Custom)

// ใน Theme (styles.xml)
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="actionOverflowButtonStyle">@style/OverflowButton</item>
</style>

<style name="OverflowButton" parent="Widget.AppCompat.ActionButton.Overflow">
    <item name="android:src">@drawable/custom_overflow_icon</item>
</style>

หรือตั้งค่าใน Toolbar โดยตรง

toolbar.setOverflowIcon(ContextCompat.getDrawable(this, R.drawable.custom_overflow));

การทดสอบ

รันแอป จะเห็น Toolbar พร้อมเมนู กด Overflow (3 จุด) จะเห็น About อย่างเดียว (Call ถูกซ่อน Chat ถูกแสดง)