[Android] TabLayout, TabItem 원하는 UI 만들기

삽질하면서 결국엔 원하는 UI를 만들었다. 삽질하며 알게된 것들을 기록한다.

 

원하던 모습

1. 탭들 바닥에는 라인이 깔려있다.

2. 인디케이터 길이가 탭 하나의 넓이보다는 좁지만 텍스트 너비보다는 크다

3. 탭 간 디바이더가 있다.

 

결과 코드

layout xml 코드

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/target"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:background="@drawable/bg_tablayout"
        app:tabIndicator="@drawable/indicator_2">

        <com.google.android.material.tabs.TabItem
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="딸기" />

        <com.google.android.material.tabs.TabItem
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="사과" />

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

디바이더 삽입 코드

은인 : https://ovso.github.io/blog/2018/11/06/tablayout_divider/

TabLayout에 구분선(Divider) 넣기

 

사용된 drawable 파일들

1) 흰 배경에 바닥 줄 

흰 배경에 바닥 줄 처럼 보이지만 실제로 바닥에 흰색을 바닥에서 3dp 띄워올림

흰 배경에 바닥 줄 그리는 방식으로, 흰 배경에 테두리 색을 넣은 사각형 shape의 위와 옆 마진 값을 마이너스 값을 주는 방식도 있다. 정말 이렇게 밖에 그리지 못하는가... 구글링해도 딱히 더 좋은 방법들을 못 찾겠다.

 

2) 인디케이터

인디케이터 drawable

은인 : https://sweetcoding.tistory.com/162

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

은인이 써주신 형식(계층구조)대로 인디케이터를 만들어야 한다. 그러지 않아서 삽질해온 거였다.

 

3) 디바이더

디바이더를 그리는데 구지 custom drawable을 작성하지 않아도 된다는 것을 확인했다. 위의 디바이더 삽입 코드 이미지에서 주석처리된 부분으로 디바이더의 width 부분 사이즈 조정 가능하다. 나는 drawable에서 width 사이즈를 잡으니 코드 상 따로 디바이더의 width를 조정할 필요가 없었다.

디바이더 width 사이즈 지정

 

삽질로 알게된 것들

TabLayout 속성 app:tabIndicatorFullWidth="false"

tabIndicatorFullWidth 속성으로 인디케이터의 너비를 조정할 수 있다. 

true > 탭 너비 꽉 채움

false > 탭의 text 너비 만큼 채움

app :tabIndicatorFullWidth ="true" 혹은 미설정

app :tabIndicatorFullWidth ="false"

app :tabIndicatorFullWidth ="false" + android:text="    딸기   "

 

TabItem 속성 android:layout + TabLayout 속성 app:tabIndicatorHeight

TabItem 의 속성에 layout xml 파일 레퍼런스를 넣어 TabItem의 레이아웃을 커스텀할 수 있다.

TabLayout의 속성으로 인디케이터의 높이를 조정할 수 있다. 

나는 이 예제에서 인디케이터를 사용하는 대신에, 커스텀 레이아웃의 하단에 고정 뷰를 만들고, select 상태 여부에 따라 커스텀 레이아웃의 하단 뷰가 노출되거나 노출되지 않도록 했다.

TabItem에서 android:layout="@layout/tabitem" + TabLayout에서 app:tabIndicatorHeight="0dp"

 

app:tabRippleColor속성에 투명한 값을 넣어 탭할 때의 리플효과를 없앴다.

TabItem의 커스텀 레이아웃

TabItem의 커스텀 레이아웃에서 TextView의 아이디를 "@android:id/text1"라고 써야지 TabItem의 android:text 속성에 넣은 값이 정상적으로 커스텀 레이아웃에서 나온다. 중요.

은인 : https://stackoverflow.com/a/38035415/9287140

How is TabItem used when placed in the layout XML?

하단 뷰의 background는 selector drawable로 부모의 속성을 android:duplicateParentState="true"로 받아서 동작하게 했다.

뷰 select 상태 따라 drawable 구분