How To Make Custom Navigation Drawer in Android?

We provide mobile Application Development company services for every kind of business as fashion, wellness, shopping, E-commerce, and more. For many different reputed industries, we have created a dynamic, compelling, and user-friendly application for the Android platform.

The navigation drawer is a UI panel displaying the main navigation menu for your app. This is inaccessible when not in use but appears when the user swipes a finger from the left edge of the screen or the user taps the drawer icon in the app bar at the top level of the display.

1How to Implement Navigation Drawer in Android?

1. Create a new project in Android Studio

2. Select Navigation Drawer Activity form activity template

Now click next and give the name to the activity and press finish. Now Android Studio will create a new project for you

Note: If you want to add a new navigation drawer activity to your existing project you can simply add it by going to your package -> right-click -> new -> activity -> navigation drawer activity

2Simple Navigation Drawer ScreenShots 3Custom Navigation Drawer

One can also customize navigation drawer style by icons, texts and colours. Here are steps to customize the navigation drawer :

• Create a new project in android studio

• Add drawer widget to the activity’s layout file

• Create a new layout for the drawer item

activity_navigation_custom.xml :

As you can see for customizing navigation drawer we have commented the by default navigation view and we have added our customized layout that is now working as navigation view.

app_bar_main.xml :

content_main.xml :

CustomNavigationActivity :

package com.example.macos.navigationdemo.activity;

import android.support.annotation.NonNull;

import android.support.design.widget.NavigationView;

import android.support.v4.app.Fragment;

import android.support.v4.app.FragmentManager;

import android.support.v4.content.res.ResourcesCompat;

import android.support.v4.view.GravityCompat;

import android.support.v4.widget.DrawerLayout;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.view.MenuItem;

import android.view.View;

import android.widget.LinearLayout;

import android.widget.TextView;

import android.support.v7.widget.Toolbar;

import android.support.v7.app.ActionBarDrawerToggle;

import com.example.macos.navigationdemo.R;

import com.example.macos.navigationdemo.fragment.FragmentA;

import com.example.macos.navigationdemo.fragment.FragmentB;

import com.example.macos.navigationdemo.fragment.FragmentC;

import com.example.macos.navigationdemo.fragment.FragmentD;

public class CustomNavigationActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener

{

private CustomNavigationActivity activity;

private LinearLayout clk1,clk2,clk3,clk4;

TextView textMatter;

@Override

protected void onCreate(Bundle savedInstanceState)

{

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_custom_navigation);

activity=CustomNavigationActivity.this;

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

setSupportActionBar(toolbar);

textMatter=(TextView)findViewById(R.id.textMatter);

clk1=(LinearLayout)findViewById(R.id.click1);

clk2=(LinearLayout)findViewById(R.id.click2);

clk3=(LinearLayout)findViewById(R.id.click3);

clk4=(LinearLayout)findViewById(R.id.click4);

Initializing();

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.addDrawerListener(toggle);

toggle.syncState();

}

private void Initializing()

{

clk1.setBackground(ResourcesCompat.getDrawable(getResources(), R.drawable.button_clickb, null));

clk2.setBackground(ResourcesCompat.getDrawable(getResources(), R.drawable.button_click, null));

clk3.setBackground(ResourcesCompat.getDrawable(getResources(), R.drawable.button_click, null));

clk4.setBackground(ResourcesCompat.getDrawable(getResources(), R.drawable.button_click, null));

Fragment fragment = null;

Class fragmentClass = FragmentA.class;

try

{

fragment = (Fragment) fragmentClass.newInstance();

}

catch (Exception e)

{

e.printStackTrace();

}

// Insert the fragment by replacing any existing fragment

FragmentManager fragmentManager = getSupportFragmentManager();

fragmentManager.beginTransaction().replace(R.id.content_frame, fragment).commit();

}

@Override

public boolean onNavigationItemSelected(@NonNull MenuItem menuItem)

{

return false;

}

@Override

public void onBackPressed()

{

DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);

if (drawer.isDrawerOpen(GravityCompat.START))

{

drawer.closeDrawer(GravityCompat.START);

}

else

{

super.onBackPressed();

}

}

public void ClickNavigation(View view)

{

Fragment fragment = null;

Class fragmentClass = FragmentA.class;

switch (view.getId()){

case R.id.click1:

fragmentClass = FragmentA.class;

clk1.setBackground(ResourcesCompat.getDrawable(getResources(), R.drawable.button_clickb, null));

clk2.setBackground(ResourcesCompat.getDrawable(getResources(), R.drawable.button_click, null));

clk3.setBackground(ResourcesCompat.getDrawable(getResources(), R.drawable.button_click, null));

clk4.setBackground(ResourcesCompat.getDrawable(getResources(), R.drawable.button_click, null));

break;

case R.id.click2:

fragmentClass = FragmentB.class;

clk1.setBackground(ResourcesCompat.getDrawable(getResources(), R.drawable.button_click, null));

clk2.setBackground(ResourcesCompat.getDrawable(getResources(), R.drawable.button_clickb, null));

clk3.setBackground(ResourcesCompat.getDrawable(getResources(), R.drawable.button_click, null));

clk4.setBackground(ResourcesCompat.getDrawable(getResources(), R.drawable.button_click, null));

break;

case R.id.click3:

fragmentClass = FragmentC.class;

clk1.setBackground(ResourcesCompat.getDrawable(getResources(), R.drawable.button_click, null));

clk2.setBackground(ResourcesCompat.getDrawable(getResources(), R.drawable.button_click, null));

clk3.setBackground(ResourcesCompat.getDrawable(getResources(), R.drawable.button_clickb, null));

clk4.setBackground(ResourcesCompat.getDrawable(getResources(), R.drawable.button_click, null));

break;

case R.id.click4:

fragmentClass = FragmentD.class;

clk1.setBackground(ResourcesCompat.getDrawable(getResources(), R.drawable.button_click, null));

clk2.setBackground(ResourcesCompat.getDrawable(getResources(), R.drawable.button_click, null));

clk3.setBackground(ResourcesCompat.getDrawable(getResources(), R.drawable.button_click, null));

clk4.setBackground(ResourcesCompat.getDrawable(getResources(), R.drawable.button_clickb, null));

break;

}

try {

fragment = (Fragment) fragmentClass.newInstance();

} catch (Exception e) {

e.printStackTrace();

}// Insert the fragment by replacing any existing fragment

FragmentManager fragmentManager = getSupportFragmentManager();

fragmentManager.beginTransaction().replace(R.id.content_frame, fragment).commit();

DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);

drawer.closeDrawer(GravityCompat.START);

}

}

Fragment A :

package com.example.macos.navigationdemo.fragment;

import android.os.Bundle;

import android.support.annotation.NonNull;

import android.support.annotation.Nullable;

import android.support.v4.app.Fragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import com.example.macos.navigationdemo.R;

public class FragmentA extends Fragment

{

@Nullable

@Override

public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState)

{

return inflater.inflate(R.layout.fragment_a, container, false);

}

@Override

public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState)

{

super.onViewCreated(view, savedInstanceState);

getActivity().setTitle("Fragment Camera");

}

}

Other 3 Fragments are as per Fragment A and only difference is that named as Fragment B, Fragment C and Fragment D respectively.

4Custom Navigation ScreenShot

ScreenShot 1 : Fragment Screen ScreenShot 2 : Custom Navigation

Vasundhara Infotech is Best Unity Game, Custom Web Design, iOS, Android Application Development, & Seo Type IT Services Provider Company in Surat, India - Usa.