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 303 · Accepted Answer · edited Jun 26 '19 at 09:06

303

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

634
3
10
25

answered Oct 01 '13 at 11:49

Bhoomika Brahmbhatt

7,032
3
25
43

13

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
1

@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 24 · 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

21

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,648
2
18
34

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

17

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,244
3
20
34

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 10 · Answer 5 · answered Aug 31 '15 at 13:20

10

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,424
15
25

score 6 · Answer 6 · 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,837
2
19
35

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

score 2 · Answer 7 · 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,190
8
44
55

answered Aug 10 '15 at 13:17

Karan Datwani

410
6
6

score 2 · Answer 8 · 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

ʍѳђઽ૯ท

15,369
7
47
103

answered Jul 01 '16 at 11:34

Hiren Patel

21
2

score 1 · Answer 9 · 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,832
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 10 · 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

6,719
10
42
50

answered Nov 30 '15 at 12:57

Mostafa Hassan

11
1
2

score 1 · Answer 11 · 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,223
1
14
23

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

score 1 · Answer 12 · edited Mar 21 '21 at 20:23

1

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

2,721
2
26
28

answered Sep 08 '20 at 22:21

RvSingh3213

73
6

score 0 · Answer 13 · 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 14 · 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,229
5
43
83

answered Jan 12 '16 at 02:38

deepankar

341
5
12

score 0 · Answer 15 · 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

Sameer Rehman

96
6

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

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

Android draw a Horizontal line between views

16 Answers16

Linked

Related