[Android] TabLayout textsize & Icon 색상 & Indicator 변경 방법

[잊어버릴까봐 기록]

 

 

1. TabLayout에 표현되는 Text Size를 조절하는 방법

아래 코드와 같이 style을 새로 생성한 후, tabLayout이 있는 xml파일에 적용한다.

 

values/styles.xml

    <style name="tab_text" parent="TextAppearance.Design.Tab">
        <item name="android:textSize">10sp</item>
    </style>

tabLayout

app:tabTextAppearance="@style/tab_text"

 

 

2. TabLayout 임의의 Tab 선택 시 text 색상 변경 방법

default 색상은 tabTextColor로 설정하며, 선택 시 색상을 변경하기 위해서 tabSelectedtextColor에 색상을 설정한다.

app:tabTextColor="@color/colorUnselect"
app:tabSelectedTextColor="@color/colorSelect"

 

3. TabLayout Icon 설정 및 색상 변경 방법

 

TabItem에 icon에 drawable 파일을 설정한다.

TabItem

android:icon="@drawable/ic_baseline_home_24"

 

색상을 사전에 설정하며, 처음에 default로 나오는 tab은 가장 왼쪽(0번)에 있는 tab이다. 따라서 0번 tab을 선택했을 때의 색으로 설정하고, 그 외의 tab은 선택하지 않았을 때의 색으로 설정한다. 이는 getTabAt(int).getIcon().setColorFilter(int color, PorterDuff.Mode.SRC_IN); 을 통해 변경할 수 있다.

        final int unSelected = ContextCompat.getColor(context, R.color.colorUnselect);
        final int selected = ContextCompat.getColor(context, R.color.colorSelect);
		
        tabLayout.getTabAt(0).getIcon().setColorFilter(selected, PorterDuff.Mode.SRC_IN);
        for(int i = 1; i < tabLayout.getTabCount(); i++) {
            tabLayout.getTabAt(i).getIcon().setColorFilter(unSelected, PorterDuff.Mode.SRC_IN);
        }

 

 

3. Indicator 위치 및 색상 변경 방법

 

tabIndicatorGravity를 통해 Indicator 위치를 설정하며, 색은 IndicatorColor로 변경할 수 있다.

    app:tabIndicatorGravity="top"
    app:tabIndicatorColor="@color/colorSelect"

 

+) 추가로 임의의 Tab을 선택했을 때 (눌렀을 때) 해당 Tab이 회색으로 누른 순간만큼 변하는 현상이 있다. 이를 제거하기 위해 눌렀을 때의 색을 투명색으로 설정해주는 코드를 적어준다.

    app:tabRippleColor="@color/colorTransparent"