[펌] 액션 바를 스타일링 하기

IT_Programming/Android_Java

[펌] 액션 바를 스타일링 하기

JJun ™ 2014. 10. 7. 12:16

출처: http://codeflow.co.kr/question/804/%EC%95%A1%EC%85%98-%EB%B0%94%EB%A5%BC-%EC%8A%A4%ED%83%80%EC%9D%BC%EB%A7%81-%ED%95%98%EA%B8%B0/

Styling the Action Bar

액션바는 유저가 기능을 실행하거나 앱을 돌아다니는 데 익숙한 UI 를 제공한다.
하지만 액션바가 다른 앱들하고 완전히 똑같이 생겨야 하는 것은 아니다.
액션바를 커스터마이즈 하고 싶다면, styles and theme 리소스들을 이용하면 된다.

안드로이드는 "dark" 와 "light" 액션 바 스타일을 가지고 있는 activity theme 들을 제공한다.
이 theme 들을 커스터마이즈 하여 action bar 의 모양을 변경할 수도 있다.

Note: Support Library 를 사용하고 있다면, API level 11 이상에서 제공되는
Theme.Holo 패밀리 대신에 Theme.AppCompat 을 사용하여야 한다.
Theme.AppCompat 을 사용한다면, 스타일 속성을 두번씩 선언해야 한다

: android: 형태로 한번, Support Library 의 appcompat.R.attr 형태로 (이 속성의 context 는
사실 _여러분의 앱_ 이다) 한번 선언한다.

아래 예제들에서 더 자세한 내용을 확인할 수 있다.

Use an Android Theme

안드로이드는 액션 바의 색깔을 결정하는 두개의 기본 activity theme 을 제공한다:

- Theme.Holo 은 "dark" theme 을 제공한다.

- Theme.Holo.Light 은 "light" theme 을 제공한다.

이 theme 들을 전체 앱에 적용하거나, 개별 액티버티에 적용할 수 있다.

manifest 파일에 있는, [<application>] 나 개별 <activity> 에 android:theme 속성을 주면 된다.

예를들면:

Theme.Holo.Light.DarkActionBar 을 이용하여, 액티버티들은 light color scheme 을 사용하고,
액션 바만 dark scheme 을 사용하게 할 수도 있다.

Support Library 를 사용할 때에는 Theme.AppCompat theme 을 이용한다:

- Theme.AppCompat 은 "dark" theme 이다.

- Theme.AppCompat.Light 은 "light" theme 이다.

- Theme.AppCompat.Light.DarkActionBar 을 이용하면 action bar 만 dark theme 을
사용하게 할 수 있다. 액션 바와 구별되는 action bar icon 을 사용하라.
Action Bar Icon Pack 이 Holo light 을 이용할 때 사용할 icon 과 Holo dark 액션 바를
이용할 때 사용할 icon 을 모두 제공한다.

Customize the Background

액션바의 백그라운드 색을 변경하려면 actionBarStyle 속성을 덮어쓰는 (override) 커스텀 theme 을 만든다. 이 속성은 style 을 가리키게 되고, 이 스타일의 background 속성을 액션바에서 사용할 drawable 리소스로 변경하면 된다.

앱이 navigation tabs 을 이용하거나 split action bar 을 이용한다면, backgroundStacked 이나
backgroundSplit 속성을 이용하여 백그라운드를 변경할 수도 있다.

Caution: 여러분의 커스텀 theme 이 상속받을 부모 theme 을 잘 설정하는 것이 중요하다.

부모가 제공하는 style 이 없으면, 직접 스타일을 정의해야 할 것이다.

For Android 3.0 and higher only

Android 3.0 이상을 지원하려면, action bar 의 백그라운드를 다음처럼 지정할 수 있다:

res/values/themes.xml

<?xml version="1.0" encoding="utf-8"?>

parent="@style/Theme.Holo.Light.DarkActionBar">

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

</style>

parent="@style/Widget.Holo.Light.ActionBar.Solid.Inverse">

<item name="android:background">@drawable/actionbar_background</item>

</style>

</resources>

그리고 위의 theme 을 전체 app 이나 개별 액티버티에 적용한다:

For Android 2.1 and higher

Support Library 를 사용할 때는, 다음과 같이 theme 을 정의 한다:

res/values/themes.xml

<?xml version="1.0" encoding="utf-8"?>

parent="@style/Theme.AppCompat.Light.DarkActionBar">

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

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

</style>

parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">

<item name="android:background">@drawable/actionbar_background</item>

<item name="background">@drawable/actionbar_background</item>

</style>

</resources>

그리고 정의한 theme 을 앱 전체나 개별 액티버티에 적용한다:

Customize the Text Color

액션 바의 텍스트 칼러를 변경하려면, 변경하려는 각각의 텍스트 요소의 속성을 변경하여야 한다:

Action bar title: textColor 값을 설정하는 커스텀 스타일을 만들고, 커스텀 actionBarStyle 의
titleTextStyle 속성값으로 커스텀 스타일을 설정한다.

Note: titleTextStyle 에 사용할 커스텀 스타일은 TextAppearance.Holo.Widget.ActionBar.Title 을 부모로 설정해야 한다.

- Action bar tabs: 액티버티 theme 의 actionBarTabTextStyle 을 변경한다.

- Action buttons: 액티버티 theme 의 actionMenuTextColor 을 변경한다.

For Android 3.0 and higher only

Android 3.0 이상을 지원할 때에는 스타일 XML 파일은 다음처럼 생겼다:

res/values/themes.xml

<?xml version="1.0" encoding="utf-8"?>

parent="@style/Theme.Holo">

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

<item name="android:actionBarTabTextStyle">@style/MyActionBarTabText</item>

<item name="android:actionMenuTextColor">@color/actionbar_text</item>

</style>

parent="@style/Widget.Holo.ActionBar">

<item name="android:titleTextStyle">@style/MyActionBarTitleText</item>

</style>

parent="@style/TextAppearance.Holo.Widget.ActionBar.Title">

<item name="android:textColor">@color/actionbar_text</item>

</style>

parent="@style/Widget.Holo.ActionBar.TabText">

<item name="android:textColor">@color/actionbar_text</item>

</style>

</resources>

For Android 2.1 and higher

Support Library 를 사용할 때에는, 스타일 XML 파일은 다음처럼 생겼을 것이다:

res/values/themes.xml

<?xml version="1.0" encoding="utf-8"?>

parent="@style/Theme.AppCompat">

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

<item name="android:actionBarTabTextStyle">@style/MyActionBarTabText</item>

<item name="android:actionMenuTextColor">@color/actionbar_text</item>

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

<item name="actionBarTabTextStyle">@style/MyActionBarTabText</item>

<item name="actionMenuTextColor">@color/actionbar_text</item>

</style>

parent="@style/Widget.AppCompat.ActionBar">

<item name="android:titleTextStyle">@style/MyActionBarTitleText</item>

<item name="titleTextStyle">@style/MyActionBarTitleText</item>

</style>

parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">

<item name="android:textColor">@color/actionbar_text</item>

</style>

parent="@style/Widget.AppCompat.ActionBar.TabText">

<item name="android:textColor">@color/actionbar_text</item>

</style>

</resources>

Customize the Tab Indicator

navigation tabs 가 사용하는 indicator 를 변경하려면, actionBarTabStyle 을 재정의한
activity theme 을 만들어야 한다. 이 속성은 다른 style 리소스를 가리키게 되며,
이 스타일 리소스의 background 속성을 state-list drawable 을 사용하도록 설정한다.

Note: state-list drawable 은 현재 선택된 탭과 나머지 탭들의 상태 (state) 을 다른 백그라운드를 사용하여 표현한다. 여러개의 버튼 상태를 표현할 수 있는 drawable 리소스를 만드는 방법은
State List 문서를 참조하기 바란다.

예를 들면, 다음 state-list drawable 은, 액션 바 탭의 여러 상태마다 다른 background 이미지를 사용하도록 정의한다.

res/drawable/actionbar_tab_indicator.xml

<?xml version="1.0" encoding="utf-8"?>

<item android:state_focused="false" android:state_selected="false"

android:state_pressed="false"

android:drawable="@drawable/tab_unselected" />

<item android:state_focused="false" android:state_selected="true"

android:state_pressed="false"

android:drawable="@drawable/tab_selected" />

<item android:state_focused="true" android:state_selected="false"

android:state_pressed="false"

android:drawable="@drawable/tab_unselected_focused" />

<item android:state_focused="true" android:state_selected="true"

android:state_pressed="false"

android:drawable="@drawable/tab_selected_focused" />

<item android:state_focused="false" android:state_selected="false"

android:state_pressed="true"

android:drawable="@drawable/tab_unselected_pressed" />

<item android:state_focused="false" android:state_selected="true"

android:state_pressed="true"

android:drawable="@drawable/tab_selected_pressed" />

<item android:state_focused="true" android:state_selected="false"

android:state_pressed="true"

android:drawable="@drawable/tab_unselected_pressed" />

<item android:state_focused="true" android:state_selected="true"

android:state_pressed="true"

android:drawable="@drawable/tab_selected_pressed" />

</selector>

For Android 3.0 and higher only

Android 3.0 이상을 사용할 때에는, 스타일 XML 이 다음처럼 생겼을 것이다:

res/values/themes.xml

<?xml version="1.0" encoding="utf-8"?>

parent="@style/Theme.Holo">

<item name="android:actionBarTabStyle">@style/MyActionBarTabs</item>

</style>

parent="@style/Widget.Holo.ActionBar.TabView">

<item name="android:background">@drawable/actionbar_tab_indicator</item>

</style>

</resources>

For Android 2.1 and higher

Support Library 를 사용할 때에는, 스타일 XML 파일이 다음처럼 생겼을 것이다:

res/values/themes.xml

<?xml version="1.0" encoding="utf-8"?>

parent="@style/Theme.AppCompat">

<item name="android:actionBarTabStyle">@style/MyActionBarTabs</item>

<item name="actionBarTabStyle">@style/MyActionBarTabs</item>

</style>

parent="@style/Widget.AppCompat.ActionBar.TabView">

<item name="android:background">@drawable/actionbar_tab_indicator</item>

<item name="background">@drawable/actionbar_tab_indicator</item>

</style>

</resources>

More resources

Action Bar 가이드에 더 많은 스타일 속성에 대해 나와 있다.

Styles and Themes 가이드는 theme 이 어떻게 동작하는지 더 깊게 다룬다.

액션바의 스타일을 변경하기 위해 Android Action Bar Style Generator 를 사용하는 것도
좋은 방법이다.

저작자표시 비영리 변경금지

'IT_Programming > Android_Java' 카테고리의 다른 글

Lollipop (LOS) 부터는 Notification Icon 에 색상을 넣을 수 없다? (0)	2014.10.18
[펌] 안드로이드 아이콘 뱃지 완전분해 / 런처 아이콘에 카운트 뱃지 달기 (0)	2014.10.17
[펌] 모바일웹 반응형 무한스크롤 개발 및 성능 튜닝 (0)	2014.08.25
[펌] 웹뷰 기반의 하이브리드 앱 개발 노하우 (0)	2014.08.25
[Android] MediaPlayer with SurfaceHolder (0)	2014.08.16

현재글[펌] 액션 바를 스타일링 하기

삶의 모든 순간을 즐겨라!

Today :
Yesterday :

일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

삶의 모든 순간을 즐겨라!