Belajar Membuat TabLayout di Android Material Design

Last Updated on 9 years by Mas Herdi

Hi all, seperti seri-seri sebelumnya, saya akan melanjutkan tentang bagaimana cara membuat Material Design application menggunakan Android Design Support Library. Kali ini saya akan membahas tutorial bagaimana membuat TabLayout menggunakan Design Support Library pada Android.

TabLayout adalah salah satu elemen utama dan paling sering digunakan sebagai menu navigasi pada aplikasi Android. Biasanya TabLayout dikombinasikan dengan Fragment, Fragment tersebut akan berganti sesuai dengan menu Tab yang diklik. Namun kali ini kita hanya akan membahas tentang implementasi TabLayout-nya saja, tidak sampai ke bagian TabLayout dan Fragment. Lain kali saja kita bahas soal itu 🙂

Membuat Material TabLayout menggunakan Android Support Library

Sebelum kita memulai belajar untuk membuat TabLayout pada Android, ada beberapa pre-requisites yang sebaiknya kalian pelajari terlebih dahulu :

Pre-requisites

• Mengenal Android Material Design
• Membuat Project Hello World dengan Android Studio
• Membuat Color Resources untuk Material Design Theme

Setelah membuat project baru pada Android Studio, kalian harus mengimpor beberapa dependencies seperti berikut :

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:22.2.0'
    compile 'com.android.support:design:22.2.0'
    compile 'com.android.support:support-v4:22.2.0'
}

Kemudian, yang perlu kita buat pertama-tama adalah sebuah layout xml yang mempunyai elemen TabLayout di dalamnya, contohnya seperti layout activity_tab.xml di bawah ini :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/coor_Layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/ic_bg_tab">

    <!-- rest of code -->

    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_below="@id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/twoh_primary"
        android:scrollbars="horizontal"
        app:tabGravity="center"
        app:tabMode="scrollable" />

    <!-- rest of code -->

</RelativeLayout>

Berikutnya, pada file Activity di java kita bisa memanggil elemen TabLayout pada xml dengan cara seperti saat kita memanggil elemen layout lainnya :

package id.web.twoh.coolandroiddesign;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;

/**
 * Created by Hafizh Herdi on 8/3/2015 www.twoh.co
 */
public class TabLayoutActivity extends AppCompatActivity{

    private TabLayout tabLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tab);

        // rest of code

        tabLayout = (TabLayout) findViewById(R.id.tabLayout);
        tabLayout.setTabGravity(TabLayout.GRAVITY_CENTER);
        tabLayout.addTab(tabLayout.newTab().setText("Home"));
        tabLayout.addTab(tabLayout.newTab().setText("Profile"));
        tabLayout.addTab(tabLayout.newTab().setText("Settings"));
        tabLayout.addTab(tabLayout.newTab().setText("More"));
        tabLayout.addTab(tabLayout.newTab().setText("About"));
        tabLayout.addTab(tabLayout.newTab().setText("Help"));
        tabLayout.addTab(tabLayout.newTab().setText("Friends"));

        tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                tab.getPosition();
                tab.getText();
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });
    }
    // rest of code
}

Pada kode di atas kita bisa lihat betapa mudahnya untuk menambahkan tab baru pada TabLayout, hanya dengan memanggil fungsi addTab() dan kemudian membuat tab baru dengan memanggil fungsi newTab() pada TabLayout. Hal ini memungkinkan kita untuk menambahkan tab baru secara programmatically, ataupun saat aplikasi berjalan.

Kemudian untuk mendeteksi saat suatu tab diselect (diklik) kita bisa mengeset onTabSelectedListener() yang akan memberikan callback ketika suatu tab diklik. Kita bisa mengetahui tab mana yang diklik dengan memanggil tab.getPosition() untuk mendapatkan posisi tab mana yang diklik atau tab.getText() untuk mendapatkan text title dari tab yang terpilih tersebut. Dari situ kita bisa menentukan mana fragment atau layout yang akan ditampilkan berdasarkan tab yang kita pilih.

Sedangkan untuk element TabLayout pada xml ada beberapa atribut tambahan yang bisa kita set, seperti

app:tabGravity="center"
app:tabMode="scrollable"

tabGravity berfungsi untuk mengeset tata letak posisi dari TabLayout tersebut, dengan memberikan value center maka kita mengeset posisi TabLayout tersebut rata tengah.

Kemudian tabMode berfungsi untuk mengatur apakah TabLayout tersebut fixed atau scrollable, apabila kita memilih scrollable maka apabila jumlah tab membuat ukuran tab melebihi lebar layar maka tab akan bisa discroll secara horizontal. Fixed akan membuat ukuran tab selalu sesuai layar berapapun jumlah tab yang ada pada TabLayout.

Demo

Ketika dijalankan, maka inilah hasil dari TabLayout yang telah kita buat :

contoh Tabayout (c) ArtGerm

That’s all. Source code ada di GitHub saya, jangan lupa untuk follow dan star projectnya ya ?Bagi yang kurang jelas silahkan tanya di bagian komentar.