The navigational drawer is a complete layout box that contain a left side sliding menu panel with multiple icons. Each icon associated with a individual screen or Fragment. The left side sliding window is used to show all the navigational menu present in app so it will be more easy for app user to visit complete app with one tap. So in this tutorial we would going to create a android app with Navigation Drawer Using Fragments complete step by step Example Tutorial.
Contents in this tutorial Create Navigation Drawer Using Fragments Example Tutorial in Android:
1. Start a fresh android application project in Android Studio and select the Navigation Drawer Screen as default screen.
2. If you have already created the project then you can also add Navigation drawer activity in your existing project by opening Your Package Name -> New -> Activity -> Navigation Drawer Activity.
Now we would run our newly created app in Simulator and we would see that the Navigational drawer View is successfully created in our app.
This above Navigation Drawer View is default view . Now next step is to make changes in this code. So let’s get started 🙂 .
Start Coding :
1. Open the default activity_main_drawer.xml file present in res->menu folder. This file is used as our Menu file. I am creating only 2 menus in navigation drawer.
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:showIn="navigation_view">
<group android:checkableBehavior="single">
<item
android:id="@+id/nav_camera"
android:icon="@drawable/ic_menu_camera"
android:title="Camera" />
<item
android:id="@+id/nav_gallery"
android:icon="@drawable/ic_menu_gallery"
android:title="Gallery" />
</group>
</menu>
2. Now we would make the View layout for Navigational Drawer. So right click on res -> layout ->New -> XML -> Layout XML file. Now we would make 2 layout files 1st is fragment_layout_1 and 2nd is fragment_layout_2 .
Code for fragment_layout_1.xml file.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp">
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:textSize="25dp"
android:text="This is Camera Menu Layout."
android:textAlignment="center"/>
</RelativeLayout>
Code for fragment_layout_2.xml file.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp">
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:textSize="25dp"
android:text="This is Gallery Menu Layout."
android:textAlignment="center"/>
</RelativeLayout>
3. Open the content_main.xml file and add a Frame Layout inside it.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="com.android_examples.navigationdrawer_android_examplescom.MainActivity"
tools:showIn="@layout/app_bar_main">
<FrameLayout
android:id="@+id/frame_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.constraint.ConstraintLayout>
4. Now create 2 Java classes named as Fragment_1.java and Fragment_2.java . The Fragment_1.java file called the fragment_layout_1.xml file and the Fragment_1.java file call the fragment_layout_2.xml file.
Code for Fragment_1.java file.
package com.android_examples.navigationdrawer_android_examplescom;
import android.os.Bundle;
import android.view.View;
import android.support.v4.app.Fragment;
import android.view.ViewGroup;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
/**
* Created by Juned on 11/19/2017.
*/
public class Fragment_1 extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
//returning our layout file
//change R.layout.yourlayoutfilename for each of your fragments
return inflater.inflate(R.layout.fragment_layout_1, container, false);
}
@Override
public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
//you can set the title for your toolbar here for different fragments different titles
getActivity().setTitle("Fragment_1_Camera ");
}
}
Code for Fragment_2.java file.
package com.android_examples.navigationdrawer_android_examplescom;
import android.os.Bundle;
import android.view.View;
import android.support.v4.app.Fragment;
import android.view.ViewGroup;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
/**
* Created by Juned on 11/19/2017.
*/
public class Fragment_2 extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
//returning our layout file
//change R.layout.yourlayoutfilename for each of your fragments
return inflater.inflate(R.layout.fragment_layout_2, container, false);
}
@Override
public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
//you can set the title for your toolbar here for different fragments different titles
getActivity().setTitle("Fragment_2_Gallery ");
}
}
5. Now file step is to write code in MainActivity.java file.
