ภาพรวม
ตัวอย่างนี้สาธิตวิธีการเปลี่ยนสีข้อความและพื้นหลังของ Option Menu Item ใน Android โดยใช้ Theme/Style และ Kotlin
ขั้นตอนที่ 1: สร้างโปรเจกต์ใหม่
สร้างโปรเจกต์ Android ใหม่ใน Android Studio
ขั้นตอนที่ 2: จัดรูปแบบหน้าจอหลัก (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="Changing Option Menu Background and text Color"
android:textAlignment="center"
android:textColor="@android:color/holo_orange_dark"
android:textSize="24sp"
android:textStyle="bold" />
</RelativeLayout>
ขั้นตอนที่ 3: สร้างเมนู (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>
ขั้นตอนที่ 4: กำหนด Style (res/values/styles.xml)
<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 -->
<item name="android:itemBackground">@color/skyBlue</item>
<!-- เปลี่ยนสีข้อความ Menu Item -->
<item name="android:textColor">#ff000f</item>
</style>
</resources>
ขั้นตอนที่ 5: กำหนดสี (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>
</resources>
ขั้นตอนที่ 6: เขียนโค้ด MainActivity.kt
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 -> true
R.id.option_menu_item_2 -> true
R.id.option_menu_item_3 -> true
else -> super.onOptionsItemSelected(item)
}
}
}
ขั้นตอนที่ 7: ตั้งค่า AndroidManifest.xml
ใช้ Theme ที่สร้างไว้: android:theme="@style/AppTheme"
ทดสอบการทำงาน
รันแอป กดปุ่ม Menu (หรือ Overflow Menu) จะเห็น Menu Item สีข้อความแดง (#ff000f) พื้นหลังสีฟ้าอ่อน (#87CEEB)
ข้อมูลเพิ่มเติม
- Theme Attributes: `android:itemBackground`, `android:textColor`, `android:textSize`, `android:itemTextAppearance`
- Per-item Customization: ใช้
SpannableStringในonPrepareOptionsMenuสำหรับเมนูเฉพาะรายการ - Toolbar/ActionBar: หากใช้ Toolbar แยก ให้ตั้ง Theme ให้ Toolbar แทน
- Material Components: ใช้ `MaterialToolbar` และ `PopupMenu` สำหรับการปรับแต่งที่ทันสมัยกว่า