Adding "section dividers" to my layout?

Question

The Android Design - Lists page describes "section dividers". I'm aware you can use addHeaderView() a ListView for a similar effect. I would like to use a "section divider" without a ListView, but rather a LinearLayout.

In the screenshot below, I'm referring to the blue text "Phone" and "Email" which also has an line below it. The screenshot is from Android Design - Text Fields

enter image description here

How do I go about adding it to my layout? It it simply a TextView plus a horizontal line?

Create a background image with a line at the bottom, and set it as background to your TextView. — Arif Nadeem, Apr 21 '12 at 07:30
@mirroredAbstraction You should write that as an answer since it seems to be the best solution so far. — gak, Apr 21 '12 at 07:32
Possible duplicate of [Android Drawing Separator/Divider Line in Layout?](http://stackoverflow.com/questions/5049852/android-drawing-separator-divider-line-in-layout) — Richard Le Mesurier, Jan 15 '16 at 11:02
[This is my prefered solution from a related post](http://stackoverflow.com/a/14533085/383414) — Richard Le Mesurier, Jan 15 '16 at 11:03

score 46 · Accepted Answer · edited Feb 13 '13 at 13:40

46

I was looking for the same issue. I found an easy way to tell the app that a texview is a section separator:

<TextView
    android:id="@+id/address_label"
    style="?android:attr/listSeparatorTextViewStyle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Address"/>

The line:

style="?android:attr/listSeparatorTextViewStyle"

add the underline to the text and style it accordingli to the defaulf "Separator" theme.

edited Feb 13 '13 at 13:40

Andrew Barber

37,547
20
91
118

answered Feb 13 '13 at 13:27

MonkeyDroid

637
7
14

5

How to change the underline's color? – Florian von Stosch Dec 24 '13 at 19:25

score 4 · Answer 2 · edited Sep 29 '15 at 20:46

4

Try to put this View after the TextView of "phone". In this view I have put in a background color that you can change to your desire. Best of luck.

<View
    android:layout_width="match_parent"
    android:layout_height="2dip"
    android:background="#FF909090" />

edited Sep 29 '15 at 20:46

Jonathan Cast

4,338
16
31

answered Apr 21 '12 at 03:18

Aamirkhan

6,853
11
45
75

2

Just a quick remark.. With this solution you should use px instead of dip, because in smaller screens it can be converted to 0px and become invisible. – Thpramos Dec 15 '14 at 00:41

score 3 · Answer 3 · answered Sep 21 '12 at 21:15

The solution ended up having an includable layout called util_horizontal_line_section.xml:

<?xml version="1.0" encoding="utf-8"?>

<View
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="1dip"
    android:background="@color/sectionSeparatorColour"/>

With the sectionSeparatorColour entry in values/colors.xml:

<color name="sectionSeparatorColour">#a0a0a0</color>

Includable via:

<include layout="@layout/util_horizontal_line_section"/>

score 2 · Answer 4 · answered Apr 21 '12 at 07:36

2

On request of the asker of this question, I am writing my comment as an answer

Create a background image with a line at the bottom, and set it as background to your TextView.

answered Apr 21 '12 at 07:36

Arif Nadeem

8,136
7
42
77

score -1 · Answer 5 · answered Apr 21 '12 at 03:07

-1

TextView 2dp in height and width = match parent and set the background color as the color you want the line to be.

You can do vertical as well by reversing the two settings.

answered Apr 21 '12 at 03:07

Barak

16,117
9
49
84

Adding "section dividers" to my layout?

5 Answers5

Linked