• Tentang Kami
  • Hubungi Kami
  • Kebijakan Privasi
  • Sangkalan
Masbilly.com
  • Beranda
  • Tutorial
    • Android
    • IOS
    • Windows
    • Photoshop
    • Komputer Jaringan
  • Media Sosial
    • Instagram
    • WhatsApp
    • Telegram
    • Facebook
    • Youtube
    • TikTok
  • Tech
    • Gadget
    • Komputer & Laptop
  • Games
    • Mobile
    • PC
  • Programing
    • MySQL
    • PHP
    • Java
    • C++
  • Spot News
No Result
View All Result
  • Beranda
  • Tutorial
    • Android
    • IOS
    • Windows
    • Photoshop
    • Komputer Jaringan
  • Media Sosial
    • Instagram
    • WhatsApp
    • Telegram
    • Facebook
    • Youtube
    • TikTok
  • Tech
    • Gadget
    • Komputer & Laptop
  • Games
    • Mobile
    • PC
  • Programing
    • MySQL
    • PHP
    • Java
    • C++
  • Spot News
No Result
View All Result
Masbilly.com
No Result
View All Result
Home Programing Java

Cara Membuat Sliding TabLayout dan ListView di Android Studio

Billy Lorenzia by Billy Lorenzia
July 24, 2022
in Java, Programing
0
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
Baca Juga:   Contoh Penggunaan Intent Explicit dan Implicit untuk Pindah antar Activity

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 : 

    • 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 ^_^
    Masbilly.com
    Tags: android studiojava
    Previous Post

    Contoh Penggunaan Intent Explicit dan Implicit untuk Pindah antar Activity

    Next Post

    iPhone SE 2020 Spesifikasi dan Harga Beserta Kelebihan dan Kekurangan

    Billy Lorenzia

    Billy Lorenzia

    Next Post

    iPhone SE 2020 Spesifikasi dan Harga Beserta Kelebihan dan Kekurangan

    Leave a Reply Cancel reply

    Your email address will not be published. Required fields are marked *

    Postingan Terbaru

    Cara Mengaktifkan Kamera Laptop Windows 10

    Cara Mengaktifkan Kamera Laptop Windows 10

    March 25, 2023
    Cara Mematikan Windows Defender di Windows 7, 8, dan 10

    Cara Mematikan Windows Defender di Windows 7, 8, dan 10

    March 24, 2023
    Cara Screenshot di Laptop Windows 10

    Cara Screenshot di Laptop Windows 10 Tanpa Aplikasi

    March 23, 2023
    Masbilly.com

    Masbilly.com adalah blog Teknologi Informasi yang membahas tentang Tutorial, Tips & Trik, Programing dan Info Menarik lainnya.

    Follow Us

    • Tentang Kami
    • Hubungi Kami
    • Kebijakan Privasi
    • Sangkalan

    © 2022 Masbilly.com - All rights reserved.

    No Result
    View All Result
    • Beranda
    • Tutorial
      • Android
      • Windows
      • Photoshop
      • Komputer Jaringan
    • Media Sosial
      • Instagram
      • WhatsApp
      • TikTok
    • Tech
      • Gadget
      • Komputer & Laptop
    • Games
      • Mobile
      • PC
    • Programing
      • MySQL
      • PHP
      • Java
      • C++
    • Spot News

    © 2022 Masbilly.com - All rights reserved.