» » Membuat Tab Android dengan Material Design

Membuat Tab Android dengan Material Design

posted in: Tutorial | 0

Artikel ini kita hanya akan membahas bagaimana cara mengimplementasikan penggunaan tab dengan material design dalam aplikasi yang akan kita buat.

Android Design Support Library mempermudah para pengembang untuk menggunakan fitur material design. Dalam Design support Library beberapa komponen seperti navigation drawer, floating action button, snackbar, tab, floating labels dan animation frameworks sudah termasuk di dalamnya.

Sebelum melangkah terlau jauh, ada baiknya kalian mempelajari dokumentasi resmi tentang apa yang bisa dilakukan dan tidak bisa dilakukan dalam menggunakan tab dengan material design.

A. Membuat Aplikasi Material Design

Kita akan mulai dengan membuat project baru dan mengaplikasikan tema material.

  1. Kita mulai dengan Android Studio, klik File ⇒ New Project kemudian isikan keterangan yang diminta untuk membuat project baru. Jika diminta untuk memilih activity default, pilih Blank Activity.
  2. Buka build.gradle lalu tambahkan android design support library com.android.support:design:27.1.1 atau bisa juga dengan versi terbarunya (jika kalian sudah tahu versinya).
    Kode untuk build.gradle
  3. Buka file colors.xml yang berada dalam folder res ⇒ values kemudian tambahkan value berikan sebagai kode warna.
    Kode colors.xml
  4. Tambahkan dimensi berikut dalam dimens.xml yang ada dalam folder res ⇒ values.
    Kode dimens.xml
  5. Buka file styles.xml yang ada dalam folder res ⇒ values kemudian tambahkan style berikut. Style yang terdefinisikan dalam styles.xml akan berlaku untuk semua versi android.
    Kode styles.xml
  6. Sekarang dalam folder res, buat folder baru dengan nama values-v21. Kemudian dalam values-v21, buat file styles.xml dengan kode style berikut. Kode style ini dikhususkan untuk Android 5.0.
    Kode styles.xml dalam folder values-v21
  7. Lanjuuuut… buka AndroidManifest.xml dan modifikasi theme aplikasi dengan mengubah atribut android:theme.
    Kode untuk AndroidManifest.xml
    Sekarang coba jalankan aplikasi kalian dan cek keberadaan theme material dengan melihat warna notification bar. Jika kalian melihat warna notification bar color berubah, artinya theme material design sudah berhasil diterapkan.
    tampilan hello world
    Sekarang kita sudah memiliki aplikasi dengan material design. Selanjutnya yang perlu kita lakukan adalah menambahkan tab. Sebelum itu, kita akan membuat beberapa fragment activity. Seluruh fragment activity tersebut akan memuat UI sederhana untuk satu TextView.
  8. Dalam package utama, buatlah sebuah fragment yang bernama OneFragment.java kemudian tambahkan kode berikut.
    Kode OneFragment.java
  9. Buka fragment_one.xml yang berada di res ⇒ layout dan ubah kodenya seperti berikut.
    Kode fragment_one.xml
  10. Kemudian buatlah beberapa activity fragment dengan kode yang sama saat membuat OneFragment.java. Saya sudah membuat TwoFragment.java, ThreeFragment.java, FourFragment.java ….. hingga TenFragment.java

2. Fixed Tabs

Tab yang dimaksud di sini adalah tab yang posisinya sudah fix alias tidak bisa diubah. Android design support library memiliki beberapa element seperti CoordinatorLayout, AppBarLayout, TabLayout, dan lebih banyak lagi. Namun, dalam artikel ini kita hanya akan membahas TabLayout saja.

  1. Buka file layout dari activvity utama (activity_main.xml) lalu tambahkan kode berikut.
    app:tabMode – Menjelaskan mode dari layout tab. Dalam hal ini, kita menggunakan “fixed”
    Kode untuk activity_main.xml
  2. Buka MainActivity.java dan berikan perubahan berikut.
    tabLayout.setupWithViewPager() – Menjadikan ViewPager ke TabLayout.
    setupViewPager() – Mendefinisikan nomor tab dengan mengatur fragment tab yang sesuai dengan nama tab.
    ViewPagerAdapter – Custom adapter class untuk keperluan fragment dalam view pager.Kode untuk MainActivity.java
    Sekarang coba jalankan aplikasi kalian. Harusnya sudah terlihat tab yang bisa di-swipe ya.
    tab layout dengan material design

2.1 Full Width Tabs

Jika kalian menginginkan tab dengan tampilan fullwidth, tambahkan app:tabGravity=”fill” ke TabLayout kalian.

tab layout dalam landscape

2.2 Center Aligned Tabs

Beda lagi jika kalian ingin tab tetap di tengah secara horisontal, cukup dengan menambahkan app:tabGravity=”center” ke TabLayout.

gravity center tab layout

3. Scrollable Tab

Scrollable tab (tab yang dapat di-scroll) digunakan saat kalian mempunyai banyak tab sehingga tidak muat dalam tampilan layar. Pernah lihat aplikasi yang demikian kan? Nah, untuk membuatnya, tambahkan saja kode app:tabMode=”scrollable” ke TabLayout.

  1. Untuk membuat scrollable tab, buka activity_main.xml kemudian ubah app:tabMode menjadi scrollable.
  2. Kemudian lakukan pengeditan pada MainActivity.java dan tambahkan fragment ke ViewPager dalam method setupViewPager(). Di sini saya memiliki toal 10 fragment ke ViewPager. Setelah diedit, tampilan kode activity utama kalian akan seperti berikut.
    Kode MainActivity.java
    Sekarang coba tes aplikasi kalian. Apakah sudah bisa di-scroll tabnya sekarang?
    Tab layout mode scrollable Tab layout mode scrollable dalam landscape

 

4. Tab dengan Ikon dan Teks

Kadang mungkin kalian ingin menambahkan ikon ke dalam tab. Sometimes you might wanted to add an icon to Tab. Dulu, menambahkan ikon ke dalam tab butuh waktu yang lama dan sangat membosankan. Namun, sekarang dengan design support library, hal tersebut menjadi sangat mudah. Yang perlu kalian lakukan hanyalah memanggil setIcon() method untuk ikon yang sesuai. Ikon akan berada di depan label tab secara sempurna.

  1. Cara untuk membuatnya adalah buka MainActivity.java dan modifikasi kodenya seperti berikut. Di sini saya sudah menambahkan method yang bernama setupTabIcons() yang sudah saya terapkan ke semua ikon tab.
    Kode MainActivity.java dengan ikon

tab layout dengan ikon

5. Tab Hanya dengan Ikon

Pengaturan tab yang hanya dengan ikon (tanpa teks) dilakukan dengan mengesampingkan method getPageTitle() dalam class ViewPagerAdapter sehingga tidak berlaku dalam tab.

  1. Buka MainActivity.java kemudian modifikasi getPageTitle() seperti berikut dan coba jalankan project kalian.
    tab layout ikon saja

6. Kustom Tab View dengan Icon & Text

Pengaturan tampilan tab secara kustom akan sangat berguna saat kalian tidak menemukan kecocokan tampilan sesuai dengan yang kalian inginkan. Saat meng-kustom tampilan tab, pastikan kalian juga mengikuti acuan yang disediakan untuk android.

Misalkan dalam hal ini kalian ingin membuat tab dengan ikon di atas label teks pada tab. Masih semangat kan ya? Haha…Berikut langkah-langkah pembuatannya.

  1. Dalam folder res ⇒ values, buat sebuah file xml kemudian berikan nama fonts.xml lalu tambahkan string berikut. File xml ini akan mendefinisikan jenis font untuk label teks tab kalian.
    Kode untuk fonts.xml
  2. Dalam folder res ⇒ values-v21, buat file xml lagi dan berikan nama fonts.xml.
    Kode untuk fonts.xml dalam folder values-v21
  3. Kemudian buka activity_main.xml dan atur height dari TabLayout. Pengaturan height ini akan penting untuk penempatan ikon di atas label teks tab kalian nantinya.
  4. Buat sebuah file layout xml layout dan berikan nama custom_tab.xml, letakkan dalam folder res ⇒ layout. Dalam file layout ini kita akan mendefinisikan tampilan kustom untuk tab.
    Kode untuk custom_tab.xml
  5. Buka MainActivity.java dan modifikasi kodenya seperti berikut. Jika kalian mengamati method setupTabIcons(), di sini saya telah mengubah layout custom_tab.xml dalam masing-masing tab dengan menggunakan kode ini.
    Nah, berikut ini kode lengkap untuk MainActivity.java

Sekarang coba jalankan aplikasi kalian dan lihat perubahannya.
tab layout dengan custom

Berikut kode lengkapnya yang bisa membantu kalian. Walaupun sudah saya sediakan, tapi jangan lupa dipelajari dari awal ya biar kalian gak cuma menjadi kaum pengunduh tanpa tahu awal dan akhirnya haha.
Download Material Tabs

Okeh, semoga artikel ini membantu. Saya juga udah capek ngetiknya wkwk. For the last word, jika ada yang bingung silahkan berkomentar di bawah ini ya biar gak semakin bingung. Selamat belajar 🙂

Muhammad Faizin
Follow Faizin:

Writer and Developer

Dulu suka menulis kode dan sejenisnya sampe malem, sekarang juga masih. Kesukaan pada menulis cerita sedikit demi sedikit terpupuk, apalagi sebagai mantan anak sekolahan dengan cita-cita kuliah di luar negeri.