Belajar Membuat Tab Layout dengan ViewPager2

Sub CPMK :

Mahasiswa dapat mengetahui
Mahasiswa dapat mengedit
Mahasiswa dapat membuat

Alat dan Bahan :

Laptop atau PC dengan Spesifikasi Prosesor minimal Corei5 dan RAM 8 GB
Android Studio
Android Device

Langkah Kerja

Buat Project baru di android studio, dengan kriteria sebagai berikut :

Nama Project	MyTabLayout
Target & Minimal SDK	Phone and Tablet, API Level 21
Tipe Activity	Empty Activity
Language	Kotlin

Pertama, tambahkan terlebih dahulu library ViewPager2 dan material design untuk membuat TabLayout. Silakan masuk ke build.gradle(Module: app) dan tambahkan kode berikut:

implementation 'com.google.android.material:material:1.4.0'
implementation "androidx.viewpager2:viewpager2:1.0.0"

Selanjutnya klik sync project di pojok kanan atas supaya library tersebut terunduh ke project kita.

Setelah itu, tambahkan TabLayout dan ViewPager2 ke activity_main.xml dengan kode berikut:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity">
 
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        app:tabTextColor="@android:color/white"/>
    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

Kemudian buat fragment baru terlebih dahulu yang akan dipakai untuk isi dari TabLayout. Caranya yaitu klik kanan pada nama package → new → Fragment → Fragment (Blank).

Beri nama ChatFragment. Kemudian klik Finish.

Selanjutnya ubah layout pada fragment_chat.xml menjadi seperti berikut:

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

    <TextView
        android:id="@+id/section_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:text="@string/content_tab_chat" />

</FrameLayout>

Jangan lupa untuk menambahkan resource teks pada res → value → strings.xml. Resource ini akan dipakai sampai akhir latihan.

<resources>
    <string name="app_name">MyTabLayout</string>
    <string name="content_tab_chat">Content Chat</string>
    <string name="content_tab_status">Content Status</string>
    <string name="tab_text_1">Chat</string>
    <string name="tab_text_2">Status</string>

    <!-- TODO: Remove or change this placeholder text -->
    <string name="hello_blank_fragment">Hello blank fragment</string>
</resources>

Buat fragment sekali lagi dengan cara yang sama, yaitu klik kanan pada nama package → new → Fragment → Fragment (Blank). Beri nama StatusFragment dan klik Finish. Kemudian ubah layout pada fragment_status.xml menjadi seperti berikut:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".StatusFragment">
    
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:text="@string/content_tab_status" />

</FrameLayout>

Selanjutnya kita akan membuat kelas baru untuk mengatur ViewPager2 dan TabLayout. Caranya, klik kanan pada nama package → new → Kotlin Class / Java Class. Beri nama SectionsPagerAdapter. Pertama buat terlebih dahulu constructor dengan menambahkan kode berikut:

class SectionsPagerAdapter(activity: AppCompatActivity) : FragmentStateAdapter(activity) {
 
}

Jika muncul baris merah, jangan khawatir. Arahkan kursor pada SectionsPagerAdapter, tekan Alt+Enter untuk mendapatkan suggestion, dan pilih implement members (Kotlin) atau impement methods (Java).

Kemudian pilih kedua method dan klik OK

Selanjutnya ubah kode di dalamnya, sehingga kelas SectionsPagerAdapter secara keseluruhan menjadi seperti berikut:

class SectionsPagerAdapter(activity: AppCompatActivity) : FragmentStateAdapter(activity) {

    override fun createFragment(position: Int): Fragment {
        var fragment: Fragment? = null
        when (position) {
            0 -> fragment = ChatFragment()
            1 -> fragment = StatusFragment()
        }
        return fragment as Fragment
    }

    override fun getItemCount(): Int {
        return 2
    }
}

Kemudian panggil kelas yang baru saja dibuat. Mulailah dengan setup ViewPager2 dan TabLayout pada kelas MainActivity menggunakan kode berikut:

class MainActivity : AppCompatActivity() {

    companion object {
        @StringRes
        private val TAB_TITLES = intArrayOf(
            R.string.tab_text_1,
            R.string.tab_text_2
        )
    }
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val sectionsPagerAdapter = SectionsPagerAdapter(this)
        val viewPager: ViewPager2 = findViewById(R.id.view_pager)
        viewPager.adapter = sectionsPagerAdapter
        val tabs: TabLayout = findViewById(R.id.tabs)
        TabLayoutMediator(tabs, viewPager) { tab, position ->
            tab.text = resources.getString(TAB_TITLES[position])
        }.attach()
        
        supportActionBar?.elevation = 0f
    }
}

Jalankan aplikasi, Tampilannya saat ini menjadi seperti berikut.

Leave a Reply Cancel reply