Android tab bottom indicator change shape (안드로이드 Tab Indicator 모양 변경 하기)공부방/Android2020. 3. 27. 14:29
Table of Contents
우리가 기본적으로 사용 하는 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 넓이가 변경된다.
반응형
'공부방 > Android' 카테고리의 다른 글
@soycrab :: 꿀맛코딩
행복한 코딩을 위하여!
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!