Cara Membuat Navigation Drawer Membuka Activity Baru Dengan Fragment

Halo android developer, bagaimana kabar kalian hari ini? Saya harap kalian semua dalam keadaan yang baik-baik saja. Sebelumnya saya sudah pernah membagikan tutorial dasar cara membuat navigation drawer di android studio. Dan sekarang pada kesempatan kali ini saya akan membagikan tutorial cara membuat menu navigation drawer membuka activity baru menggunakan fragment di android studio.

Android Navigation Drawer adalah komponen yang digunakan untuk menampilkan menu yang tersembunyi pada sisi kiri aplikasi. Komponen ini memudahkan kita untuk mengontrol (navigate) di antara menu-menu itu. Secara default, komponen ini tidak terlihat dan perlu dibuka dengan menggeser dari kiri atau mengklik ikonnya di actionbar.

Dalam istilah yang lebih luas, Navigation Drawer adalah panel overlay yang merupakan pengganti layar aktivitas secara khusus.

Jadi disini kalian akan belajar cara membuat aplikasi android untuk menampilkan activity baru ketika menu pada navigation drawer di klik. Saya akan menampilkan 3 tampilan fragment yang dapat dibuka dari menu navigation drawer.

Tutorial Cara Membuat Menu Navigation Drawer Membuka Activity Baru Menggunakan Fragment di Android Studio

Pada tutorial ini, saya menggunakan project dari tutorial sebelumnya. Untuk itu, jika kalian ingin memahami tutorial ini kalian harus belajar terlebih dahulu tutorial sebelumnya pada link di bawah ini.

TUTORIAL DASAR CARA MEMBUAT NAVIGATION DRAWER DI ANDROID STUDIO

Atau kalian bisa langsung mendownload projectnya pada tombol di bawah ini.

Daftar file fragment layout yang ditambahkan dalam project ini:

  1. fragment_account.xml
  2. fragment_dashboard.xml
  3. fragment_notification.xml

Daftar file java fragment yang ditambahkan dalam project ini:

  1. FragmentAccount.java
  2. FragmentDashboard.java
  3. FragmentNotification.java

Dibawah ini adalah langkah-langkah dalam pembuatan aplikasi Navigation Drawer.

XML Layout File

Buka file activity_main.xml dalam folder layout pada project android studio kalian. Tambahkan layout FrameLayout di dalam CoordinatorLayout tepat di bawah AppBarLayout. Berikut ini adalah kode lengkap untuk file activity_main.xml

app/res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout 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:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity"
    tools:openDrawer="start">

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.google.android.material.appbar.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

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

        </com.google.android.material.appbar.AppBarLayout>

        <FrameLayout
            android:id="@+id/fLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior" />
    </androidx.coordinatorlayout.widget.CoordinatorLayout>

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="false"
        app:headerLayout="@layout/layout_header_drawer"
        app:menu="@menu/menu_navigation" />
</androidx.drawerlayout.widget.DrawerLayout>

XML Menu File

Buka file menu_navigation.xml dalam folder menu. Hilangkan android:checked=”true” pada item Dashboard. Berikut ini adalah kode lengkap untuk file menu_navigation.xml

app/res/menu/menu_navigation.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <group
        android:id="@+id/grp_1"
        android:checkableBehavior="single">
        <item
            android:id="@+id/nav_home"
            android:icon="@drawable/ic_home"
            android:title="Dashboard" />
        <item
            android:id="@+id/nav_account"
            android:icon="@drawable/ic_account_circle"
            android:title="My Accout" />
        <item
            android:id="@+id/nav_notification"
            android:icon="@drawable/ic_notifications"
            android:title="Notification" />
    </group>
    <group
        android:id="@+id/grp_2"
        android:checkableBehavior="none">
        <item
            android:id="@+id/nav_settings"
            android:icon="@drawable/ic_settings"
            android:title="Settings" />
        <item
            android:id="@+id/nav_help"
            android:icon="@drawable/ic_help"
            android:title="Help" />
    </group>

</menu>

Buat Fragment Layout & Java File

  1. Buatlah 3 Fragment Activity baru dengan cara klik kanan pada folder layout, lalu pilih New>Fragment>Fragment (Blank).
  2. Simpan ketiga file fragment tersebut seperti yang tertera di atas pada daftar file yang digunakan dalam project ini.
  3. Hilangkan ceklis untuk Include fragment factory methods? dan Include interface callbacks? (Ikuti seperti pada gambar di bawah ini)

Jika kalian selesai, maka project structure akan terlihat seperti pada gambar di bawah ini:

Tutorial Cara Membuat menu Navigation Drawer Membuka Activity Dengan Fragment di android studio

Java Fragment File

Buka file FragmentAccount dalam folder java lalu tambahkan method onViewCreated. Lakukan pada file FragmentDashboard dan FragmentNotification. Dibawah ini adalah kode lengkap untuk ketiga file Fragment dalam folder Java.

app/java/com.androidrion.navigationdrawer/FragmentAccount.java

package com.androidrion.navigationdrawer;


import android.os.Bundle;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

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


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


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


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

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        getActivity().setTitle("Account");
    }
}

app/java/com.androidrion.navigationdrawer/FragmentDashboard.java


package com.androidrion.navigationdrawer;


import android.os.Bundle;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

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


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


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

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

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        getActivity().setTitle("Dashboard");
    }
}

app/java/com.androidrion.navigationdrawer/FragmentNotification.java

package com.androidrion.navigationdrawer;


import android.os.Bundle;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

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


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


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


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

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        getActivity().setTitle("Notification");
    }
}

Java Activity File

Sekarang buka file MainActivity dalam folder java. Berikut ini adalah kode lengkap untuk file MainActivity.java

app/java/com.androidrion.navigationdrawer/MainActivity.java

package com.androidrion.navigationdrawer;

import android.os.Bundle;

import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentTransaction;

import com.google.android.material.navigation.NavigationView;

import androidx.core.view.GravityCompat;
import androidx.drawerlayout.widget.DrawerLayout;
import androidx.appcompat.app.ActionBarDrawerToggle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;

import android.view.MenuItem;

public class MainActivity extends AppCompatActivity
        implements NavigationView.OnNavigationItemSelectedListener {

    Toolbar toolbar;

    DrawerLayout drawer;
    ActionBarDrawerToggle toggle;
    NavigationView navigationView;

    Fragment fragment;
    FragmentTransaction transaction;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        navigationView = findViewById(R.id.nav_view);
        drawer = findViewById(R.id.drawer_layout);

        toggle = new ActionBarDrawerToggle(
                this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
        toggle.syncState();

        navigationView.setNavigationItemSelectedListener(this);

        navigationView.getMenu().getItem(0).setChecked(true);
        firstFragmentDisplay(R.id.nav_home);
    }

    private void firstFragmentDisplay(int itemId) {

        fragment = null;

        switch (itemId) {
            case R.id.nav_home:
                fragment = new FragmentDashboard();
                break;
            case R.id.nav_account:
                fragment = new FragmentAccount();
                break;
            case R.id.nav_notification:
                fragment = new FragmentNotification();
                break;
        }

        if (fragment != null) {
            transaction = getSupportFragmentManager().beginTransaction();
            transaction.replace(R.id.fLayout, fragment);
            transaction.commit();
        }

        drawer.closeDrawers();
    }

    @Override
    public boolean onNavigationItemSelected(MenuItem item) {

        firstFragmentDisplay(item.getItemId());
        return true;
    }

    @Override
    public void onBackPressed() {
        if (drawer.isDrawerOpen(GravityCompat.START)) {
            drawer.closeDrawers();
        } else {
            super.onBackPressed();
        }
    }

}

Run ‘app’

Jalankan project android studio kalian. Jika kode diatas tidak terjadi error, maka aplikasi akan terlihat seperti pada gif di bawah ini.

AKHIR KATA

Itulah tadi tutorial tentang cara menampilkan activity baru ketika menu navigation drawer di klik menggunakan fragment dan framelayout di android studio. Tutorial di atas lumayan susah jadi kalian harus lebih teliti melakukannya.

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 Projek

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
2 Comments
  1. Mohammad Hafis says

    assalamualaikum wr.wb

    maaf sebelumnya bang, di sini saya ingin menanyakan kenapa setelah saya buat sesuai tutorial, first display yg keluar bukan menu home tapi malah menu activity nya bang, mohon pencerahannya bang, trima kasih.

    1. Android Rion says

      Waalaikum salam,
      Mungkin errornya ada pada noactionbar kali mas. coba di cek lagi.

Leave A Reply

Your email address will not be published.