개요

Android 앱의 화면 상단의 앱바(AppBar, ActionBar, Toolbar 모두)에 메뉴 아이콘이나 「저장」과 같은 메뉴 버튼을 설치하거나, ​​아이콘・문자나 배경의 색을 바꾸고 싶은 경우가 있다. 방법을 조사하고 정리했다.

앱 활동 전체의 스타일 설정

AndroidManifest <application>에서 전체 앱 테마를 설정할 수 있습니다.<activity>에서 설정하면 전체 활동의 테마가됩니다.

AndroidManifest.xml

<application
    ...中略...
    android:theme="@style/AppTheme" >
    ...中略...
</application>

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>
        <item name="actionMenuTextColor">@color/menuText</item>
    </style>
</resources>

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#FF0000</color>
    <color name="colorPrimaryDark">#00FF00</color>
    <color name="colorAccent">#0000FF</color>
    <color name="menuText">#00FFFF</color>
</resources>

colorPrimary : 앱 바 (또는 플로팅 액션 버튼)와 같은 UI에서 사용되는 기본 색상 설정

colorPrimaryDark : 어두운 부분의 기본 색상 설정

colorAccent : 텍스트 박스나 다이얼로그등의 UI로 사용되는 색을 설정한다

actionMenuTextColor : 앱 바 메뉴의 텍스트 색상 설정

Fragment별로 스타일 변경

상기의 스타일 설정에서는, Fragment마다의 설정은 할 수 없다.
각 Fragment에서 앱 바의 배경색 메뉴 등의 스타일을 변경하는 방법을 소개한다.

앱바의 배경색 변경

activity?.supportActionBar?.setBackgroundDrawable()로 색상( ColorDrawable )을 설정합니다.
일단 색을 바꾸면 Fragment 천이해도 그대로이기 때문에, 색을 되돌리고 싶은 경우는, 좋은 타이밍(다른 화면으로 천이할 때 등)에서 원래의 색을 세트할 필요가 있다.

Fragment.kt

activity?.supportActionBar?.setBackgroundDrawable(ColorDrawable(Color.WHITE))) // アプリバーを白にする

앱바 제목의 문자색 변경

모범 사례를 모르겠지만 어떤 색을 붙인 SpannableString를 설정하는 것이 좋을까?

HTML로 고리 누르기

HTML 태그로 문자를 색으로 설정합니다.

Fragment.kt

val titleHtml = "<font color=\"#FF0000\">HTMLタイトル</font>"
activity?.supportActionBar?.apply {
    setTitle(Html.fromHtml(titleHtml))
    setBackgroundDrawable(ColorDrawable(Color.WHITE))
}

SpannableString로 색칠하기

ForegroundColorSpan이라는 Span으로 문자를 색으로 설정합니다.

val title = SpannableString("SpannableStringタイトル")
title.setSpan(ForegroundColorSpan(Color.RED), 0, title.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
activity?.supportActionBar?.apply {
    setTitle(title)
    setBackgroundDrawable(ColorDrawable(Color.WHITE))
}

앱바에 메뉴 표시

onCreateOptionsMenu() 내의 임의의 메뉴를 세트 해, 앱 바에 메뉴 아이콘이나 문자 ( 「저장」 「닫기」등)를 표시한다.

Fragment.kt

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        super.onCreateView(inflater, container, savedInstanceState)
        this.setHasOptionsMenu(true)
    }

    override fun onCreateOptionsMenu(menu: Menu, inflater: MenuInflater) {
        super.onCreateOptionsMenu(menu, inflater)
        inflater.inflate(R.menu.hoge_menu, menu)
    }

hoge_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_hoge_icon"
        android:icon="@drawable/hoge_icon"
        app:showAsAction="always" />
    <item
        android:id="@+id/action_hoge_text"
        android:title="hoge"
        app:showAsAction="always" />
</menu>

← hoge_icon.png

앱바 메뉴의 문자색 변경

onCreateOptionsMenu()에서 해당 메뉴 항목을 검색하고 ForegroundColorSpan()를 설정합니다.SpannableString 작성시 문자열을 변경할 수도 있습니다.

Fragment.kt

    override fun onCreateOptionsMenu(menu: Menu, inflater: MenuInflater) {
        super.onCreateOptionsMenu(menu, inflater)
        inflater.inflate(R.menu.hoge_menu, menu)
        val item = menu.findItem(R.id.action_hoge_text) // メニューアイテム取得
        val s = SpannableString("fuga")
        s.setSpan(ForegroundColorSpan(Color.YELLOW), 0, s.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
        item.setTitle(s) // メニューアイテムにSpannableをセット
    }

앱바의 메뉴 아이콘 색상 변경

onCreateOptionsMenu()에서 해당 메뉴 항목의 icon ( Drawable )를 얻고 setColorFilter()에서 색상을 변경합니다.
필터 유형은 PorterDuff.Mode을 참조하십시오.

Fragment.kt

    override fun onCreateOptionsMenu(menu: Menu, inflater: MenuInflater) {
        super.onCreateOptionsMenu(menu, inflater)
        inflater.inflate(R.menu.hoge_menu, menu)
        val item = menu.findItem(R.id.action_hoge_icon)
        item.icon?.apply {
            mutate() // Drawableを変更可能にする
            setColorFilter(Color.WHITE, PorterDuff.Mode.SRC_ATOP) // アイコンを白くする
        }
    }

요약

앱바의 문자색·메뉴 아이템의 색·배경색 변경에 대해서, 앱 전체·개별 Fragment에서의 방법을 소개했다.