navigation bar design android

How to design beautiful navigation bar in android studio

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 :

  1. Go to Resources->values
  2. 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 :

  1. Go to values->colors.xml
  2. 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 &amp; 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

Leave a Reply

Your email address will not be published.