Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android SDK
Code

Membuat Antarmuka Tab Gaya Material Design untuk Aplikasi Android

by
Difficulty:BeginnerLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Hasannudin Amin (you can also view the original English article)

Final product image
What You'll Be Creating

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

Tab memudahkan menjelajahi dan beralih antar tampilan yang berbeda.

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

  • Komponen TabLayout dan ViewPager.
  • Modus tab yang berbeda: scrollable dan fixed.
  • Cara menampilkan ikon dan bukan teks untuk judul tab.
  • Sebagai bonus, Anda juga akan belajar cara menggunakan fitur templat Android Studio untuk proyek bootstrap dengan cepat dengan antarmuka tab.

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

Prasyarat

Untuk dapat mengikuti tutorial ini, Anda memerlukan:

Anda juga bisa mempelajari semua seluk beluk bahasa Kotlin dalam seri Kotlin Mulai Dari Nol.

Pengantar Komponen TabLayout

Menurut dokumentasi resmi Android di TabLayout, tertulis:

TabLayout menyediakan layout horizontal untuk menampilkan tab.

Komponen TabLayout adalah salah satu komponen yang diperkenalkan sebagai bagian dari artefak desain material. Apalagi juga disertakan dalam disain pustaka pendukung. Dalam TabLayout, saat tab dipilih atau disadap, halaman yang berbeda (atau fragmen) ditampilkan ke pengguna.

Komponen TabLayout dapat menampilkan fungsi tabnya di salah satu dari dua cara berikut: fixed dan scrollable. Jika tab tetap, semua tab akan ditampilkan di layar secara bersamaan.

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

WhatsApp fixed TabLayout sample

Pada scrollable tab, jika jumlah tab terlalu lebar untuk layar, pengguna dapat menggesek ke kiri atau kanan untuk melihat lebih banyak tab.

Berikut adalah contoh TabLayout dengan mode scrollable tab—dipamerkan di versi terbaru aplikasi Android News & Weather oleh Google.

Scrollable tab mode in Google News Weather app

Selanjutnya, informasi yang ditampilkan pada tab bisa berupa teks, ikon, atau kombinasi antara teks dan ikon. Misalnya, aplikasi Twitter terbaru untuk Android menggunakan ikon dan bukan teks pada setiap tab.

Icons on tabs in Twitter Android app

Pada bagian berikut, kita akan menyelami coding sebuah aplikasi sederhana yang memanfaatkan TabLayout dengan ViewPager. Ayo lanjut!

Desain bukan hanya seperti apa bentuknya dan terasa seperti apa. Desain adalah bagaimana ini bekerja. - Steve Jobs

1. Buat Proyek Android Studio

Jalankan Android Studio 3 dan buat proyek baru (bisa anda beri nama TabLayoutDemo) dengan aktivitas kosong yang disebut MainActivity.

Create Android Project page

2. Membuat Fragmen (Halaman)

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

Inilah FragmentOne.kt saya:

Ini juga R.layout.fragment_one saya:

3. Menambahkan TabLayout dan ViewPager

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

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

Di sini kita membuat TabLayout sederhana dengan id tab_layout. Di widget TabLayout XML kita, Anda dapat melihat bahwa kita menyertakan beberapa atribut - seperti app:tabMode menjadi fixed dan juga app:tabGravity menjadi fill. Properti app:tabGravity digunakan untuk mengkonfigurasi bagaimana item tab akan ditampilkan sehingga bisa mengambil ruang yang tersedia. Kita mengatur ini ke fill, yang akan mendistribusikan barang secara merata melintasi lebar TabLayout. Perhatikan bahwa ini akan lebih terlihat pada display lebih lebar, seperti tablet.

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

Kita mulai menyesuaikan TabLayout kita dengan menetapkan nilai atribut yang akan diterapkan pada TabLayout. Berikut adalah rincian beberapa atribut yang diterapkan:

  • tabIndicatorColor: setel warna indikator tab untuk tab yang dipilih saat ini. Hal ini juga dapat diatur secara terprogram dengan memanggil setSelectedTabIndicatorColor() pada instance TabLayout.
  • tabIndicatorHeight: setel ketinggian tab untuk tab yang dipilih saat ini. Ini juga bisa diatur secara pemrograman dengan memanggil setSelectedTabIndicatorHeight() pada instance TabLayout.
  • tabSelectedTextColor: mengatur warna teks untuk negara bagian yang berbeda (normal, dipilih) yang digunakan untuk tab. Setara atribut ini di Java adalah setTabTextColors().

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

Manajer tata letak yang memungkinkan pengguna membalik ke kiri dan kanan melalui halaman data...

4. Membuat PagerAdapter

Kita perlu membuat subkelas di SampleAdapter.kt yang memperpanjang FragmentPagerAdapter. Kelas ini bertanggung jawab untuk mengelola fragmen yang berbeda yang akan ditampilkan pada tab.

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

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

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

5. Inisialisasi Komponen

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

Kita mendapat referensi ke TabLayout dan ViewPager dari R.layout.activity_main dan menginisialisasi mereka. Kita juga membuat sebuah instance dari SampleAdapter-melewati sebuah instance dari FragmentManager sebagai sebuah argumen. Kita perlu menyediakan pandangan untuk ViewPager kita, jadi kita memanggil setAdapter() dan menyerahkan adaptor yang kita buat kepadanya. Akhirnya, kita memanggil setupWithViewPager() pada sebuah instance dari TabLayout untuk melakukan beberapa pekerjaan:

  • pembuatan tab yang dibutuhkan untuk setiap halaman
  • menyiapkan listener yang dibutuhkan

Saat pengguna mengetuk tab, itu akan mengubah halaman di ViewPager dan menunjukkan halaman yang dibutuhkan (atau Fragment). Selain itu, menggesek antar halaman memperbarui tab yang dipilih. Dengan kata lain, metode ini membantu kita mengatur perubahan status gulir dan klik pada tab.

OnTabSelectedListener() digunakan untuk memasukkan listener yang akan dipanggil saat pilihan tab berubah. Kita telah mengganti callback berikut:

  • onTabSelected(): dipicu saat sebuah tab masuk ke status yang dipilih.
  • onTabUnselected(): dipanggil saat tab keluar dari keadaan yang dipilih.
  • onTabReselected(): dipanggil bila tab yang sudah dipilih dipilih lagi oleh pengguna.

Perhatikan bahwa kita juga dapat mengatur mode tab secara terprogram—alih-alih melalui tata letak XML—menggunakan setTabMode() pada sebuah instance dari TabLayout. Kita melewati mode (fixed atau scrollable) ke metode ini sebagai argumen. Misalnya, kita bisa melewati TabLayout.MODE_FIXED untuk mode fixed—atau TabLayout.MODE_SCROLLABLE untuk mode scrollable.

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

Perhatikan juga bahwa kita dapat secara eksplisit membuat tab melalui XML dan bukan pemrograman.

6. Menguji Aplikasi

Akhirnya, Anda bisa menjalankan aplikasi!

Final demo app

Cobalah berinteraksi dengan aplikasi dengan menggesek ke kiri atau kanan dan ketuk tab.

7. Scrollable Tab

Pedoman resmi material design pada bagian tab mengatakan hal berikut tentang scrollable tab:

Scrollable tab menampilkan subset dari tab pada waktu tertentu. Mereka dapat berisi label tab yang lebih panjang dan jumlah tab yang lebih banyak daripada tab yang fixed. Scrollable tab paling baik digunakan untuk konteks penjelajahan dalam antarmuka sentuh saat pengguna tidak perlu membandingkan label label secara langsung.

Mari kita lihat cara membuat tab dengan konfigurasi mode scrollable. Saya membuat judul untuk masing-masing tab lebih panjang dari sebelumnya. Berikut adalah hasil dalam mode fixed:

Longer tab title in TabLayout

Anda dapat melihat bahwa TabLayout telah menggunakan banyak baris untuk menampilkan masing-masing 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 scrollable. Perhatikan juga bahwa jika Anda ingin memiliki lebih dari empat tab, disarankan agar menggunakan mode tab scrollable.

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

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

Scrollable mode for tabs

8. Menampilkan Ikon Tab

Ayo sekarang kita pahami cara mengganti teks item tab dengan ikon sebagai gantinya.

Di sini kita memanggil getTabAt() pada sebuah instance dari TabLayout. Memanggil metode ini akan mengembalikan tab pada indeks yang ditentukan. Selanjutnya, kita sebut setIcon(). Memanggil metode ini akan mengatur ikon yang ditampilkan pada tab ini.

Saya juga mengatur mode tab menjadi fixed.

Saya masih mengesampingkan getPageTitle() di dalam SampleAdapter.

Inilah hasilnya:

App demo with tab icons and titles

Nah, jika Anda hanya menginginkan ikon, Anda sama sekali jangan menimpa getPageTitle().

App demo with tab icons

9. Bonus: Menggunakan Template Android Studio

Alih-alih menulis begitu banyak kode hanya untuk membuat antarmuka atau aktivitas tab dari awal, Android Studio 3.0 memiliki beberapa template kode yang sudah ada (tersedia di Java dan Kotlin) untuk membantu memulai proyek Anda. Salah satu template tersebut dapat digunakan untuk membuat aktivitas tab.

Saya akan menunjukkan cara menggunakan fitur praktis ini di Android Studio 3.

Untuk proyek baru, jalankan Android Studio 3.

Android Studio create project dialog

Masukkan nama aplikasi dan klik tombol Next.

Anda dapat meninggalkan secara default seperti pada dialog Target Android Devices. Klik tombol Next lagi.

Add an Activity to Mobile dialog

Dalam dialog Add a Activity to Mobile, gulir ke bawah dan pilih Tabbed Activity. Klik tombol Next setelah itu.

Configure Activity dialog

Pada dialog terakhir, gulir ke bawah ke menu drop-down Navigation Style dan pilih Action Bar Tabs (with ViewPager). Akhirnya, klik tombol Finish untuk menerima semua konfigurasi.

Android Studio kini telah membantu kita membuat sebuah proyek dengan aktivitas tab. Benar-benar keren!

Android Studio XML design view for layout

Anda sangat disarankan untuk mengeksplorasi kode yang dihasilkan.

Dalam proyek Android Studio yang sudah ada, untuk menggunakan template ini, cukup buka File > Activity > Tabbed. Dan ikuti langkah-langkah serupa yang telah dijelaskan sebelumnya.

Navigation to tabbed activity button in Android Studio

Template yang disertakan dengan Android Studio bagus untuk tata letak sederhana dan membuat aplikasi dasar, namun jika Anda ingin memulai aplikasi Anda lebih jauh lagi, Anda mungkin mempertimbangkan beberapa template aplikasi yang tersedia dari Envato Market.

Dengannya Anda dapat menghemat waktu untuk pengembang berpengalaman, membantu mereka memotong seluk beluk pembuatan aplikasi dari nol dan memfokuskan kemampuan mereka alih-alih pada bagian unik dan disesuaikan untuk membuat aplikasi baru.

Kesimpulan

Dalam tutorial ini, Anda belajar cara membuat antarmuka tab di Android menggunakan API TabLayout dan ViewPager dari awal. Kami juga mengeksplorasi cara mudah dan cepat menggunakan template Android Studio untuk membuat antarmuka tab.

Saya sangat menyarankan untuk memeriksa pedoman resmi material design bagian tab untuk mempelajari lebih lanjut tentang cara merancang dan menggunakan tab di Android dengan benar.

Untuk mempelajari lebih lanjut tentang pengkodean untuk Android, lihat beberapa kursus dan tutorial kami yang lain di  Envato Tuts+!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.