Kotlin으로 Android 옵션 메뉴 항목의 텍스트 색상 변경하기

이 튜토리얼에서는 Kotlin을 사용하여 Android 앱의 옵션 메뉴(Menu) 항목 텍스트 색상을 변경하는 방법을 단계별로 살펴봅니다. 테마(styles.xml)와 색상 리소스(colors.xml)를 활용하면 메뉴의 배경색과 글자색을 손쉽게 커스터마이징할 수 있습니다.

1단계 — 새 프로젝트 생성

Android Studio를 실행하고 File ⇒ New Project를 선택한 뒤, 필요한 정보를 모두 입력하여 새 프로젝트를 생성합니다.

2단계 — activity_main.xml 작성

다음 코드를 res/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="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단계 — styles.xml에서 테마 설정

메뉴 항목의 배경색과 텍스트 색상을 지정하는 것이 이 예제의 핵심입니다. 다음 코드를 res/values/styles.xml에 추가합니다. android:itemBackground 속성으로 메뉴 배경색을, android:textColor 속성으로 메뉴 텍스트 색상을 각각 설정할 수 있습니다.

<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>
        <item name="android:itemBackground">@color/skyBlue</item>
        <item name="android:textColor">#ff000f</item>
    </style>
</resources>

5단계 — colors.xml에 색상 정의

테마에서 참조하는 색상 값을 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 작성

다음 코드를 src/MainActivity.kt에 추가합니다. onCreateOptionsMenu()에서 메뉴를 인플레이트하고, onOptionsItemSelected()에서 각 메뉴 항목의 클릭 이벤트를 처리합니다.

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, 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 확인

다음 코드를 androidManifest.xml에 추가합니다. 애플리케이션 테마가 위에서 정의한 @style/AppTheme로 지정되어 있는지 확인하세요.

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

앱 실행 및 결과 확인

이제 애플리케이션을 실행해 보겠습니다. 실제 Android 기기를 컴퓨터에 연결했다고 가정합니다. Android Studio에서 프로젝트의 액티비티 파일 중 하나를 연 뒤, 툴바의 Run 아이콘을 클릭하세요. 실행 옵션 목록에서 자신의 모바일 기기를 선택하면, 연결된 기기 화면에 앱이 실행됩니다.

앱이 실행되면 오른쪽 상단의 점 세 개(옵션 메뉴) 버튼을 눌러보세요. 하늘색 배경 위에 빨간색 텍스트로 표시되는 메뉴 항목들을 확인할 수 있습니다. 이처럼 테마 속성만 수정하면 별도의 코드 없이도 옵션 메뉴의 색상을 자유롭게 변경할 수 있습니다.