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
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 :
- 3 Cara Mengatasi Layar Preview Design Tidak Muncul di Android Studio
- Contoh Penggunaan Intent Explicit dan Implicit untuk Pindah antar Activity
referensi : https://www.wildantechnoart.net
Thanks For Visiting ^_^
