Android draw a Horizontal line between views

Question

I have My Layout like below:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

<TextView
        android:id="@+id/textView1"
        style="@style/behindMenuItemLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="Twitter Feeds"
        android:textStyle="bold" />

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

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

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

</LinearLayout>

My Requirement is to draw a Horizontal line between TextView and ListView

Could anyone help?

You can add line to background of existing view's and not add extra one. Or you can put all your views inside listView. listView can draw separators. simplest ways is to add extra view. — Leonidos, Oct 01 '13 at 11:59

score 328 · Accepted Answer · edited Jun 26 '19 at 09:06

328

It will draw Silver gray colored Line between TextView & ListView

<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="match_parent"
    android:layout_height="2dp"
    android:background="#c0c0c0"/>

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

edited Jun 26 '19 at 09:06

capo11

790
3
11
32

answered Oct 01 '13 at 11:49

Bhoomika Brahmbhatt

7,404
3
29
44

15

This hardcoded color is like using inline css in a webpage. Why is this voted up so much? It should use android:background="?android:attr/dividerHorizontal" for example. – Roel Feb 01 '16 at 15:03
6

Because it's easy to implement – Denny Oct 10 '18 at 16:24
3

@Roel It is simple, easy and it works. And it s straightforward to reference a colour in stead of hardcoding it. I tried your suggestion, which I think would be technically better, but it didn't seem to work - I didn't get any dividers in my layouts. How should I use it? Thank you. – nsandersen Jul 04 '19 at 22:39
2

@Roel What is the downside of using it? – nibbana Dec 08 '20 at 09:42
At least set the colors in a seperate file and use color variables. The downside is that you may have to change many files if you want to change the color / styling of your app. – Roel Dec 09 '20 at 12:31

score 25 · Answer 2 · answered May 26 '15 at 15:42

You should use the new lightweight View Space to draw dividers. Your layout will load faster if you will use Space instead of View.

Horizontal divider:

<android.support.v4.widget.Space
        android:layout_height="1dp"
        android:layout_width="match_parent" />

Vertical divider:

<android.support.v4.widget.Space
        android:layout_height="match_parent"
        android:layout_width="1dp" />

You can also add a background:

<android.support.v4.widget.Space
        android:layout_height="match_parent"
        android:layout_width="1dp"
        android:background="?android:attr/listDivider"/>

Usage example:

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

<android.support.v4.widget.Space
    android:layout_height="match_parent"
    android:layout_width="1dp"
    android:background="?android:attr/listDivider"/>

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

<android.support.v4.widget.Space
    android:layout_height="match_parent"
    android:layout_width="1dp"
    android:background="?android:attr/listDivider"/>

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

In order to use Space you should add the dependency in your build.gradle:

dependencies {
    compile 'com.android.support:support-v4:22.1.+'
}

Documentation https://developer.android.com/reference/android/support/v4/widget/Space.html

The use of `Space` is going to be disappointing because `Space` draws nothing (not even a background). It's sole job is to take up space on the screen. The solution is to use a vanilla `View` element instead. Then the background will be drawn as desired. (You can also then avoid the support library dependency if it's not otherwise needed.) — Ted Hopp, Sep 10 '15 at 01:21
`Space` inherits from `View` and therefore it inherits all the attributes defined by `View`. (Similarly, `LinearLayout` inherits the `textAlignment` attribute even though it doesn't itself display any text.) Feel free to test this for yourself (or just look at the source code) and you will find that a `Space` ignores all drawing-related attributes. — Ted Hopp, Sep 11 '15 at 16:30

zozelfelfo · Answer 3 · 2014-06-18T11:25:26.880

23

add something like this in your layout between the views you want to separate:

  <View
       android:id="@+id/SplitLine_hor1"
       android:layout_width="match_parent"
       android:layout_height= "2dp"
       android:background="@color/gray" />

Hope it helps :)

edited Jun 18 '14 at 11:25

answered Oct 01 '13 at 11:48

zozelfelfo

3,776
2
21
35

2

It will draw a Vertical line as its height is match_parent & width is only 2 dp. – Bhoomika Brahmbhatt Oct 01 '13 at 12:23

onexf · Answer 4 · 2019-01-28T09:56:36.787

20

Creating it once and using it wherever needed is a good idea. Add this in your styles.xml:

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

and add this in your xml code, where a line divider is needed:

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

Originally answered by toddles_fp to this question: Android Drawing Separator/Divider Line in Layout?

edited Jan 28 '19 at 09:56

answered Aug 26 '16 at 07:44

onexf

3,674
3
22
36

wow. This is the best. wish you could also add example to demontsrtae use of vertical and horizontal divders for completeness. – nyxee Oct 20 '20 at 13:21

score 12 · Answer 5 · answered Aug 31 '15 at 13:20

12

Try this

<View
    android:layout_width="match_parent"
    android:layout_height="2dp"
    android:background="?android:attr/listDivider"/>

answered Aug 31 '15 at 13:20

Xar-e-ahmer Khan

1,314
15
23

score 10 · Answer 6 · answered Jul 28 '21 at 00:32

After many years, finally there is a proper view to display separators/dividers/horizontal lines on XML layouts. The team who develops the Material Components for Android has released the version 1.5.0-alpha01 which adds the MaterialDivider class. This allows to add dividers to layouts as said previously.

First, in your build.gradle add the following:

implementation 'com.google.android.material:material:1.5.0-alpha01'

Then, on a XML layout you can write:

<com.google.android.material.divider.MaterialDivider
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

And voila you have a divider. If you want to customize the color of the divider, there is an xml attribute: app:dividerColor. This view also allows theming via styles. For more info you can check this link.

score 6 · Answer 7 · answered Oct 01 '13 at 11:55

6

<View
       android:id="@+id/view"
       android:layout_width="match_parent"
       android:layout_height="2dp"
       android:background="#000000" />

answered Oct 01 '13 at 11:55

Jitesh Dalsaniya

1,917
3
20
36

1

can't we access this element programatically? – gumuruh Jul 14 '18 at 07:41

score 3 · Answer 8 · edited Sep 05 '21 at 21:17

3

An improvement of the accepted answer by Bhoomika for a more polished look:

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

android:alpha is used to set the opacity of views.

edited Sep 05 '21 at 21:17

halfer

19,824
17
99
186

answered Sep 05 '21 at 12:24

Ronnie

207
4
11

score 2 · Answer 9 · edited Aug 10 '15 at 14:09

2

You can put this view between your views to imitate the line

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

edited Aug 10 '15 at 14:09

Lamorak

10,957
9
43
57

answered Aug 10 '15 at 13:17

Karan Datwani

532
6
6

score 2 · Answer 10 · edited Jul 08 '20 at 07:11

2

Try this works for me

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

edited Jul 08 '20 at 07:11

ʍѳђઽ૯ท

16,646
7
53
108

answered Jul 01 '16 at 11:34

Hiren Patel

31
3

score 2 · Answer 11 · edited Mar 21 '21 at 20:23

2

Create Horizontal line

If your are using TextView and then you want to put a Line then use View this way and you can use any color like Blue, Red or black mentioning background color.

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

edited Mar 21 '21 at 20:23

Ajji

3,068
2
30
31

answered Sep 08 '20 at 22:21

RvSingh3213

189
1
6

score 1 · Answer 12 · answered Oct 01 '13 at 12:32

1

In each parent LinearLayout for which you want dividers between components, add android:divider="?android:dividerHorizontal" or android:divider="?android:dividerVertical.

Choose appropriate between them as per orientation of your LinearLayout.

Till I know, this resource style is added from Android 4.3.

answered Oct 01 '13 at 12:32

Ravi Bhatt

1,930
1
14
27

1

I use almost exclusively constraint layout now but this might come in handy at some point. – Brill Pappin Dec 07 '20 at 15:22

score 1 · Answer 13 · edited Nov 30 '15 at 12:58

1

Try this

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

edited Nov 30 '15 at 12:58

Damian Kozlak

7,065
10
45
51

answered Nov 30 '15 at 12:57

Mostafa Hassan

11
1
2

score 1 · Answer 14 · answered Feb 09 '16 at 11:47

1

----> Simple one

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

answered Feb 09 '16 at 11:47

shreedhar bhat

4,779
1
18
23

nice one. is the View method more versatile? – nyxee Oct 20 '20 at 13:26

score 0 · Answer 15 · answered Oct 01 '13 at 11:48

A View whose background color you can specify would do (height=a few dpi). Looked in real code and here it is:

        <LinearLayout
            android:id="@+id/lineA"
            android:layout_width="fill_parent"
            android:layout_height="2dp"
            android:background="#000000" />

Note that it may be any kind of View.

score 0 · Answer 16 · edited Dec 30 '16 at 14:49

0

If you does not want to use an extra view just for underlines. Add this style on your textView.

style="?android:listSeparatorTextViewStyle"

Just down side is it will add extra properties like

android:textStyle="bold"
android:textAllCaps="true"

which you can easily override.

edited Dec 30 '16 at 14:49

Charuක

12,953
5
50
88

answered Jan 12 '16 at 02:38

deepankar

371
5
13

score 0 · Answer 17 · answered Dec 08 '20 at 11:13

0

which work for me is

    <view
    android:layout_below="@+id/kaimla_number"
    android:layout_width="match_parent"
    android:layout_height="3dp"
    android:background="@color/golden"></view>

answered Dec 08 '20 at 11:13

Sam

241
3
7

score 0 · Answer 18 · answered Jan 08 '21 at 19:16

0

 <view
        android:id="@+id/blackLine"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#000000"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"/>

app:layout_constraintStart_toStartOf="parent"/>

answered Jan 08 '21 at 19:16

Abdul Wajid

1

you are not supposed to add only screenshots instead of code on StackOverflow or any other online forum. This makes it harder for anyone trying to test or implement your code. – Junaid Pathan Jul 07 '21 at 20:25

Android draw a Horizontal line between views

18 Answers18

Linked

Related