Android > ActionBar - Tab Indicater line 스타일 적용방법
등록일 : 2017-07-05 19:01
조회수 : 93,598
지난번에 Action Bar를 추가하는 것까지 공부 했는데 이번에는 Action Bar Style 변경 및 테마 변경 방법을 알아보겠습니다.
Aab 이 선택/해제 됐을 경우 UnderBar 표시가 됩니다. 이 UnderBar를 스타일링하는 방법에 대해서 설명합니다.
navigation tabs 가 사용하는 indicator 를 변경하려면, actionBarTabStyle 을 재정의한 activity theme 을 만들어야 한다.
이 속성은 다른 style 리소스를 가리키게 되며, 이 스타일 리소스의 background 속성을 state-list drawable 을 사용하도록 설정한다.
res/values 디렉토리에 themes.xml 파일을 새로 생성 하고 아래 코드를 입력 합니다.
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">#FF0000</item>
<item name="android:actionBarTabStyle">@style/ActionBarTabStyle.Example</item>
</style>
<style name="ActionBarTabStyle.Example" parent="@android:style/Widget.Holo.ActionBar.TabView">
<item name="android:background">@drawable/tab_indicator_ab_example</item>
</style>
</resources>
Tab Indicater 를 수정하기 위해서는 actionBarTabStyle 아이템을 추가해야 합니다.
여기에서 중요한것은 @drawable/tab_indicator_ab_example
drawable 폴더에 tab_indicator_ab_example.xml 파일을 만들어 줘야 합니다.
drawable/tab_indicator_ab_example.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"<
<!-- Non focused states -->
<item android:state_focused="false" android:state_selected="false" android:state_pressed="false"
android:drawable="@android:color/transparent" />
<item android:state_focused="false" android:state_selected="true" android:state_pressed="false"
android:drawable="@drawable/tab_selected_example" />
<!-- Focused states -->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="false"
android:drawable="@drawable/tab_unselected_focused_example" />
<item android:state_focused="true" android:state_selected="true" android:state_pressed="false"
android:drawable="@drawable/tab_selected_focused_example" />
<!-- Pressed -->
<!-- Non focused states -->
<item android:state_focused="false" android:state_selected="false" android:state_pressed="true"
android:drawable="@drawable/tab_unselected_pressed_example" />
<item android:state_focused="false" android:state_selected="true" android:state_pressed="true"
android:drawable="@drawable/tab_selected_pressed_example" />
<!-- Focused states -->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="true"
android:drawable="@drawable/tab_unselected_pressed_example" />
<item android:state_focused="true" android:state_selected="true" android:state_pressed="true"
android:drawable="@drawable/tab_selected_pressed_example" />
</selector>
Tab Indicater 의 눌러지는 상태를 배경이미지로 사용할것을 설정하는 내용입니다.
tab_selected_example.png
tab_unselected_example.png
tab_selected_focused_example.png
tab_selected_pressed_example.png
파일은 drawable 폴더에 만들어 넣어야 합니다.