Android Navigation Drawer vertical border

Question

I want to make my NavigationDrawer just like in this app

enter image description here

and more specifically, I want to add that little 1 pixel border on the right side

enter image description here

but here is what I am getting with my drawer enter image description here

and this is the xml of the drawer fragment

<ListView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#E7E7E7"
android:choiceMode="singleChoice"
android:dividerHeight="0.5dp" />

What do I have to do?

Apurva · Accepted Answer · 2015-03-04T21:49:39.537

Try this,

DrawerLayout mDrawerLayout;

onCreate(Bundle ...){
    //...
    mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow,
                    GravityCompat.START);
    //...
}

EDIT

You need to add one View along with ListView and wrap both with one LinearLayout horizontally and give both some weight. Here I have given 0.99 weight to listView and 0.01 weight to view, you can change it as per your requirement.

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <ListView android:id="@+id/drawer_list"
            android:layout_weight="0.99"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#E7E7E7"
            android:choiceMode="singleChoice"
            android:dividerHeight="0.5dp" />

        <View
            android:layout_weight="0.01"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:background="#eeccbb"/>
    </LinearLayout>

</android.support.v4.widget.DrawerLayout>

@SartherisStormhammer Maybe you should try adding `view` to xml — Apurva, Mar 04 '15 at 21:28
where, the layout of the drawer is just a single ListView, as I have shown in my question — Sartheris Stormhammer, Mar 04 '15 at 21:31
thats all cool and stuff, but now I am getting some big errors >"03-04 17:03:59.269: E/AndroidRuntime(2113): Caused by: java.lang.ClassCastException: android.support.v4.widget.DrawerLayout cannot be cast to android.widget.ListView " — Sartheris Stormhammer, Mar 04 '15 at 22:05
@SartherisStormhammer I'll recommend you [check the answer](http://stackoverflow.com/questions/21621673/adding-a-linear-layout-to-navigation-drawer-ends-up-crashing-with-a-classcastex) of Atul on this question, it has same issue as you are having. — Apurva, Mar 04 '15 at 22:14

Umesh Chhabra · Answer 2 · 2015-03-10T19:23:08.360

2

enter image description here I

You can do this in 10 sec. Use layer list in xml and set it as background of listview And give padding right of 1dp to Listview

Replace color #ff0000(red) with your vertical border color And #00c0c0 with your listview color . Dont forget to give right padding of 1dp in listview

Layerlist xml

<?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">

    <solid android:color="#ff0000"/>


</shape>

</item>

<item 
    android:right="1dp" >

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

   <solid android:color="#00c0c0"/>




</shape>

</item>

</layer-list>

edited Mar 10 '15 at 19:23

answered Mar 10 '15 at 16:35

Umesh Chhabra

268
1
8

You have basically _doubled_ the overdraw value. – Vikram Mar 10 '15 at 22:34
But he already specified that xml of fragment is a listview. According to other answers there will be overhead of adding layouts or views – Umesh Chhabra Mar 10 '15 at 22:45
Not if a nine-patch is used. – Vikram Mar 10 '15 at 22:54
You must have different size 9patch for different screen size – Umesh Chhabra Mar 11 '15 at 00:41
`"You must have different size 9patch for different screen size"` No. The whole point of a nine-patch is that they _adapt_ to screen/view size. What you do need is multiple nine-patch drawables to handle different screen-densities. – Vikram Mar 11 '15 at 00:55
Yeah, you just write the same thing in correct way – Umesh Chhabra Mar 11 '15 at 03:33

score 1 · Answer 3 · answered Mar 07 '15 at 03:07

I want someone who knows what he is doing, not just copying random answers from internet

Well, you're not going to do any better than a nine-path:

enter image description here

The 9-patch above has a 0.5dp (base xhdpi) yellow border for illustration purposes. The top and left guards(black lines) define the stretchable area.

Notice that the guard line on the right runs full, end to end. This means there won't be any padding on the top and bottom. But, the guard line on the bottom starts on the leftmost px, and finishes just before the yellow border. When you set this 9patch to the listview, the bottom guard line will ensure a 0.5dp(width of the yellow border) padding to the right.

This approach does require some work though. You will need to create as many 9patch drawables as there are buckets. If you need a 0.5dp border, the width of yellow border will differ for each bucket:

xxxhdpi:   2 px
xxhdpi:  1.5 px
xhdpi:     1 px
hdpi:   0.75 px
.... and so on

More on 9patch drawables: Link

Another approach (already suggested here) is to use a View to act as the border. In that case, the lightest arrangement (not mentioned here) is to use a FrameLayout and place the ListView and the border inside it:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!-- marginRight set to 0.5dp -->
    <ListView 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginRight="0.5dp"
        android:background="#E7E7E7"
        android:choiceMode="singleChoice"
        android:dividerHeight="0.5dp" />

    <!-- gravity set to right & background set to border color -->
    <View
        android:layout_width="0.5dp"
        android:layout_height="match_parent"
        android:layout_gravity="right"
        android:background="@color/some_color"/>

</FrameLayout>

You will end up having a ViewGroup & a View as decorations in this case. 9patch would be the optimal solution. Take your pick.

score 0 · Answer 4 · answered Mar 04 '15 at 21:12

ETA: Apurva's solution looks much cleaner.

I'm not that familiar with Navigation Drawers, but you can create a vertical divider by adding a view to your DrawerLayout after your ListView.

<View
        android:layout_height="fill_parent"
        android:layout_width="2dip"
        android:background="@android:color/some_color" />

score 0 · Answer 5 · answered Mar 04 '15 at 21:16

You have to set the background to a custom drawable with a right border, something like this:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:top="-5dp" android:bottom="-5dp" android:left="-5dp">
        <shape>
            <solid android:color="@android:color/transparent" />
            <stroke android:width="4dp" android:color="#000000" /> <!--BORDER COLOR-->
        </shape>
    </item>

    <item android:right="5dp">
        <shape android:shape="rectangle">
            <solid android:color="#E7E7E7" />
        </shape>
    </item>
</layer-list>

I used random dp for the border i set this as 5dp and the color of the border to black, change those to what you need!

score 0 · Answer 6 · answered Mar 07 '15 at 04:48

try this

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <ListView android:id="@+id/drawer_list"
            android:layout_weight="0.99"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#E7E7E7"
            android:choiceMode="singleChoice"
            android:dividerHeight="0.5dp" />

        <View
            android:layout_weight="0.01"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:background="#eeccbb"/>
    </LinearLayout>

</android.support.v4.widget.DrawerLayout>

video on youtube try this design Material githuplink

score 0 · Answer 7 · answered Mar 12 '15 at 13:07

setDrawerShadow() method is used to set any custom drawable/resource as Navigation Drawer left/right border.

You can check : Navigation Drawer -> setDrawerShadow() API usage info

You need to do 2 things :

(1) Define color you want in res -> colors.xml as drawable element

<drawable name="drawer_shadow">FFE7E7E7</drawable>

(2) Use this element in MainActivity.java by specifying it as a drawer shadow drawable :

activity_main.xml

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

...
</android.support.v4.widget.DrawerLayout>

MainActivity.java

onCreate(Bundle mSavedBundle) {
    mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow,
                GravityCompat.START);
}

This will add the color "FFE7E7E7" as drawable for navigation drawer left/right edge

Android Navigation Drawer vertical border

7 Answers7