Navigation Drawer in Android Studio using Java use Fragments With WebView
Navigation Drawer
Navigation Drawer is a side menu panel that consists of different navigating fragments. The menu is provided at the left of the screen which opens and closes as per your user requirements, There are different fragments present in the menu, so when you click on any one fragment it will lead you to a different screen.
The best example would be Gmail App, when you click on the menu a side panel opens up that consists of All Inboxes, Primary, Promotions, and Socials.
Download the Logo and Background
Logo:
Header Background:
Step-by-Step Implementation
Step 1: Open Android Studio, Create New Project, Choose Empty Activity and Name the Project “Navigation Drawer”.
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/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp"
android:orientation="vertical"
tools:context=".NavigationDrawer"
tools:openDrawer="start">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/cordinate">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.appbar.MaterialToolbar
android:layout_width="match_parent"
android:layout_height="56dp"
android:id="@+id/toolbar"
android:layout_marginTop="50dp"
android:elevation="4dp"
android:background="@color/lavender"
app:title="Shamim"
app:navigationIcon="@drawable/baseline_dehaze_24"
app:menu="@menu/toolbaritem"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
</com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/lavender"
android:layout_below="@+id/cordinate"
android:id="@+id/frameLayout"/>
</RelativeLayout>
<com.google.android.material.navigation.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="@+id/navigationView"
android:layout_gravity="start"
android:background="@color/white"
app:headerLayout="@layout/nav_header"
app:itemIconTint="@color/lavender"
app:menu="@menu/nav"
app:itemTextColor="@color/lavender"
/>
</androidx.drawerlayout.widget.DrawerLayout>
Main Java
package com.example.fragmentsexam;
import android.content.ClipData;
import android.media.RouteListingPreference;
import android.os.Bundle;
import android.view.MenuItem;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
import androidx.activity.EdgeToEdge;
import androidx.annotation.NonNull;
import androidx.appcompat.app.ActionBarDrawerToggle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import androidx.core.graphics.Insets;
import androidx.core.view.GravityCompat;
import androidx.core.view.ViewCompat;
import androidx.core.view.WindowInsetsCompat;
import androidx.drawerlayout.widget.DrawerLayout;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;
import com.google.android.material.appbar.MaterialToolbar;
import com.google.android.material.navigation.NavigationView;
public class NavigationDrawer extends AppCompatActivity {
DrawerLayout drawerLayout;
MaterialToolbar toolbar;
FrameLayout frameLayout;
NavigationView navigationView;
////view header view na dorle kaj korate parbo na karon ata onnor akta ongshp ja nav header ar tai dorte hobe ar niche porichoi kore dite hobe ai moddokar ongshogulo ke
//ja Drawer Layout ar modde Poriborton hobe
View headerView;
TextView headerName,headerEmail;
ImageView headerImage;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
EdgeToEdge.enable(this);
setContentView(R.layout.navigation_drawer);
ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.drawerLayout), (v, insets) -> {
Insets systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars());
v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom);
return insets;
});
frameLayout=findViewById(R.id.frameLayout);
toolbar=findViewById(R.id.toolbar);
drawerLayout=findViewById(R.id.drawerLayout);
navigationView=findViewById(R.id.navigationView);
//ja Drawer Layout ar modde Poriborton hobe
headerView=navigationView.getHeaderView(0);
headerEmail=headerView.findViewById(R.id.headerEmail);
headerName=headerView.findViewById(R.id.headerName);
headerImage=headerView.findViewById(R.id.headerImage);
headerName.setText("Shamim Hossain");
headerEmail.setText("sh98459@gmail.com");
//pothome faka na rekhe akta url diya load rakhbo tahole dukhtai take dekha jabe
Fastragment.web_url="https://pbrlp.gov.bd/";
Toast.makeText(NavigationDrawer.this,"About",Toast.LENGTH_LONG).show();
FragmentManager fragmentManager=getSupportFragmentManager();
FragmentTransaction fragmentTransaction=fragmentManager.beginTransaction();
fragmentTransaction.add(R.id.frameLayout,new Fastragment());
fragmentTransaction.commit();
toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
if (item.getItemId()==R.id.itemStar){
Toast.makeText(NavigationDrawer.this,"Home",Toast.LENGTH_LONG).show();
Toast.makeText(NavigationDrawer.this,"Home",Toast.LENGTH_LONG).show();
FragmentManager fragmentManager=getSupportFragmentManager();
FragmentTransaction fragmentTransaction=fragmentManager.beginTransaction();
fragmentTransaction.add(R.id.frameLayout,new Fastragment());
fragmentTransaction.commit();
}
else if (item.getItemId()==R.id.itmCross){
Toast.makeText(NavigationDrawer.this,"About",Toast.LENGTH_LONG).show();
FragmentManager fragmentManager=getSupportFragmentManager();
FragmentTransaction fragmentTransaction=fragmentManager.beginTransaction();
fragmentTransaction.add(R.id.frameLayout,new SecoundFragment());
fragmentTransaction.commit();
}
return false;
}
});
ActionBarDrawerToggle togglee=new ActionBarDrawerToggle(NavigationDrawer.this,
drawerLayout,toolbar,R.string.close_nav,R.string.open_nav);
drawerLayout.addDrawerListener(togglee);
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
if (item.getItemId()==R.id.nav_home){
Fastragment.web_url="https://www.cscglobal.com/cscglobal/home/";
Toast.makeText(NavigationDrawer.this,"Home",Toast.LENGTH_LONG).show();
Toast.makeText(NavigationDrawer.this,"Home",Toast.LENGTH_LONG).show();
FragmentManager fragmentManager=getSupportFragmentManager();
FragmentTransaction fragmentTransaction=fragmentManager.beginTransaction();
fragmentTransaction.add(R.id.frameLayout,new Fastragment());
fragmentTransaction.commit();
drawerLayout.closeDrawer(GravityCompat.START);
}
else if (item.getItemId()==R.id.nav_about){
Toast.makeText(NavigationDrawer.this,"About",Toast.LENGTH_LONG).show();
FragmentManager fragmentManager=getSupportFragmentManager();
FragmentTransaction fragmentTransaction=fragmentManager.beginTransaction();
fragmentTransaction.add(R.id.frameLayout,new SecoundFragment());
fragmentTransaction.commit();
drawerLayout.closeDrawer(GravityCompat.START);
}
else if (item.getItemId()==R.id.nav_Dhakastoc){
Fastragment.web_url="https://www.dsebd.org/";
Toast.makeText(NavigationDrawer.this,"About",Toast.LENGTH_LONG).show();
FragmentManager fragmentManager=getSupportFragmentManager();
FragmentTransaction fragmentTransaction=fragmentManager.beginTransaction();
fragmentTransaction.add(R.id.frameLayout,new Fastragment());
fragmentTransaction.commit();
drawerLayout.closeDrawer(GravityCompat.START);
}
return true;
}
});
}
}
nav_header.xml sudhu xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="176dp"
android:gravity="bottom"
android:padding="16dp"
android:background="@drawable/headerbkg">
<ImageView
android:id="@+id/headerImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/logo"/>
<TextView
android:id="@+id/headerName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Android Knowledge"
android:textColor="@color/white"
android:textStyle="bold"/>
<TextView
android:id="@+id/headerEmail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="contact@androidknowledge.com"
android:textColor="@color/white"
android:textSize="14sp"
android:layout_marginBottom="16dp"/>
</LinearLayout>
Side Navigation xml menu nave_item.xml
<?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/nav_home"
android:icon="@drawable/baseline_home_24"
android:title="Home"
android:checkable="true"/>
<item
android:id="@+id/nav_Dhakastoc"
android:icon="@drawable/baseline_home_24"
android:title="Dhaka Stoc Change"
android:checkable="true"/>
<item
android:id="@+id/nav_about"
android:icon="@android:drawable/checkbox_on_background"
android:title="About Us"
android:checkable="true"/>
<item
android:id="@+id/nav_settings"
android:icon="@android:drawable/checkbox_on_background"
android:title="Settings"/>
<item
android:id="@+id/nav_share"
android:icon="@drawable/baseline_perm_identity_24"
android:title="Share"/>
</group>
<item
android:title="">
<menu>
<item
android:id="@+id/nav_logout"
android:icon="@android:drawable/btn_dialog"
android:title="Logout"/>
</menu>
</item>
</menu>
menu Toolbar.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item android:id="@+id/itemStar"
android:title="Profile"
android:icon="@android:drawable/btn_star_big_on"
app:showAsAction="always"
android:checkable="true"/>
<item android:id="@+id/itmCross"
android:title="Profile"
android:icon="@android:drawable/btn_dialog"
app:showAsAction="always"
android:checkable="true"/>
</menu>
Colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="black">#FF000000</color>
<color name="white">#FFFFFFFF</color>
<color name="purple_200">#FFBB86FC</color>
<color name="purple_500">#FF6200EE</color>
<color name="purple_700">#FF3700B3</color>
<color name="teal_200">#FF03DAC5</color>
<color name="teal_700">#FF018786</color>
<color name="lavender">#8692f7</color>
</resources>
strings.xml
<string name="open_nav">Open Navigation Drawer</string>
<string name="close_nav">Close Navigation Drawer</string>
Themes.color
<style name="Theme.NavigationDrawer" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">@color/lavender</item>
<item name="colorPrimaryVariant">@color/lavender</item>
<item name="colorOnPrimary">@color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">@color/teal_200</item>
<item name="colorSecondaryVariant">@color/teal_700</item>
<item name="colorOnSecondary">@color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>
FastFragment.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#020A17"
tools:context=".Fastragment">
<!-- TODO: Update blank fragment layout -->
<WebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textColor="@color/white"
android:textSize="30dp"
android:layout_gravity="center"
android:gravity="center"
android:text="FAST FRAGMENTS" />
</LinearLayout>
Fasa Fragment java
package com.example.fragmentsexam;
import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.webkit.WebView;
/**
*
*
* A simple {@link Fragment} subclass.
* create an instance of this fragment.
*/
public class Fastragment extends Fragment {
public static String web_url="";
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
// Inflate the layout for this fragment
View myView=inflater.inflate(R.layout.fast_fragment,container,false);
WebView webView=myView.findViewById(R.id.webView);
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl(web_url);
return myView;
}
}
SecondFargment.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#0761FA"
tools:context=".SecoundFragment">
<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textColor="@color/white"
android:textSize="30dp"
android:layout_gravity="center"
android:gravity="center"
android:text="FAST FRAGMENTS" />
</LinearLayout>
SecondFragment.java
package com.example.fragmentsexam;
import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
/**
* A simple {@link Fragment} subclass.
* create an instance of this fragment.
*/
public class SecoundFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View myView=inflater.inflate(R.layout.fragment_secound,container,false);
return myView;
}
}
Navigation Drawer in Android Studio using Java use Fragments With WebView
