Cara Menggunakan ViewPager Pada TabLayout Untuk Menampilkan Activity Baru

Tutorial Cara Menampilkan Activity Baru pada tablayout Menggunakan ViewPager di Android Studio

Halo semuanya. Bagaimana kabar kalian hari ini? Saya harap kalian semua dalam keadaan baik-baik saja. Sebelumnya saya sudah membagikan kepada kalian tutorial dasar cara menggunakan TabLayout di Android Studio. Pada tutorial tersebut, kalian hanya belajar cara membuat atau menampilkan menu tab pada aplikasi tetapi tidak menampilkan activity baru di masing-masing menu. Untuk itu, pada tutorial ini saya akan membagikan kalian lanjutan tutorial dari sebelumnya yaitu cara menampilkan activity baru menggunakan ViewPager ketika TabLayout di pilih.

Seperti pada tutorial sebelumnya yang telah saya jelaskan bahwa komponen TabLayout ini sangat berguna sekali dalam aplikasi yang memiliki banyak sekali menu. Contoh aplikasi yang menggunakan TabLayout adalah aplikasi chatting WhatsApp. Kalian bisa melihat betapa mudahnya pengguna menggunakan aplikasi tersebut jika menu yang ditampilkan sangat rapi.

Untuk itu, pada tutorial ini kalian akan belajar cara membuat menu tab seperti aplikasi WhatsApp menggunakan TabLayout dan ViewPager di Android Studio.

- Advertisement -

Tutorial Cara Membuat Menu Tab Menggunakan TabLayout dan ViewPager di Android Studio

Pada tutorial ini, saya masih menggunakan projek pada tutorial sebelumnya. Untuk itu, ikuti tutorial sebelumnya pada link di bawah ini agar kalian paham pada tutorial ini.

TUTORIAL DASAR CARA MENGGUNAKAN TABLAYOUT DI ANDROID STUDIO

Ada banyak file yang perlu ditambahkan untuk membuat TabLayout menampilkan activity baru pada tutorial ini. Di bawah ini adalah file yang digunakan dalam projek ini.

File xml tambahan yang digunakan dalam projek ini:

  1. fragment_chat.xml
  2. fragment_call.xml
  3. fragment_status.xml

File java tambahan yang digunakan dalam projek ini:

  1. FragCall.java
  2. FragChat.java
  3. FragStatus.java

XML Layout File

Buka file activity_main.xml pada projek kalian dan tambahkan widget ViewPager tepat dibawah AppBarLayout. Tambahkan juga atribut layout_behavior pada widget ViewPager. Berikut ini adalah kode lengkap untuk file activity_main.xml

app/res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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"
    tools:context=".MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:theme="@style/ThemeOverlay.MaterialComponents.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.MaterialComponents.Light" />

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tablayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabGravity="fill"
            app:tabIndicatorColor="@android:color/white"
            app:tabIndicatorHeight="3dp"
            app:tabMode="fixed"
            app:tabSelectedTextColor="@android:color/white" />
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Buatlah tiga buah fragment activity baru dengan cara klik kanan pada folder app lalu pilih New>Fragment>Fragment (Blank). Simpan ketiga fragment activity baru tersebut dengan nama file FragCall, FragChat dan FragStatus. Uncheck pada bagian Include fragment factory methods? dan Include interface callbacks?

Berikut ini adalah kode lengkap dari ketiga fragment activity yang baru kalian buat.

app/res/layout/fragment_call.xml

<?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=".FragCall">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        style="@style/TextAppearance.AppCompat.Display1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="Call Fragment" />

</FrameLayout>

app/res/layout/fragment_chat.xml

<?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=".FragChat">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        style="@style/TextAppearance.AppCompat.Display1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="Chat Fragment" />

</FrameLayout>

app/res/layout/fragment_status.xml

<?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=".FragStatus">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        style="@style/TextAppearance.AppCompat.Display1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="Status Fragment" />

</FrameLayout>

Java Activity File

Tambahkan method newInstance di tiap-tiap file java fragment yang baru kalian buat. Berikut ini adalah kode lengkap dari ketiga file java fragment yang baru kalian buat.

app/java/com.androidrion.tabapp/FragCall.java

package com.androidrion.tabapp;


import android.os.Bundle;

import androidx.fragment.app.Fragment;

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


/**
 * A simple {@link Fragment} subclass.
 */
public class FragCall extends Fragment {


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

    public static FragCall newInstance() {
        
        Bundle args = new Bundle();
        
        FragCall fragment = new FragCall();
        fragment.setArguments(args);
        return fragment;
    }


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

}

app/java/com.androidrion.tabapp/FragChat.java

package com.androidrion.tabapp;


import android.os.Bundle;

import androidx.fragment.app.Fragment;

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


/**
 * A simple {@link Fragment} subclass.
 */
public class FragChat extends Fragment {


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

    public static FragChat newInstance() {
        
        Bundle args = new Bundle();
        
        FragChat fragment = new FragChat();
        fragment.setArguments(args);
        return fragment;
    }


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

}

app/java/com.androidrion.tabapp/FragStatus.java

package com.androidrion.tabapp;


import android.os.Bundle;

import androidx.fragment.app.Fragment;

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


/**
 * A simple {@link Fragment} subclass.
 */
public class FragStatus extends Fragment {


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

    public static FragStatus newInstance() {
        
        Bundle args = new Bundle();
        
        FragStatus fragment = new FragStatus();
        fragment.setArguments(args);
        return fragment;
    }


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

}

Setelah kalian menambahkan newInstance di dalam file java fragment, buka file MainActivity pada projek kalian dan tambahkan kode di bawah ini untuk membuat TabLayout menampilkan activity baru menggunakan ViewPager. Berikut ini adalah kode lengkap untuk file MainActivity.java

app/java/com.androidrion.tabapp/MainActivity.java

package com.androidrion.tabapp;

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

import android.os.Bundle;

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

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

public class MainActivity extends AppCompatActivity {

    ViewPager viewPager;
    TabLayout tabLayout;

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

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

        viewPager = findViewById(R.id.view_pager);
        setupViewPager(viewPager);

        tabLayout = findViewById(R.id.tablayout);
        tabLayout.setupWithViewPager(viewPager);

    }

    private void setupViewPager(ViewPager viewPager) {
        SectionPagerAdapter adapter = new SectionPagerAdapter(getSupportFragmentManager());
        adapter.addFragment(FragChat.newInstance(), "Chat");
        adapter.addFragment(FragStatus.newInstance(), "Status");
        adapter.addFragment(FragCall.newInstance(), "Call");
        viewPager.setAdapter(adapter);
    }

    private class SectionPagerAdapter extends FragmentPagerAdapter {

        private final List<Fragment> mFragmentList = new ArrayList<>();
        private final List<String> mFragmentTitleList = new ArrayList<>();

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

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

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

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

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

Run ‘app’

Sekarang jalankan projek android studio kalian. Pada tampilan awal aplikasi, kalian bisa melihat menu tab di bawah toolbar aplikasi seperti hasil aplikasi pada tutorial sebelumnya. Namun perbedaan terlihat pada tutorial ini adalah kalian bisa melihat ada layout yang jika kalian memilih menu tab lain maka layout tersebut berganti sesuai nama tab yang kalian pilih. Jika kode diatas tidak terjadi masalah, maka aplikasi akan terlihat seperti pada gambar dibawah ini.

Tutorial Video

AKHIR KATA

Itulah tadi tutorial lanjutan Cara Membuat TabLayout Menampilkan Activity Baru Menggunakan ViewPager di Aplikasi Android Studio. Sebenarnya, tutorial diatas sangatlah mudah dikerjakan karena tidak begitu banyak kode yang ditulis untuk membuat TabLayout menampilkan activity baru menggunakan ViewPager. Kalian cukup menggunakan FragmentPagerAdapter seperti pada file MainActivity.java

Jika kalian mengalami kendala saat melakukan tutorial di atas, silahkan komentar di bawah artikel ini. Jangan lupa untuk like dan subscribe Channel YouTube Android Rion. Semoga artikel ini membantu kalian. Terima Kasih.

- Advertisement -

Get real time updates directly on you device, subscribe now.

You might also like

- Advertisement -

Leave A Reply

Your email address will not be published.