안규 공부방

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 폴더에 만들어 넣어야 합니다.
 
※ 혹시 도움이 되셨다면 댓글에 한마디 남겨주세요!
작성자   비밀번호
자동글 방지     (자동글 방지 기능입니다.)
내용   댓글달기 
이메일 문의 : cak0280@nate.com  
Copyright 2000 By ENTERSOFT.KR All Rights Reserved.