Thay đổi màu chữ Menu Item trong Android

Thay đổi màu chữ Menu Item trong Android

Hướng dẫn này minh họa cách thay đổi màu chữ của các mục menu (Menu Item) trong Toolbar/ActionBar bằng cách tùy chỉnh theme trong styles.xml.

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

Bước 3: Tạo Vector Asset (Icon cho menu)

Chuột phải res/drawable → New → Vector Asset → Chọn icon bất kỳ (ví dụ: ic_icon).

Bước 4: Tạo thư mục menu và file menu

Chuột phải res → New → Android Resource Directory → Resource type: menu. Tạo file res/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>

Bước 5: Tùy chỉnh theme trong styles.xml

Mở res/values/styles.xml và thêm android:textColor vào theme:

<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>
        <!-- Thay đổi màu chữ menu item -->
        <item name="android:textColor">#ff000f</item>
    </style>
</resources>

Cách tốt hơn: Tùy chỉnh riêng cho ActionBar/Toolbar

Tạo style riêng cho Toolbar trong styles.xml:

<style name="CustomToolbarTheme" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="android:textColorPrimary">#FFFFFF</item> <!-- Màu title & menu text -->
    <item name="android:textColorSecondary">#CCCCCC</item> <!-- Màu subtitle -->
    <item name="actionMenuTextColor">#FFEB3B</item> <!-- Màu menu item text (AppCompat) -->
    <item name="actionMenuTextAppearance">@style/CustomMenuTextAppearance</item>
</style>

<style name="CustomMenuTextAppearance" parent="TextAppearance.AppCompat.Widget.ActionBar.Menu">
    <item name="android:textColor">#FFEB3B</item>
    <item name="android:textSize">14sp</item>
    <item name="android:textStyle">bold</item>
</style>

Áp dụng cho Toolbar trong layout:

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:theme="@style/CustomToolbarTheme"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

Bước 6: Code 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 is selected", Toast.LENGTH_SHORT).show();
                return true;
            case R.id.item2:
                Toast.makeText(this, "Item 2 is selected", Toast.LENGTH_SHORT).show();
                return true;
            case R.id.item3:
                Toast.makeText(this, "Item 3 is selected", Toast.LENGTH_SHORT).show();
                return true;
            case R.id.item4:
                Toast.makeText(this, "Item 4 is selected", Toast.LENGTH_SHORT).show();
                return true;
            case R.id.item5:
                Toast.makeText(this, "Item 5 is selected", Toast.LENGTH_SHORT).show();
                return true;
            default:
                return super.onOptionsItemSelected(item);
        }
    }
}

Bước 7: Cấu hình AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android" package="app.com.sample">
    <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

Kết nối thiết bị, chạy app. Nhấn vào menu (3 chấm) để thấy các item với màu chữ đã tùy chỉnh (đỏ #ff000f nếu dùng cách 1, vàng #FFEB3B nếu dùng cách 2).