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.
package com.android_examples.navigationdrawer_android_examplescom;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentTransaction;
import android.os.Bundle;
import android.support.design.widget.NavigationView;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
public class MainActivity extends AppCompatActivity
implements NavigationView.OnNavigationItemSelectedListener {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
drawer.setDrawerListener(toggle);
toggle.syncState();
NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
navigationView.setNavigationItemSelectedListener(this);
//Add this line of code here to open the default selected menu on app start time.
ShowFragment(R.id.nav_camera);
}
@Override
public void onBackPressed() {
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
if (drawer.isDrawerOpen(GravityCompat.START)) {
drawer.closeDrawer(GravityCompat.START);
} else {
super.onBackPressed();
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
private void ShowFragment(int itemId) {
Fragment fragment = null;
switch (itemId) {
case R.id.nav_camera:
fragment = new Fragment_1();
break;
case R.id.nav_gallery:
fragment = new Fragment_2();
break;
}
if (fragment != null) {
FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
fragmentTransaction.replace(R.id.frame_layout, fragment);
fragmentTransaction.commit();
}
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
drawer.closeDrawer(GravityCompat.START);
}
@SuppressWarnings("StatementWithEmptyBody")
@Override
public boolean onNavigationItemSelected(MenuItem item) {
//Calling the ShowFragment() method here to show the our created menu as default menus.
ShowFragment(item.getItemId());
return true;
}
}
Screenshots:
Related Posts
Android Overflow Menu on Action Bar Toolbar with Icons Tutorial
Add Material Design Floating Action Button(FAB) in Android Studio app project with support library
Place two or Multiple buttons side by side in relativelayout android
Android sliding horizontal menu using drawer tutorial example
Install And Configure Kotlin Plugin in Android Studio Tutorial
Add image icon inside EditText android programmatically
Create custom alert dialog box in android example
Only Dial a phone number in android programmatically
Are sir user ki details Nav header me kaise rakhu uska code banao…
Sure haipee i will soon publish my new tutorial regarding to your query.