[안드로이드][TabLayout] 탭의 클릭, 활성, 눌림 상태마다 배경 바꾸기

사전 준비 작업

TabLayout 작성

액티비티 어딘가에 탭 레이아웃을 추가합니다.

<com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="44dp"
        app:tabTextAppearance="@android:style/TextAppearance.Widget.TabWidget"
        app:layout_constraintTop_toBottomOf="@+id/activity_description"
        app:tabIndicator="@color/tab_background_unselected"
        app:tabSelectedTextColor="@color/tab_background_unselected"
        tools:layout_editor_absoluteX="195dp">

        <com.google.android.material.tabs.TabItem
            android:id="@+id/tab_item1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/login_info_registration_tab1"
            />

        <com.google.android.material.tabs.TabItem
            android:id="@+id/tab_item2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/login_info_registration_tab2" />
    </com.google.android.material.tabs.TabLayout>

TabLayout 테마 설정

@values/themes.xml

<style name="Base.Widget.Design.TabLayout" parent="android:Widget">
        <item name="tabBackground">@drawable/tab_background</item>
        <item name="tabIndicatorHeight">2dp</item>
</style>

인터랙션 정의

인터랙션 케이스 1: 흔함과 딱딱함

꾹 누를 시 리플 효과가 밋밋하게 있습니다

흔하게 볼 수 있는 탭 인터랙션입니다.

@drawable/tab_background.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_activated="true"
        android:drawable="@drawable/tab_background_activated" />
    <item android:state_pressed="true"
        android:drawable="@drawable/tab_background_pressed" />
    <item android:state_selected="false"
        android:state_pressed="false"
        android:state_focused="false"
        android:drawable="@drawable/tab_background_unselected" />
</selector>

인터랙션 케이스 2: 통통통

가벼운 터치로 탭 전환

활성화된 탭을 다시 탭할 때

활성화된 탭을 다시 꾹- 탭할 때

활성 탭을 눌러 리플 효과를 일으킬 수 있다는 점에서 케이스1과 차이를 보입니다. XML에서 셀렉터의 분기 조건 하나를 수정하면 되는데요. "활성화 상태 && !눌림 상태" 일 때만 정적인 빨간 배경을 뿌려고, "눌림 상태"일 때는 리플 효과를 사용하는 식이죠.
@drawable/tab_background.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_activated="true" android:state_pressed="false"
        android:drawable="@drawable/tab_background_activated" />
    <item android:state_pressed="true"
        android:drawable="@drawable/tab_background_pressed" />
    <item android:state_selected="false"
        android:state_pressed="false"
        android:state_focused="false"
        android:drawable="@drawable/tab_background_unselected" />
</selector>

구현

배경 드로어블 - Activated 상태

탭이 활성되었을 때, 붉은색 사각형 배경을 입힙니다.

@drawable/tab_background_activated

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <solid android:color="@color/tab_background_activated" />
</shape>

배경 드로어블 - Pressed 상태

탭이 눌릴 때는 하얀 사각형 위에 붉은색 리플 효과를 뿌려줍니다.

<ripple> 태그, 혹은 RippleDrawable은 첫번째 자손 뷰 위에다가 물방울 효과를 뿌려준다.

@drawable/tab_background_pressed

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/tab_background_activated">
    <item android:drawable="@color/tab_background_unselected" />
</ripple>

배경 드로어블 - Unselected 상태

탭이 선택되지 않은 상황에서는, 하얀색 배경을 그려줍니다.

@drawable/tab_background_pressed

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/tab_background_unselected" />
</shape>

색상 매핑

@values/colors.xml

<resources>
    <color name="app_primary">#273649</color>
    <color name="tab_background_unselected">#FCFCFC</color>
    <color name="tab_background_activated">#7C2D2D</color>
    <color name="button_add">#FCFCFC</color>
    <color name="button_add_icon">#7C2D2D</color>
    <color name="button_add_pressed">#EBEBEB</color>
</resources>

스트링 매핑

@values/strings.xml

<resouces>
    <string name="login_info_registration_tab1">miHoYo 계정 1회 연동</string>
    <string name="login_info_registration_tab2">쿠키 값 직접 입력</string>
</resouces>