Membuat TabLayout Untuk Navigasi Antar Halaman

Dalam pengembangan aplikasi Android, navigasi antar halaman adalah salah satu fitur yang paling penting. Salah satu cara untuk mengimplementasikan navigasi antar halaman adalah dengan menggunakan TabLayout. Pada artikel ini, kita akan membahas cara membuat TabLayout untuk navigasi antar halaman pada aplikasi Android.

Apa itu TabLayout?

TabLayout adalah sebuah komponen UI yang dapat digunakan untuk menavigasi antar halaman pada aplikasi Android. TabLayout dapat menampilkan beberapa tab yang dapat dipilih oleh pengguna untuk menavigasi ke halaman yang berbeda. Setiap tab dapat memiliki label dan ikon yang unik.

Komponen yang Dibutuhkan

Untuk membuat TabLayout, kita membutuhkan beberapa komponen berikut:

1. Activity: Activity adalah komponen dasar pada aplikasi Android yang dapat menampilkan UI dan menerima input dari pengguna.
2. TabLayout: TabLayout adalah komponen UI yang dapat digunakan untuk menavigasi antar halaman.
3. ViewPager: ViewPager adalah komponen UI yang dapat digunakan untuk menampilkan konten halaman yang berbeda.
4. PagerAdapter: PagerAdapter adalah adapter yang dapat digunakan untuk mengisi konten halaman pada ViewPager.

Langkah-Langkah Membuat TabLayout

Berikut adalah langkah-langkah membuat TabLayout untuk navigasi antar halaman pada aplikasi Android:

Langkah 1: Buat Proyek Baru

Buka Android Studio dan buat proyek baru. Pilih "Empty Activity" sebagai template proyek.

Langkah 2: Tambahkan Komponen TabLayout

Buka file layout activity_main.xml dan tambahkan komponen TabLayout seperti berikut:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorColor="@color/white"
        app:tabTextColor="@color/white" />

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

Langkah 3: Tambahkan PagerAdapter

Buat class baru yang bernama PagerAdapter dan tambahkan kode berikut:

import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;

public class PagerAdapter extends FragmentPagerAdapter 

    private Fragment[] fragments;
    private String[] titles;

    public PagerAdapter(FragmentManager fragmentManager, Fragment[] fragments, String[] titles) 
        super(fragmentManager);
        this.fragments = fragments;
        this.titles = titles;
    

    @Override
    public Fragment getItem(int position) 
        return fragments[position];
    

    @Override
    public int getCount() 
        return fragments.length;
    

    @Override
    public CharSequence getPageTitle(int position) 
        return titles[position];
    

Langkah 4: Tambahkan Fragment

Buat class baru yang bernama Fragment1, Fragment2, dan Fragment3 yang mewarisi class Fragment. Tambahan kode berikut pada setiap class fragment:

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class Fragment1 extends Fragment 

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) 
        View view = inflater.inflate(R.layout.fragment1, container, false);
        return view;
    

Langkah 5: Tambahkan Kode pada Activity

Buka file MainActivity.java dan tambahkan kode berikut:

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.viewpager.widget.ViewPager;

import android.os.Bundle;

import com.google.android.material.tabs.TabLayout;

public class MainActivity extends AppCompatActivity 

    private TabLayout tabLayout;
    private ViewPager viewPager;
    private Fragment[] fragments;
    private String[] titles;

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

        tabLayout = findViewById(R.id.tab_layout);
        viewPager = findViewById(R.id.view_pager);

        fragments = new Fragment[] new Fragment1(), new Fragment2(), new Fragment3();
        titles = new String[] "TAB 1", "TAB 2", "TAB 3";

        PagerAdapter pagerAdapter = new PagerAdapter(getSupportFragmentManager(), fragments, titles);
        viewPager.setAdapter(pagerAdapter);
        tabLayout.setupWithViewPager(viewPager);
    

Hasil

Jalankan aplikasi dan hasilnya akan seperti berikut:

Kesimpulan

Membuat TabLayout untuk navigasi antar halaman pada aplikasi Android dapat dilakukan dengan beberapa langkah sederhana. Dengan menggunakan komponen TabLayout, ViewPager, dan PagerAdapter, kita dapat membuat navigasi antar halaman yang mudah dan efisien.

Tayangan mengenai Membuat TabLayout untuk Navigasi Antar Halaman