Nabeel Nazir
Nabeel Nazir

Reputation: 430

Background of a Navigation Drawer item

I want to set different background for every item in navigation drawer. I want to achieve enter image description here

Can Any one of you will explain how to that ?

My Activity_main.xml

<android.support.design.widget.NavigationView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:menu="@menu/nav_menu"
        android:fitsSystemWindows="true"
        android:background="@android:color/black"
        app:itemTextColor="@android:color/white"
        android:layout_gravity="start"
        app:headerLayout="@layout/navigation_header"
        app:itemIconTint="@android:color/white"
        app:itemBackground="@drawable/header_background"
        />

Upvotes: 2

Views: 429

Answers (1)

Sana
Sana

Reputation: 456

Create a custom navigationView layout and include the layout like below,

  <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_height="match_parent"
        android:layout_width="wrap_content"
        android:layout_gravity="end"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main">

        <include layout="@layout/custom_layout"></include>

    </android.support.design.widget.NavigationView>

custom_layout.xml file

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</android.support.v7.widget.RecyclerView>
</LinearLayout>

Now just shape a drawable like this,(change the colors as per your need)

btn_green_border.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="@color/colorSkyBlue"
tools:targetApi="lollipop">
<item>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">

        <solid android:color="@color/colorAccent" />
        <stroke
            android:width="@dimen/_1dp"
            android:color="@color/colorLightBlue"></stroke>
        <corners android:radius="@dimen/_30dp"></corners>
        <size
            android:width="@dimen/_50dp"
            android:height="@dimen/_100dp"></size>

    </shape>
</item>
</ripple>

and use this drawable in the layout for your RecyclerView items like the following

item_row.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/ll_card"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<Button
    android:id="@+id/btn_refer"
    android:layout_width="200dp"
    android:layout_height="@dimen/_40dp"
    android:background="@drawable/btn_green_border"
    android:text="Navigation Item Name"
    android:textAllCaps="false"
    android:textColor="@color/colorPrimary" />

</LinearLayout>

And you will achieve what you want.

Thank you

Upvotes: 1

Related Questions