ViewPager Tablayout

TabLayout을 만드는 방법에 대해서 알아봅니다.

 

ViewPager가 넘어가도록 탭을 만드는 것입니다.

 

 

일단 build.gradle 에 아래와 같이 추가하고

implementation 'com.android.support:design:28.0.0'

 

그리고 XML 부분을 추가해주고나서

 

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

 

새로운 custom_tab.xml을 만들어줍니다.

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    xmlns:tools="http://schemas.android.com/tools">

    <TextView
        android:id="@+id/txt_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="#000000"
        android:gravity="center"
        tools:text="tab"
        android:textSize="30dp" />

</LinearLayout>

 

이제 tab을 추가해주고

 

onTabSelected 부분에서 viewpager와 연결해줍니다.

 

	layout_tab.addTab(layout_tab.newTab().setCustomView(createTabView("1번")))
        layout_tab.addTab(layout_tab.newTab().setCustomView(createTabView("2번")))
        layout_tab.addTab(layout_tab.newTab().setCustomView(createTabView("3번")))

        layout_tab.addOnTabSelectedListener(object  : TabLayout.OnTabSelectedListener{
            override fun onTabReselected(p0: TabLayout.Tab?) {


            }

            override fun onTabUnselected(p0: TabLayout.Tab?) {

            }
            

            override fun onTabSelected(p0: TabLayout.Tab?) {

                Log.e(TAG, p0.toString())
                if (p0 != null) {
                    viewpager_main.currentItem = p0.position
                }

            }

        })

 

 

밑에 탭을 없애주는 것을 해보겠습니다.

 

<com.google.android.material.tabs.TabLayout
        android:id="@+id/layout_tab"
        app:layout_constraintTop_toTopOf="parent"
        app:tabIndicatorHeight="0dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

app:tabIndicatorHeight="0dp"

 

 

 

 

그리고 탭의 밑의 색상의 바꿔주고 싶으면

 

app:tabIndicatorColor="@android:color/black"

 

를 추가해주면 됩니다.

<com.google.android.material.tabs.TabLayout
        android:id="@+id/layout_tab"
        app:layout_constraintTop_toTopOf="parent"
        app:tabIndicatorColor="@android:color/black"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>