วิธีเปลี่ยนสีข้อความ Menu Item ใน Android

บทความนี้สาธิตวิธีเปลี่ยนสีข้อความของ Menu Item ใน Toolbar/ActionBar โดยใช้ Theme/Style attributes

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

Android Studio → File → New Project

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

Layout ว่างเปล่า เนื่องจาก Menu จะอยู่ใน Toolbar:

<?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"
    android:padding="16dp"
    tools:context=".MainActivity">
</RelativeLayout>

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

คลิกขวา res → New → Android Resource Directory → Type: menu → สร้าง sample_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/item1"
        android:icon="@drawable/ic_icon"
        android:title="Item 1"
        app:showAsAction="ifRoom" />

    <item android:id="@+id/item2" android:title="Item 2" app:showAsAction="never" />
    <item android:id="@+id/item3" android:title="Item 3" app:showAsAction="never" />
    <item android:id="@+id/item4" android:title="Item 4" app:showAsAction="never" />
    <item android:id="@+id/item5" android:title="Item 5" app:showAsAction="never" />

</menu>

ขั้นตอนที่ 4: ปรับ Theme ใน res/values/styles.xml

วิธีที่ 1: เปลี่ยนสีข้อความทั้งแอป (Global)

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

        <!-- เปลี่ยนสีข้อความ Menu ทั้งหมด -->
        <item name="android:textColor">#FF0000</item> <!-- สีแดง -->
    </style>
</resources>

วิธีที่ 2: ปรับเฉพาะ ActionBar/Toolbar (เฉพาะเจาะจงกว่า)

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- สีข้อความใน ActionBar -->
    <item name="actionMenuTextColor">#FFFFFF</item>
    <item name="android:actionMenuTextColor">#FFFFFF</item>

    <!-- สีข้อความใน Overflow Menu (Popup) -->
    <item name="android:textColorSecondary">#FF0000</item>
</style>

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

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

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

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

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.item1:
                Toast.makeText(this, "Item 1 selected", Toast.LENGTH_SHORT).show();
                return true;
            case R.id.item2:
                Toast.makeText(this, "Item 2 selected", Toast.LENGTH_SHORT).show();
                return true;
            case R.id.item3:
                Toast.makeText(this, "Item 3 selected", Toast.LENGTH_SHORT).show();
                return true;
            case R.id.item4:
                Toast.makeText(this, "Item 4 selected", Toast.LENGTH_SHORT).show();
                return true;
            case R.id.item5:
                Toast.makeText(this, "Item 5 selected", Toast.LENGTH_SHORT).show();
                return true;
            default:
                return super.onOptionsItemSelected(item);
        }
    }
}

วิธีขั้นสูง: ปรับสีแต่ละ Item แยกต่างหาก (Programmatically)

@Override
public boolean onPrepareOptionsMenu(Menu menu) {
    MenuItem item = menu.findItem(R.id.item1);
    SpannableString s = new SpannableString(item.getTitle());
    s.setSpan(new ForegroundColorSpan(Color.RED), 0, s.length(), 0);
    item.setTitle(s);
    return super.onPrepareOptionsMenu(menu);
}

Material Components Theme (แนะนำใหม่)

<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
    <item name="actionMenuTextColor">@color/white</item>
    <item name="android:actionMenuTextColor">@color/white</item>
</style>

สรุป Attributes สำคัญ