[Android] 탭 레이아웃(TabLayout) 적용하기

실행결과

TabLayout 실행결과

TabLayout을 이용해 항목 선택에 따라 FrameLayout의 배경색의 변화를 주었습니다.

---

build.gradle (Module : app)

android {
    ...
    viewBinding true
}

dependencies {
    ...
    implementation 'com.google.android.material:material:1.7.0'
}

뷰 바인딩을 추가하고, TabLayout은 머티리얼 디자인이므로 material 의존성을 추가합니다.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/store_fragment_tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

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

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

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

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

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

    <FrameLayout
        android:id="@+id/tab_layout_container"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/store_fragment_tablayout">
    </FrameLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

TabLayout 안에 TabItem이 들어가는 형식입니다.

생성할 탭 갯수만큼 TabItem을 생성하고, 탭 이름을 설정합니다.

만약 TabLayout에 TabItem의 갯수가 많아져 좌우로 스크롤이 필요한 경우 app:tabMode="scrollable" 속성을 작성합니다.

MainActivity

class MainActivity : AppCompatActivity() {
    private val binding by lazy {
        ActivityMainBinding.inflate(layoutInflater)
    }
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(binding.root)

        setTabLayout()
    }
    private fun setTabLayout() {
        // 초기 tab 세팅
        binding.tabLayoutContainer.setBackgroundResource(R.color.purple_700)

        binding.storeFragmentTablayout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
            // tab이 선택되었을 때
            override fun onTabSelected(tab: TabLayout.Tab?) {
                when (tab!!.position) {
                    0 -> binding.tabLayoutContainer.setBackgroundResource(R.color.purple_700)
                    1 -> binding.tabLayoutContainer.setBackgroundResource(R.color.white)
                    2 -> binding.tabLayoutContainer.setBackgroundResource(R.color.purple_200)
                    3 -> binding.tabLayoutContainer.setBackgroundResource(R.color.teal_200)
                }
            }
            // tab이 선택되지 않았을 때
            override fun onTabUnselected(tab: TabLayout.Tab?) {

            }
            // tab이 다시 선택되었을 때
            override fun onTabReselected(tab: TabLayout.Tab?) {

            }
        })
    }
}

초기 앱이 실행되었을 때 0번째 tab이 선택된 상황을 설정하고, TabLayout의 항목 선택에 따른 변화는 addOnTabSelectedListener를 통해 설정이 가능합니다.

 

저는 TabLayout의 항목 선택시 tab_layout_container의 배경색을 바꾸는 간단한 예제를 작성했습니다.

실제로는 tab이 선택되었을 때 해당 tab에 따른 프래그먼트를 호출하는 방식으로 많이 사용됩니다.