CODEWITHSUNDEEP
androidxmlandroid-layout
FrootyDoot
FrootyDoot

Reputation: 23

How to add image and border to side Navigation Bar in Android

I want to add border and image to side NavigationDrawer , how do I do it. I tried but I cannot find a proper tutorial for it. My XML files are how you get when we chose a navigation drawer activity in Android, nothing changed in it. I have drawn it below roughly about how I want it to be. Any help would be appreciated thank you. Also please ignore the orange background of header. I do not want it, I would just like the Gru image on both head and body

I want the image to be there on the body as well as header of the navigation drawer. One single image covering the body as well as header.

Rough representation

Upvotes: 0

Views: 599

Answers (1)

Shubham Rohila
Shubham Rohila

Reputation: 411

While this looks like tough you can achieve this easily by designing backgrounds for the header and nav differently. Try putting the image in navbar background and making the header background transparent so that the same image is shown. Also you should use stroke for the blue lined border.

Let me show you a basic example for it

For nav-header

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <stroke android:color="@color/blueshade"
        android:width="4dp"
        />
    <corners android:topRightRadius="35dp"
        />
    <solid android:color="@android:color/transparent"/>


</shape>

For navbar

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">


    <item>
        <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
            <stroke android:color="@color/blueshade"
                android:width="4dp"
                />

            <corners android:topRightRadius="35dp"
                android:bottomRightRadius="35dp"/>
            <solid android:color="@android:color/white"/>

        </shape>
    </item>

    <item android:right="20dp" android:left="5dp" android:top="5dp" android:bottom="5dp" >
        <bitmap android:src="@drawable/gru"
            android:gravity="fill"
            android:alpha="105"
            />
    </item>
</layer-list>

Now you can set the nav-top as background for nav_header_main layout and the navbar as background for NavigationView in activity_main layout

Upvotes: 1

Related Questions