Cara Membuat Sliding TabLayout dan ListView di Android Studio
Cara Membuat Sliding TabLayout dan ListView di Android Studio

Cara Membuat Sliding TabLayout dan ListView di Android Studio
Halo sob jumpa kembali, kali saya ingin membagikan sebuah tutorial bagaimana cara membuat sliding tablayout beserta listview pada aplikasi android.
Sebelumnya pernahkah kalian melihat fungsi dari tablayout ? Fungsi tablayout saat ini sudah sangat banyak diterapkan pada aplikasi, seperti contohnya WhatsApp, Facebook Mobile, Google Playstore dan lainnya.

Pengertian Java Serta Kelebihan dan Kekurangannya

Sebenernya apasih itu TabLayout ?
Tablayout merupakan sebuah komponen yang biasanya digunakan sebagai navigasi aplikasi android.

Ketika Tablayout dikombinasikan dengan sebuah fragment ini bisa berfungsi untuk menampilkan banyak tampilan halaman di dalam 1 activity saja. Seperti contoh jika sebuah activity memiliki beberapa tab dan ketika salah satu tab diklik maka halaman fragment akan otomatis berganti mengikuti setiap tab yang ada.

Cara Membuat Sliding TabLayout di Android Studio
  • Pertama silahkan kalian buat terlebih dahulu sebuah project dengan Empty Activity dan tentukan target API nya disini saya memakai API level 29 dan untuk librarynya saya menggunakan AndroidX yang merupakan bagian dari jetpack.
  • Silahkan buka file res > values kemudian pilih styles.xml dan ubah bagian parent menjadi seperti ini
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
  • Import library yang dibutuhkan dengan cara masuk ke gradle > build.gradle (Module: app) kemudian masukan dependencies seperti berikut :
dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation 'androidx.appcompat:appcompat:1.1.0'
    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
    implementation 'com.google.android.material:material:1.0.0'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test.ext:junit:1.1.1'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'
}
  • Kemudian isikan code elemen TabLayout dan ViewPager berikut ke dalam layout activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    tools:context=".MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent"
        android:minHeight="?attr/actionBarSize">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            android:minHeight="?attr/actionBarSize"
            app:theme="@style/AppTheme"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

        </androidx.appcompat.widget.Toolbar>
    </com.google.android.material.appbar.AppBarLayout>
    <!-- Menerapkan TabLayout dan ViewPager -->

    <com.google.android.material.tabs.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tab_layout"
        android:layout_below="@id/appBar"
        android:background="@color/colorPrimary"
        app:tabTextColor="#FFFFFF"
        app:tabMode="fixed"
        app:tabSelectedTextColor="#FFFFFF">

        <com.google.android.material.tabs.TabItem
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/tab_kontak"
            android:text="Matkul"
            />

        <com.google.android.material.tabs.TabItem
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/tab_pesan"
            android:text="Nama"
            />

        <com.google.android.material.tabs.TabItem
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/tab_kelas"
            android:text="Kelas"
            />

    </com.google.android.material.tabs.TabLayout>

    <androidx.viewpager.widget.ViewPager
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/pager"
        android:layout_below="@id/tab_layout">

    </androidx.viewpager.widget.ViewPager>

</RelativeLayout>
  • Selanjutnya buatlah fragment yang difungsikan sebagai isi dari tablayout. Disini saya membuat 3 buah fragment yaitu matkul, nama, dan kelas fragment, tetapi akan saya contohkan penerapan salah satunya saja.
  • Cara membuat fragmentnya bisa dengan cara klik kanan pada package kemudian pilih new > fragment > blank fragment.
  • Isikan masing-masing ketiga layout xml fragment tersebut dengan komponen ListView seperti contoh kode dibawah ini.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:tools="http://schemas.android.com/tools"
    android:background="@color/colorPrimary"
    tools:context="com.billyproject.myapplication.FragmentKelas">

    <ListView
        android:id="@+id/list"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
    </ListView>

</FrameLayout>
  • Dan untuk bagian fragment class java nya masukan seperti ini 
package com.billyproject.myapplication;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ListView;

import androidx.fragment.app.Fragment;

public class FragmentKelas extends Fragment {

    public FragmentKelas(){

    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View frag_kelas = inflater.inflate(R.layout.activity_fragment_kelas, container, false);
        String[] menuItems={"06TPLP003", "06TPLP001", "06TPLP002",
                "06TPLP003", "06TPLP004", "06TPLP005"};

        ListView listView = (ListView) frag_kelas.findViewById(R.id.list);

        ArrayAdapter<String> listViewAdapter = new ArrayAdapter<String>(
                getActivity(),
                android.R.layout.simple_list_item_1,
                menuItems
        );

        listView.setAdapter(listViewAdapter);
        return frag_kelas;
    }
}
  • Kemudian buatlah sebuah class java baru dan beri nama PagerAdapter, nantinya PageAdapter ini digunakan untuk mengatur beberapa fragment tadi yang telah kita buat sebelumnya untuk disandingkan pada TabLayout, untuk kode nya bisa kalian liat dibawah ini :
package com.billyproject.myapplication;

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

public class PagerAdapter extends FragmentStatePagerAdapter {

    private int number_tabs;

    public PagerAdapter(FragmentManager fm, int number_tabs) {
        super(fm);
        this.number_tabs = number_tabs;
    }

    //Mengembalikan Fragment yang terkait dengan posisi tertentu
    @Override
    public Fragment getItem(int position) {
        switch (position){
            case 0:
                return new FragmentMatkul();
            case 1:
                return new FragmentNama();
            case 2:
                return new FragmentKelas();
            default:
                return null;
        }
    }

    //Mengembalikan jumlah tampilan yang tersedia.
    @Override
    public int getCount() {
        return number_tabs;
    }
}
  • Setelah PageAdapter selesai dibuat saatnya mengatur kelas utama yaitu MainActivity.java, masukan kode seperti berikut
package com.billyproject.myapplication;

import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import androidx.viewpager.widget.ViewPager;

import android.os.Bundle;

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

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);

        //Menerapkan TabLayout dan ViewPager pada Activity
        final TabLayout tabLayout = findViewById(R.id.tab_layout);
        final ViewPager viewPager = findViewById(R.id.pager);

        //Memanggil dan Memasukan Value pada Class PagerAdapter(FragmentManager dan JumlahTab)
        PagerAdapter pagerAdapter = new PagerAdapter(getSupportFragmentManager(), tabLayout.getTabCount());

        //Memasang Adapter pada ViewPager
        viewPager.setAdapter(pagerAdapter);

        viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));

        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                //Dipanggil ketika tab memasuki state/keadaan yang dipilih.
                viewPager.setCurrentItem(tab.getPosition());
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                //Dipanggil saat tab keluar dari keadaan yang dipilih.
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {
                //Dipanggil ketika tab yang sudah dipilih, dipilih lagi oleh user.
            }
        });
    }
}
  • Langkah telah selesai dan sekarang silahkan kalian jalankan programnya, jika sukses tampilan aplikasinya akan seperti gambar dibawah. Kalian juga bisa melihat source code keseluruhannya disini

Cara Membuat Sliding TabLayout dan ListView di Android Studio

    Jadi seperti itulah bagaimana cara membuat Sliding TabLayout beserta ListView, mohon maaf apabila ada yang kurang dimengerti.
    Sekian semoga bisa membantu bagi kalian yang sedang mencari cara untuk Membuat Sliding TabLayout.

    Dan jangan lupa untuk membaca artikel lainnya seputar dunia pemrograman.

    Baca Juga : 

    referensi : https://www.wildantechnoart.net


    Thanks For Visiting ^_^
    Show comments
    Hide comments

    0 Response to "Cara Membuat Sliding TabLayout dan ListView di Android Studio"

    Post a Comment

    Silahkan berkomentar secara ramah dan bijak.. ^_^

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel