Implementasi Material Design pada Tab Menu di Android

Tab Menu merupakan tampilan menu yang berbentuk tab dan digunakan untuk memisahkan satu layout dengan layout yang lain. Tab Menu memiliki kelebihan dan kekurangan. Kelebihannya adalah Tab Menu selalu terlihat pada layar sehingga memudahkan pengguna untuk berpindah dari satu menu ke menu yang lainnya. Sedangkan kekurangannya adalah Tab Menu cukup memakan ruang pada layar. Nah pada tutorial kali ini kita akan coba mengimplementasikan Tab Menu pada aplikasi sekaligus menerapkan Material Design kedalamnya.

Dengan hadirnya Androd Design Support Library membuat pekerjaan kita menjadi lebih mudah lagi. Untuk lebih jelas bagaimana Design Materialnya Tab Menu bisa kunjungi link ini: https://www.google.co.in/design/spec/components/tabs.html#tabs-usage

Selanjutnya mari kita praktekkan bagaimana cara mengimplementasikannnya pada aplikasi kita melalui tutorial berikut:

 

Impelemtasi Material Design

  1. Buatlah project Android baru dengan nama: TabMenuMaterialDesign
  2. Buka gradle dan tambahkan Android Design Support Library com.android.support:design:23.0.1 seperti berikut:

  3. Buka file colors.xml yang berada di folder values, lalu tambahkan sytax berikut kedalamnya.

  4. Tambahkan syntax dibawah ini pada file dimension.xml yang juga berada di folder values.

  5. Buka file styles.xml yang juga berada di folder values, lalu timpa code dibawah ini dengan code bawaannya.

  6. Sekarang tambahkan folder baru dengan nama values-v21 didalam folder values. Didalam folder values-v21 tersebut buat xml baru dengan nama styles.xml yang mana ini nantinya digunakan untuk Android 5.0.

  7. Terkahir modifikasi file AndroidManifest.xml dengan mengganti nilai atribut dari android:theme menjadi: android:theme=”@style/MyMaterialTheme”. Sehingga nantinya akan terlihat seperti ini:

  8. Coba jalankan aplikasi, seharusnya setelah kita mengikuti cara diatas aplikasi kita telah menerapkan material design.

 

Membuat Tab Menu

Sebelumnya buat terlebih dahulu folder dengan nama fragment yang berada didalam package name project kita, seperti gambar dibawah ini:

Folder Fragment
Folder Fragment

Lalu di dalam folder fragment tersebut buat file fragment baru dengan nama FragmentSatu, seperti yang terlihat pada gambar dibawah ini:

Screenshot 2016-01-09 15.22.38

Lalu isikan code dibawah ini pada file FramentSatu.java.

Dan juga tambahkan TextView pada file frament_satu.xml seperti dibawah ini:

Ulangi cara diatas untuk membuat fragment dua dan tiga agar tab menu yang kita miliki ada 3 tab menu. Setelah itu tambahkan beberapa fungsi pada file MainActivity.java untuk memanggil fragment yang telah kita buat sebelumnya, sehingga MainActivity.java akan terlihat seperti ini:

Selanjutnya coba jalankan aplikasi, dimana seharusnya aplikasi kita sudah berhasil menerapkan Material Design pada Tab Menu nya seperti gambar dibawah ini:

Screenshot Tab Menu Material Design
Screenshot Tab Menu Material Design

Well mungkin cukup sekian tutorial, oya untuk sourcenya bisa cek di GitHub, semoga bermanfaat ..,

Iklan

3 pemikiran pada “Implementasi Material Design pada Tab Menu di Android

    1. Terima kasih telah berkunjung ..

      Sejauh yang saya tau, saya belum pernah membuat atau melihat implementasi dengan metode “activity diatas activity” di Android, apalagi dalam bentuk “tab”. (Beda cerita kalau intent).

      Makanya pada tutorial ini saya menggunakan Fragment yang berjalan diatas acitivity, agar dapat menampilkan banyak fragment dalam 1 activity.

      Mungkin thread ini membantu pertanyaan Mas Fajar : http://stackoverflow.com/a/2958586/4089718

      Suka

  1. gan tambah tutorialnya donk, cara menampilkan Listview dalam fragmen satu,dua,tiga tapi datanya diambil dari DataBase MySQL, cari cari refrensi gak ketemu etemu.. Thanks

    Suka

Good People write good comments ..

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s