Need help with MaterialNavigationView-Android?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

PatilShreyas
184 Stars 23 Forks GNU General Public License v3.0 26 Commits 0 Opened issues

Description

📱 Android Library to implement Rich, Beautiful, Stylish 😍 Material Navigation View for your project with Material Design Guidelines. Easy to use.

Services available

!
?

Need anything else?

Contributors list

# 11,562
dagger2
android...
materia...
payment...
21 commits
# 2,473
assembl...
spotify
gc
Rust
1 commit

Material NavigationView for Android 📱

📱 Android Library to implement Rich, Beautiful Material Navigation View for your project with Material Design Guidelines. Easy to use.

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. ```groovy 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.
```xml

``` 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.)
as a vertical list. It also renders a header view above the menu.
We are creating
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>

```

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
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.

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.
itemStyle
should 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

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 -&gt; {
            navView.setItemStyle(MaterialNavigationView.ITEM_STYLE_DEFAULT)
        }
        R.id.action_round_rect -&gt; {
            navView.setItemStyle(MaterialNavigationView.ITEM_STYLE_ROUND_RECTANGLE)
        }
        R.id.action_round_right -&gt; {
            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.NavigationView
to
com.shreyaspatil.material.navigationview.MaterialNavigationView
wherever you used it. - Change in Activity Code - Just change
NavigationView
class to
MaterialNavigationView
and import appropriate package.

:fire: Hurrah! you are done and successfully migrated to

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 :rocket:

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. - 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.

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 :)

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.