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

AndroidAndroid LayoutAndroid LinearlayoutDivider

Android Problem Overview


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>

Android Solutions


Solution 1 - Android

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.

Solution 2 - Android

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.

Solution 3 - Android

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

Solution 4 - Android

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!

Solution 5 - Android

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.

Solution 6 - Android

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

Solution 7 - Android

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

}

Solution 8 - Android

If the answer of [Kapil Vats][1] 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>

[1]: https://stackoverflow.com/users/1360732/kapil-vats "Kapil Vats"

Solution 9 - Android

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.

Solution 10 - Android

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

Solution 11 - Android

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.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAhmed-AnasView Question on Stackoverflow
Solution 1 - AndroidKapil VatsView Answer on Stackoverflow
Solution 2 - AndroidShreeshaDasView Answer on Stackoverflow
Solution 3 - AndroidKhai NguyenView Answer on Stackoverflow
Solution 4 - AndroidRolf ツView Answer on Stackoverflow
Solution 5 - AndroidNicolai Buch-AndersenView Answer on Stackoverflow
Solution 6 - AndroidAmilcar AndradeView Answer on Stackoverflow
Solution 7 - AndroiddougcView Answer on Stackoverflow
Solution 8 - AndroidIonut NegruView Answer on Stackoverflow
Solution 9 - AndroidbocekmView Answer on Stackoverflow
Solution 10 - AndroidDmitry ZaytsevView Answer on Stackoverflow
Solution 11 - Androiditsrajesh4uguysView Answer on Stackoverflow