Cách thay đổi màu chữ Menu Item (Option Menu) trên Android bằng Kotlin

Giới thiệu

Ví dụ minh họa cách thay đổi màu nền và màu chữ của các item trong Option Menu (menu 3 chấm) trên Android bằng cách định nghĩa style/theme trong styles.xml và colors.xml, sử dụng Kotlin.

Các bước thực hiện

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

Android Studio > File > New Project.

Bước 2: Layout (activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="70dp"
        android:background="#008080"
        android:padding="5dp"
        android:text="TutorialsPoint"
        android:textColor="#fff"
        android:textSize="24sp"
        android:textStyle="bold" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Thay đổi màu Menu Option"
        android:textAlignment="center"
        android:textColor="@android:color/holo_orange_dark"
        android:textSize="24sp"
        android:textStyle="bold" />

</RelativeLayout>

Bước 3: Menu Resource (res/menu/menu_items.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/option_menu_item_1"
        android:orderInCategory="1"
        android:title="Menu 1"
        app:showAsAction="never" />

    <item
        android:id="@+id/option_menu_item_2"
        android:orderInCategory="2"
        android:title="Menu 2"
        app:showAsAction="never" />

    <item
        android:id="@+id/option_menu_item_3"
        android:orderInCategory="3"
        android:title="Menu 3"
        app:showAsAction="never" />

</menu>

Bước 4: Colors (res/values/colors.xml)

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#6200EE</color>
    <color name="colorPrimaryDark">#3700B3</color>
    <color name="colorAccent">#03DAC5</color>
    <color name="skyBlue">#87CEEB</color> <!-- Màu nền menu item -->
</resources>

Bước 5: Styles (res/values/styles.xml)

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

        <!-- Quan trọng: Style cho Option Menu -->
        <item name="android:itemBackground">@color/skyBlue</item> <!-- Màu nền item -->
        <item name="android:textColor">#ff000f</item> <!-- Màu chữ item (Đỏ) -->
    </style>
</resources>

Bước 6: MainActivity.kt - Phồng menu

import android.os.Bundle
import android.view.Menu
import android.view.MenuItem
import androidx.appcompat.app.AppCompatActivity

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

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

    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        return when (item.itemId) {
            R.id.option_menu_item_1, R.id.option_menu_item_2, R.id.option_menu_item_3 -> true
            else -> super.onOptionsItemSelected(item)
        }
    }
}

Bước 7: AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="com.example.menucolor">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">

        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

    </application>
</manifest>

Chạy ứng dụng

Chạy app, nhấn nút Menu (3 chấm) trên Toolbar/ActionBar. Menu thả xuống sẽ có nền màu xanh da trời (skyBlue) và chữ màu đỏ (#ff000f).

Cách hiện đại: Material Components Theme

Nếu dùng Theme.MaterialComponents.* (khuyến nghị), tùy chỉnh qua attributes:

<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorOnPrimary">@color/white</item>
    <!-- Menu colors -->
    <item name="android:itemBackground">@color/skyBlue</item>
    <item name="android:textColor">@color/red</item>
    <!-- Hoặc dùng theme overlay cho Toolbar/Menu -->
    <item name="actionMenuTextColor">@color/red</item> <!-- Màu chữ action menu -->
</style>

Tùy chỉnh từng item riêng lẻ (Programmatically)

Sử dụng SpannableString trong onPrepareOptionsMenu:

override fun onPrepareOptionsMenu(menu: Menu): Boolean {
    val item = menu.findItem(R.id.option_menu_item_1)
    val spannable = SpannableString(item.title)
    spannable.setSpan(ForegroundColorSpan(Color.RED), 0, spannable.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
    item.setTitle(spannable)
    return super.onPrepareOptionsMenu(menu)
}

Lưu ý

• android:itemBackground và android:textColor trong theme ảnh hưởng đến tất cả menu item (Option Menu, Context Menu, Popup Menu).
• Để tùy chỉnh Context Menu/Popup Menu riêng, dùng android:popupMenuStyle hoặc theme context riêng.
• Trên Android 11+, menu có thể hiển thị khác tùy theo theme (Material vs AppCompat).