Cara Menggunakan ViewPager Pada BottomNavigationView Untuk Menampilkan Activity Baru

Cara Membuat Menu BottomNavigationView Menampilkan Activity Menggunakan ViewPager di Android Studio

Halo guys, bagaimana kabar kalian hari ini? Saya harap kalian dalam keadaan yang baik-baik saja. Sebelumnya saya sudah pernah membagikan kalian tutorial Cara Membuat Menu Menggunakan BottomNavigationView di Android Studio. Pada hasil dari tutorial tersebut hanya menampilkan menu saja, tidak menampilkan activity baru ketika menu di pilih. Dan sekarang pada kesempatan kali ini saya akan membagikan tutorial Cara Menampilkan Activity Baru pada BottomNavigationView menggunakan ViewPager.

ViewPager adalah widget yang sangat berguna sekali dalam pengembangan aplikasi. Sebelumnya saya sudah pernah menggunakan widget ini pada menu TabLayout untuk menampilkan halaman lain ketika menu tab di pilih. Sama juga pada tutorial ini, ViewPager digunakan untuk menampilkan halaman atau activity baru ketika menu pada BottomNavigationView di pilih.

Untuk itu, pada tutorial ini kalian akan belajar cara membuat menu pada bottomnavigationview menampilkan halaman atau activity baru menggunakan widget viewpager dengan cara yang mudah.

Tutorial Cara Membuat BottomNavigationView Menggunakan ViewPager di Android Studio

Pada tutorial ini, saya masih menggunakan projek pada tutorial sebelumnya.

TUTORIAL DASAR CARA MENGGUNAKAN BOTTOMNAVIGATIONVIEW DI ANDROID STUDIO

Kalian bisa mengikuti tutorial tersebut untuk bisa mengikuti tutorial ini.

Daftar file xml layout yang digunakan atau yang di update dalam projek ini:

  1. activity_main.xml
  2. fragment_account.xml
  3. fragment_add.xml
  4. fragment_favorite.xml
  5. fragment_home.xml
  6. fragment_search.xml

Daftar file java yang digunakan atau yang di update dalam projek ini.

  1. FragAccount.java
  2. FragAdd.java
  3. FragFavorite.java
  4. FragHome.java
  5. FragSearch.java
  6. MainActivity.java
  7. ViewPagerAdapter.java

Berikut ini adalah struktur projek dari tutorial ini.

Dibawah ini adalah langkah-langkah dalam pembuatan aplikasi Bottom App.

XML Layout File

Buka file activity_main.xml kalian dan tambahkan ViewPager di dalam RelativeLayout. Berikut ini adalah kode lengkap untuk file activity_main.xml

app/res/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="#EEEEEE"
    tools:context=".MainActivity">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/navigation"
        android:layout_centerInParent="true"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:itemBackground="@android:color/white"
        app:itemIconTint="@drawable/color_state"
        app:itemTextColor="@drawable/color_state"
        app:labelVisibilityMode="unlabeled"
        app:menu="@menu/menu_bottom_nav" />

</RelativeLayout>

Buat Fragment File

Buatlah lima file fragment dengan cara klik kanan pada folder app, lalu pilih New>Fragment>Fragment (Blank). Android Studio akan menampilkan jendela seperti pada gambar di bawah ini.

Simpan nama file seperti pada daftar file xml dan java yang telah saya tulis diatas. Hilangkan tanda checklist seperti pada gambar di atas.

Java Adapter File

Buatlah file java adapter baru dengan cara klik kanan pada folder java lalu pilih New>Java Class. Simpan file tersebut dengan nama ViewPagerAdapter. Berikut ini adalah kode lengkap untuk file ViewPagerAdapter.java

app/java/com.androidrion.bottomapp/ViewPagerAdapter.java

Java Activity File

Sekarang buka file MainActivity dalam folder java pada projek android studio kalian. Berikut ini adalah kode lengkap untuk file MainActivity.java

app/java/com.androidrion.bottomapp/MainActivity.java

package com.androidrion.bottomapp;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.ViewPager;

import android.os.Bundle;
import android.view.MenuItem;

import com.google.android.material.bottomnavigation.BottomNavigationView;

public class MainActivity extends AppCompatActivity {

    ViewPager viewPager;
    BottomNavigationView bottomNavigationView;

    FragHome fragHome;
    FragSearch fragSearch;
    FragAdd fragAdd;
    FragFavorite fragFavorite;
    FragAccount fragAccount;

    MenuItem menuItem;

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

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

        bottomNavigationView = findViewById(R.id.navigation);
        bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
                switch (menuItem.getItemId()) {
                    case R.id.home:
                        viewPager.setCurrentItem(0);
                        break;
                    case R.id.search:
                        viewPager.setCurrentItem(1);
                        break;
                    case R.id.add:
                        viewPager.setCurrentItem(2);
                        break;
                    case R.id.fav:
                        viewPager.setCurrentItem(3);
                        break;
                    case R.id.account:
                        viewPager.setCurrentItem(4);
                        break;
                }
                return false;
            }
        });

        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {

                bottomNavigationView.getMenu().getItem(position).setChecked(true);
                menuItem = bottomNavigationView.getMenu().getItem(position);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

    }

    private void setupViewPager(ViewPager viewPager) {
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        fragHome = new FragHome();
        fragSearch = new FragSearch();
        fragAdd = new FragAdd();
        fragFavorite = new FragFavorite();
        fragAccount = new FragAccount();

        adapter.addFragment(fragHome);
        adapter.addFragment(fragSearch);
        adapter.addFragment(fragAdd);
        adapter.addFragment(fragFavorite);
        adapter.addFragment(fragAccount);
        viewPager.setAdapter(adapter);
    }
}

Run ‘app’

Sekarang jalankan projek android studio kalian. Pada tampilan awal aplikasi, sekarang kalian bisa melihat terdapat halaman baru yang ketika kita memilih menu pada bagian bawah aplikasi. Jika kode diatas tidak terjadi error, maka aplikasi akan terlihat seperti pada gambar dibawah ini.

AKHIR KATA

Itulah tadi tutorial mudah cara membuat menu pada bottomnavigationview menampilkan activity baru menggunakan viewpager di android studio. Tutorial diatas sangatlah mudah dikerjakan karena kita hanya perlu menambahkan beberapa kode saja pada file MainActivity.

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.

Download Project

Untuk download project pada tutorial ini, silahkan klik tombol dibawah ini.

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

You might also like

Leave A Reply

Your email address will not be published.