Android tab bottom indicator change shape (안드로이드 Tab Indicator 모양 변경 하기)

 

우리가 기본적으로 사용 하는 Tab Layout 을 적용 하면 이런 모습니다. 

 

 

하단의 Indicator 모양을 아래와 같이 변경 하고 싶으면 어떻게 해야 할까?

 

 

방법은 아래와 같다. 

 

1. tab_selector.xml 을 drawable 폴더에 추가 한다. 

 

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring">
    <item android:gravity="center">
        <shape>
            <size
                android:width="3dp"
                android:height="3dp" />
            <corners android:radius="4dp" />
            <solid android:color="@color/colorAccent" />
        </shape>
    </item>
</layer-list>

 

2. TabLayout 에 아래와 같이 속성을 추가한다. 

 <com.google.android.material.tabs.TabLayout
        android:layout_width="match_parent"
        android:layout_height="38dp"
        android:layout_marginTop="15dp"
        app:tabTextColor="@color/text_color_gray"
        app:tabSelectedTextColor="@color/text_color_black"
        app:tabIndicator="@drawable/tab_selector"
        app:tabGravity="center"
        app:tabMode="fixed">

        <com.google.android.material.tabs.TabItem
            android:text="의류"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

        <com.google.android.material.tabs.TabItem
            android:text="가방"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

        <com.google.android.material.tabs.TabItem
            android:text="신발"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

        <com.google.android.material.tabs.TabItem
            android:text="액세서리"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

    </com.google.android.material.tabs.TabLayout>

 

app:tabIndicator="@drawable/tab_selector"  여기가 핵심이다             

1. 에서 만들었던 resource 를 적용하는 부분이다.  

또한 indicator 높이를 변경하고 싶다면

app:tabIndicatorHeight="10dp" 옵션을 이용해 위치 변경이 가능하다.

 

참고로 Indicator 모양은 그대로 놔두고 Indicator 의 넓이만 

텍스트 크기에 맞게 변경해 주고 싶으면

app:tabIndicatorFullWidth="false" 

옵션을 주변 자동으로 텍스트 길이에 맞게 indicator 넓이가 변경된다.