Reputation: 21335

Android Drawing Separator/Divider Line in Layout?

I would like to draw a line right in the middle of a layout and use it as a separator of other items like TextView. Is there a good widget for this. I don't really want to use an image as it would be hard to match the other components to it. And I want it to be relatively positioned as well. Thanks

Upvotes: 682

Answers (30)

Khemraj Sharma

Reputation: 58934

Easiest Way:

Vertical divider :

`<View style="@style/Divider.Vertical"/>`

Horizontal divider :

`<View style="@style/Divider.Horizontal"/>`

That's all yes!

Just put this in res>values>styles.xml

<style name="Divider">
    <item name="android:background">?android:attr/listDivider</item> //you can give your color here. that will change all divider color in your app.
</style>

<style name="Divider.Horizontal" parent="Divider">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">1dp</item> // You can change thickness here.

</style>

<style name="Divider.Vertical" parent="Divider">
    <item name="android:layout_width">1dp</item>
    <item name="android:layout_height">match_parent</item>
</style>

Upvotes: 94

SHASHWAT DOSHI

Reputation: 351

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

Between two Layouts Put this code to get Divider.

Upvotes: 35

Yogesh Sarvaiya

Reputation: 571

You can use this <View> element just after the First TextView.

 <View
         android:layout_marginTop="@dimen/d10dp"
         android:id="@+id/view1"
         android:layout_width="fill_parent"
         android:layout_height="1dp"
         android:background="#c0c0c0"/>

Upvotes: 14

Sunil

Reputation: 31

Here is the code " a horizontal divider line between two Text Views". Try this

    <TextView
        android:id="@id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="5dp"
        android:inputType="textPersonName"
        android:text:"address" />


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


    <TextView
        android:id="@id/textView7"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPersonName" 
        android:text:"Upload File" />/>

Upvotes: 3

Cyclotron3x3

Reputation: 2229

In cases where one is using android:layout_weight property to assign available screen space to layout components, for instance

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="match_parent"
        android:orientation="vertical">
        ...
        ...
    </LinearLayout>

     /* And we want to add a verical separator here */

    <LinearLayout
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="match_parent"
        android:orientation="vertical">
        ...
        ...
     </LinearLayout>

</LinearLayout>

To add a separator between the existing two layouts which has taken the entire screen space already, we cannot just add another LinearLayout with android:weight:"1" because that will make three equal width columns which we don't want. Instead, we will decrease the amount of space we will be giving to this new layout. Final code would look like this:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="match_parent"
        android:orientation="vertical">
        ...
        ...
    </LinearLayout>

                    /* *************** ********************** */

    /* Add another LinearLayout with android:layout_weight="0.01" and 
       android:background="#your_choice" */
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="0.01"
        android:background="@android:color/darker_gray"
     />

    /* Or View can be used */
    <View
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:layout_marginTop="16dp"
        android:background="@android:color/darker_gray"
     />

                     /* *************** ********************** */

    <LinearLayout
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="match_parent"
        android:orientation="vertical">
        ...
        ...
    </LinearLayout>

</LinearLayout>

Upvotes: 6

Farid Ahmed

Reputation: 719

Just write this :

 android:divider="?android:dividerHorizontal"
 android:showDividers="middle"

full example:

<LinearLayout
        android:id="@+id/llTipInformation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tvServiceRating"
        android:orientation="horizontal"
        android:divider="?android:dividerHorizontal"
        android:layout_marginTop="@dimen/activity_horizontal_margin"
        android:showDividers="middle">

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="@string/main.msg.tippercent"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textColor="@color/colorWhite"
            android:layout_marginTop="@dimen/activity_vertical_margin"/>
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="@string/main.msg.tiptotal"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textColor="@color/colorWhite"
            android:layout_marginTop="@dimen/activity_vertical_margin"/>

</LinearLayout>

Upvotes: 29

Jyoti Sharma

Reputation: 233

Add a horizontal black line using this:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="#000000"
    android:layout_marginTop="10dp"/>

Upvotes: 4

Wijay Sharma

Reputation: 439

Its very simple. Just create a View with the black background color.

<View
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="#000"/>

This will create a horizontal line with background color. You can also add other attributes such as margins, paddings etc just like any other view.

Upvotes: 13

Mayank Garg

Reputation: 1304

This would help you to resolve this problem. Here a small view is created to make a black line as a separator between two views.

 <View
        android:layout_width="3dp"
        android:layout_height="wrap_content"
        android:background="@android:color/black"
         />

Upvotes: 3

FAHAD HAMMAD ALOTAIBI

Reputation: 143

<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<item
    android:bottom="0dp"
    android:left="-2dp"
    android:right="-2dp"
    android:top="-2dp">
    <shape android:shape="rectangle">
        <stroke
            android:width="1dp"
            android:color="@color/divider" />
    </shape>
</item>

Upvotes: 3

shreedhar bhat

Reputation: 4825

Simple solution

just add this code in your layout and replace 'Id_of__view_present_above' to the id of the view, below which you need the divider.

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

Upvotes: 1

user2240225

Reputation: 1133

You can use this in LinearLayout :

android:divider="?android:dividerHorizontal"
android:showDividers="middle"

For Example:

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

        <TextView 
         android:layout_height="wrap_content"
         android:layout_width="wrap_content"
         android:text="abcd gttff hthjj ssrt guj"/>

        <TextView 
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="abcd"/>
        <TextView 
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="abcd gttff hthjj ssrt guj"/>

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

</LinearLayout>

Upvotes: 113

Irshu

Reputation: 8436

If you are going to use it a lot, best thing to do is

styles.xml:

<style name="Seperator">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">1dp</item>
        <item name="android:background">@color/light_color</item>
    </style>

now in your layout, just add it like:

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

Upvotes: 5

elifekiz

Reputation: 1506

Adding this view; that draws a separator between your textviews

<View
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="#000000" />

Upvotes: 12

Maksudul Hasan Raju

Reputation: 865

use this xml code to add vertical line

 <View
    android:layout_width="1dp"
    android:layout_height="match_parent"
    android:layout_centerVertical="true"
    android:background="#000000" />

use this xml code to add horizontal line

<View
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="#000000" />

Upvotes: 8

Dan Alboteanu

Reputation: 10232

Divide the space in two equal parts:

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:divider="?android:dividerHorizontal"
        android:showDividers="end"></LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"></LinearLayout>

</LinearLayout>

Notice that one part contains a divider at the end

Upvotes: 1

Morozov

Reputation: 5250

For example if you used recyclerView for yours items:

in build.gradle write:

dependencies {
    compile 'com.yqritc:recyclerview-flexibledivider:1.4.0'

If you want to set color, size and margin values, you can specify as the followings:

RecyclerView recyclerView = (RecyclerView) 
findViewById(R.id.recyclerview);
recyclerView.addItemDecoration(
        new HorizontalDividerItemDecoration.Builder(this)
                .color(Color.RED)
                .sizeResId(R.dimen.divider)
                .marginResId(R.dimen.leftmargin, R.dimen.rightmargin)
                .build());

Upvotes: 0

Archan Desai

Reputation: 206

Here is your answer..this is an example to draw line between controls...

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

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

This code draw line between two controls...

Upvotes: 11

Alex Kucherenko

Reputation: 20307

I usually use this code to add horizontal line:

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

To add vertical separator, switch the layout_width and layout_height values

Upvotes: 1842

Deepak Goel

Reputation: 5684

use this code. It will help

<LinearLayout
    android:layout_width="0dip"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    android:layout_weight="1"
    android:divider="?android:dividerHorizontal"
    android:gravity="center"
    android:orientation="vertical"
    android:showDividers="middle" >

Upvotes: 48

124697

Reputation: 21893

<ImageView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:paddingBottom="2dp"
    android:paddingLeft="5dp"
    android:paddingRight="5dp"
    android:paddingTop="2dp"
    android:scaleType="fitXY"
    android:src="?android:attr/listDivider" />

Upvotes: 4

alcsan

Reputation: 6242

Runtime version:

View dividerView = new View(getContext());
LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(
    ViewGroup.LayoutParams.FILL_PARENT, UIUtils.dpToPix(getContext(), 1));
dividerView.setLayoutParams(lp);

TypedArray array = getContext().getTheme()
    .obtainStyledAttributes(new int[] {android.R.attr.listDivider});
Drawable draw = array.getDrawable(0);       
array.recycle();

dividerView.setBackgroundDrawable(draw);
mParentLayout.addView(dividerView);

Upvotes: 9

dreamdeveloper

Reputation: 1276

//for vertical line:

<View
   android:layout_width="1dp"
   android:layout_height="fill_parent"
   android:background="#00000000" />




//for horizontal line: 

<View
   android:layout_width="fill_parent"
   android:layout_height="1dp"
   android:background="#00000000" />
//it works like a charm

Upvotes: 6

pprados

Reputation: 1127

<TextView
    android:id="@+id/line"
    style="?android:attr/listSeparatorTextViewStyle"
    android:paddingTop="5dip"
    android:gravity="center_horizontal"
    android:layout_below="@+id/connect_help"
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="#000" />

Upvotes: 61

Hossein

Reputation: 324

I usually use this code:

<ImageView
    android:id="@+id/imageView2"
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:layout_alignParentLeft="true"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:layout_marginTop="10dp"
    android:background="#aa000000" />

if you have an object in your layout and you want set line below that use this attribute in ImageView:

android:layout_below="@+id/textBox1"

Upvotes: 3

Kamel

Reputation: 1077

It adds a horizontal divider to anywhere in your layout.

    <TextView
       style="?android:listSeparatorTextViewStyle"
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"/>

Upvotes: 10

android developer

Reputation: 116362

if you use actionBarSherlock, you can use the com.actionbarsherlock.internal.widget.IcsLinearLayout class in order to support dividers and show them between the views .

example of usage:

<com.actionbarsherlock.internal.widget.IcsLinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:divider="@drawable/divider"
    android:dividerPadding="10dp"
    android:orientation="vertical"
    android:showDividers="beginning|middle|end" >
... children...

res/drawable/divider.xml :

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

    <size android:height="2dip" />

    <solid android:color="#FFff0000" />

</shape>

do note that for some reason, the preview in the graphical designer says "android.graphics.bitmap_delegate.nativeRecycle(I)Z" . not sure what it means, but it can be ignored as it works fine on both new versions of android and old ones (tested on android 4.2 and 2.3) .

seems the error is only shown when using API17 for the graphical designer.

Upvotes: 18

L. G.

Reputation: 9761

To complete Camille Sévigny answer you can additionally define your own line shape for example to custom the line color.

Define an xml shape in drawable directory. line_horizontal.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto" android:shape="line">
    <stroke android:width="2dp" android:color="@android:color/holo_blue_dark" />
    <size android:width="5dp" />
</shape>

Use this line in your layout with the wished attributes:

    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:paddingBottom="2dp"
        android:paddingLeft="5dp"
        android:paddingRight="5dp"
        android:paddingTop="2dp"
        android:src="@drawable/line_horizontal" />

Upvotes: 4

toddles_fp

Reputation: 7471

To improve on the answers provided by Alex Kucherenko and Dan Dar3

I added this to my styles:

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

Then in my layouts is less code and simpler to read.

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

Upvotes: 696

Camille Sévigny

Reputation: 5143

Add this in your layout where you want the divider (modify the attributes to fit your need):

<ImageView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@android:drawable/divider_horizontal_dark"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:scaleType="fitXY"
    android:paddingLeft="5dp"
    android:paddingRight="5dp"
    android:paddingBottom="2dp"
    android:paddingTop="2dp" />

Upvotes: 137

Android Drawing Separator/Divider Line in Layout?

Answers (30)

Easiest Way:

Vertical divider :

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

Horizontal divider :

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

That's all yes!

Simple solution

Related Questions

`<View style="@style/Divider.Vertical"/>`

`<View style="@style/Divider.Horizontal"/>`