Material NavigationView for Android
📱
Table of Contents:
Introduction
MaterialNavigationView library is built upon Google's Material Design library. This API will be useful to create rich, animated, beautiful Navigation View Drawer in Android app easily. It follows all Material Design Guidelines as stated here.
MaterialNavigationView class in this library is inherited from com.google.android.material.navigation.NavigationView class. Just only difference is added extra design.
So, we can use it as it is.
Requirements
- AndroidX
- Minimum SDK API 19
- Theme - Material Components
Implementation
Implementation of Material Navigation View library is so easy. You can check /app directory for demo. Let's have look on basic steps of implementation. In this demo, we will populate The menu contents by a menu resource file.
Prerequisite
Gradle
In Build.gradle of app module, include these dependencies.
dependencies {
// Material Navigation View Library
implementation 'com.shreyaspatil:MaterialNavigationView:1.2'
// Material Design Library
implementation 'com.google.android.material:material:1.0.0'
}
Set up Material Theme
Setting Material Theme to app is necessary before implementing Material Navigation View library. To set it up, update styles.xml of values directory in app. colorSecondary value is important here because this color is applied to menu item of Navigation View.
<resources>
<style name="AppTheme" parent="Theme.MaterialComponents.Light">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<!-- colorSecondary will be applied to Menu item of NavigationView -->
<item name="colorSecondary">@color/colorPrimary</item>
...
</style>
</resources>
These are required prerequisites to implement Material Navigation View library.
Create Activity XML
This is most commonly used in conjunction with DrawerLayout to implement Material navigation drawers. Navigation drawers are modal elevated dialogs that come from the start/left side, used to display in-app navigation links.
NavigationView is a scrollable view that renders a menu resource (R.menu.<something>) as a vertical list. It also renders a header view above the menu.
We are creating activity_main.xml
<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:openDrawer="start">
<!-- Other Stuff here -->
<com.shreyaspatil.material.navigationview.MaterialNavigationView
android:id="@+id/nav_view"
android:theme="@style/Widget.NavigationView.RippleEffect"
android:layout_width="wrap_content"
android:layout_height="match_parent"
app:itemStyle="rounded_right"
app:menu="@menu/activity_main_drawer"/>
</androidx.drawerlayout.widget.DrawerLayout>
Available Flags
As already mentioned, this class is inherited from NavigationView. You can use all exisiting flags of that class.
New important flag here is.
itemStyle- Points to a style of menu item of Navigation drawer.
There are currently 3 menu styles are defined as below
| Flag Value | Description | Preview |
|---|---|---|
| default_style | This flag sets design to default style to menu item of Navigation drawer. |  |
| rounded_right | This flag sets design to menu item of Navigation drawer as Rounded Corners at right |  |
| rounded_rectangle | This flag sets design to menu item of Navigation drawer as Rounded Rectangular Corners |  |
Example as follows:
<com.shreyaspatil.material.navigationview.MaterialNavigationView
...
app:itemStyle="rounded_right"/>
Thus, we have successfully implemented design styles of Menu items.
Create Activity Code (Java/Kotlin)
All the programmatic way of implementation of MaterialNavigationView is same as NavigationView. Just change is the class name only.
Two methods are added in this new class as follows..
setItemStyle(int itemStyle): This method sets the Item Style of Menu in MaterialNavigationView at runtime.itemStyleshould be one of the following constants :MaterialNavigationView.ITEM_STYLE_DEFAULTMaterialNavigationView.ITEM_STYLE_ROUND_RIGHTMaterialNavigationView.ITEM_STYLE_ROUND_RECTANGLE
getItemStyle(): It returns the value of item style of menu.
Here is a demo of MaterialNavigationView in which we will switch item style of NavigationView after selecting menu.
class MainActivity : AppCompatActivity() {
private lateinit var navView: MaterialNavigationView
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
...
navView = findViewById(R.id.nav_view)
...
}
override fun onOptionsItemSelected(item: MenuItem): Boolean {
when (item.itemId) {
R.id.action_default -> {
navView.setItemStyle(MaterialNavigationView.ITEM_STYLE_DEFAULT)
}
R.id.action_round_rect -> {
navView.setItemStyle(MaterialNavigationView.ITEM_STYLE_ROUND_RECTANGLE)
}
R.id.action_round_right -> {
navView.setItemStyle(MaterialNavigationView.ITEM_STYLE_ROUND_RIGHT)
}
}
return false
}
}
Thus, we have implemented MaterialNavigationView.
Migrating from NavigationView
If you are already using NavigationView (com.google.android.material.navigation.NavigationView) in your project and want to switch it to MaterialNavigationView then you are done!
Do following Changes:
- Change in layout file - Just change package of component from
com.google.android.material.navigation.NavigationViewtocom.shreyaspatil.material.navigationview.MaterialNavigationViewwherever you used it. - Change in Activity Code - Just change
NavigationViewclass toMaterialNavigationViewand import appropriate package.
MaterialNavigationView. Now just run your app and see magic.
Fast Implementation
Want to use it fast? Then here it is..
In Android Studio, Right Click -> New -> Activity -> Navigation Drawer Activity and done. Then Change just package in layout file and class name in Activity code file and you're done. Run your app and see magic
Contribute
Let's develop with collaborations. We would love to have contributions by raising issues and opening PRs. Filing an issue before PR is must. If you have design/UI related idea, you can also do contributions in that. See Contributing Guidelines.
Credits
This library is built using following open-source libraries.
If you like this library, Please start this repo and share with someone who need it. You can contribute if you have any suggestions or ideas to improve it.
License
Project is published under the GPL-3.0 license. Feel free to clone and modify repo as you want, but don't forget to add reference to authors :)
![[ImgBot] Optimize images](https://avatars.githubusercontent.com/in/4706?v=4)
0 Nov 17, 2022
6 Oct 31, 2022
41 Dec 25, 2022
185 Dec 24, 2022
233 Jan 4, 2023
10 Oct 14, 2022
1 Feb 6, 2022
3 Jan 6, 2023
4 Dec 6, 2022
1.8k Nov 10, 2022
242 Nov 25, 2022
62 Dec 26, 2022
3 Apr 8, 2022
13 Dec 15, 2022
19 Feb 16, 2022
288 Dec 25, 2022
4 Dec 6, 2021