Here I will show you 5 navigation bar designs
Before we start there are some common steps in each navigation bar, First let do that.
Step 1 :
- Go to Resources->values
- Create a resource file dimens.xml
Add This Code in this dimens.xml
<resources>
<!-- Default screen margins, per the Android Design guidelines. -->
<dimen name="actionBarSize">56dp</dimen>
<dimen name="activity_horizontal_margin">16dp</dimen>
<dimen name="activity_vertical_margin">16dp</dimen>
<dimen name="nav_header_vertical_spacing">16dp</dimen>
<dimen name="nav_header_height">200dp</dimen>
<dimen name="fab_margin">16dp</dimen>
<dimen name="viewpager_margin_overlap">-60dp</dimen>
<dimen name="viewpager_margin_overlap_payment">-30dp</dimen>
<!--genaral spacing-->
<dimen name="spacing_xsmall">2dp</dimen>
<dimen name="spacing_small">3dp</dimen>
<dimen name="spacing_medium">5dp</dimen>
<dimen name="spacing_xmedium">7dp</dimen>
<dimen name="spacing_middle">10dp</dimen>
<dimen name="spacing_large">15dp</dimen>
<dimen name="spacing_smlarge">18dp</dimen>
<dimen name="spacing_mlarge">20dp</dimen>
<dimen name="spacing_mxlarge">25dp</dimen>
<dimen name="spacing_xlarge">35dp</dimen>
<dimen name="spacing_xmlarge">40dp</dimen>
<dimen name="spacing_xxlarge">50dp</dimen>
<dimen name="spacing_xxxlarge">55dp</dimen>
<dimen name="appbar_padding_top">8dp</dimen>
</resources>
Step 2 :
- Go to values->colors.xml
- Add Below Text
<color name="overlay_dark_10">#1A000000</color> <color name="overlay_dark_20">#33000000</color> <color name="overlay_dark_30">#4D000000</color> <color name="overlay_dark_40">#66000000</color> <color name="overlay_dark_50">#80000000</color> <color name="overlay_dark_60">#99000000</color> <color name="overlay_dark_70">#B3000000</color> <color name="overlay_dark_80">#CC000000</color> <color name="overlay_dark_90">#E6000000</color> <color name="overlay_light_10">#1AFFFFFF</color> <color name="overlay_light_20">#33FFFFFF</color> <color name="overlay_light_30">#4DFFFFFF</color> <color name="overlay_light_40">#66FFFFFF</color> <color name="overlay_light_50">#8FFFFFF0</color> <color name="overlay_light_60">#99FFFFFF</color> <color name="overlay_light_70">#B3FFFFFF</color> <color name="overlay_light_80">#CCFFFFFF</color> <color name="overlay_light_90">#E6FFFFFF</color> <color name="grey_3">#f7f7f7</color> <color name="grey_5">#f2f2f2</color> <color name="grey_10">#e6e6e6</color> <color name="grey_20">#cccccc</color> <color name="grey_40">#999999</color> <color name="grey_60">#666666</color> <color name="grey_80">#37474F</color> <color name="grey_90">#263238</color> <!--Material color list from https://material.io/guidelines/style/color.html--> <color name="red_50">#FFEBEE</color> <color name="red_100">#FFCDD2</color> <color name="red_200">#EF9A9A</color> <color name="red_300">#E57373</color> <color name="red_400">#EF5350</color> <color name="red_500">#F44336</color> <color name="red_600">#E53935</color> <color name="red_700">#D32F2F</color> <color name="red_800">#C62828</color> <color name="red_900">#B71C1C</color> <color name="red_A100">#FF8A80</color> <color name="red_A200">#FF5252</color> <color name="red_A400">#FF1744</color> <color name="red_A700">#D50000</color> <color name="deep_purple_50">#EDE7F6</color> <color name="deep_purple_100">#D1C4E9</color> <color name="deep_purple_200">#B39DDB</color> <color name="deep_purple_300">#9575CD</color> <color name="deep_purple_400">#7E57C2</color> <color name="deep_purple_500">#673AB7</color> <color name="deep_purple_600">#5E35B1</color> <color name="deep_purple_700">#512DA8</color> <color name="deep_purple_800">#4527A0</color> <color name="deep_purple_900">#311B92</color> <color name="deep_purple_A100">#B388FF</color> <color name="deep_purple_A200">#7C4DFF</color> <color name="deep_purple_A400">#651FFF</color> <color name="deep_purple_A700">#6200EA</color> <color name="light_blue_50">#E1F5FE</color> <color name="light_blue_100">#B3E5FC</color> <color name="light_blue_200">#81D4FA</color> <color name="light_blue_300">#4FC3F7</color> <color name="light_blue_400">#29B6F6</color> <color name="light_blue_500">#03A9F4</color> <color name="light_blue_600">#039BE5</color> <color name="light_blue_700">#0288D1</color> <color name="light_blue_800">#0277BD</color> <color name="light_blue_900">#01579B</color> <color name="light_blue_A100">#80D8FF</color> <color name="light_blue_A200">#40C4FF</color> <color name="light_blue_A400">#00B0FF</color> <color name="light_blue_A700">#0091EA</color> <color name="green_50">#E8F5E9</color> <color name="green_100">#C8E6C9</color> <color name="green_200">#A5D6A7</color> <color name="green_300">#81C784</color> <color name="green_400">#66BB6A</color> <color name="green_500">#4CAF50</color> <color name="green_600">#43A047</color> <color name="green_700">#388E3C</color> <color name="green_800">#2E7D32</color> <color name="green_900">#1B5E20</color> <color name="green_A100">#B9F6CA</color> <color name="green_A200">#69F0AE</color> <color name="green_A400">#00E676</color> <color name="green_A700">#00C853</color> <color name="yellow_50">#FFFDE7</color> <color name="yellow_100">#FFF9C4</color> <color name="yellow_200">#FFF59D</color> <color name="yellow_300">#FFF176</color> <color name="yellow_400">#FFEE58</color> <color name="yellow_500">#FFEB3B</color> <color name="yellow_600">#FDD835</color> <color name="yellow_700">#FBC02D</color> <color name="yellow_800">#F9A825</color> <color name="yellow_900">#F57F17</color> <color name="yellow_A100">#FFFF8D</color> <color name="yellow_A200">#FFFF00</color> <color name="yellow_A400">#FFEA00</color> <color name="yellow_A700">#FFD600</color> <color name="deep_orange_50">#FBE9E7</color> <color name="deep_orange_100">#FFCCBC</color> <color name="deep_orange_200">#FFAB91</color> <color name="deep_orange_300">#FF8A65</color> <color name="deep_orange_400">#FF7043</color> <color name="deep_orange_500">#FF5722</color> <color name="deep_orange_600">#F4511E</color> <color name="deep_orange_700">#E64A19</color> <color name="deep_orange_800">#D84315</color> <color name="deep_orange_900">#BF360C</color> <color name="deep_orange_A100">#FF9E80</color> <color name="deep_orange_A200">#FF6E40</color> <color name="deep_orange_A400">#FF3D00</color> <color name="deep_orange_A700">#DD2C00</color> <color name="blue_grey_50">#ECEFF1</color> <color name="blue_grey_100">#CFD8DC</color> <color name="blue_grey_200">#B0BEC5</color> <color name="blue_grey_300">#90A4AE</color> <color name="blue_grey_400">#78909C</color> <color name="blue_grey_500">#607D8B</color> <color name="blue_grey_600">#546E7A</color> <color name="blue_grey_700">#455A64</color> <color name="blue_grey_800">#37474F</color> <color name="blue_grey_900">#263238</color> <color name="pink_50">#FCE4EC</color> <color name="pink_100">#F8BBD0</color> <color name="pink_200">#F48FB1</color> <color name="pink_300">#F06292</color> <color name="pink_400">#EC407A</color> <color name="pink_500">#E91E63</color> <color name="pink_600">#D81B60</color> <color name="pink_700">#C2185B</color> <color name="pink_800">#AD1457</color> <color name="pink_900">#880E4F</color> <color name="pink_A100">#FF80AB</color> <color name="pink_A200">#FF4081</color> <color name="pink_A400">#F50057</color> <color name="pink_A700">#C51162</color> <color name="indigo_50">#E8EAF6</color> <color name="indigo_100">#C5CAE9</color> <color name="indigo_200">#9FA8DA</color> <color name="indigo_300">#7986CB</color> <color name="indigo_400">#5C6BC0</color> <color name="indigo_500">#3F51B5</color> <color name="indigo_600">#3949AB</color> <color name="indigo_700">#303F9F</color> <color name="indigo_800">#283593</color> <color name="indigo_900">#1A237E</color> <color name="indigo_A100">#8C9EFF</color> <color name="indigo_A200">#536DFE</color> <color name="indigo_A400">#3D5AFE</color> <color name="indigo_A700">#304FFE</color> <color name="cyan_50">#E0F7FA</color> <color name="cyan_100">#B2EBF2</color> <color name="cyan_200">#80DEEA</color> <color name="cyan_300">#4DD0E1</color> <color name="cyan_400">#26C6DA</color> <color name="cyan_500">#00BCD4</color> <color name="cyan_600">#00ACC1</color> <color name="cyan_700">#0097A7</color> <color name="cyan_800">#00838F</color> <color name="cyan_900">#006064</color> <color name="cyan_A100">#84FFFF</color> <color name="cyan_A200">#18FFFF</color> <color name="cyan_A400">#00E5FF</color> <color name="cyan_A700">#00B8D4</color> <color name="cyan_800_overlay">#E600838F</color> <color name="light_green_50">#F1F8E9</color> <color name="light_green_100">#DCEDC8</color> <color name="light_green_200">#C5E1A5</color> <color name="light_green_300">#AED581</color> <color name="light_green_400">#9CCC65</color> <color name="light_green_500">#8BC34A</color> <color name="light_green_600">#7CB342</color> <color name="light_green_700">#689F38</color> <color name="light_green_800">#558B2F</color> <color name="light_green_900">#33691E</color> <color name="light_green_A100">#CCFF90</color> <color name="light_green_A200">#B2FF59</color> <color name="light_green_A400">#76FF03</color> <color name="light_green_A700">#64DD17</color> <color name="amber_50">#FFF8E1</color> <color name="amber_100">#FFECB3</color> <color name="amber_200">#FFE082</color> <color name="amber_300">#FFD54F</color> <color name="amber_400">#FFCA28</color> <color name="amber_500">#FFC107</color> <color name="amber_600">#FFB300</color> <color name="amber_700">#FFA000</color> <color name="amber_800">#FF8F00</color> <color name="amber_900">#FF6F00</color> <color name="amber_A100">#FFE57F</color> <color name="amber_A200">#FFD740</color> <color name="amber_A400">#FFC400</color> <color name="amber_A700">#FFAB00</color> <color name="brown_50">#EFEBE9</color> <color name="brown_100">#D7CCC8</color> <color name="brown_200">#BCAAA4</color> <color name="brown_300">#A1887F</color> <color name="brown_400">#8D6E63</color> <color name="brown_500">#795548</color> <color name="brown_600">#6D4C41</color> <color name="brown_700">#5D4037</color> <color name="brown_800">#4E342E</color> <color name="brown_900">#3E2723</color> <color name="purple_50">#F3E5F5</color> <color name="purple_100">#E1BEE7</color> <color name="purple_200">#CE93D8</color> <color name="purple_300">#BA68C8</color> <color name="purple_400">#AB47BC</color> <color name="purple_500">#9C27B0</color> <color name="purple_600">#8E24AA</color> <color name="purple_700">#7B1FA2</color> <color name="purple_800">#6A1B9A</color> <color name="purple_900">#4A148C</color> <color name="purple_A100">#EA80FC</color> <color name="purple_A200">#E040FB</color> <color name="purple_A400">#D500F9</color> <color name="purple_A700">#AA00FF</color> <color name="blue_50">#E3F2FD</color> <color name="blue_100">#BBDEFB</color> <color name="blue_200">#90CAF9</color> <color name="blue_300">#64B5F6</color> <color name="blue_400">#42A5F5</color> <color name="blue_500">#2196F3</color> <color name="blue_600">#1E88E5</color> <color name="blue_700">#1976D2</color> <color name="blue_800">#1565C0</color> <color name="blue_900">#0D47A1</color> <color name="blue_A100">#82B1FF</color> <color name="blue_A200">#448AFF</color> <color name="blue_A400">#2979FF</color> <color name="blue_A700">#2962FF</color> <color name="teal_50">#E0F2F1</color> <color name="teal_100">#B2DFDB</color> <color name="teal_200">#80CBC4</color> <color name="teal_300">#4DB6AC</color> <color name="teal_400">#26A69A</color> <color name="teal_500">#009688</color> <color name="teal_600">#00897B</color> <color name="teal_700">#00796B</color> <color name="teal_800">#00695C</color> <color name="teal_900">#004D40</color> <color name="teal_A100">#A7FFEB</color> <color name="teal_A200">#64FFDA</color> <color name="teal_A400">#1DE9B6</color> <color name="teal_A700">#00BFA5</color> <color name="lime_50">#F9FBE7</color> <color name="lime_100">#F0F4C3</color> <color name="lime_200">#E6EE9C</color> <color name="lime_300">#DCE775</color> <color name="lime_400">#D4E157</color> <color name="lime_500">#CDDC39</color> <color name="lime_600">#C0CA33</color> <color name="lime_700">#AFB42B</color> <color name="lime_800">#9E9D24</color> <color name="lime_900">#827717</color> <color name="lime_A100">#F4FF81</color> <color name="lime_A200">#EEFF41</color> <color name="lime_A400">#C6FF00</color> <color name="lime_A700">#AEEA00</color> <color name="orange_50">#FFF3E0</color> <color name="orange_100">#FFE0B2</color> <color name="orange_200">#FFCC80</color> <color name="orange_300">#FFB74D</color> <color name="orange_400">#FFA726</color> <color name="orange_500">#FF9800</color> <color name="orange_600">#FB8C00</color> <color name="orange_700">#F57C00</color> <color name="orange_800">#EF6C00</color> <color name="orange_900">#E65100</color> <color name="orange_A100">#FFD180</color> <color name="orange_A200">#FFAB40</color> <color name="orange_A400">#FF9100</color> <color name="orange_A700">#FF6D00</color> <color name="grey_50">#FAFAFA</color> <color name="grey_100">#F5F5F5</color> <color name="grey_200">#EEEEEE</color> <color name="grey_300">#E0E0E0</color> <color name="grey_400">#BDBDBD</color> <color name="grey_500">#9E9E9E</color> <color name="grey_600">#757575</color> <color name="grey_700">#616161</color> <color name="grey_800">#424242</color> <color name="grey_900">#212121</color> <color name="grey_1000">#1a1a1a</color> <!--for random color generator --> <array name="mdcolor_random"> <item type="color">#e91e63</item> <item type="color">#9c27b0</item> <item type="color">#673ab7</item> <item type="color">#E53935</item> <item type="color">#5677fc</item> <item type="color">#689F38</item> <item type="color">#03a9f4</item> <item type="color">#00bcd4</item> <item type="color">#009688</item> <item type="color">#259b24</item> <item type="color">#ff5722</item> <item type="color">#795548</item> <item type="color">#607d8b</item> <item type="color">#ff9800</item> </array>
Step 3 :
Go to res->drawable
https://drive.google.com/open?id=1v-dGodM3fvLLkrXQ2Jd6mG4HmSeRK_kf
Download files from above link and add all files inside the folder drawable
Common Steps are completed , Above Two steps are same of each navigation bar design.
1. Navigation Bar Design (First)

This Navigation Bat Design is almost the same design as the Gmail Application navigation bar design.
Parts:
1 . Header Part
2. Menu Part
1. Header Part
Go to res->layout
Create A Layout Resource XML File ->include_drawer_header_mail.xml Add Below Code in this file
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="170dp" android:orientation="vertical" android:theme="@style/ThemeOverlay.AppCompat.Dark"> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" android:src="@drawable/material_bg_2" /> <com.mikhaellopez.circularimageview.CircularImageView android:id="@+id/avatar" android:layout_width="64dp" android:layout_height="64dp" app:civ_shadow="true" app:civ_shadow_radius="0" android:layout_margin="@dimen/spacing_large" android:src="@drawable/photo_male_6" app:civ_border_width="2dp" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_margin="@dimen/spacing_large" android:orientation="vertical"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="@dimen/spacing_medium" android:text="John Miller" android:textAppearance="@style/TextAppearance.AppCompat.Body2" /> <TextView android:id="@+id/email" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="johnmiller@mail.com" android:textAppearance="@style/TextAppearance.AppCompat.Body1" /> </LinearLayout> </RelativeLayout> 2. Menu Part
Go to res->menu
Create Menu File menu_navigation_drawer_mail.xml
Add Below Code in this file
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<group
android:id="@+id/grp_1"
android:checkableBehavior="single">
<item
android:id="@+id/nav_all_inbox"
android:checked="true"
android:icon="@drawable/ic_move_to_inbox"
android:title="All inboxes"
app:actionLayout="@layout/badge_navigation_plain" />
</group>
<group
android:id="@+id/grp_2"
android:checkableBehavior="single">
<item
android:id="@+id/nav_inbox"
android:icon="@drawable/ic_inbox"
android:title="Inbox"
app:actionLayout="@layout/badge_navigation_plain" />
<item
android:id="@+id/nav_priority_inbox"
android:icon="@drawable/ic_label"
android:title="Priority inbox"
app:actionLayout="@layout/badge_navigation_colored" />
<item
android:id="@+id/nav_social"
android:icon="@drawable/ic_peoples"
android:title="Social"
app:actionLayout="@layout/badge_navigation_colored" />
</group>
<item
android:checkableBehavior="single"
android:title="All labels">
<group
android:id="@+id/grp_3"
android:checkableBehavior="single">
<item
android:id="@+id/nav_starred"
android:icon="@drawable/ic_star"
android:title="Starred" />
<item
android:id="@+id/nav_sent"
android:icon="@drawable/ic_send"
android:title="Sent" />
<item
android:id="@+id/nav_spam"
android:icon="@drawable/ic_report"
android:title="Spam"
app:actionLayout="@layout/badge_navigation_plain" />
<item
android:id="@+id/nav_trash"
android:icon="@drawable/ic_delete"
android:title="Trash" />
</group>
</item>
<group
android:id="@+id/grp_5"
android:checkableBehavior="single">
<item
android:id="@+id/nav_settings"
android:icon="@drawable/ic_settings"
android:title="Settings" />
<item
android:id="@+id/nav_help"
android:icon="@drawable/ic_help"
android:title="Help & Feedback" />
</group>
</menu>
3. Final Part
Open activity_main.xml or any other activity layout file where you want to include navigation bar.
<!--navigation drawer menu--> <android.support.design.widget.NavigationView android:id="@+id/nav_view" android:layout_width="230dp" android:layout_height="match_parent" android:layout_gravity="start" android:fitsSystemWindows="false" app:headerLayout="@layout/include_drawer_header_mail" app:itemIconTint="@color/grey_60" app:itemTextColor="@color/grey_90" app:menu="@menu/menu_navigation_drawer_mail" />
Add Above code in it, It will.
Done Now You have this navigation bar design
2. Navigation Bar Design (Second)

This Navigation Bat Design is almost the same design as the Gmail Application navigation bar design.
Parts:
1 . Header Part
2. Menu Part
1. Header Part
Go to res->layout
Create A Layout Resource XML File ->include_drawer_header_news.xml Add Below Code in this file
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="172dp"
android:orientation="vertical"
android:theme="@style/ThemeOverlay.AppCompat.Dark">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.mikhaellopez.circularimageview.CircularImageView
android:layout_gravity="center_horizontal"
android:id="@+id/avatar"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_margin="@dimen/spacing_large"
android:src="@drawable/photo_male_6"
app:civ_shadow="true"
app:civ_shadow_radius="0"
app:civ_border_width="2dp" />
<LinearLayout
android:gravity="center_horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="@dimen/spacing_medium"
android:text="John Miller"
android:textAppearance="@style/TextAppearance.AppCompat.Body2" />
<TextView
android:id="@+id/email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="johnmiller@mail.com"
android:textAppearance="@style/TextAppearance.AppCompat.Body1" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
Go to res->menu
Create Menu File menu_navigation_drawer_news.xml
Add Below Code in this file
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group
android:id="@+id/grp_1"
android:checkableBehavior="single">
<item
android:id="@+id/nav_home"
android:icon="@drawable/ic_home"
android:title="Home" />
<item
android:id="@+id/nav_trending"
android:icon="@drawable/ic_whatshot"
android:title="Trending" />
<item
android:id="@+id/nav_latest"
android:icon="@drawable/ic_schedule"
android:title="Latest" />
<item
android:id="@+id/nav_highlight"
android:icon="@drawable/ic_highlight"
android:title="Highlight" />
</group>
<group
android:id="@+id/grp_2"
android:checkableBehavior="none">
<item
android:id="@+id/nav_settings"
android:icon="@drawable/ic_settings"
android:title="Settings" />
<item
android:id="@+id/nav_help"
android:icon="@drawable/ic_help"
android:title="Help" />
</group>
</menu>
3. Final Part
Open activity_main.xml or any other activity layout file where you want to include navigation bar.
<!--navigation drawer menu-->
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="false"
app:headerLayout="@layout/include_drawer_header_news"
app:itemIconTint="@color/grey_40"
app:itemTextColor="@color/grey_90"
app:menu="@menu/menu_navigation_drawer_news" />
Add Above code in it, It will.
Done Now You have this navigation bar design
More Design will be include soon in this post