CLICK2CODE

first you learn then you earn

In this article, we create a material design navigation drawer menu to making a beautiful android application in the android studio platform. So Using the below code you can invest a few times to create a new and fresh navigation drawer for your clients else yourself. And you can follow stepwise code then you can make perfectly otherwise your app will be crashed.

Now create a new project using Empty Activity, enter your App Name, and Finish. After finished gradle then you can use below step methods.

Step: 1

Go to build.gradle(Module: app) under Gradle Scripts and copy below dependency and you can paste in your project under the dependency section.

// Design Dependency
implementation 'com.google.android.material:material:1.1.0'

Step: 2

Now open string.xml files and copy below code and paste in your project. If you want to change the color of your choice then you can choose your own colors.

<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#1F6C22</color>
<color name="colorPrimaryDark">#1F6C22</color>
<color name="colorAccent">#0945EA</color>
<color name="colorBlue">#03A9F4</color>
<color name="colorgray">#D1D1D1</color>
</resources>

Step: 3

Now open string.xml file and copy below code and directly paste in your project. DO NOT CHANGE ANYTHING IN STRING FILE CODE OTHERWISE YOUR APP IN NOT WORKING.

<resources>
<string name="app_name">Navigation Drawer</string>
<string name="drawer_open">Drawer Open</string>
<string name="drawer_close">Drawer Close</string>
<string name="facebook_page">Facebook Page</string>
<string name="instagram">Instagram Page</string>
<string name="communication">Communication</string>
<string name="nav_rate">Rate this app</string>
<string name="nav_share">Invite friends</string>
<string name="nav_privacy_policy">Privacy Policy</string>
<string name="nav_terms_conditions"><![CDATA[Terms & Conditionds]]></string>
</resources>

Step: 4

Go to styles.xml file and paste below code in your project otherwise you can directly change code in your styls.xml file because we can change only one code, change “Theme.AppCompat.Light.NoActionBar”.

<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
</resources>

Step: 5

Now you can create a menu Android Resource Directory. If you do not know then follow us. Right click on res folder goto New and select Android Resource Directory and select Resource Type = menu.

After created the menu folder then you can create a menu resource file. If you do not know then follow us. Right-click on res folder go to New and select Menu Resource File then you can write name = navigation_menu. Now your navigation_menu.xml file is created then you can paste the below code. If you want to change your OPTIONS then that’s your choice.

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

<group android:checkableBehavior="single">
<item
android:id="@+id/facebookPage"
android:icon="@drawable/facebook"
android:title="@string/facebook_page" />
<item
android:id="@+id/instagramPage"
android:icon="@drawable/ic_instagram"
android:title="@string/instagram" />
</group>

<item android:title="@string/communication">

<menu>
<item
android:id="@+id/nav_rate"
android:icon="@drawable/nav_rate"
android:title="@string/nav_rate" />

<item
android:id="@+id/nav_share"
android:icon="@drawable/nav_share"
android:title="@string/nav_share" />

<item
android:id="@+id/nav_privacy_policy"
android:icon="@drawable/nav_privacy"
android:title="@string/nav_privacy_policy" />

<item
android:id="@+id/nav_terms_conditions"
android:icon="@drawable/nav_terms"
android:title="@string/nav_terms_conditions" />
</menu>
</item>

</menu>

IF YOU DO NOT HOW TO CREATE ICON AND TITLE THEN YOU CAN WATCH OUR YOUTUBE VIDEO. THEN YOU CAN UNDERSTAND CLEARLY.

Step: 6

Now you can create navigation_header.xml files under the layout folder. So right-click on layout files and goto new and select Layout Resource File and write name = navigation_header.

After created navigation_header.xml file then you can paste below code in your navigation_header.xml.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="156dp"
android:background="@color/colorPrimaryDark"
android:fitsSystemWindows="true"
android:gravity="center"
android:orientation="vertical">

<ImageView
android:layout_width="match_parent"
android:layout_height="60dp"
android:contentDescription="@string/app_name"
app:srcCompat="@mipmap/ic_launcher" />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:gravity="center_horizontal"
android:text="@string/app_name"
android:textAppearance="@style/TextAppearance.AppCompat.Medium"
android:textColor="@android:color/white" />

</LinearLayout>

Step: 7

Now we can create a code in activity_main.xml file. we already create that activity simply you can do copy below code and paste in your project. If your activity name is different then after paste below code can change your 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">

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

<com.google.android.material.appbar.AppBarLayout
android:id="@+id/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:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_scrollFlags="scroll|enterAlways" />

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

<!--RecyclerView-->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Home Activity Page"
android:textAppearance="@style/TextAppearance.AppCompat.Medium"
android:textColor="@android:color/black"
android:textStyle="bold" />

</RelativeLayout>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

<com.google.android.material.navigation.NavigationView
android:id="@+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="@menu/navigation_menu" />
</androidx.drawerlayout.widget.DrawerLayout>

Step: 8

Now we can create JAVA  code in your project so simply copy below code stepwise. DO NOT FOLLOW OWN METHODS.

Now create a variable in your MainActivity.java. You can copy below code paste below “public class MainActivity extends AppCompatActivity“.

private ActionBarDrawerToggle actionBarDrawerToggle;

Now we can copy ToolBar code and paste under protect void onCreate.

Toolbar toolbar = findViewById(R.id.toolBar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setTitle("Navigation Drawer");

Now we can copy Navigation Drawer code and paste under protect void onCreate.

DrawerLayout drawerLayout = findViewById(R.id.drawer_layout);
actionBarDrawerToggle = new ActionBarDrawerToggle(MainActivity.this, drawerLayout, R.string.drawer_open, R.string.drawer_close);
drawerLayout.addDrawerListener(actionBarDrawerToggle);
actionBarDrawerToggle.syncState();

NavigationView navigationView = findViewById(R.id.navigation_view);
View view = navigationView.inflateHeaderView(R.layout.navigation_header);
navigationView.setItemIconTintList(null);
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        UserMenuSelector(item);
        return false;
    }
});

Now we can copy onOptionsItemSelected code and paste out of protect void onCreate.

private void UserMenuSelector(MenuItem item) {
switch (item.getItemId()) {

case R.id.facebookPage:
//Intent facebook = new Intent(MainActivity.this, FacebookPage.class);
//startActivity(facebook);
break;

case R.id.instagramPage:
//Intent instagram = new Intent(MainActivity.this, InstagramPage.class);
//startActivity(instagram);
break;

case R.id.nav_rate:

try {
startActivity(new Intent(Intent.ACTION_VIEW,
Uri.parse("market://details?id=" + getPackageName())));

} catch (ActivityNotFoundException e) {
startActivity(new Intent(Intent.ACTION_VIEW,
Uri.parse("http://play.google.com/store/apps/details?id=" + getPackageName())));
}
break;
case R.id.nav_share:
// Import share content
break;
case R.id.nav_privacy_policy:
//Intent privacy = new Intent(MainActivity.this, PrivacyPolicy.class);
//startActivity(privacy);
break;
case R.id.nav_terms_conditions:
//Intent terms = new Intent(MainActivity.this, TermsConditions.class);
//startActivity(terms);
break;
}
}

Now we can copy onOptionsItemSelected code and paste out of protect void onCreate.

@Override
public boolean onOptionsItemSelected(@NonNull MenuItem item) {
if (actionBarDrawerToggle.onOptionsItemSelected(item)) {
return true;
}
return super.onOptionsItemSelected(item);
}

Now all code implemented in your project then you can run this project on your real device. If you got any error then you can watch our YouTube Videos.

Leave a Reply

Your email address will not be published. Required fields are marked *