Android Navigation Vertical Border Box

Question

I want to make my NavigationDrawer the same as in this application

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

but here is what i get with my box

and this is the xml of the box 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 should I do?

Answer 1

Try it,

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

EDIT

You need to add one View along with the ListView and wrap both with one LinearLayout horizontally and give both the weight . Here I gave the weight 0.99 weight of the ListView and 0.01 weight of the View , you can change it according to 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> 

Answer 2

I

You can do it in 10 seconds. Use the list of layers in xml and set it as the background of the list AND give the right from 1dp to Listview

Replace the color # ff0000 (red) with your color of the vertical border AND # 00c0c0 with the color of the list, Do not forget to specify the correct filling 1dp in the list.

Laylist 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> 

Answer 3

I want someone to know what he is doing, and not just copy random answers from the Internet

Well, you will not do anything better than the nine paths:

The 9 patch above has a yellow 0.5dp (base xhdpi) frame 0.5dp (base xhdpi) for illustration. The upper and left fences (black lines) define the stretchable area.

Please note that the security line on the right works completely, from end to end. This means that there will be no gasket at the top and bottom. But the protective line at the bottom begins with the leftmost pixels and ends just before the yellow border. When you set this 9patch to listview, the bottom guard line will indent 0.5dp (the width of the yellow border) to the right.

However, this approach requires some work. You will need to create as many 9x drawings as possible, as there are buckets. If you need a border of 0.5dp, the width of the yellow border will be different for each bucket:

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

9patch drawing details: Link

Another approach (already suggested here) is to use View to act as a border. In this case, the easiest layout (not mentioned here) is to use a FrameLayout and place the ListView and 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> 

In this case, you will get ViewGroup and View as decorations. 9patch would be the best solution. Make your choice.

Answer 4

ETA: Apurva's solution looks a lot cleaner.

I am not familiar with navigation boxes, but you can create a vertical separator by adding a view to your DrawerLayout after the ListView.

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

Answer 5

You should set the background for custom selection with the 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 it to 5dp and the border color is black, change them to what you need!

Answer 6

try it

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

youtube video try this design material githup link

Answer 7

The setDrawerShadow () method is used to set any custom resource / resource as a left / right navigation frame.

You can check: Navigation Box -> API usage information setDrawerShadow ()

You need to do 2 things:

(1) Define the color you want in res -> colors.xml as an element to draw

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

(2) Use this element in MainActivity.java, specifying it as the drawer tag:

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 drawn for the left / right navigation box