[2] Action Bar 추가하기 [3] 액션 바 스타일링하기

액션 바 스타일링은 다시 배우도록 하겠습니다.
구글 문서를 믿고 그대로 따라가고 있던 도중, 언급되지 않은 부분이 있어 튜토리얼에 구멍이 났습니다.
결국 이어지지 않은 정보때문에 에러가 속출하고, 부족한 부분이 있습니다.
일단 건너뛰고, 훗날 다시 와서 보겠습니다.

이번 시간에 배울 것

  1. 안드로이드 테마 사용하기
  2. 커스터마이징 – 배경
  3. 커스터마이징 – 텍스트 (잘 안되고 있습니다. 도와주세요)
  4. 커스터마이징 – 탭 인디케이터

함께 봐야 할 것 – YOU SHOULD ALSO READ

Styles and Themes
Android Action Bar Style Generator

 

why 액션 바 스타일링하기?

액션 바를 내 입맛대로 바꾸고 싶으니까!

 

The action bar provides your users a familiar and predictable way to perform actions and navigate your app, but that doesn’t mean it needs to look exactly the same as it does in other apps. If you want to style the action bar to better fit your product brand, you can easily do so using Android’s style and themeresources.

액션바는 사용자가 친숙한 방식으로 앱을 탐색하는 데에 도움을 줍니다. 하지만 이게 다른 것들이랑 궃이 같을 필요는 없지요. 좀 더 자신만의 고유한 방식으로 표현하고 싶다면 style and theme 이것을 참고해서 쉽게 만들 수 있습니다.

Android includes a few built-in activity themes that include “dark” or “light” action bar styles. You can also extend these themes to further customize the look for your action bar.

안드로이드는 dark 와 light 액션 바를 포함한 빌트인 액티비티 테마를 어느 정도 같고 있습니다. 이러한 테마를 자기 자신의 것으로 상속해와서 써도 됩니다.

Note: If you are using the Support Library APIs for the action bar, then you must use (or override) the Theme.AppCompatfamily of styles (rather than the Theme.Holo family, available in API level 11 and higher). In doing so, each style property that you declare must be declared twice:
once using the platform’s style properties (the android: properties) and
once using the style properties included in the Support Library
(theappcompat.R.attr properties—the context for these properties is actually your app).
See the examples below for details.

주의 : 만약 여러분이 안드로이드서포트라이브러리 API를 사용해서 액션 바를 만들었다면, 반드시 Theme.AppCompat 스타일 패밀리를 사용하거나 오버라이드 해야 합니다. (API 레벨 11이상에서 사용하는 Theme.Holo family 말고). 우리가 선언한 각각의 스타일 속성들은 반드시 두 번 선언되어야 합니다.
하나는 플랫폼의 스타일 속성을 쓰는 것 (android:properties)
하나는 서포트 라이브러리에 포함된 스타일 속성을 쓰는 것 (appcompat.R.attr 속성 – 이 속성은 context는 실제 우리 앱입니다)
다음 샘플을 함께 보시죠

안드로이드 테마 사용하기


안드로이드에는 두 가지 기본 테마가 있습니다. 액션 바의 컬러에 관한 테마입니다.

우리는 이러한 테마를 우리 앱 전체에 적용할 수 있습니다.
또는 각각 개별적인 액티비티에 따로 적용을 할 수도 있습니다.

전체에 or 개별적으로 적용하기 위해서 매니페스트 파일에 다음과 같이 선언해 줘야 합니다.
<application> 엘리먼트 안에 android:theme 속성을 넣습니다. 혹은
각각의 <activity> 엘리먼트 안에 android:theme 속성을 넣습니다.

예를 들어 : 

<application android:theme="@android:style/Theme.Holo.Light" ... />

사실 저는 android:theme 에 “@style/AppTheme” 라고 되어 있었습니다. 분명 resource 폴더 내 values 에 style이라는 xml 파일이 있는 것을 봤었습니다.

거기에 들어가 보니
<style name=”AppTheme” parent=”Theme.AppCompat.Light.DarkActionBar”>
라고 써 져 있네요.

올커니! 이 내용을 바꿔주면 될 것 같아서 이렇게 바꿔 보았습니다.
<style name=”AppTheme” parent=”Theme.AppCompat.Light”>
실험 해 보니 잘 되는군요! 올레!

또한 우리는 dark 액션 바를 사용할 수 있습니다. 다른 액티비티들은 밝은 컬러를 쓰면서 말이죠.  Theme.Holo.Light.DarkActionBar 이게 바로 그 테마입니다.

서포트 라이브러리를 사용할 때는 (2.1 이상의 앱 지원), 우리는 반드시 Theme.AppCompat 테마를 사용해야합니다.

적절한 밝기 대비의 액션 바 아이콘을 사용하는 것을 확인하세요.
Action Bar Icon Pack 표준 액션 아이콘을 포함하고 있습니다.
Holo light 와 Holo dark 액션 바 둘 다 있습니다.

 

배경 사용자 커스터마이징 – Customize the Background


액션 바의 배경을 바꾸기 위해서, 커스텀 테마를 생성합니다.
기존의 actionBarStyle 속성을 덮어 씁니다(override 합니다).
우리는 백그라운드 속성을 특정한 drawable 리소스로 덮어 쓸 수 있습니다.
만약 앱이 navigation tabs 이나 split action bar 를 사용한다면, backgroundStacked 속성,  backgroundSplit 속성을 이용해서 배경을 지정해 줄 수 있습니다.

주의 : 우리의 테마와 스타일로 상속받을 부모 테마를 잘 정하는 것이 중요합니다. 부모 스타일 없이는, 우리들의 액션바는 많은 스타일을 명시적으로 선언하기 전에는 사용할 수 없습니다.

안드로이드 버전 3.0 이상에서만 지원하려면 – For Android 3.0 and higher only

안드로이드 3.0 이상에서만 앱을 지원한다면, 액션바의 백그라운드를 다음과 같이 정할 수 있습니다.

res/values/themes.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- the theme applied to the application or activity -->
    <style name="CustomActionBarTheme"
           parent="@android:style/Theme.Holo.Light.DarkActionBar">
        <item name="android:actionBarStyle">@style/MyActionBar</item>
    </style>

    <!-- ActionBar styles -->
    <style name="MyActionBar"
           parent="@android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
        <item name="android:background">@drawable/actionbar_background</item>
    </style>
</resources>

그리고 우리의 테마를 전체 앱이나 개별 액티비티에 적용합니다.

<application android:theme="@style/CustomActionBarTheme" ... />

안드로이드 2.1 이상을 지원할 때 – For Android 2.1 and higher

서포트 라이브러리를 사용한다면, 다음과 같이 설정해야 합니다.

res/values/themes.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- the theme applied to the application or activity -->
    <style name="CustomActionBarTheme"
           parent="@style/Theme.AppCompat.Light.DarkActionBar">
        <item name="android:actionBarStyle">@style/MyActionBar</item>

        <!-- Support library compatibility -->
        <item name="actionBarStyle">@style/MyActionBar</item>
    </style>

    <!-- ActionBar styles -->
    <style name="MyActionBar"
           parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
        <item name="android:background">@drawable/actionbar_background</item>

        <!-- Support library compatibility -->
        <item name="background">@drawable/actionbar_background</item>
    </style>
</resources>

그리고 우리의 테마를 전체 앱이나 개별 액티비티에 적용합니다.

<application android:theme="@style/CustomActionBarTheme" ... />

난관봉착

아... 또 난관에 봉착했습니다. 위처럼 했지만 여러 군데에서 에러가 나옵니다. 
1.
<item name="android:actionBarStyle">@style/MyActionBar</item> 을 쓰면 에러가 나옵니다
2.

@drawable/actionbar_background 이란 것은 없습니다. 거기에 actionbar_background 라는 것을 만들어야 하나요?… 흠.. 건너 뛰겠습니다 액션바 자체를!!!!!
15년4월5일: 다시 돌아왔습니다. 없으면 만들어야 하는 것이군요.

텍스트 컬러 커스터마이징 – Customize the Text Color


To modify the color of text in the action bar, you need to override separate properties for each text element:
액션 바에 있는 텍스트의 컬러를 바꾸기 위해서, 우리는 각각의 속성을 덮어써야 합니다.

  • Action bar title:  텍스트 컬러 속성을 지정하는 사용자정의 스타일을 작성하고
    사용자 정의 actionBarStyle 에서 titileTextStyle 속성에 그 스타일을 지정합니다. (번역을 했지만 이해가 안갑니다. 아하… 줄여보겠습니다.
    스타일(텍스트 컬러 속성을 지정하는)을 작성한다 .
    사용자 정의 actionBarStyle 에 titleTextStyle 속성이 있다. 그 속성게 위에서 작성한 스타일을 지정한다.
    )

    Create a custom style that specifies the textColor property and specify that style for the titleTextStyle property in your custom actionBarStyle.

     주의 : titleTextStyle 가 적용된 사용자 정의 스타일은 TextAppearance.Holo.Widget.ActionBar.Title 을 부모 스타일로 사용한다.

  • Action bar tabs: 액티비티 테마 안에 actionBarTabTextStyle 를 덮어씁니다.
  • Action buttons: 액티비티 테마 안에서 actionMenuTextColor 를 덮어씁니다.

For Android 3.0 and higher only

When supporting Android 3.0 and higher only, your style XML file might look like this:

res/values/themes.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- the theme applied to the application or activity -->
    <style name="CustomActionBarTheme"
           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>

    <!-- ActionBar styles -->
    <style name="MyActionBar"
           parent="@style/Widget.Holo.ActionBar">
        <item name="android:titleTextStyle">@style/MyActionBarTitleText</item>
    </style>

    <!-- ActionBar title text -->
    <style name="MyActionBarTitleText"
           parent="@style/TextAppearance.Holo.Widget.ActionBar.Title">
        <item name="android:textColor">@color/actionbar_text</item>
    </style>

    <!-- ActionBar tabs text styles -->
    <style name="MyActionBarTabText"
           parent="@style/Widget.Holo.ActionBar.TabText">
        <item name="android:textColor">@color/actionbar_text</item>
    </style>
</resources>

For Android 2.1 and higher

When using the Support Library, your style XML file might look like this:

res/values/themes.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- the theme applied to the application or activity -->
    <style name="CustomActionBarTheme"
           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>

        <!-- Support library compatibility -->
        <item name="actionBarStyle">@style/MyActionBar</item>
        <item name="actionBarTabTextStyle">@style/MyActionBarTabText</item>
        <item name="actionMenuTextColor">@color/actionbar_text</item>
    </style>

    <!-- ActionBar styles -->
    <style name="MyActionBar"
           parent="@style/Widget.AppCompat.ActionBar">
        <item name="android:titleTextStyle">@style/MyActionBarTitleText</item>

        <!-- Support library compatibility -->
        <item name="titleTextStyle">@style/MyActionBarTitleText</item>
    </style>

    <!-- ActionBar title text -->
    <style name="MyActionBarTitleText"
           parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">
        <item name="android:textColor">@color/actionbar_text</item>
        <!-- The textColor property is backward compatible with the Support Library -->
    </style>

    <!-- ActionBar tabs text -->
    <style name="MyActionBarTabText"
           parent="@style/Widget.AppCompat.ActionBar.TabText">
        <item name="android:textColor">@color/actionbar_text</item>
        <!-- The textColor property is backward compatible with the Support Library -->
    </style>
</resources>

Customize the Tab Indicator


To change the indicator used for the navigation tabs, create an activity theme that overrides theactionBarTabStyle property. This property points to another style resource in which you override thebackground property that should specify a state-list drawable.

Note: A state-list drawable is important so that the tab currently selected indicates its state with a background different than the other tabs. For more information about how to create a drawable resource that handles multiple button states, read the State List documentation.

For example, here’s a state-list drawable that declares a specific background image for several different states of an action bar tab:

res/drawable/actionbar_tab_indicator.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<!-- STATES WHEN BUTTON IS NOT PRESSED -->

    <!-- Non focused states -->
    <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" />

    <!-- Focused states (such as when focused with a d-pad or mouse hover) -->
    <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" />


<!-- STATES WHEN BUTTON IS PRESSED -->

    <!-- Non focused states -->
    <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" />

    <!-- Focused states (such as when focused with a d-pad or mouse hover) -->
    <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

When supporting Android 3.0 and higher only, your style XML file might look like this:

res/values/themes.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- the theme applied to the application or activity -->
    <style name="CustomActionBarTheme"
           parent="@style/Theme.Holo">
        <item name="android:actionBarTabStyle">@style/MyActionBarTabs</item>
    </style>

    <!-- ActionBar tabs styles -->
    <style name="MyActionBarTabs"
           parent="@style/Widget.Holo.ActionBar.TabView">
        <!-- tab indicator -->
        <item name="android:background">@drawable/actionbar_tab_indicator</item>
    </style>
</resources>

For Android 2.1 and higher

When using the Support Library, your style XML file might look like this:

res/values/themes.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- the theme applied to the application or activity -->
    <style name="CustomActionBarTheme"
           parent="@style/Theme.AppCompat">
        <item name="android:actionBarTabStyle">@style/MyActionBarTabs</item>

        <!-- Support library compatibility -->
        <item name="actionBarTabStyle">@style/MyActionBarTabs</item>
    </style>

    <!-- ActionBar tabs styles -->
    <style name="MyActionBarTabs"
           parent="@style/Widget.AppCompat.ActionBar.TabView">
        <!-- tab indicator -->
        <item name="android:background">@drawable/actionbar_tab_indicator</item>

        <!-- Support library compatibility -->
        <item name="background">@drawable/actionbar_tab_indicator</item>
    </style>
</resources>

More resources

Advertisements

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중