CustomTab 만들기

만들려는 모양은 아래 그림 참고

1) Tablayout을 생성한 뒤 3가지 설정을 추가한다.

1. app:tabPaddingEnd="-1dp"
2. app:tabPaddingStart="-1dp"
3. app:tabIndicator="@null"

1,2번을 하지 않으면 빨간 표시 부분에 빈 공간이 남는다. 3번을 하지 않으면 default indicator가 보인다.

 

예제 코드)

  <com.google.android.material.tabs.TabLayout
                   android:id="@+id/tabs"
                   android:layout_width="match_parent"
                   android:layout_height="60dp"
                   android:background="#ffffff"
                   app:tabPaddingEnd="-1dp"
                   app:tabPaddingStart="-1dp"
                   app:tabIndicator="@null"/>

이제 탭을 채워보자.

custom이므로 이미지도 넣을 수 있고 어떤 것을 넣어도 상관없지만 나의 경우는 글자만 넣었다. 내용을 참고하면 변경은 어렵지 않다. 

예제 코드)

private fun setTab() {
        titleList.add(0,"1번")
        titleList.add(1,"2번")
        tabs.run {
            titleList.forEach {
                var newTab = tabs.newTab().setCustomView(createTabView(it))
                addTab(newTab)
            }
            setTabGravity(TabLayout.GRAVITY_FILL)
            addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
                override fun onTabSelected(tab: TabLayout.Tab) {
                    if(tabs.tabCount > 0) {
                        selectTabItem(tab.position)
                    }
                }
                override fun onTabUnselected(tab: TabLayout.Tab) {}
                override fun onTabReselected(tab: TabLayout.Tab) {}
            })
        }

    }

    private fun createTabView(tabTitle : String): View {
        val inflater = getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater
        val view = inflater.inflate(R.layout.layout_tab_item, null)
        view.tv_automation_tab_title.text = tabTitle
        return view

    }

layout_tab_item.xml은 아래와 같다.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/rl_tab_layout"
        android:layout_width="match_parent"
        android:layout_height="61dp">
    <TextView
            android:id="@+id/tv_automation_tab_title"
            android:layout_width="wrap_content"
            android:layout_height="39dp"
            android:textSize="16dp"
            android:includeFontPadding="false"
            android:gravity="center_vertical"
            android:textColor="@color/selector_click_tab"
            android:layout_centerInParent="true"/>
    <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_above="@+id/view_sub_margin"
            android:background="@drawable/selector_indicator_sub_tab"/>
    <View
            android:id="@+id/view_sub_margin"
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_alignParentBottom="true"
            android:background="@drawable/selector_indicator_tab"/>

</RelativeLayout>

<View>를 2개 추가한 이유는 선택된 탭의 indicator와 선택되지 않은 indicator의 크기를 다르게 해달라고 요구해서이다.

각각 코드는 아래와 같다.

selector_indicator_sub_tab.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="#ffffff"/>
        </shape>
    </item><!-- pressed -->
    <item android:state_focused="true">
        <shape android:shape="rectangle">
            <solid android:color="#222222"/>
        </shape>
    </item><!-- focused -->
    <item android:state_selected="true">
        <shape android:shape="rectangle">
            <solid android:color="#222222"/>
        </shape>
    </item><!-- selected -->
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#ffffff"/>
        </shape>
    </item>
    <!-- default -->
</selector>

selector_indicator_tab.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="#ffffff"/>
        </shape>
    </item><!-- pressed -->
    <item android:state_focused="true">
        <shape android:shape="rectangle">
            <solid android:color="#222222"/>
        </shape>
    </item><!-- focused -->
    <item android:state_selected="true">
        <shape android:shape="rectangle">
            <solid android:color="#222222"/>
        </shape>
    </item><!-- selected -->
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#f5f5f5"/>
        </shape>
    </item>
    <!-- default -->
</selector>

 

수 많은 경우 중 위 그림에 해당되는 것이므로 중간중간 변경을 통해 원하는 디자인에 따라 쉽게 변경 가능할 것이다.