반응형

액션바의 텍스트 색상(Text Color) 커스터마이즈(사용자 정의) 하기

----------------------------------------------------------------

 액션바(Action Bar)의 텍스트 컬러를 수정하려면, 각 각의 텍스트 요소에 대해 별도의 속성을 재 정의(override) 해야 합니다.


° Action Bar title : 여러분의 커스텀 ActionBarStyle에 titleTextStyle 속성과 textColor 속성을 지정한 커스텀 스타일을 만듭니다.

 Note: 커스텀 스타일은 TextAppearance.Holo.Widget.ActionBar.Title 을 부모 스타일로 사용 한 titelTextStyle 에 적용됩니다.


° Action Bar tabs : 여러분의 액티비티 테마(Activity theme)에 actionBarTabTextStyle을 재 정의(override)

° Action Button : 여러분의 액티비티 테마(Activity theme)에 actionMenuTextColor를 재 정의(override)



Android 3.0 이상에서

 Android 3.0 이상을 지원한다면, 여러분의 스타일(Style) XML 파일은 아래와 같을 겁니다.


res/values/theme.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>

 



Android 2.1 이상에서

 Support Library를 사용 한다면, 여러분의 스타일(Style) XML 파일은 아래와 같을 겁니다.


res/values/theme.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>






액션바의 Tab Indicator 커스터마이즈(사용자 정의) 하기

----------------------------------------------------------------

 navigation tabs(탐색 탭)에 사용되는 indicator 를 변경하려면, actionBarTabStyle 속성을 재 정의(override) 한 액티비티 테마(Theme)를 만들어야 합니다. 이 속성은 state-list drawable이 지정된 배경(background)을 재 정의한 다른 스타일 리소스를 가리킵니다.




 Note : 하나의 state-list drawable 은 현재 선택된 탭이 탭과 다른 배경으로 그 상태을 가리키도록 하는 것은 중요합니다. 다양한 버튼의 상태에 따라 drawable 리소드를 다르게 처리할 수 있는 방법에 대한 자세한 내용은 개발자 사이트의 State List 도큐먼트를 참고하시기 바랍니다.




예를 들어, 여기 액션바 탭(Action Bar Tab)의 여러 다른 상태에 따라 지정된 배경 이미지가 다르게 선언된 state-list drawable 있습니다.


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>




Android 3.0 이상에서

 Android 3.0 이상을 지원한다면, 여러분의 스타일(Style) XML 파일은 아래와 같을 겁니다.


res/values/theme.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>

 



Android 2.1 이상에서

 Support Library를 사용 한다면, 여러분의 스타일(Style) XML 파일은 아래와 같을 겁니다.


res/values/theme.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>






추가 리소스들

° 개발자 사이트의 Action Bar 가이드에 나열되어 있는 action bar의 스타일(Style) 속성들을 참조하세요.

° 개발자 사이트의 Style and Themes 가이드에 있는 테마(Theme) 작업 방법에 대해 학습하세요.

° 더욱 완벽한 액션바의 스타일링을 위해서는 Android Action Bar Style Generator를 해보시기 바랍니다. 

 

Android Action Bar Style Generator
jgilfelt.github.io
본문으로 이동

​

반응형
저작자표시

'Android 개발자사이트 튜토리얼' 카테고리의 다른 글

서로 다른 디바이스들 지원하기(Supporting Different Devices)  (0) 2015.03.27
액션바(Action Bar) 오버레이(Overlaying) 하기  (0) 2015.03.27
액션바(Action Bar) 꾸미기 1  (0) 2015.03.27
액션바(Action Bar)에 액션버튼들(Action Buttons) 추가하기  (0) 2015.03.27
Action Bar 만들기  (0) 2015.03.27

+ Recent posts

티스토리툴바