Tim desain material di Google hanya mendefinisikan fungsionalitas tab di Android sebagai berikut:

Tab memudahkan untuk menjelajahi dan beralih di antara tampilan yang berbeda

Dalam posting ini Anda akan belajar bagaimana menampilkan tab menggunakan TabLayout dan ViewPager API. Dalam tutorial praktis ini, kami akan membahas yang berikut ini.

Komponen TabLayout dan ViewPager.
Mode: scrollable and fixed.
Bagaimana menampilkan ikon sebagai pengganti text judul tab.
Sebagai bonus, Anda juga akan belajar cara menggunakan fitur template Android Studio untuk mem-bootstrap proyek Anda dengan cepat menggunakan antarmuka tab.

Contoh proyek untuk tutorial ini dapat ditemukan di repo GitHub kami sehingga Anda dapat dengan mudah mengikutinya.

Syarat Mengikuti Tutorial Ini:

Android Studio 3.0 or higher
Kotlin plugin 1.1.51 or higher

TabLayout Component

Merujuk pada dokumentasi resmi Android, di situ disebutkan bahwa:

Tablayout menyediakan tata letak horizontal untuk menampilkan tab

Komponen TabLayout adalah salah satu komponen yang diperkenalkan sebagai bagian dari artefak desain material. Selain itu, ini juga termasuk dalam pustaka dukungan desain. Dalam TabLayout, saat tab dipilih atau diketuk, halaman berbeda (atau fragmen) ditampilkan kepada pengguna.

Komponen TabLayout dapat memiliki fungsi tab yang ditampilkan dalam salah satu dari dua cara: fixed dan scrollable. Jika tab fixed, semua tab akan ditampilkan di layar pada saat yang bersamaan.

Tangkapan layar di bawah ini adalah aplikasi Android WhatsApp resmi terbaru (saat tulisan ini dibuat), yang menggunakan TabLayout dengan konfigurasi mode fixed.

Di tab yang dapat digulir, jika jumlah tab menjadi terlalu lebar untuk layar, pengguna dapat menggeser ke kiri atau kanan untuk melihat lebih banyak tab.

Berikut adalah contoh TabLayout dengan mode tab yang dapat digulir, dipamerkan di versi terbaru aplikasi Android Berita & Cuaca oleh Google.

Lebih lanjut, informasi yang ditampilkan pada tab dapat berupa teks, ikon, atau kombinasi teks dan ikon. Misalnya, aplikasi Twitter terbaru untuk Android menggunakan ikon, bukan teks di setiap tab.

Di bagian berikut, kita akan mendalami pengkodean aplikasi sederhana yang menggunakan TabLayout dengan ViewPager. Ayo mulai!

Desain bukan hanya seperti apa bentuknya dan rasanya. Desain adalah cara kerjanya. - Steve Jobs

1. Create an Android Studio Project

Jalankan Android Studio 3 dan buat proyek baru (Anda bisa menamainya TabLayoutDemo) dengan aktivitas kosong yang disebut MainActivity.

2. Creating the Fragments (Pages)

Kami akan membuat TabLayout hanya dengan tiga tab. Saat masing-masing tab dipilih, ini akan menampilkan fragmen atau halaman Android yang berbeda. Jadi sekarang mari kita buat tiga fragmen Android untuk masing-masing tab. Kita akan mulai dengan kelas fragmen pertama, dan Anda harus mengikuti proses serupa untuk dua kelas fragmen lainnya — FragmentTwo.kt dan FragmentThree.kt.

FragmentOne.kt

import android.os.Bundle
import android.support.v4.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
 
class FragmentOne : Fragment() {
 
    override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?,
                              savedInstanceState: Bundle?): View? =
            inflater!!.inflate(R.layout.fragment_one, container, false)
 
    companion object {
        fun newInstance(): FragmentOne = FragmentOne()
    }
}

R.layout.fragment_one

<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
             xmlns:tools="http://schemas.android.com/tools"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:orientation="vertical">
 
    <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="FragmentOne"
            android:gravity="center_vertical|center_horizontal"/>
 
</LinearLayout>

3. Adding the TabLayout and ViewPager

Untuk mulai menggunakan TabLayout dan ViewPager dalam proyek Anda, pastikan Anda mengimpor dukungan desain dan juga artefak dukungan Android — jadi tambahkan ini ke file build.gradle modul Anda untuk mengimpornya.

dependencies {
    implementation 'com.android.support:design:26.1.0'
    implementation 'com.android.support:support-v4:26.1.0'
}

Juga, kunjungi file res/layout/activlty_main.xml Anda untuk menyertakan widget TabLayout dan tampilan ViewPager.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/main_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true">
 
    <android.support.design.widget.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/AppTheme.AppBarOverlay">
 
        <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:contentInsetStartWithNavigation="0dp"
                app:layout_scrollFlags="scroll|enterAlways"
                app:popupTheme="@style/AppTheme.PopupOverlay"/>
 
        <android.support.design.widget.TabLayout
                android:id="@+id/tab_layout"
                style="@style/CustomTabLayout"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:layout_gravity="left"
                android:background="@color/colorPrimary"
                app:tabGravity="fill"
                app:tabMode="fixed"/>
 
    </android.support.design.widget.AppBarLayout>
 
    <android.support.v4.view.ViewPager
            android:id="@+id/view_pager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
 
</android.support.design.widget.CoordinatorLayout>

Di sini kami membuat TabLayout sederhana dengan id tab_layout. Dalam widget XML TabLayout kami, Anda dapat melihat bahwa kami menyertakan beberapa atribut — seperti app: tabMode untuk diperbaiki dan juga app: tabGravity untuk diisi. Properti app: tabGravity digunakan untuk mengonfigurasi bagaimana item tab akan ditampilkan untuk mengambil ruang yang tersedia. Kami mengatur ini untuk mengisi, yang akan mendistribusikan item secara merata di seluruh lebar TabLayout. Perhatikan bahwa ini akan lebih terlihat di layar yang lebih lebar, seperti tablet.

Saya juga menyertakan atribut gaya khusus (@style/CustomTabLayout) di widget TabLayout kami.

<style name="CustomTabLayout" parent="Widget.Design.TabLayout">
    <item name="tabIndicatorColor">@android:color/white</item>
    <item name="tabIndicatorHeight">3dp</item>
    <item name="tabBackground">?attr/selectableItemBackground</item>
    <item name="tabTextAppearance">@style/CustomTabTextAppearance</item>
    <item name="tabSelectedTextColor">@android:color/white</item>
</style>

Kami mulai menyesuaikan TabLayout kami dengan mengatur nilai atribut yang akan diterapkan pada TabLayout. Berikut detail untuk beberapa atribut yang diterapkan:

tabIndicatorColor: menyetel warna indikator tab untuk tab yang saat ini dipilih. Ini juga bisa disetel secara terprogram dengan memanggil setSelectedTabIndicatorColor() pada instance TabLayout.
tabIndicatorHeight: menyetel tinggi indikator tab untuk tab yang saat ini dipilih. Ini juga bisa disetel secara terprogram dengan memanggil setSelectedTabIndicatorHeight() pada instance TabLayout.
tabSelectedTextColor: menyetel warna teks untuk status berbeda (normal, dipilih) yang digunakan untuk tab. Setara dengan atribut ini di Java adalah setTabTextColors().

Segera setelah membuat widget TabLayout kami dalam XML, tampilan berikutnya adalah ViewPager. Dokumentasi resmi mengatakan hal berikut tentang ViewPager:

Layout manager yang memungkinkan pengguna membalik ke kiri dan kanan melalui halaman data…

4. Creating the PagerAdapter

Kita perlu membuat subclass di SampleAdapter.kt yang memperluas FragmentPagerAdapter. Kelas ini bertanggung jawab untuk mengelola berbagai fragmen yang akan ditampilkan di tab.

import android.support.v4.app.Fragment
import android.support.v4.app.FragmentManager
import android.support.v4.app.FragmentPagerAdapter
 
class SampleAdapter(fm: FragmentManager) : FragmentPagerAdapter(fm) {
 
    override fun getItem(position: Int): Fragment? = when (position) {
        0 -> FragmentOne.newInstance()
        1 -> FragmentTwo.newInstance()
        2 -> FragmentThree.newInstance()
        else -> null
    }
 
    override fun getPageTitle(position: Int): CharSequence = when (position) {
        0 -> "Tab 1 Item"
        1 -> "Tab 2 Item"
        2 -> "Tab 3 Item"
        else -> ""
    }
 
    override fun getCount(): Int = 3
}

Di sini kami mengganti tiga metode dari kelas induk: getItem(), getCount(), dan getPageTitle(). Berikut penjelasan untuk metodenya:

getItem(): mengembalikan Fragmen untuk posisi tertentu dalam ViewPager.
getCount(): menunjukkan berapa banyak halaman yang akan ada di ViewPager.
getPageTitle(): metode ini dipanggil oleh ViewPager untuk mendapatkan string judul untuk mendeskripsikan tab yang ditentukan.

Misalnya, jika tab yang dipilih adalah tab pertama dengan judul “Tab 1 Item”, halaman FragmentOne akan segera ditampilkan kepada pengguna.

5. Initialization of Components

Selanjutnya, kita akan menginisialisasi instance TabLayout, ViewPager, dan SampleAdapter. Inisialisasi akan terjadi di dalam onCreate() di MainActivity.kt.

import android.os.Bundle
import android.support.design.widget.TabLayout
import android.support.v4.view.ViewPager
import android.support.v7.app.AppCompatActivity
import android.support.v7.widget.Toolbar
 
class MainActivity : AppCompatActivity() {
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
 
        initToolbar()
 
        val tabLayout: TabLayout = findViewById(R.id.tab_layout)
 
        val viewPager: ViewPager = findViewById(R.id.view_pager)
 
        val adapter = SampleAdapter(supportFragmentManager)
 
        viewPager.adapter = adapter
        tabLayout.setupWithViewPager(viewPager)
         
        tabLayout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
            override fun onTabSelected(tab: TabLayout.Tab) {
 
            }
 
            override fun onTabUnselected(tab: TabLayout.Tab) {
 
            }
 
            override fun onTabReselected(tab: TabLayout.Tab) {
 
            }
        })
    }
 
    private fun initToolbar() {
        val toolbar: Toolbar = findViewById(R.id.toolbar)
        setSupportActionBar(toolbar)
        supportActionBar!!.title = "TabLayout Demo"
    }
}

Kami mendapat referensi ke TabLayout dan ViewPager kami dari R.layout.activity_main dan menginisialisasinya. Kami juga membuat instance SampleAdapter kami — meneruskan instance FragmentManager sebagai argumen. Kita perlu menyediakan tampilan untuk ViewPager kita, jadi kita memanggil setAdapter() dan meneruskan adaptor yang kita buat ke sana. Terakhir, kami memanggil setupWithViewPager() pada sebuah instance TabLayout untuk melakukan beberapa pekerjaan:

pembuatan tab yang diperlukan setiap halaman
menyiapkan listener yang diperlukan

Ketika pengguna mengetuk sebuah tab, itu mengubah halaman di ViewPager dan menunjukkan halaman yang diperlukan (atau Fragmen). Juga, menggesek di antara halaman memperbarui tab yang dipilih. Dengan kata lain, metode ini membantu kami menangani perubahan status gulir dan klik pada tab.

OnTabSelectedListener() digunakan untuk menyertakan listener yang akan dipanggil saat pilihan tab berubah. Kami telah mengganti panggilan balik berikut:

onTabSelected(): dipicu saat tab memasuki status yang dipilih.
onTabUnselected(): dipanggil saat tab keluar dari status yang dipilih.
onTabReselected(): dipanggil saat tab yang sudah dipilih dipilih lagi oleh pengguna.

Perhatikan bahwa kita juga bisa menyetel mode tab secara terprogram — alih-alih melalui XML layout — menggunakan setTabMode() pada instance TabLayout. Kami meneruskan mode (tetap atau dapat digulir) ke metode ini sebagai argumen. Misalnya, kita dapat meneruskan TabLayout.MODE_FIXED untuk mode tetap — atau TabLayout.MODE_SCROLLABLE untuk mode yang dapat digulir.

tabLayout.tabMode = TabLayout.MODE_FIXED
tabLayout.tabMode = TabLayout.MODE_SCROLLABLE

Perhatikan bahwa jika Anda ingin membuat tab secara eksplisit daripada menggunakan metode helper setUpWithViewPager(), Anda dapat menggunakan newTab() pada instance TabLayout.

val tabLayout: TabLayout = findViewById(R.id.tab_layout)
 
tabLayout.addTab(tabLayout.newTab().setText("Songs"))
tabLayout.addTab(tabLayout.newTab().setText("Albums"))
tabLayout.addTab(tabLayout.newTab().setText("Artists"))

Perhatikan juga bahwa kita dapat secara eksplisit membuat tab melalui XML alih-alih secara terprogram.

<android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
 
    <android.support.design.widget.TabItem
            android:id="@+id/tabItem"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Songs"/>
 
    <android.support.design.widget.TabItem
            android:id="@+id/tabItem2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Albums"/>
 
    <android.support.design.widget.TabItem
            android:id="@+id/tabItem3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Artists"/>
 
</android.support.design.widget.TabLayout>

6. Testing the App

Akhirnya, Anda dapat menjalankan aplikasinya! Cobalah berinteraksi dengan aplikasi dengan menggesek ke kiri atau ke kanan dan mengetuk tab.

7. Scrollable Tabs

Pedoman desain material resmi pada tab mengatakan hal berikut tentang tab yang dapat digulir:

Tab yang dapat digulir menampilkan subset tab pada saat tertentu. Mereka dapat berisi label tab yang lebih panjang dan jumlah tab yang lebih banyak daripada tab tetap. Tab yang dapat digulir paling baik digunakan untuk menjelajahi konteks dalam antarmuka sentuh saat pengguna tidak perlu membandingkan label tab secara langsung.

Mari kita lihat cara membuat tab dengan konfigurasi mode scrollable. Saya membuat judul untuk masing-masing tab lebih lama dari sebelumnya. Inilah hasilnya dalam mode tetap:

Anda dapat melihat bahwa TabLayout telah menggunakan beberapa baris untuk menampilkan setiap judul tab. Dalam beberapa situasi, itu bahkan akan memotong judul! Ini menciptakan pengalaman pengguna yang buruk, jadi jika judul tab Anda harus sangat panjang, Anda harus mempertimbangkan untuk menggunakan mode yang dapat digulir. Perhatikan juga bahwa jika Anda akan memiliki lebih dari empat tab, disarankan untuk membuat mode tab dapat digulir.

Mari kita ubah properti app: tabMode dari fixed menjadi scrollable.

<android.support.design.widget.TabLayout
        <!-- ... -->
        app:tabMode="scrollable"/>

Ingat, Anda juga dapat mengatur mode tab secara terprogram, seperti yang dibahas sebelumnya.

8. Showing Tab Icons

Sekarang mari selami cara mengganti teks item tab dengan ikon.

class MainActivity : AppCompatActivity() {
 
    override fun onCreate(savedInstanceState: Bundle?) {
        // ... 
        tabLayout.setupWithViewPager(viewPager)
        tabLayout.getTabAt(0)!!.setIcon(android.R.drawable.ic_dialog_email)
        tabLayout.getTabAt(1)!!.setIcon(android.R.drawable.ic_dialog_info)
        tabLayout.getTabAt(2)!!.setIcon(android.R.drawable.ic_dialog_alert)
        // ... 
    }
     
    // ... 
}

Di sini kami memanggil getTabAt() pada sebuah instance TabLayout. Memanggil metode ini akan mengembalikan tab pada indeks yang ditentukan. Selanjutnya, kami memanggil setIcon(). Memanggil metode ini akan menyetel ikon yang ditampilkan di tab ini. Saya juga mengatur mode tab untuk diperbaiki.

<android.support.design.widget.TabLayout
        app:tabMode="fixed"/>

Saya masih mengganti getPageTitle() di dalam SampleAdapter.

class SampleAdapter(fm: FragmentManager) : FragmentPagerAdapter(fm) {
     
    // ... 
     
    override fun getPageTitle(position: Int): CharSequence = when (position) {
        0 -> "TAB 1"
        1 -> "TAB 2"
        2 -> "TAB 3"
        else -> ""
    }
     
    // ...
}

Inilah hasilnya:

Sekarang, jika Anda hanya menginginkan ikon, Anda tidak perlu menimpa getPageTitle().

9. Bonus: Using Android Studio Templates

Alih-alih menulis begitu banyak kode hanya untuk membuat antarmuka tab atau aktivitas dari awal, Android Studio 3.0 memiliki beberapa templat kode yang sudah ada (tersedia di Java dan Kotlin) untuk membantu memulai proyek Anda. Salah satu template tersebut dapat digunakan untuk membuat aktivitas bertab. Saya akan menunjukkan cara menggunakan fitur praktis ini di Android Studio 3. Untuk proyek baru, jalankan Android Studio 3.

Masukkan nama aplikasi dan klik tombol Berikutnya. Anda dapat membiarkan default seperti pada dialog Target Android Devices. Klik tombol Next lagi.

Dalam dialog Tambahkan Aktivitas ke Seluler, gulir ke bawah dan pilih Aktivitas Tab. Klik tombol Next setelah itu.

Pada dialog terakhir, gulir ke bawah ke menu tarik-turun Gaya Navigasi dan pilih Tab Bilah Tindakan (dengan ViewPager). Terakhir, klik tombol Selesai untuk menerima semua konfigurasi. Android Studio sekarang telah membantu kami membuat proyek dengan aktivitas tab. Benar-benar keren!

Anda sangat disarankan untuk mempelajari kode yang dihasilkan. Dalam proyek Android Studio yang sudah ada, untuk menggunakan template ini, cukup buka File> Activity> Tabbed Activity. Dan ikuti langkah serupa yang dijelaskan sebelumnya.

Template yang disertakan dengan Android Studio bagus untuk tata letak sederhana dan membuat aplikasi dasar, tetapi jika Anda ingin memulai aplikasi Anda lebih jauh, Anda dapat mempertimbangkan beberapa templat aplikasi yang tersedia dari Envato Market. Mereka adalah penghemat waktu yang sangat besar bagi pengembang berpengalaman, membantu mereka memotong kerja keras dalam membuat aplikasi dari awal dan memfokuskan bakat mereka alih-alih pada bagian unik dan khusus dalam membuat aplikasi baru.

Kesimpulan

Dalam tutorial ini, Anda mempelajari cara membuat antarmuka tab di Android menggunakan API TabLayout dan ViewPager dari awal. Kami juga mempelajari cara mudah dan cepat menggunakan template Android Studio untuk membuat antarmuka tab. Saya sangat menyarankan untuk memeriksa pedoman desain material resmi tab untuk mempelajari lebih lanjut tentang cara merancang dan menggunakan tab dengan benar di Android.