Navigation Drawer is one of the most commonly used UI patterns in Android applications.
It provides:
- Easy navigation
- Modern Material Design UI
- Fragment switching
- Organized app structure
- Better user experience
In this tutorial, we will build a complete Navigation Drawer Android application using:
- NavigationView
- DrawerLayout
- Fragments
- Toolbar
- ScrollView
- TableLayout
- Spinner
- HorizontalScrollView
What We Will Build
This project will include:
- Navigation Drawer menu
- Fragment navigation
- Student dashboard UI
- Time Table screen
- Exam Schedule screen
- Attendance screen
- Social media links
- Responsive layouts
Important Modern Android Note
The original project uses:
android.support.*
which is deprecated.
Modern Android applications should now use:
androidx.*
along with:
Material Design Components
Step 1 — Create a Navigation Drawer Activity
Open Android Studio and create a new project.
Select:
Navigation Drawer Activity
Android Studio automatically generates:
- DrawerLayout
- NavigationView
- Toolbar
- Menu resources
- Navigation structure
Modern Dependencies
Inside:
build.gradle
add:
implementation
'com.google.android.material:material:1.11.0'
implementation
'androidx.navigation:navigation-fragment:2.7.7'
implementation
'androidx.navigation:navigation-ui:2.7.7'
What Is NavigationView?
NavigationView is a Material Design component used inside DrawerLayout to display a side navigation menu.
It supports:
- Menu items
- Icons
- Header layouts
- Nested menus
- Material styling
NavigationView Example
<com.google.android.material.navigation.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/nav_header_main"
app:menu="@menu/activity_main_drawer"/>
Understanding Navigation Drawer Menu
Navigation Drawer menus are defined inside:
res/menu/activity_main_drawer.xml
Menu structure:
- menu → root container
- group → grouped menu items
- item → individual menu item
- submenu → nested menu
Menu Example
<menu xmlns:android=
"http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="@+id/home"
android:title="Home"/>
<item
android:id="@+id/timeTable"
android:title="Time Table"/>
<item
android:id="@+id/examSchedule"
android:title="Exam Schedule"/>
</group>
</menu>
What Is Fragment Navigation?
Fragments allow multiple screens inside a single Activity.
Advantages:
- Reusable UI
- Better architecture
- Modular screens
- Dynamic navigation
- Improved performance
Handling Navigation Item Clicks
Menu item clicks are handled using:
setNavigationItemSelectedListener()
Modern Fragment Navigation Example
navigationView
.setNavigationItemSelectedListener(item -> {
Fragment fragment = null;
int id = item.getItemId();
if (id == R.id.home) {
fragment = new HomeFragment();
} else if (id == R.id.timeTable) {
fragment = new TimeTableFragment();
}
if (fragment != null) {
getSupportFragmentManager()
.beginTransaction()
.replace(
R.id.content_frame,
fragment
)
.commit();
}
drawerLayout.closeDrawers();
return true;
});
Why Use Fragments?
- Cleaner architecture
- Single Activity design
- Easier maintenance
- Reusable screens
- Navigation flexibility
Creating HomeFragment
Example:
public class HomeFragment
extends Fragment {
@Override
public View onCreateView(
LayoutInflater inflater,
ViewGroup container,
Bundle savedInstanceState
) {
return inflater.inflate(
R.layout.home,
container,
false
);
}
}
Building the Home Dashboard UI
The Home screen can contain:
- Student details
- Important information
- Buttons
- HorizontalScrollView
- Announcements
- Cards
Using LinearLayout
LinearLayout arranges views:
- Vertically
- Horizontally
Student Info Layout Example
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:text="Student Name"/>
</LinearLayout>
Using ScrollView
ScrollView allows vertical scrolling for large content.
Important:
ScrollView can have only one direct child.
HorizontalScrollView
HorizontalScrollView enables horizontal scrolling.
Useful for:
- Category buttons
- Tabs
- Quick actions
- Cards
HorizontalScrollView Example
<HorizontalScrollView>
<LinearLayout
android:orientation="horizontal">
<Button
android:text="Time Table"/>
<Button
android:text="Attendance"/>
</LinearLayout>
</HorizontalScrollView>
Handling Button Clicks in Fragment
public class HomeFragment
extends Fragment
implements View.OnClickListener {
}
Button Click Example
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.btnTimeTable:
Fragment fragment =
new TimeTableFragment();
getActivity()
.getSupportFragmentManager()
.beginTransaction()
.replace(
R.id.content_frame,
fragment
)
.commit();
break;
}
}
Building TimeTableFragment
Time tables can be created using:
- TableLayout
- TableRow
- TextView
What Is TableLayout?
TableLayout arranges UI in rows and columns.
Useful for:
- Schedules
- Reports
- Attendance tables
- Timetables
TableLayout Example
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TableRow>
<TextView
android:text="Math"/>
<TextView
android:text="10:00 AM"/>
</TableRow>
</TableLayout>
Building ExamScheduleFragment
Exam schedules can be displayed using:
- ScrollView
- LinearLayout
- TextViews
Building AttendanceFragment
Attendance screen uses:
- Spinner
- TextView
- Dynamic data display
What Is Spinner?
Spinner is a dropdown selection component in Android.
Spinner Example
Spinner spinner =
view.findViewById(R.id.semSpinner);
Adding Data to Spinner
ArrayAdapter<CharSequence> adapter =
ArrayAdapter.createFromResource(
getContext(),
R.array.semesters,
android.R.layout
.simple_spinner_item
);
Modern Android Recommendations
Modern Android applications now commonly use:
- Jetpack Navigation Component
- ViewBinding
- RecyclerView
- ConstraintLayout
- Material Design 3
- MVVM Architecture
- Jetpack Compose
Why Avoid Older Android Support Libraries?
Older:
android.support.*
libraries are deprecated.
AndroidX provides:
- Better support
- Improved performance
- Modern APIs
- Future compatibility
Best Practices
1. Use Fragments Properly
Keep fragments modular and reusable.
2. Use RecyclerView Instead of Large ScrollViews
RecyclerView improves performance for large lists.
3. Use ViewBinding
Avoid excessive:
findViewById()
calls in modern Android apps.
4. Use Material Design Components
Material Design improves UI consistency and accessibility.
Common Beginner Mistakes
1. Using Too Many Nested Layouts
Deep layout nesting reduces performance.
2. Forgetting Fragment Back Stack
Use:
addToBackStack()
for proper navigation behavior.
3. Using Deprecated APIs
Always prefer AndroidX libraries.
FAQ
What is Navigation Drawer in Android?
Navigation Drawer is a side menu used for navigating between screens.
Why use Fragments?
Fragments provide modular and reusable UI components.
What is the modern alternative?
Jetpack Navigation Component and Jetpack Compose Navigation are modern recommended approaches.
Conclusion
Navigation Drawer remains one of the most powerful Android UI navigation patterns.
Using Fragments, NavigationView, DrawerLayout, and Material Design components allows developers to build scalable and professional Android applications.
Modern Android applications should combine AndroidX, Material Design 3, responsive layouts, and clean architecture patterns for production-grade development.
About the Author
Salil Jha is a Full Stack and Mobile Developer specializing in Android, React Native, fintech systems, scalable SaaS platforms, and developer tooling products.
CodeChain Dev — Build Modern Products. Solve Real Problems.
No comments:
Post a Comment