Custom TabLayout - Background, Indicator

TabLayout과 ViewPager2를 연결하고 탭에 이미지와 텍스트를 올리는 버전에서

탭의 배경과 indicator를 이미지로 수정하는 샘플이다.

 

결과이미지

 

---

 

Indicator이미지 추가

res / drawable / icon_indicator.png

 

그 외의 이미지나 레이아웃은 이전에 올린 샘플과 동일하다.

https://quantum-programmer.tistory.com/entry/Custom-TabLayout

Custom TabLayout

 

---

선택시 탭배경

 

res / drawable / tab_selected.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <corners android:bottomLeftRadius="18dp" android:bottomRightRadius="18dp" />
    <solid android:color="@color/light_yellow"/>
</shape>

 

 

 

 

 

 

미선택시 탭배경

res / drawable / tab_unselected.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <corners android:bottomLeftRadius="18dp" android:bottomRightRadius="18dp" />
    <solid android:color="@color/cardview_shadow_start_color"/>
</shape>

 

 

 

 

 

 

---

탭배경으로 설정할 Selector

res / drawable / selector_tab.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/tab_selected" android:state_selected="true" />
    <item android:drawable="@drawable/tab_unselected" android:state_selected="false" />
</selector>

 

---

ActivityMain의 TabLayout 설정

구분	설명
tabIndicatorGravity	탭에 바형태로 표시되는 부분을 위, 아래로 설정
tabIndicatorHeight	탭에 바형태로 표시되는 부분의 높이
tabIndicatorFullWidth	탭의 바형태가 탭의 전체가로사이즈와 동일하게 설정
tabIndicatorAnimationMode	탭전환시 보여지는 인디게이터의 애니메이션 종류설정
tabIndicatorColor	인디게이터의 색상(이미지로 설정해도 적용된다)
tabBackground	탭의 배경설정
tabIndicator	인디케이터 설정(색상 또는 이미지 )
tabGravity	탭의 가로영역설정 tabMode가 fixed일 때는 start나 center 차이가 없다 tabMode가 scrollable일 때 start는 왼쪽부터 정렬, center는 중앙부터 정렬한다. tabMode가 fixed이면 가로화면을 가득 채운다.
tabMode	탭을 모두 한 화면에 또는 스크롤하여 보이게 할지 설정

 

 

res / layout / activity_main.xml

다른 부분은 이전 샘플 내용과 동일하다.

<com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="0dp"
        android:layout_height="100dp"
        app:tabMode="fixed"
        app:tabGravity="fill"
        app:tabIndicatorGravity="top"
        app:tabIndicatorHeight="5dp"
        app:tabIndicatorFullWidth="false"
        app:tabIndicatorAnimationMode="elastic"
        app:tabIndicatorColor="@color/black"
        app:tabBackground="@drawable/selector_tab"
        app:tabIndicator="@drawable/icon_indicator"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent">
    </com.google.android.material.tabs.TabLayout>

 

---