close

How to Create Navigation Drawer in Android TUTORIAL

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 carte du jour pada navigation drawer di klik. Saya akan menampilkan three tampilan fragment yang dapat dibuka dari carte du jour navigation drawer.

Tutorial Cara Membuat Carte du jour Navigation Drawer Membuka Action 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 coffee fragment yang ditambahkan dalam projection 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="truthful"     tools:context=".MainActivity"     tools:openDrawer="start">      <androidx.coordinatorlayout.widget.CoordinatorLayout         android:layout_width="match_parent"         android:layout_height="match_parent">          <com.google.android.cloth.appbar.AppBarLayout             android:layout_width="match_parent"             android:layout_height="wrap_content"             android:theme="@style/ThemeOverlay.AppCompat.Night.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="@mode/ThemeOverlay.AppCompat.Dark.ActionBar"                 app:contentInsetStartWithNavigation="0dp"                 app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />          </com.google.android.fabric.appbar.AppBarLayout>          <FrameLayout             android:id="@+id/fLayout"             android:layout_width="match_parent"             android:layout_height="match_parent"             app:layout_behavior="com.google.android.fabric.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="beginning"         android:fitsSystemWindows="false"         app:headerLayout="@layout/layout_header_drawer"         app:menu="@menu/menu_navigation" /> </androidx.drawerlayout.widget.DrawerLayout>

Buka file menu_navigation.xml dalam folder carte. Hilangkan android:checked="truthful" pada item Dashboard. Berikut ini adalah kode lengkap untuk file menu_navigation.xml

app/res/bill of fare/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">         <particular             android:id="@+id/nav_home"             android:icon="@drawable/ic_home"             android:title="Dashboard" />         <detail             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" />     </grouping>     <group         android:id="@+id/grp_2"         android:checkableBehavior="none">         <item             android:id="@+id/nav_settings"             android:icon="@drawable/ic_settings"             android:title="Settings" />         <particular             android:id="@+id/nav_help"             android:icon="@drawable/ic_help"             android:championship="Aid" />     </group>  </card>

Buat Fragment Layout & Java File

  1. Buatlahthree Fragment Activity baru dengan cara klik kanan pada binderlayout, lalu pilihNew>Fragment>Fragment (Blank).
  2. Simpan ketiga file fragment tersebut seperti yang tertera di atas pada daftar file yang digunakan dalam projection ini.
  3. Hilangkan ceklis untukInclude fragment factory methods? danInclude 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 coffee lalu tambahkan method onViewCreated. Lakukan pada file FragmentDashboard dan FragmentNotification. Dibawah ini adalah kode lengkap untuk ketiga file Fragment dalam binder Java.

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

          package com.androidrion.navigationdrawer;   import android.os.Bundle;  import androidx.note.NonNull; import androidx.annotation.Nullable; import androidx.fragment.app.Fragment;  import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup;   /**  * A uncomplicated {@link Fragment} subclass.  */ public class FragmentAccount extends Fragment {       public FragmentAccount() {         // Required empty public constructor     }       @Override     public View onCreateView(LayoutInflater inflater, ViewGroup container,                              Packet savedInstanceState) {         // Inflate the layout for this fragment         return inflater.inflate(R.layout.fragment_account, container, faux);     }      @Override     public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {         super.onViewCreated(view, savedInstanceState);         getActivity().setTitle("Account");     } }

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

                      bundle com.androidrion.navigationdrawer;   import android.bone.Parcel;  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 elementary {@link Fragment} bracket.  */ public course FragmentDashboard extends Fragment {       public FragmentDashboard() {         // Required empty public constructor     }      @Override     public View onCreateView(LayoutInflater inflater, ViewGroup container,                              Package savedInstanceState) {         // Inflate the layout for this fragment         render inflater.inflate(R.layout.fragment_dashboard, container, faux);     }      @Override     public void onViewCreated(@NonNull View view, @Nullable Packet 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.notation.Nullable; import androidx.fragment.app.Fragment;  import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup;   /**  * A unproblematic {@link Fragment} subclass.  */ public form FragmentNotification extends Fragment {       public FragmentNotification() {         // Required empty public constructor     }       @Override     public View onCreateView(LayoutInflater inflater, ViewGroup container,                              Package 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");     } }

Coffee 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.Package;  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 form MainActivity extends AppCompatActivity         implements NavigationView.OnNavigationItemSelectedListener {      Toolbar toolbar;      DrawerLayout drawer;     ActionBarDrawerToggle toggle;     NavigationView navigationView;      Fragment fragment;     FragmentTransaction transaction;      @Override     protected void onCreate(Package 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(truthful);         firstFragmentDisplay(R.id.nav_home);     }      private void firstFragmentDisplay(int itemId) {          fragment = nada;          switch (itemId) {             example R.id.nav_home:                 fragment = new FragmentDashboard();                 interruption;             example R.id.nav_account:                 fragment = new FragmentAccount();                 pause;             case R.id.nav_notification:                 fragment = new FragmentNotification();                 pause;         }          if (fragment != null) {             transaction = getSupportFragmentManager().beginTransaction();             transaction.supplant(R.id.fLayout, fragment);             transaction.commit();         }          drawer.closeDrawers();     }      @Override     public boolean onNavigationItemSelected(MenuItem item) {          firstFragmentDisplay(particular.getItemId());         return true;     }      @Override     public void onBackPressed() {         if (drawer.isDrawerOpen(GravityCompat.Get-go)) {             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 carte 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.

DOWNLOAD HERE

How to Create Navigation Drawer in Android TUTORIAL

Posted by: hermanandscalopen.blogspot.com

Comments

Post a Comment