Membuat Tab Menu Menggunakan TabLayout dan ViewPager di Android

Kumpulan Tutorial Android Bahasa Indonesia

Membuat Tab Menu Menggunakan TabLayout dan ViewPager di Android

TabLayout and ViewPager

TabLayout adalah tampilan menu di android yang berbentuk tab dan berguna sebagai pemisah antara satu layout dengan layout yang lain. Lalu ViewPager adalah sebuah kerangka menu di android yang menyimpan beberapa layout lain sehingga kita bisa berpindah antara layout satu dengan yang lain tanpa perlu membuat banyak activity. Untuk lebih jelasnya kita langsung saja mulai tutorial ini.

Menyiapkan Material

Kita akan mulai dengan membuat proyek baru dengan cara klik File > New > New Project kemudian isi semua detil secara default. Ketika sampai ke perintah “Select a default activity”, pilih Empty Activity.

Setelah membuat proyek, kita lanjut dengan membuka file build.gradle dan tambah dependency android design support library > com.android.support:design:27.0.2

build.gradle level Modul

build.gradle level Modul

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:27.0.2'
    implementation 'com.android.support.constraint:constraint-layout:1.0.2'
    implementation 'com.android.support:support-v4:27.0.2'
    implementation 'com.android.support:design:27.0.2'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.1'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.1'
}

Lalu buka file colors.xml di folder res > values dan tambah kode warna seperti dibawah.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#1B5E20</color>
    <color name="colorPrimaryDark">#1B5E20</color>
    <color name="colorAccent">#00C853</color>
    <color name="textColorPrimary">#FFFFFF</color>
    <color name="windowBackground">#FFFFFF</color>
    <color name="navigationBarColor">#000000</color>
</resources>

Kemudian buka file styles.xml di folder res > values dan tambahkan kode style seperti dibawah ini. style kode ini akan terbaca ke semua versi android.

<resources>

    <style name="MyMaterialTheme" parent="MyMaterialTheme.Base">

    </style>

    <style name="MyMaterialTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

Lalu di folder res > values-v21 buat file baru bernama styles.xml. File ini berfungsi sebagai style yang akan dibaca khusus ke device android versi Android 5.0 keatas. Dan jangan lupa masukkan kodenya seperti dibawah.

<resources>

    <style name="MyMaterialTheme" parent="MyMaterialTheme.Base">
        <item name="android:windowContentTransitions">true</item>
        <item name="android:windowAllowEnterTransitionOverlap">true</item>
        <item name="android:windowAllowReturnTransitionOverlap">true</item>
        <item name="android:windowSharedElementEnterTransition">@android:transition/move</item>
        <item name="android:windowSharedElementExitTransition">@android:transition/move</item>
    </style>

</resources>

Dan yang terakhir buka file AndroidManifest.xml dan ubah tema yang akan digunakan menjadi tema yang baru saja kita buat.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.androsia.tablayout">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/MyMaterialTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Kita coba jalankna aplikasi yang baru saja kita buat untuk mengecek apakah tema yang telah kita buat telah berhasil digunakan. Jika status bar berubah, maka tema telah dijalankan dengan benar.

Membuat TabLayout beserta ViewPager

Sebelum kita membuat TabLayout kita pertama-tama mesti membuat Fragment yang akan digunakan untuk menyimpan tampilan yang akan digunakan. Caranya dengan klik kanan nama proyek di struktur proyek.

Opsi klik kanan

Opsi klik kanan

Kemudian klik new > Fragment > Fragment (Blank) lalu beri nama PageFragment dan hilangkan ceklis untuk “Include fragment factory methods?” dan “Include interface callbacks?” dan ceklis “Create layout XML?” dan sisanya diamkan default kemudian klik Finish.

Membuat Fragment baru

Membuat Fragment baru

Setelah membuat Fragment PageFragment kita tambahkan kode seperti dibawah

package com.androsia.tablayout;


import android.os.Bundle;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;


/**
 * A simple {@link android.support.v4.app.Fragment} subclass.
 */
public class PageFragment extends android.support.v4.app.Fragment {

    private String title;
    private static final String ARG_TITLE = "title";

    public static PageFragment newInstance(String title) {

        Bundle args = new Bundle();
        args.putString(ARG_TITLE, title);

        PageFragment fragment = new PageFragment();
        fragment.setArguments(args);
        return fragment;
    }

    public PageFragment() {
        // Required empty public constructor
    }

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Bundle extras = getArguments();
        if (extras != null) {
            title = extras.getString(ARG_TITLE);
        }
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View v = inflater.inflate(R.layout.fragment_page, container, false);

        TextView textView = v.findViewById(R.id.title);
        textView.setText(title);

        return v;
    }

}

Buka file fragment_page.xml di folder res > layout dan tambahkan kode seperti dibawah

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".PageFragment">

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="42sp"
        android:layout_gravity="center" />

</FrameLayout>

Untuk menggunakan ViewPager kita mesti memiliki Adapter. Adapter adalah suatu class yang berfungsi menyatukan data ke view. Kita buat adapter dengan nama ViewPagerAdapter.java dengan kode seperti dibawah.

package com.androsia.tablayout;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.ArrayList;
import java.util.List;

public class ViewPagerAdapter extends FragmentPagerAdapter {
    private final List<Fragment> mFragmentList = new ArrayList<>();
    private final List<String> mFragmentTitleList = new ArrayList<>();

    ViewPagerAdapter(FragmentManager manager) {
        super(manager);
    }

    @Override
    public Fragment getItem(int position) {
        return mFragmentList.get(position);
    }

    @Override
    public int getCount() {
        return mFragmentList.size();
    }

    public void addFragment(Fragment fragment, String title) {
        mFragmentList.add(fragment);
        mFragmentTitleList.add(title);
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return mFragmentTitleList.get(position);
    }
}

Kita lanjut dengan membuka file layout activity_main.xml dan tambah kode seperti dibawah.

android.support.design.widget.TabLayout > Tag ini berfungsi untuk menampilkan TabLayout

android.support.design.widget.ViewPager > Tag ini berfungsi untuk menampilkan ViewPager

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

Lalu kita buka file MainActivity.java dan tambahkan kode seperti dibawah.

package com.androsia.tablayout;

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;


public class MainActivity extends AppCompatActivity {

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

        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        ViewPager viewPager = findViewById(R.id.viewpager);
        setupViewPager(viewPager);

        TabLayout tabLayout = findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(viewPager);
    }

    private void setupViewPager(ViewPager viewPager) {
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        adapter.addFragment(PageFragment.newInstance("Satu"), "Satu");
        adapter.addFragment(PageFragment.newInstance("Dua"), "Dua");
        adapter.addFragment(PageFragment.newInstance("Tiga"), "Tiga");
        viewPager.setAdapter(adapter);
    }
}

Fixed Tab

Fixed Tab harus digunakan ketika anda hanya memiliki sedikit tab dan nama tab yang pendek. Tab ini akan ditampilkan dalam posisi tetap. Untuk menggunakan Fixed Tab anda bisa menambahkan atribut app:tabMode dan memiliki value “fixed” di Tag Tab anda.

<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabMode="fixed" />

Tab Memenuhi Layar

Jika kamu ingin tab yang ditampilkan sepanjang screen device Android yang digunakan, maka kamu mesti menambahkan atribut app:tabGravity=”fill” di tag TabLayout anda. Kode ini akan membuat tab yang ada akan terbagi sama rata dan ditampilkan sepanjang screen Android.

<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabGravity="fill"
    app:tabMode="fixed" />
Tab memenuhi layar

Tab memenuhi layar

Tab Diposisi Tengah

Jika anda mau tab yang anda tampilkan di posisi tengah screen secara horizontal maka anda cukup menambah kode app:tabGravity=”center” di tag TabLayout.

<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabGravity="center"
    app:tabMode="fixed" />
Tab diposisi tengah

Tab diposisi tengah

Scrollable Tabs

Scrollable tab sebaiknya digunakan ketika tab yang anda punya banyak dan nama dari setiap tab memiliki karakter yang cukup panjang. Ini dikarenakan tab yang ditampilkan memakan banyak panjang dari screen sehingga screen tidak mampu menampilkan seluruh tab yang anda punya dalam satu barus sehingga dibuatlah Scrollable Tabs. Untuk menggunakan Scrollable Tabs anda cuma tinggal menambah kode app:tabMode=”scrollable” di tag TabLayout.

<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabGravity="center"
    app:tabMode="scrollable" />

Karena Scrollable Tabs digunakan ketika kita memiliki banyak tab maka kita perlu menambah tab yang digunakan dengan mengedit fungsi setupViewPager() di file MainActivity.java dengan menambah kode seperti dibawah. Sehingga kita memiliki total 8 tab.

package com.androsia.tablayout;

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;


public class MainActivity extends AppCompatActivity {

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

        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        ViewPager viewPager = findViewById(R.id.viewpager);
        setupViewPager(viewPager);

        TabLayout tabLayout = findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(viewPager);
    }

    private void setupViewPager(ViewPager viewPager) {
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        adapter.addFragment(PageFragment.newInstance("Satu"), "Satu");
        adapter.addFragment(PageFragment.newInstance("Dua"), "Dua");
        adapter.addFragment(PageFragment.newInstance("Tiga"), "Tiga");
        adapter.addFragment(PageFragment.newInstance("Empat"), "Empat");
        adapter.addFragment(PageFragment.newInstance("Lima"), "Lima");
        adapter.addFragment(PageFragment.newInstance("Enam"), "Enam");
        adapter.addFragment(PageFragment.newInstance("Tujuh"), "Tujuh");
        adapter.addFragment(PageFragment.newInstance("Delapan"), "Delapan");
        viewPager.setAdapter(adapter);
    }
}
Scrollable Tabs

Scrollable Tabs

Tab Dengan Ikon dan Text

Kadang kamu ingin menambahkan beberapa ikon pada tab yang ingin dibuat. Caranya sangat mudah, anda hanya perlu memanggil method setIcon() pada objek TabLayout dan jangan lupa mempass icon yang akan digunakan sebagai parameter. Ikon akan ditampilkan di atas text.

tabLayout.getTabAt(0).setIcon(tabIcons[0]);
tabLayout.getTabAt(1).setIcon(tabIcons[1]);

Buka file MainActivity.java dan rubah kode seperti dibawah. Kita akan menambah beberapa ikon yang akan digunakan kemudian membuat fungsi baru bernama setupTabIcons() yang berfungsi memasang ikon ke tab.

package com.androsia.tablayout;

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;


public class MainActivity extends AppCompatActivity {

    private TabLayout tabLayout;

    private final int[] tabIcons = {
            R.drawable.ic_home_white_24dp,
            R.drawable.ic_star_white_24dp,
            R.drawable.ic_chat_bubble_white_24dp
    };

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

        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        ViewPager viewPager = findViewById(R.id.viewpager);
        setupViewPager(viewPager);

        tabLayout = findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(viewPager);
        setupTabIcons();
    }

    private void setupViewPager(ViewPager viewPager) {
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        adapter.addFragment(PageFragment.newInstance("Satu"), "Satu");
        adapter.addFragment(PageFragment.newInstance("Dua"), "Dua");
        adapter.addFragment(PageFragment.newInstance("Tiga"), "Tiga");
        viewPager.setAdapter(adapter);
    }

    private void setupTabIcons() {
        tabLayout.getTabAt(0).setIcon(tabIcons[0]);
        tabLayout.getTabAt(1).setIcon(tabIcons[1]);
        tabLayout.getTabAt(2).setIcon(tabIcons[2]);
    }
}
Tab dengan ikon dan text

Tab dengan ikon dan text

Tab hanya berisi ikon

Kita juga bisa hanya menggunakan ikon dalam membuat sebuah tab. Caranya kita tinggal membuat method getPageTitle() pada class ViewPagerAdapter.java dengan membuat return valuenya menjadi null.

@Override
public CharSequence getPageTitle(int position) {
    return null;
}
Tab hanya berisi ikon

Tab hanya berisi ikon

Dan itulah tutorial Cara Membuat Menu Tab Menggunakan TabLayout dan ViewPager di Android. Anda bisa mengeksplorasi lebih banyak dengan membuka dokumentasi langsung di sini semoga bermanfaat dan terimakasih.

 

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *