📱 Android Library to implement Rich, Beautiful, Stylish 😍 Material Navigation View for your project with Material Design Guidelines. Easy to use.
📱 Android Library to implement Rich, Beautiful Material Navigation View for your project with Material Design Guidelines. Easy to use.
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.
MaterialNavigationViewclass in this library is inherited from
com.google.android.material.navigation.NavigationViewclass. Just only difference is added extra design.
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.
In
Build.gradleof app module, include these dependencies. ```groovy dependencies {
// Material Navigation View Library implementation 'com.shreyaspatil:MaterialNavigationView:1.2'// Material Design Library implementation 'com.google.android.material:material:1.0.0'
} ```
Setting Material Theme to app is necessary before implementing Material Navigation View library. To set it up, update
styles.xmlof
valuesdirectory in app.
colorSecondaryvalue is important here because this color is applied to menu item of Navigation View. ```xml ``` These are required prerequisites to implement Material Navigation View library.
This is most commonly used in conjunction with
DrawerLayoutto implement Material navigation drawers. Navigation drawers are modal elevated dialogs that come from the start/left side, used to display in-app navigation links.
(R.menu.)as a vertical list. It also renders a header view above the menu.
activity_main.xml```xml
```<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"></com.shreyaspatil.material.navigationview.materialnavigationview>
As already mentioned, this class is inherited from
NavigationView. You can use all exisiting flags of that class.
itemStyle- Points to a style of menu item of Navigation drawer.
Flag Value | Description | Preview |
---|---|---|
defaultstyle | This flag sets design to default style to menu item of Navigation drawer. | ![]() |
roundedright | 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:
Thus, we have successfully implemented design styles of Menu items.
All the programmatic way of implementation of
MaterialNavigationViewis same as
NavigationView. Just change is the class name only.
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_DEFAULT-
MaterialNavigationView.ITEM_STYLE_ROUND_RIGHT-
MaterialNavigationView.ITEM_STYLE_ROUND_RECTANGLE-
getItemStyle(): It returns the value of item style of menu.
Here is a demo of
MaterialNavigationViewin which we will switch item style of NavigationView after selecting menu.
class MainActivity : AppCompatActivity() { private lateinit var navView: MaterialNavigationViewoverride 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.
NavigationView
If you are already using
NavigationView(
com.google.android.material.navigation.NavigationView) in your project and want to switch it to
MaterialNavigationViewthen you are done!
com.google.android.material.navigation.NavigationViewto
com.shreyaspatil.material.navigationview.MaterialNavigationViewwherever you used it. - Change in Activity Code - Just change
NavigationViewclass to
MaterialNavigationViewand import appropriate package.
:fire: Hurrah! you are done and successfully migrated to
MaterialNavigationView. Now just run your app and see magic.
Want to use it fast? Then here it is..
In Android Studio, Right Click ->
New->
Activity->
Navigation Drawer Activityand 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 :rocket:
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.
This library is built using following open-source libraries. - Material Components for Android
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.
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 :)