[Android/Kotlin] TabLayout: unselected tab indicator/미선택된 탭의 이터레이터 색 설정/탭 밑줄/tab underline

아래 UI는 "동네 고영희"앱의 UI입니다^______^ 귀엽죠

 

해당 UI의 Tab 부분에 선택이 안 된 tab 아래 underline이 있는 걸 확인할 수 있다!!

만들어봅시다

---

res>drawable>tab_underline.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/beige_F7F3E9" />
        </shape>
    </item>
    <item>
        <inset android:insetBottom="1.5dp">
            <shape android:shape="rectangle">
                <solid android:color="@color/white" />
            </shape>
        </inset>
    </item>
</layer-list>

이 xml은 뒤에 일단 밑줄의 색이 될 사각형을 깔아놓고

그 위에 탭 레이아웃의 배경색인 흰 색 사각형을 바닥에서 1.5dp만큼 올려깐 것이다.

 

이 xml을 TabLayout에 요로코롬 달아주면 된다.ㅎ

app:tabBackground="@drawable/tab_underline"

 

<!--탭 레이아웃-->
<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabTabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabIndicatorGravity="bottom"
    app:tabIndicatorHeight="3dp"
    app:tabBackground="@drawable/tab_underline"
    app:tabTextAppearance="@style/tab_text"
    app:tabSelectedTextColor="@color/brown_473A22"
    app:tabTextColor="@color/beige_E3DECF"
    app:tabIndicatorColor="@color/brown_473A22">
    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/cat_detail_tab1_info"/>
    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/cat_detail_tab2_note"/>
</com.google.android.material.tabs.TabLayout>

---

참고

https://stackoverflow.com/questions/36367114/set-color-to-unselected-tab-indicator-in-tab-layout

Set color to unselected tab indicator in tab layout