[안드로이드] TabLayout 속성 설정 총정리: Text color/size, Tab height/backgroundColor, Indicator line width/color, Icon 등

# 안드로이드 TabLayout 속성 설정 총정리

1. Tab 텍스트 색상/크기/스타일(볼드체)

2. Tab 높이/배경색

3. Tab Indicator(밑줄) 두께/색깔/위치

4. Tab 아이콘

5. TabLayout 너비 화면 채우기

6. Tab 선택시 Ripple 효과 제거 방법

---

# TabLayout Text 설정

1. 텍스트 색상(Text Color)

기본 텍스트 색상과, 탭이 선택되었을 때의 텍스트 색깔을 설정할 수 있다.

 

- 기본 텍스트 색상(레이아웃 XML파일 > TabLayout 태그)

app:tabTextColor="색상"

 

- 선택된 텍스트 색상(레이아웃 XML파일 > TabLayout 태그)

app:tabSelectedTextColor="색상"

 

 

2. 텍스트 사이즈(Text Size) + 스타일(Bold 체 등) 

- styles.xml 파일을 활용하면 텍스트 크기, 스타일을 동시에 설정할 수 있다.

 

1step: (res > values > styles.xml 파일)

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="tabTextSizeBold" parent="TextAppearance.Design.Tab">
        <item name="android:textSize">16sp</item>
        <item name="android:textStyle">bold</item>
    </style>
</resources>

 

2step: (레이아웃 XML파일 > TabLayout 태그)

app:tabTextAppearance="@style/tabTextSizeBold"

---

# TabLayout Tab 설정

1. 탭 높이(Tab height)

(레이아웃 XML파일 > TabLayout 태그)

android:layout_height="200dp"

 

 

2.탭 색상(Tab backgroundColor)

- 일반 탭 색상: (레이아웃XML파일 > TabLayout태그)

android:background="색상"

 

- 선택 탭 색상: 일반 탭과 선택된 탭의 배경색을 다르게 설정하려면, selector 를 사용하면 된다.

1step: (res > drawable > tab_selector.xml 파일)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="선택색상" android:state_selected="true"/>
    <item android:drawable="일반색상"/>
</selector>

 

2step: (레이아웃 XML 파일 > TabLayout 태그)

app:tabBackground="@drawable/tab_selector"

 

* selector 에 대한 상세 내용은 아래 글 참고

[안드로이드] 커스텀 버튼 체크/선택/포커스 상태별 구분 적용 방법: selector, shape

---

# TabLayout Indicator Bottom line 설정

1. 밑줄 색상

(레이아웃 XML 파일 > TabLayout 태그)

app:tabIndicatorColor="색상"

 

 

2. 밑줄 두께

(레이아웃 XML 파일 > TabLayout 태그)

app:tabIndicatorHeight="3dp"

 

 

3. 밑줄 위치

(레이아웃 XML 파일 > TabLayout 태그)

* strech로 설정하면, 밑줄이 탭 전체를 채운다.

app:tabIndicatorGravity="top | center | bottom | stretch"

---

# Tab Icon 설정

(레이아웃 XML파일 > TabLayout 태그 > TabItem 태그)

android:icon="@drawable/아이콘"

---

# TabLayout 전체 너비 설정

- 태블릿 등 넓은 화면에서 TabLayout 영역이 너비를 꽉 채우게 설정

(레이아웃 XML파일 > TabLayout 태그)

app:tabGravity="fill"

---

# 탭 선택시 Ripple 효과 제거 방법

- 탭 선택시, 반투명 회색 물방울이 생기는 효과를 제거하려면, RippleColor를 투명한 색으로 설정해주면 된다.

app:tabRippleColor="@android:color/transparent"

---

자주 사용하는 안드로이드 TabLayout 속성 설정 방법을 정리했다.

 

각 속성들은 자바/코틀린 코드 상에서도 동적으로 설정이 가능하다.

자세한 방법과 이외의 다양한 속성들은 레퍼런스를 참고하자.

 

https://developer.android.com/reference/com/google/android/material/tabs/TabLayout#xml-attributes_1