Đổi icon Overflow Menu (3 chấm) theo chương trình Android Kotlin

Hướng dẫn này minh họa cách thay đổi icon Overflow Menu (menu 3 chấm) trên Toolbar theo chương trình trong Android sử dụng Kotlin.

Bước 1: Tạo dự án mới

Mở Android Studio, chọn File → New Project và điền thông tin cần thiết.

Bước 2: Thiết kế giao diện (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"
    android:padding="4dp"
    tools:context=".MainActivity">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/tootBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

Bước 3: Tạo menu resource (res/menu/menu.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_baseline_bluetooth_24"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/option2"
        android:orderInCategory="2"
        android:title="Call"
        android:icon="@drawable/ic_baseline_call_24"
        app:showAsAction="ifRoom|collapseActionView" />

    <item
        android:id="@+id/option4"
        android:title="Chat"
        android:visible="false"
        android:orderInCategory="3"
        android:icon="@drawable/ic_baseline_chat_24"
        app:showAsAction="ifRoom|collapseActionView" />

    <item
        android:id="@+id/option3"
        android:title="About"
        app:showAsAction="never" />

</menu>

Bước 4: Viết code MainActivity.kt

import android.graphics.Color
import android.os.Bundle
import android.view.Menu
import android.view.MenuItem
import android.widget.Toast
import androidx.appcompat.widget.Toolbar
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {
    lateinit var toolBar: Toolbar

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        title = "KotlinApp"

        toolBar = findViewById(R.id.tootBar)
        toolBar.title = "MyToolBar"
        toolBar.setTitleTextColor(Color.WHITE)
        setSupportActionBar(toolBar)
    }

    override fun onCreateOptionsMenu(menu: Menu?): Boolean {
        menuInflater.inflate(R.menu.menu, menu)
        return true
    }

    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        return when (item.itemId) {
            R.id.option1 -> {
                Toast.makeText(applicationContext, "Bluetooth Selected", Toast.LENGTH_SHORT).show()
                true
            }
            R.id.option2 -> {
                Toast.makeText(applicationContext, "Call Selected", Toast.LENGTH_SHORT).show()
                true
            }
            R.id.option3 -> {
                Toast.makeText(applicationContext, "About Selected", Toast.LENGTH_SHORT).show()
                true
            }
            R.id.option4 -> {
                Toast.makeText(applicationContext, "Chat Selected", Toast.LENGTH_SHORT).show()
                true
            }
            else -> super.onOptionsItemSelected(item)
        }
    }

    override fun onPrepareOptionsMenu(menu: Menu): Boolean {
        invalidateOptionsMenu()
        menu.findItem(R.id.option2).isVisible = false
        menu.findItem(R.id.option4).isVisible = true
        return super.onPrepareOptionsMenu(menu)
    }
}

Bước 5: Đổi icon Overflow Menu (3 chấm) - Cách 1: Theme

Trong res/values/styles.xml:

<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
    <item name="actionOverflowButtonStyle">@style/OverflowButtonStyle</item>
</style>

<style name="OverflowButtonStyle" parent="Widget.AppCompat.ActionButton.Overflow">
    <item name="android:src">@drawable/ic_custom_overflow</item>
    <item name="android:tint">@color/white</item>
</style>

Cách 2: Toolbar.setOverflowIcon() (API 23+)

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    
    toolBar = findViewById(R.id.tootBar)
    setSupportActionBar(toolBar)
    
    // Đổi icon overflow menu
    toolBar.setOverflowIcon(ContextCompat.getDrawable(this, R.drawable.ic_custom_overflow))
}

Cách 3: Chỉnh sửa trực tiếp trong onCreateOptionsMenu

override fun onCreateOptionsMenu(menu: Menu): Boolean {
    menuInflater.inflate(R.menu.menu, menu)
    
    // Tìm overflow menu item (thường không truy cập trực tiếp được)
    // Cách gián tiếp: dùng reflection hoặc theme
    return true
}

Chạy ứng dụng

Kết nối thiết bị, nhấn Run. Toolbar hiển thị với icon overflow tùy chỉnh. Menu có 4 item: Bluetooth, Call (ẩn), Chat (hiện), About (trong overflow).

Lưu ý quan trọng

• Icon overflow nên kích thước 24x24dp (Material Design)
• Sử dụng android:tint hoặc app:iconTint để đổi màu icon
• invalidateOptionsMenu() gọi onPrepareOptionsMenu để cập nhật menu động
• Overflow menu chỉ hiện khi có item showAsAction="never" hoặc không đủ chỗ