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

Overview

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.

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

🔥 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 🚀

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

Comments
  • Suggestions and implementation of New item styles

    Suggestions and implementation of New item styles

    If you have good ideas or suggestions or good material design structure available for item style of MaterialNavigationView then you're at right place. You can contribute us if you have cool ideas. You are always welcome. You can open PR or simply show your design here in comments. Thank you.

    enhancement Hacktoberfest 
    opened by PatilShreyas 6
  • tried to fix the problem of bounded ripple effect

    tried to fix the problem of bounded ripple effect

    • Addition of resources for the purpose of ripple effects
    • Addition of themes to eliminate the original ripple effects android:theme="@style/Widget.NavigationView.RippleEffect"
    <com.shreyaspatil.material.navigationview.MaterialNavigationView
            android:id="@+id/nav_view"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:theme="@style/Widget.NavigationView.RippleEffect" 
            app:headerLayout="@layout/nav_header_main"
            app:insetForeground="@android:color/transparent"
            app:itemIconTint="@color/navigation_item_tint"
            app:itemStyle="default_style"
            app:itemTextColor="@color/navigation_item_tint"
            app:menu="@menu/activity_main_drawer" />
    
    • Addition of styles to change the colour of the ripple effects <item name="colorControlHighlight">@android:color/black</item>
    <!-- Base application theme. -->
        <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
            <!-- Customize your theme here. -->
            <item name="colorPrimary">@color/colorPrimary</item>
            <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
            <item name="colorAccent">@color/colorAccent</item>
            <item name="colorSecondary">@color/colorPrimary</item>
            <item name="colorControlHighlight">@android:color/black</item>
            <item name="android:fontFamily">@font/montserrat</item>
        </style>
    
    enhancement 
    opened by zainfikrih 5
  • [ENHANCEMENT] Out of bound ripple on item click.

    [ENHANCEMENT] Out of bound ripple on item click.

    After the rounded item is pressed, the water ripple effect is out of bounds. Gmail is also a rounded corner style, but it won't cross the border after pressing the item. image image

    Originally posted by @tcqq in https://github.com/PatilShreyas/MaterialNavigationView-Android/issues/5#issuecomment-546125699

    enhancement help wanted 
    opened by PatilShreyas 4
  • OnClick open activity

    OnClick open activity

    i've already clone this repo and open it on android studio, works well but if i want to use activity instead of fragment when onclick navigation item, how to do that ?

    Thank's

    opened by rowjak 2
  • Do something when Navigation View Item is touched

    Do something when Navigation View Item is touched

    I'm using this library on my project. I have some options on my sidebar menu and I don't want to display the screen inside fragment, I want to start a new activity. How can I start a new activity when some item is touched?

    opened by yleyvag 2
  • Error inflating class

    Error inflating class

    Did everything as u said to implement the MaterialNavigationView instead the default NavigationView (Changed it both in the xml file and in the java file) And i get this error when i run the app... any idea why? Error inflating class com.shreyaspatil.material.navigation.MaterialNavigationView

    opened by roeiedri 0
  • [ImgBot] Optimize images

    [ImgBot] Optimize images

    Beep boop. Your images are optimized!

    Your image file size has been reduced by 48% 🎉

    Details

    | File | Before | After | Percent reduction | |:--|:--|:--|:--| | /Images/GitHub.png | 191.67kb | 99.95kb | 47.86% |


    📝docs | :octocat: repo | 🙋issues | 🏅swag | 🏪marketplace

    opened by imgbot[bot] 0
  • [ImgBot] Optimize images

    [ImgBot] Optimize images

    Beep boop. Your images are optimized!

    Your image file size has been reduced by 48% 🎉

    Details

    | File | Before | After | Percent reduction | |:--|:--|:--|:--| | /Images/GitHub.png | 191.67kb | 99.95kb | 47.86% |


    📝docs | :octocat: repo | 🙋issues | 🏅swag | 🏪marketplace

    opened by imgbot[bot] 0
  • [ImgBot] Optimize images

    [ImgBot] Optimize images

    Beep boop. Your images are optimized!

    Your image file size has been reduced by 18% 🎉

    Details

    | File | Before | After | Percent reduction | |:--|:--|:--|:--| | /Images/RoundRightFull.png | 19.33kb | 15.03kb | 22.23% | | /Images/RoundRectFull.png | 18.68kb | 14.64kb | 21.63% | | /Images/RoundRight.png | 64.94kb | 53.46kb | 17.67% | | /Images/RoundRect.png | 64.43kb | 53.18kb | 17.46% | | /app/src/main/res/mipmap-xxxhdpi/ic_launcher.png | 8.91kb | 8.89kb | 0.28% | | | | | | | Total : | 176.29kb | 145.20kb | 17.63% |


    📝docs | :octocat: repo | 🙋issues | 🏅swag | 🏪marketplace

    opened by imgbot[bot] 0
  • FAILURE: Build completed with 7 failures.

    FAILURE: Build completed with 7 failures.

    Write information about Bug/Feature Request here FAILURE: Build completed with 7 failures.

    1: Task failed with an exception.

    • What went wrong: Execution failed for task ':app:mergeDebugResources'.

    Could not resolve all files for configuration ':app:debugRuntimeClasspath'. Could not find com.shreyaspatil:MaterialNavigationView:1.2. Searched in the following locations: - https://dl.google.com/dl/android/maven2/com/shreyaspatil/MaterialNavigationView/1.2/MaterialNavigationView-1.2.pom - https://jitpack.io/com/shreyaspatil/MaterialNavigationView/1.2/MaterialNavigationView-1.2.pom - https://repo.maven.apache.org/maven2/com/shreyaspatil/MaterialNavigationView/1.2/MaterialNavigationView-1.2.pom Required by: project :app

    • Try: Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights. ==============================================================================

    2: Task failed with an exception.

    • What went wrong: Execution failed for task ':app:processDebugMainManifest'.

    Could not resolve all files for configuration ':app:debugRuntimeClasspath'. Could not find com.shreyaspatil:MaterialNavigationView:1.2. Searched in the following locations: - https://dl.google.com/dl/android/maven2/com/shreyaspatil/MaterialNavigationView/1.2/MaterialNavigationView-1.2.pom - https://jitpack.io/com/shreyaspatil/MaterialNavigationView/1.2/MaterialNavigationView-1.2.pom - https://repo.maven.apache.org/maven2/com/shreyaspatil/MaterialNavigationView/1.2/MaterialNavigationView-1.2.pom Required by: project :app

    • Try: Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights. ==============================================================================

    3: Task failed with an exception.

    • What went wrong: Execution failed for task ':app:checkDebugAarMetadata'.

    Could not resolve all files for configuration ':app:debugRuntimeClasspath'. Could not find com.shreyaspatil:MaterialNavigationView:1.2. Searched in the following locations: - https://dl.google.com/dl/android/maven2/com/shreyaspatil/MaterialNavigationView/1.2/MaterialNavigationView-1.2.pom - https://jitpack.io/com/shreyaspatil/MaterialNavigationView/1.2/MaterialNavigationView-1.2.pom - https://repo.maven.apache.org/maven2/com/shreyaspatil/MaterialNavigationView/1.2/MaterialNavigationView-1.2.pom Required by: project :app

    • Try: Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights. ==============================================================================

    4: Task failed with an exception.

    • What went wrong: Execution failed for task ':app:mergeDebugAssets'.

    Could not resolve all files for configuration ':app:debugRuntimeClasspath'. Could not find com.shreyaspatil:MaterialNavigationView:1.2. Searched in the following locations: - https://dl.google.com/dl/android/maven2/com/shreyaspatil/MaterialNavigationView/1.2/MaterialNavigationView-1.2.pom - https://jitpack.io/com/shreyaspatil/MaterialNavigationView/1.2/MaterialNavigationView-1.2.pom - https://repo.maven.apache.org/maven2/com/shreyaspatil/MaterialNavigationView/1.2/MaterialNavigationView-1.2.pom Required by: project :app

    • Try: Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights. ==============================================================================

    5: Task failed with an exception.

    • What went wrong: Execution failed for task ':app:checkDebugDuplicateClasses'.

    Could not resolve all files for configuration ':app:debugRuntimeClasspath'. Could not find com.shreyaspatil:MaterialNavigationView:1.2. Searched in the following locations: - https://dl.google.com/dl/android/maven2/com/shreyaspatil/MaterialNavigationView/1.2/MaterialNavigationView-1.2.pom - https://jitpack.io/com/shreyaspatil/MaterialNavigationView/1.2/MaterialNavigationView-1.2.pom - https://repo.maven.apache.org/maven2/com/shreyaspatil/MaterialNavigationView/1.2/MaterialNavigationView-1.2.pom Required by: project :app

    • Try: Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights. ==============================================================================

    6: Task failed with an exception.

    • What went wrong: Execution failed for task ':app:desugarDebugFileDependencies'.

    Could not resolve all files for configuration ':app:debugRuntimeClasspath'. Could not find com.shreyaspatil:MaterialNavigationView:1.2. Searched in the following locations: - https://dl.google.com/dl/android/maven2/com/shreyaspatil/MaterialNavigationView/1.2/MaterialNavigationView-1.2.pom - https://jitpack.io/com/shreyaspatil/MaterialNavigationView/1.2/MaterialNavigationView-1.2.pom - https://repo.maven.apache.org/maven2/com/shreyaspatil/MaterialNavigationView/1.2/MaterialNavigationView-1.2.pom Required by: project :app

    • Try: Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights. ==============================================================================

    7: Task failed with an exception.

    • What went wrong: Execution failed for task ':app:mergeDebugNativeLibs'.

    Could not resolve all files for configuration ':app:debugRuntimeClasspath'. Could not find com.shreyaspatil:MaterialNavigationView:1.2. Searched in the following locations: - https://dl.google.com/dl/android/maven2/com/shreyaspatil/MaterialNavigationView/1.2/MaterialNavigationView-1.2.pom - https://jitpack.io/com/shreyaspatil/MaterialNavigationView/1.2/MaterialNavigationView-1.2.pom - https://repo.maven.apache.org/maven2/com/shreyaspatil/MaterialNavigationView/1.2/MaterialNavigationView-1.2.pom Required by: project :app

    • Try: Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights. ==============================================================================

    • Get more help at https://help.gradle.org

    BUILD FAILED in 7s

    opened by vimalcvs 1
Releases(v1.2)
  • v1.2(Feb 1, 2020)

    Release v1.2: This Release fixes following issue:

    • Out of bound ripple on item click - https://github.com/PatilShreyas/MaterialNavigationView-Android/issues/8

    Thanks to our superstar contributor @zainfikrih who implemented and provided us solution for above issue.

    Source code(tar.gz)
    Source code(zip)
  • v1.1(Sep 11, 2019)

Owner
Shreyas Patil
👨‍🎓 IT Undergrad 📱 Mobile App Developer ❤️Android 🌎Web Developer ⚙️Open Source Enthusiast 👨‍💻Organizer @KotlinMumbai
Shreyas Patil
Simple bottom navigation with side navigation drawer using Jetpack navigation UI made in Kotlin

BottomNavWithSideNavApp simple bottom navigation with side navigation drawer usi

Arvind Meshram 6 Oct 31, 2022
Experimental Discord Mobile Rich Presence (Android)

MRPC Experimental Discord Mobile Rich Presence (Android) How does it work? It's pretty simple. Connect to the Discord Gateway as a normal Discord Clie

Duy Tran Khanh 41 Dec 25, 2022
neutriNote: All-in-one preservation of written thoughts, be those text, math (LaTeX), rich markdown, drawings

Official | FAQ | Documentation | Mastodon | XDA neutriNote (Community Edition) What is neutriNote? In a nutshell, all-in-one preservation of written t

AppML 185 Dec 24, 2022
DroidFish is a feature-rich graphical chess user interface, combined with the very strong Stockfish chess engine.

Introduction DroidFish is a feature-rich graphical chess user interface, combined with the very strong Stockfish chess engine. DroidFish is primarily

Peter Österlund 233 Jan 4, 2023
🎧 Hacky last.fm Discord rich presence

LastFmRichPresence ?? Hacky last.fm Discord rich presence How to use?

MrPowerGamerBR 10 Oct 14, 2022
Happy-Birthday - Design and implement a single screen app that displays information

Happy Birthday Android App | Android Basics in Kotlin Course Solution code for t

Anas Tariq 1 Feb 6, 2022
This repo contains sample mobile apps that implement contributor design pattern

This repo contains sample mobile apps that implement contributor design pattern. This design pattern was evolved to establish clean contracts for the developers and partners in Teams Mobile code base

Microsoft 3 Jan 6, 2023
An small android app based on banking logic, usilng SQLITE as database, material design, navigation drawer implemented

Android Banking App Project - Using Sqlite The Banking app using java in android studio and sqlite for crud. Packages Used Material Design Contributin

Md-Mahin-Rahman 4 Dec 6, 2022
A simple app to showcase Androids Material Design and some of the cool new cool stuff in Android Lollipop. RecyclerView, CardView, ActionBarDrawerToggle, DrawerLayout, Animations, Android Compat Design, Toolbar

#Android-LollipopShowcase This is a simple showcase to show off Android's all new Material Design and some other cool new stuff which is (new) in Andr

Mike Penz 1.8k Nov 10, 2022
FoldingNavigationDrawer-Android This is a sample project present how to use Folding-Android to add Folding Efect to Navigation Drawer.

FoldingNavigationDrawer-Android Sample (Play Store Demo) This is a sample project present how to use Folding-Android to add Folding Efect to Navigatio

null 242 Nov 25, 2022
A beautiful app showing the use of a single recyclerview to display multiple views with motion layout and clean architecture

This app shows how to use a single recyclerview to build a beautiful multiple view layout (See image below) using clean architectural pattern

Ibrajix 62 Dec 26, 2022
The easy way to use biometric authentication in your Flutter app. Supports Fingerprint, FaceID and Iris.

BiometricX The easy way to use biometric authentication in your Flutter app. Supports Fingerprint, FaceID and Iris. Demo APK. Starting $ flutter pub a

Salman S 13 Dec 15, 2022
:octocat: A demo project based on MVVM architecture and material design & animations.

GithubFollows A simple demo project based on MVVM clean architecture and material design & animations. Architecture Specs & Open-source libraries Mini

Jaewoong Eum 288 Dec 25, 2022
🎬 A demo project for The Movie DB based on Kotlin MVVM architecture and material design & animations.

TheMovies A simple project for The Movie DB based on Kotlin MVVM clean architecture and material design & animations. How to build on your environment

Jaewoong Eum 420 Nov 29, 2022
🎬 A demo project using The Movie DB based on Kotlin MVVM architecture and material design & animations.

TheMovies2 A simple project using The Movie DB based on Kotlin MVVM architecture and material designs & animations. How to build on your environment A

Jaewoong Eum 450 Jan 2, 2023
NewsApp - Modern Minimalistic Design, MVVM, Pagination, Retrofit, Coroutines, Room, Glide, Navigation Component (Clean Architecture)

NewsApp is a modern news android application which features virtually ALL recent and recommended android development tech stack and tools used

Osama Sayed 4 Dec 6, 2021