Android Drawing Separator/Divider Line in Layout?

Question

I would like to draw a line right in the middle of a layout and use it as a separator of other items like TextView. Is there a good widget for this. I don't really want to use an image as it would be hard to match the other components to it. And I want it to be relatively positioned as well. Thanks

score 1766 · Answer 1 · edited Nov 18 '15 at 02:11

1766

I usually use this code to add horizontal line:

<View
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="@android:color/darker_gray"/>

To add vertical separator, switch the layout_width and layout_height values

edited Nov 18 '15 at 02:11

Stephan

12,235
6
30
60

answered Apr 23 '12 at 14:11

Alex Kucherenko

19,361
2
24
31

11

Works for me too. Can also add android:layout_marginTop="2dp" (etc) to add spaces in top and bottom. – Pinch May 07 '12 at 03:43
4

This is great for a simple horizontal line. But if you want the color fading at the ends, use one of the other methods here. – SMBiggs Aug 24 '12 at 04:10
94

Or even better, use `layout_height="2dp" and android:background="?android:attr/listDivider"` – Dan Dar3 Oct 04 '12 at 22:20
yeah or just use html color code for yellow. that background value gave me an error. android:background="#FFFF00" – Lou Morda Dec 07 '12 at 17:58
2

I had to add `android:minHeight="1dp"` to make the line in my layout visible. I haven't been able to figure out the reason yet. – Juuso Ohtonen Dec 31 '12 at 13:04
2

Simple and elegant solution :) – noni Aug 12 '13 at 18:12
1

I cannot put this View inside LinearLayout / FrameLayout error inflating android.view.View. What did I miss? – stuckedoverflow Dec 24 '13 at 09:12
I added margin top and bottom, it makes it even more awesome :) – Salmaan Aug 07 '14 at 05:53
19

You should use px instead of dp for dividers. Unless you actually want the divider size to vary and, potentially, drop below 1/2 pixels. :) – Austin Hanson Jan 20 '15 at 20:08
11

Material design specification recommends use 1dp thick http://www.google.com/design/spec/components/dividers.html#dividers-specs – Alex Kucherenko Mar 26 '15 at 12:18
2

You can also use margin attributes for a more convincing divider. For horizontal dividers `android:layout_marginStart="5dp" android:layout_marginEnd="5dp"` For Vertical dividers `android:layout_marginTop="5dp" android:layout_marginBottom="5dp"` – Sanket Berde Jun 14 '15 at 20:06
1

Any idea on how to put a word in between the separator? – Rafael Mar 23 '17 at 17:51
@AlexKucherenko: The material design specs don't seem to specify this anymore (at least I couldn't find that). Also, FYI, there seems to be a special component planned for use as a separator (https://material.io/design/components/dividers.html#implementation), instead of a styled View. – LarsH Oct 02 '18 at 10:30

score 660 · Answer 2 · edited May 23 '17 at 12:26

660

To improve on the answers provided by Alex Kucherenko and Dan Dar3

I added this to my styles:

<style name="Divider">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">1dp</item>
    <item name="android:background">?android:attr/listDivider</item>
</style>

Then in my layouts is less code and simpler to read.

<View style="@style/Divider"/>

edited May 23 '17 at 12:26

Community

1
1

answered Jan 26 '13 at 02:05

toddles_fp

7,091
1
13
10

43

This is great and IMHO the best solution! That way you don't have to manually set the color, so consistency is easier when you have more than one theme (I use Theme.Sherlock and Theme.Sherlock.Light). – nspo Mar 17 '13 at 20:58
2

+1 - A great replacement for the 9-lines solution I used so far. Very... stylish – AVIDeveloper Nov 04 '13 at 20:00
3

This seems like the cleanest solution. Thanks! – FrozenCow Jan 31 '14 at 22:50
3

This seems to work but in Android Studio preview with API 21 it isn't shown... I couldn't test if this is only a problem of the preview or also on real devices... – DominicM Feb 04 '15 at 19:19
Very nice, I just added the id and layout_below because I have a lot of Views – magorich Mar 03 '15 at 21:06
3

I thought it wasn't being shown in the Android Studio preview as well, but after zooming in on the preview I can make out the faint line that is displayed. – Nick Spacek May 14 '15 at 18:15
1

I like the idea, but for me, using `?android:attr/listDivider` as the background resulted in the line being invisible. When I changed it to `@android:color/darker_gray`, it was visible. Maybe I have my theme set up wrong... – LarsH Oct 02 '18 at 10:35
Be aware that putting `android:layout_` attributes in styles is not recommended. Such attributes are meant to describe the relationship between that view and its parent. For example, 0dp might have very different results when applying this style to a parent ConstraintLayout vs. a LinearLayout or FrameLayout. For a detailed info, see: https://tips.seebrock3r.me/where-do-layout-attributes-belong-4d7fd5eaa1fa – Ricardo Aug 11 '20 at 08:36
I tried to use a layout along with but faced issues where I had to repeat the width & height properties in the , along with other issues such as margins not working. This implementation worked first try. – Cloud Nov 19 '20 at 13:56
This should be the accepted answer. – Caterpillaraoz Apr 13 '21 at 11:18

score 137 · Answer 3 · answered May 04 '11 at 14:47

137

Add this in your layout where you want the divider (modify the attributes to fit your need):

<ImageView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@android:drawable/divider_horizontal_dark"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:scaleType="fitXY"
    android:paddingLeft="5dp"
    android:paddingRight="5dp"
    android:paddingBottom="2dp"
    android:paddingTop="2dp" />

answered May 04 '11 at 14:47

Camille Sévigny

4,962
4
34
60

1

Thanks, worked for me. Looking especially nice in DrawerLayout – Martin Vysny Dec 29 '13 at 09:10
4

@Ahmed You cannot use this when you have white activity background I suppose, in that case use android:src="@android:drawable/divider_horizontal_bright" instead. – romanos Sep 01 '14 at 07:03

score 102 · Answer 4 · edited May 16 '17 at 13:39

You can use this in LinearLayout :

android:divider="?android:dividerHorizontal"
android:showDividers="middle"

For Example:

<?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:divider="?android:dividerHorizontal"
    android:showDividers="middle"
    android:orientation="vertical" >            

        <TextView 
         android:layout_height="wrap_content"
         android:layout_width="wrap_content"
         android:text="abcd gttff hthjj ssrt guj"/>

        <TextView 
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="abcd"/>
        <TextView 
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="abcd gttff hthjj ssrt guj"/>

        <TextView 
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="abcd"/>

</LinearLayout>

Unfortunately this method does not highlight the dividers with bold colors. — The Original Android, Feb 22 '15 at 08:33

score 80 · Answer 5 · edited Jun 20 '20 at 09:12

Easiest Way:

Vertical divider :

`<View style="@style/Divider.Vertical"/>`

Horizontal divider :

`<View style="@style/Divider.Horizontal"/>`

That's all yes!

Just put this in res>values>styles.xml

<style name="Divider">
    <item name="android:background">?android:attr/listDivider</item> //you can give your color here. that will change all divider color in your app.
</style>

<style name="Divider.Horizontal" parent="Divider">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">1dp</item> // You can change thickness here.

</style>

<style name="Divider.Vertical" parent="Divider">
    <item name="android:layout_width">1dp</item>
    <item name="android:layout_height">match_parent</item>
</style>

this overlaps the entire thing with a View. – ChumiestBucket Nov 01 '18 at 21:05 — ChumiestBucket, Nov 01 '18 at 21:05

score 58 · Answer 6 · edited May 01 '15 at 18:12

58

<TextView
    android:id="@+id/line"
    style="?android:attr/listSeparatorTextViewStyle"
    android:paddingTop="5dip"
    android:gravity="center_horizontal"
    android:layout_below="@+id/connect_help"
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="#000" />

edited May 01 '15 at 18:12

BlazE

71
1
16

answered Feb 06 '12 at 12:25

pprados

1,067
11
21

1

I would defend this method more that others on the account that it uses an already existing style, but it might not please everybody. – Solenoid Sep 07 '12 at 19:40
3

The drawback of this approach is, however, poor Android does NOT guarantee existing style. – Youngjae Jul 30 '13 at 18:17

score 46 · Answer 7 · edited Oct 07 '15 at 21:35

46

use this code. It will help

<LinearLayout
    android:layout_width="0dip"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    android:layout_weight="1"
    android:divider="?android:dividerHorizontal"
    android:gravity="center"
    android:orientation="vertical"
    android:showDividers="middle" >

edited Oct 07 '15 at 21:35

JJD

44,755
49
183
309

answered Apr 04 '13 at 04:59

Deepak Goel

5,278
5
36
50

score 26 · Answer 8 · answered Jun 08 '18 at 10:56

26

<View
            android:layout_width="2dp"
            android:layout_height="match_parent"
            android:layout_marginTop="4dp"
            android:background="@android:color/darker_gray" />

Between two Layouts Put this code to get Divider.

answered Jun 08 '18 at 10:56

SHASHWAT DOSHI

261
3
3

same result, fewer code compared to other answers. thanks – Amir Dora. Sep 03 '20 at 21:06

score 23 · Answer 9 · edited Aug 11 '17 at 16:29

Just write this :

 android:divider="?android:dividerHorizontal"
 android:showDividers="middle"

full example:

<LinearLayout
        android:id="@+id/llTipInformation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tvServiceRating"
        android:orientation="horizontal"
        android:divider="?android:dividerHorizontal"
        android:layout_marginTop="@dimen/activity_horizontal_margin"
        android:showDividers="middle">

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="@string/main.msg.tippercent"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textColor="@color/colorWhite"
            android:layout_marginTop="@dimen/activity_vertical_margin"/>
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="@string/main.msg.tiptotal"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textColor="@color/colorWhite"
            android:layout_marginTop="@dimen/activity_vertical_margin"/>

</LinearLayout>

This should be accepted answer as it is the most correct way of adding a divider to a `LinearLayout` — JaydeepW, Aug 21 '17 at 09:48

android developer · Answer 10 · 2013-06-13T09:11:50.750

if you use actionBarSherlock, you can use the com.actionbarsherlock.internal.widget.IcsLinearLayout class in order to support dividers and show them between the views .

example of usage:

<com.actionbarsherlock.internal.widget.IcsLinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:divider="@drawable/divider"
    android:dividerPadding="10dp"
    android:orientation="vertical"
    android:showDividers="beginning|middle|end" >
... children...

res/drawable/divider.xml :

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <size android:height="2dip" />

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

</shape>

do note that for some reason, the preview in the graphical designer says "android.graphics.bitmap_delegate.nativeRecycle(I)Z" . not sure what it means, but it can be ignored as it works fine on both new versions of android and old ones (tested on android 4.2 and 2.3) .

seems the error is only shown when using API17 for the graphical designer.

score 12 · Answer 11 · edited Dec 30 '16 at 14:47

12

Adding this view; that draws a separator between your textviews

<View
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="#000000" />

edited Dec 30 '16 at 14:47

Charuක

12,229
5
43
83

answered Dec 19 '16 at 14:24

elfekz

1,328
10
25

score 12 · Answer 12 · answered Jul 28 '17 at 20:17

Its very simple. Just create a View with the black background color.

<View
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="#000"/>

This will create a horizontal line with background color. You can also add other attributes such as margins, paddings etc just like any other view.

score 11 · Answer 13 · answered Mar 15 '16 at 05:32

Here is your answer..this is an example to draw line between controls...

<TextView
            android:id="@+id/textView1"
            style="@style/behindMenuItemLabel1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="1dp"
            android:text="FaceBook Feeds" />

         <View
             android:layout_width="fill_parent"
             android:layout_height="2dp"
             android:background="#d13033"/>

         <ListView
            android:id="@+id/list1"
            android:layout_width="350dp"
            android:layout_height="50dp" />

This code draw line between two controls...

score 11 · Answer 14 · edited Jun 06 '18 at 09:47

11

You can use this <View> element just after the First TextView.

 <View
         android:layout_marginTop="@dimen/d10dp"
         android:id="@+id/view1"
         android:layout_width="fill_parent"
         android:layout_height="1dp"
         android:background="#c0c0c0"/>

edited Jun 06 '18 at 09:47

Parth Patel

871
9
21

answered Jun 05 '18 at 07:26

Yogesh Sarvaiya

483
6
15

score 10 · Answer 15 · answered Jan 16 '14 at 18:07

10

It adds a horizontal divider to anywhere in your layout.

    <TextView
       style="?android:listSeparatorTextViewStyle"
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"/>

answered Jan 16 '14 at 18:07

Kamel

1,077
8
4

The line goes only under the Textview. – live-love Mar 05 '18 at 23:51

score 8 · Answer 16 · edited Oct 07 '15 at 21:34

Runtime version:

View dividerView = new View(getContext());
LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(
    ViewGroup.LayoutParams.FILL_PARENT, UIUtils.dpToPix(getContext(), 1));
dividerView.setLayoutParams(lp);

TypedArray array = getContext().getTheme()
    .obtainStyledAttributes(new int[] {android.R.attr.listDivider});
Drawable draw = array.getDrawable(0);       
array.recycle();

dividerView.setBackgroundDrawable(draw);
mParentLayout.addView(dividerView);

score 8 · Answer 17 · answered Nov 13 '16 at 08:48

use this xml code to add vertical line

 <View
    android:layout_width="1dp"
    android:layout_height="match_parent"
    android:layout_centerVertical="true"
    android:background="#000000" />

use this xml code to add horizontal line

<View
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="#000000" />

score 6 · Answer 18 · edited Jul 31 '15 at 09:26

6

//for vertical line:

<View
   android:layout_width="1dp"
   android:layout_height="fill_parent"
   android:background="#00000000" />




//for horizontal line: 

<View
   android:layout_width="fill_parent"
   android:layout_height="1dp"
   android:background="#00000000" />
//it works like a charm

edited Jul 31 '15 at 09:26

Karthik

4,652
4
27
62

answered Jun 26 '15 at 16:01

dreamdeveloper

1,176
1
13
20

Cyclotron3x3 · Answer 19 · 2018-02-10T04:09:35.287

In cases where one is using android:layout_weight property to assign available screen space to layout components, for instance

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

    <LinearLayout
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="match_parent"
        android:orientation="vertical">
        ...
        ...
    </LinearLayout>

     /* And we want to add a verical separator here */

    <LinearLayout
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="match_parent"
        android:orientation="vertical">
        ...
        ...
     </LinearLayout>

</LinearLayout>

To add a separator between the existing two layouts which has taken the entire screen space already, we cannot just add another LinearLayout with android:weight:"1" because that will make three equal width columns which we don't want. Instead, we will decrease the amount of space we will be giving to this new layout. Final code would look like this:

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

    <LinearLayout
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="match_parent"
        android:orientation="vertical">
        ...
        ...
    </LinearLayout>

                    /* *************** ********************** */

    /* Add another LinearLayout with android:layout_weight="0.01" and 
       android:background="#your_choice" */
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="0.01"
        android:background="@android:color/darker_gray"
     />

    /* Or View can be used */
    <View
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:layout_marginTop="16dp"
        android:background="@android:color/darker_gray"
     />

                     /* *************** ********************** */

    <LinearLayout
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="match_parent"
        android:orientation="vertical">
        ...
        ...
    </LinearLayout>

</LinearLayout>

score 5 · Answer 20 · answered Mar 10 '17 at 04:13

If you are going to use it a lot, best thing to do is

styles.xml:

<style name="Seperator">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">1dp</item>
        <item name="android:background">@color/light_color</item>
    </style>

now in your layout, just add it like:

<View style="@style/Seperator" />

score 4 · Answer 21 · answered Mar 21 '13 at 10:41

To complete Camille Sévigny answer you can additionally define your own line shape for example to custom the line color.

Define an xml shape in drawable directory. line_horizontal.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto" android:shape="line">
    <stroke android:width="2dp" android:color="@android:color/holo_blue_dark" />
    <size android:width="5dp" />
</shape>

Use this line in your layout with the wished attributes:

    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:paddingBottom="2dp"
        android:paddingLeft="5dp"
        android:paddingRight="5dp"
        android:paddingTop="2dp"
        android:src="@drawable/line_horizontal" />

score 4 · Answer 22 · edited Oct 07 '15 at 21:34

4

<ImageView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:paddingBottom="2dp"
    android:paddingLeft="5dp"
    android:paddingRight="5dp"
    android:paddingTop="2dp"
    android:scaleType="fitXY"
    android:src="?android:attr/listDivider" />

edited Oct 07 '15 at 21:34

JJD

44,755
49
183
309

answered Aug 30 '13 at 09:46

code511788465541441

20,207
61
174
298

without using android:src="?android:attr/listDivider" .... just add android:background="#FFFFFF" – bebosh Nov 17 '14 at 15:05

score 4 · Answer 23 · edited Aug 09 '17 at 09:44

4

Add a horizontal black line using this:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="#000000"
    android:layout_marginTop="10dp"/>

edited Aug 09 '17 at 09:44

Floern

31,495
23
98
115

answered Aug 09 '17 at 08:00

Jyoti Sharma

233
1
9

score 3 · Answer 24 · answered Apr 12 '14 at 17:48

I usually use this code:

<ImageView
    android:id="@+id/imageView2"
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:layout_alignParentLeft="true"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:layout_marginTop="10dp"
    android:background="#aa000000" />

if you have an object in your layout and you want set line below that use this attribute in ImageView:

android:layout_below="@+id/textBox1"

score 3 · Answer 25 · edited Jul 25 '17 at 03:32

3

This would help you to resolve this problem. Here a small view is created to make a black line as a separator between two views.

 <View
        android:layout_width="3dp"
        android:layout_height="wrap_content"
        android:background="@android:color/black"
         />

edited Jul 25 '17 at 03:32

Stumi

502
4
7

answered Jun 06 '17 at 09:39

Mayank Garg

1,078
1
7
21

score 3 · Answer 26 · answered Jul 08 '17 at 14:38

<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<item
    android:bottom="0dp"
    android:left="-2dp"
    android:right="-2dp"
    android:top="-2dp">
    <shape android:shape="rectangle">
        <stroke
            android:width="1dp"
            android:color="@color/divider" />
    </shape>
</item>

score 3 · Answer 27 · answered May 22 '18 at 11:59

Here is the code " a horizontal divider line between two Text Views". Try this

    <TextView
        android:id="@id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="5dp"
        android:inputType="textPersonName"
        android:text:"address" />


    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@android:color/black"/>


    <TextView
        android:id="@id/textView7"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPersonName" 
        android:text:"Upload File" />/>

shreedhar bhat · Answer 28 · 2017-05-17T07:46:19.363

1

Simple solution

just add this code in your layout and replace 'Id_of__view_present_above' to the id of the view, below which you need the divider.

<TextView
  android:layout_width="match_parent"
  android:layout_height="1dp"
  android:background="#c0c0c0"
  android:id="@+id/your_id"
  android:layout_marginTop="16dp" 
  android:layout_below="@+id/Id_of__view_present_above"
/>

edited May 17 '17 at 07:46

answered Feb 09 '16 at 13:01

shreedhar bhat

4,223
1
14
23

3

http://stackoverflow.com/help/how-to-answer Look for-> `Brevity is acceptable, but fuller explanations are better.` – Andy K Mar 10 '16 at 11:34

Dan Alboteanu · Answer 29 · 2016-09-24T08:40:06.657

Divide the space in two equal parts:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:divider="?android:dividerHorizontal"
        android:showDividers="end"></LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"></LinearLayout>

</LinearLayout>

Notice that one part contains a divider at the end

score 0 · Answer 30 · answered Sep 07 '16 at 09:17

For example if you used recyclerView for yours items:

in build.gradle write:

dependencies {
    compile 'com.yqritc:recyclerview-flexibledivider:1.4.0'

If you want to set color, size and margin values, you can specify as the followings:

RecyclerView recyclerView = (RecyclerView) 
findViewById(R.id.recyclerview);
recyclerView.addItemDecoration(
        new HorizontalDividerItemDecoration.Builder(this)
                .color(Color.RED)
                .sizeResId(R.dimen.divider)
                .marginResId(R.dimen.leftmargin, R.dimen.rightmargin)
                .build());