author Ahmad Muhardian

Tutorial Android Kotin: Belajar Menggunakan ViewPager dan TabLayout


Dalam membuat aplikasi android, ada banyak pilihan layout yang bisa kita gunakan.

Salah satunya dengan ViewPager dan TabLayout.

ViewPager dan TabLayout biasanya digunakan untuk menampilkan kategori seperti ini:

Sumber: material.io
Sumber: material.io

Contoh lain, kamu bisa temukan di aplikasi WhatshApp.

ViewPager dan TabLayout pada Whatsapp

Lalu bagaimana cara membuat layout yang seperti ini?

Gampang…

Ada dua yang kita butuhkan:

  1. ViewPager
  2. TabLayout

ViewPager akan bertugas menampilkan fragment, lalu TabLayout akan menjadi navigasinya.

Perhatikan gambar ini:

Android Kotlin Viewpager

Setiap page bisa berisi layout yang berbeda-beda, karena akan ditangani oleh Fragment dan kita bisa mengisinya dengan apapun yang diinginkan.

Pada tutorial ini, kita akan membuat tiga halaman dan mengisinya dengan teks Page 1, Page 2, dan Page 3.

Sebenarnya terserah kamu mau diisi dengan apa.

Saya menggunakan Page 1, Page 2, dan Page 3 agar mudah dipahami.

Ok, langsung saja kita mulai…

Membuat Project Baru

Tahap pertama, kita harus membuat project terlebih dahulu.

Buatlah project baru dengan nama Kotlin Pager:

Nama project

Klik Next

Level API

Klik Next

Tipe Activity

Klik finish

Nama Activity

Setelah itu tambahkan library support design pada build.gradle (Module:app):

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

Library ini akan kita butuhkan untuk membuat ViewPger dan TabLayout.

Sekarang file build.gradle akan menjadi seperti ini:

apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply plugin: 'kotlin-android-extensions'

android {
    compileSdkVersion 27
    defaultConfig {
        applicationId "com.petanikode.kotlinpager"
        minSdkVersion 16
        targetSdkVersion 27
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation 'com.android.support:appcompat-v7:27.1.0'
    implementation 'com.android.support:design:27.1.0'
    implementation 'com.android.support.constraint:constraint-layout:1.1.2'
    implementation 'com.android.support:support-v4:27.1.1'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test🏃‍️1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
}

Jika kamu mandapatkan error, coba samakan versinya dengan versi di atas.

  • compileSdkVersion 27
  • targetSdkVersion 27
  • implementation 'com.android.support:design:27.1.0'

Setelah itu, klik Sync Now.

Sync Project

Tunggu sampai proeses Sync selesai. Setelah itu silahkan lanjutkan…

Membuat Layout

Buka file activity_main.xml kemduian ubah isinya menjadi seperti ini:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</android.support.constraint.ConstraintLayout>

Perhatikan kode diatas!

Kita memberikan id viewpager_main untuk ViewPager. Ini nanti akan menjadi nama objek untuk mengakses ViewPager pada Kotlin.

Selanjutnya silahkan tambahkan beberapa fragment.

Membuat Fragment

Buatlah fragment sebanyak tiga dengan nama:

  1. FirstFragment() untuk halaman 1
  2. SecondFragment() untuk halaman 2
  3. ThridFragment() untuk halaman 3

Ketiga fragment tersebut akan menjadi sebuah page yang akan kita tampilkan dalam activity.

Silahkan klik New->Fragment->Blank Fragment:

Pembuatan Fragment baru

Saat membuat Fragment, jangan centang Include fragment factory methods? dan Include interface callbacks? agar kode fragment yang dibuat tidak ramai 😄.

Pembuatan Fragment baru

Lakukan lagi, buat juga SecondFragment dan ThridFragment.

Kemudian setiap Layout fragment, isi seperti ini.

File: layout/fragment_first.xml

<?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=".FirstFragment">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="40sp"
        android:text="Page 1" />

</FrameLayout>

File: layout/fragment_second.xml

<?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=".FirstFragment">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="40sp"
        android:text="Page 2" />

</FrameLayout>

File: layout/fragment_thrid.xml

<?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=".FirstFragment">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="40sp"
        android:text="Page 3" />

</FrameLayout>

Layout tersebut hanya untuk menampilkan teks “Page X”.

Layout untuk fragment

Selesai urusan fragment, selanjutnya kita akan membuat adapter.

Membuat Kustom Adapter untuk Pager

Adapter berfungsi untuk menghubungkan Fragment dengan ViewPager.

Hubungan ViewPager dengan Adapter dan Fragment

Kita akan membuat kustom adapter yang dituruntkan dari class FragmentPagerAdapter.

Pada kustom adapter ini, kita bisa menentukan Fragment mana saja yang akan dibuka dan title untuk tabs.

Sekarang buatlah Class baru bernama MyPagerAdapter, kemudian isi dengan kode berikut:

import android.support.v4.app.Fragment
import android.support.v4.app.FragmentManager
import android.support.v4.app.FragmentPagerAdapter

class MyPagerAdapter(fm: FragmentManager): FragmentPagerAdapter(fm){

    // sebuah list yang menampung objek Fragment
    private val pages = listOf(
            FirstFragment(),
            SecondFragment(),
            ThridFragment()
    )

    // menentukan fragment yang akan dibuka pada posisi tertentu
    override fun getItem(position: Int): Fragment {
        return pages[position]
    }

    override fun getCount(): Int {
        return pages.size
    }

    // judul untuk tabs
    override fun getPageTitle(position: Int): CharSequence? {
        return when(position){
            0 -> "First Tab"
            1 -> "Second Tab"
            else -> "Third Tab"
        }
    }
}

Menambahkan Adapter untuk Pager

Setelah membuat kustom Adapter, selanjutnya kita gunakan adapter tersebut pada ViewPager.

Silahkan buka MainActivity.kt, kemudian tambahkan kode berikut pada method onCreate().

viewpager_main.adapter = MyPagerAdapter(supportFragmentManager)

Kita menggunakan Kotlin Extension dalam mengakses objek ViewPager.

Karena itu…

…Pastikan kotlin extension sudah diimpor di dalam MainActivity.kt.

import kotlinx.android.synthetic.main.activity_main.*

Sehingga sekarang kode lengkapnya akan menjadi seperti ini:

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        viewpager_main.adapter = MyPagerAdapter(supportFragmentManager)
    }
}

Beres!

Sekarang coba jalankan aplikasinya.

Aplikasi pager dengan kotlin

Yap! berhasil 🎉

Tapi tunggu dulu…

Bagaimana kalau kita ingin menambahkan tab?

Berikut ini caranya:

Menambahkan Tabs untuk ViewPager

Tambahkan <TabLayout> pada activity_main.xml, tepat di dalam view pager:

<android.support.design.widget.TabLayout
    android:id="@+id/tabs_main"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="top"/>

Menambahkan tablayout activity main

Sehingga kode lengkap activity_main.xml akan menjadi seperti ini:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs_main"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="top"/>

    </android.support.v4.view.ViewPager>

</android.support.constraint.ConstraintLayout>

Setelah itu, buka MainActivity.kt kemudian tambahkan kode berikut pada method onCreate(), tepat di bawah pengisian adapter untuk viewpager_main:

tabs_main.setupWithViewPager(viewpager_main)

Artinya kita akan menghubungkan ViewPager dengan tab.

Menambahkan tablayout activity main

Sehingga kode lengkap ActivityMain.kt akan menjadi seperti ini:

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        viewpager_main.adapter = MyPagerAdapter(supportFragmentManager)
        tabs_main.setupWithViewPager(viewpager_main)
    }
}

Selesai!

Sekarang coba jalankan lagi aplikasinya.

Demo Tabs layout dengan pager

Mudah bukan…

Apa selanjutnya?

Kita sudah belajar cara menggunakan ViewPager dan TabLayout, tugas kamu selanjutnya melakukan kreasi dan eksperimen.

Seperti:

  • Membarikan style untuk TabsLayout agar telihat menarik;
  • Mengisi Fragment dengan sesuatu;
  • Menggunakan ikon pada tabs;
  • dll.

Ok, sekian dulu tutorial ini…

…jika ada kendala, langsung saja ditanyakan pada komentar.

Selamat belajar.

Referensi: