[러그의 테마강좌] 앱의 액션바(타이틀바) 스타일 바꾸기

이번엔 앱의 ActionBar(액션바)의 스타일에 대해 써보겠습니다..

반드시 PC버전으로 봐주세요~

전 이 글 : https://developer.android.com/training/basics/actionbar/styling.html

을 참고했습니다.

- 강좌를 시작하기 전에..

이글 을 먼저 보시면 이 강좌를 이해하는데 좀더 도움이 되실 겁니다..

- ActionBar(액션바)란?..

위 사진의 검은색 앱 타이틀 부분이 바로 ActionBar(액션바)입니다.. 

API 14 (ICS) 부터는 위와 같은 액션바가 적용되었습니다..

1. 앱 테마를 styles.xml 로 지정하기 (준비작업)

AndroidManifest.xml의 android:theme 구문을 찾아서 아래과 같이 수정해줍시다.

android:theme="@style/AppBaseTheme"

그 다음 res/values 폴더에 있는 styles.xml 를 열어서 아래 구문을 추가해줍시다. (styles.xml 파일이 없다면 추가해주세요)

<style name="AppBaseTheme" parent="android:Theme.Holo.Light">

      // 구문1

</style>

// 구문2

* 위에 및줄 친 부분은 이 글 을 이용하여 마음대로 바꾸셔도 됩니다~~

2. styles.xml에 ActionBar 스타일 지정하고 수정하기

styles.xml에 구문을 정상적으로 입력하셨다면 구문의 '// 구문1' 란 곳에 아래와 같은 구문을 추가해줍시다. (추가하시고 나시면 '// 구문1' 은 지워주세요)

<item name="android:actionBarStyle">@style/MyActionBar</item>

이제 '// 구문2' 부분에 아래와 같은 구문을 추가해줍시다. (마찬가지로 추가하시고 나시면 '// 구문2' 은 지워주세요)

<style name="MyActionBar" parent="android:style/Widget.Holo.ActionBar.Solid.Inverse">

        <item name="android:background">#ff33b5e5</item>

</style>

- 위에 진하게 표시된 부분(#ff33b5e5)을 수정하여 ActionBar 의 배경 이미지 또는 색상을 지정할 수 있습니다.

저는 일단 색상으로 지정하였습니다.

색상일 경우 #ffffffff 와 같은 방법으로 지정할 수 있고,

이미지같은 경우에는 @drawable/파일이름 과 같이 지정할 수 있습니다.

- 위에 및줄로 표시된 부분(android:style/Widget.Holo.ActionBar.Solid.Inverse)을 수정하여 액션바의 글씨 색상을 바꿀 수 있습니다.

아래 표를 참고하세요

ActionBar 글자 색상	styles.xml에서의 표시 방법
검정	android:style/Widget.Holo.ActionBar
하양	android:style/Widget.Holo.ActionBar.Solid.Inverse

- styles.xml 완성된 소스

<resources>

    <style name="AppBaseTheme" parent="android:Theme.Holo.Light">

        <item name="android:actionBarStyle">@style/MyActionBar</item>

    </style> 

    <style name="MyActionBar" parent="android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">

        <item name="android:background">#ff33b5e5</item>

    </style>

</resources>

- 완성된 액션바 스타일