How to add (vertical) divider to a horizontal LinearLayout?

Question

I'm trying to add a divider to a horizontal linear layout but am getting nowhere. The divider just doesn't show. I am a total newbie with Android.

This is my layout XML:

<RelativeLayout 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"
    tools:context=".MainActivity" >
    
    <LinearLayout 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/llTopBar"
        android:orientation="horizontal"
        android:divider="#00ff00"
        android:dividerPadding="22dip"
        android:showDividers="middle">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="asdf" />
            
        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="asdf" />
    
    </LinearLayout>
    
</RelativeLayout>

What version of Android are you running this on? setDividerDrawable has only existed since API 11 — alex, Feb 28 '13 at 06:17
If you've tried everything else, make sure the LinearLayout has the correct orientation. Setting a height for a divider with a horizontal orientation will be very confusing. — Nino van Hooff, Feb 11 '16 at 15:06

score 233 · Accepted Answer · edited Dec 13 '16 at 14:54

233

use this for horizontal divider

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

and this for vertical divider

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

OR if you can use the LinearLayout divider, for horizontal divider

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <size android:height="1dp"/>
    <solid android:color="#f6f6f6"/>
</shape>

and in LinearLayout

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

If you want to user vertical divider then in place of android:height="1dp" in shape use android:width="1dp"

Tip: Don't forget the android:showDividers item.

edited Dec 13 '16 at 14:54

Fattie

27,874
70
431
719

answered Feb 28 '13 at 06:17

Kapil Vats

5,485
1
27
30

3

thanks. but how will I add this to the "android:divider" attribute? basically, what I mean is, some kind automatic way to add the divider between each element? I mean isnt that why the android:divider attribute is there? – Ahmed-Anas Feb 28 '13 at 06:30
@death_relic0 android:divider is avil for ListView ,Expandable Listview and TabWidget – Padma Kumar Feb 28 '13 at 06:41
9

thanks, but why is it here then :s http://developer.android.com/reference/android/widget/LinearLayout.html – Ahmed-Anas Feb 28 '13 at 06:43
It seems you should use any drawable, not color – demaksee Sep 26 '13 at 13:20
7

Seems you got your `layout_width` and `layout_height` values mixed up: for horizontal `layout_width` ought to be `"fill_parent"` and `layout_height` should be `"1dp"`. Should be swapped similarly for the vertical divider. – Jay Sidri Mar 20 '14 at 01:54
Keep in mind this only works on API 11 (Android 3.0 Honeycomb) and above. – dinesharjani Jul 02 '14 at 15:36
Why is this necessary? The docs state `May be a color value, in the form of "#rgb", "#argb", "#rrggbb", or "#aarrggbb".` – Erhannis Apr 18 '17 at 19:51
Is there any way to add vertical (top and bottom) padding to the divider. The dividerPadding options only adds left and right (start and end) padding. – SARose May 06 '17 at 16:13
Sir, it is oppositely mentioned..!! – Prakash Palanisamy Aug 26 '17 at 10:34

score 70 · Answer 2 · edited Dec 30 '13 at 10:35

Try this, create a divider in the res/drawable folder:

vertical_divider_1.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">    
    <size android:width="1dip" />
    <solid android:color="#666666" />    
</shape>

And use the divider attribute in LinearLayout like this:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="48dp"
    android:orientation="horizontal"
    android:divider="@drawable/vertical_divider_1"
    android:dividerPadding="12dip"
    android:showDividers="middle"
    android:background="#ffffff" >

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

</LinearLayout>

Note: android:divider is only available in Android 3.0 (API level 11) or higher.

but that will just add one divider.. suppose I have like 10 elements, adding additional code for a divider between each element seems like a waste — Ahmed-Anas, Feb 28 '13 at 06:27
@death_relic0 Why don't you create a separate layout for the divider and then use the include tag to add it anywhere and as many time you want. I think this would me better more and no waste. — GrIsHu, Feb 28 '13 at 06:30

score 41 · Answer 3 · answered Oct 21 '14 at 06:51

41

It is easy to add divider to layout, we don't need a separate view.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:divider="?android:listDivider"
    android:dividerPadding="2.5dp"
    android:orientation="horizontal"
    android:showDividers="middle"
    android:weightSum="2" ></LinearLayout>

Above code make vertical divider for LinearLayout

answered Oct 21 '14 at 06:51

Khai Nguyen

3,065
1
31
24

I always forget the showDividers attribute. Thank you! – Unknownweirdo Mar 09 '15 at 16:48
1

Thanks for the tip to use ?android:listDivider. I just noticed though that this is invisible in API 21 or higher. In lower API versions a small gray line is shown – user114676 May 22 '15 at 09:37
@KetanMehta we will define it with attribute 'android:divider', it's drawable or color. – Khai Nguyen May 22 '15 at 16:17
Does android:divider support API 15 + ? – RoCkDevstack Apr 01 '16 at 16:34

score 17 · Answer 4 · edited Jun 20 '20 at 09:12

Update: pre-Honeycomb using AppCompat

If you are using the AppCompat library v7 you may want to use the LinearLayoutCompat view. Using this approach you can use drawable dividers on Android 2.1, 2.2 and 2.3.

Example code:

<android.support.v7.widget.LinearLayoutCompat
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:showDividers="middle"
        app:divider="@drawable/divider">

drawable/divider.xml: (divider with some padding on the top and bottom)

<?xml version="1.0" encoding="UTF-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
        android:insetBottom="2dp"
        android:insetTop="2dp">
    <shape>
        <size android:width="1dp" />
        <solid android:color="#FFCCCCCC" />
    </shape>
</inset>

Very important note: The LinearLayoutCompat view does not extend LinearLayout and therefor you should not use the android:showDividers or android:divider properties but the custom ones: app:showDividers and app:divider. In code you should also use the LinearLayoutCompat.LayoutParams not the LinearLayout.LayoutParams!

@SARose no, you can always create a custom view or hack into existing view components. This is however the default and preferred method to do it. — Rolf ツ, May 06 '17 at 17:03

score 8 · Answer 5 · answered Mar 31 '15 at 16:55

I just ran into the same problem today. As the previous answers indicate, the problem stems from the use of a color in the divider tag, rather than a drawable. However, instead of writing my own drawable xml, I prefer to use themed attributes as much as possible. You can use the android:attr/dividerHorizontal and android:attr/dividerVertical to get a predefined drawable instead:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:showDividers="middle"
    android:divider="?android:attr/dividerVertical"
    android:orientation="horizontal">
    <!-- other views -->
</LinearLayout>

The attributes are available in API 11 and above.

Also, as mentioned by bocekm in his answer, the dividerPadding property does NOT add extra padding on either side of a vertical divider, as one might assume. Instead it defines top and bottom padding and thus may truncate the divider if it's too large.

score 7 · Answer 6 · answered Feb 29 '16 at 16:53

You can use the built in divider, this will work for both orientations.

<LinearLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:divider="?android:attr/listDivider"
  android:orientation="horizontal"
  android:showDividers="middle">

score 3 · Answer 7 · answered Jun 28 '13 at 22:04

Frustratingly, you have to enable showing the dividers from code in your activity. For example:

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    // Set the view to your layout
    setContentView(R.layout.yourlayout);

    // Find the LinearLayout within and enable the divider
    ((LinearLayout)v.findViewById(R.id.llTopBar)).
        setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE);

}

Although it's another way of doing it, there's no need. – Ricardo A. May 15 '19 at 18:13 — Ricardo A., May 15 '19 at 18:13

score 3 · Answer 8 · edited May 19 '20 at 18:30

If the answer of Kapil Vats is not working try something like this:

drawable/divider_horizontal_green_22.xml

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

    <size android:width="22dip"/>
    <solid android:color="#00ff00"/>

</shape>

layout/your_layout.xml

LinearLayout 
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:id="@+id/llTopBar"
            android:orientation="horizontal"
            android:divider="@drawable/divider_horizontal_green_22"
            android:showDividers="middle"
           >

I encountered an issue where the padding attribute wasn't working, thus I had to set the height of the divider directly in the divider.

Note:

If you want to use it in vertical LinearLayout, make a new one, like this: drawable/divider_vertical_green_22.xml

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

    <size android:height="22dip"/>
    <solid android:color="#00ff00"/>

</shape>

score 2 · Answer 9 · answered May 15 '14 at 16:09

2

Your divider may not be showing due to too large dividerPadding. You set 22dip, that means the divider is truncated by 22dip from top and by 22dip from bottom. If your layout height is less than or equal 44dip then no divider is visible.

answered May 15 '14 at 16:09

bocekm

113
7

score 0 · Answer 10 · answered Jan 06 '14 at 17:47

In order to get drawn, divider of LinearLayout must have some height while ColorDrawable (which is essentially #00ff00 as well as any other hardcoded color) doesn't have. Simple (and correct) way to solve this, is to wrap your color into some Drawable with predefined height, such as shape drawable

score -1 · Answer 11 · answered Feb 28 '13 at 06:20

-1

You have to create the any view for separater like textview or imageview then set the background for that if you have image else use the color as the background.

Hope this helps you.

answered Feb 28 '13 at 06:20

itsrajesh4uguys

4,610
3
20
31

How to add (vertical) divider to a horizontal LinearLayout?

11 Answers11

Update: pre-Honeycomb using AppCompat

Linked

Related