Vertical line using XML drawable

Ask Question

up vote109down votefavorite

45

I'm trying to figure out how to define a vertical line (1dp thick) to be used as a drawable.

To make a horizontal one, it's pretty straightforward:

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="line">    <stroke android:width="1dp" android:color="#0000FF"/>    <size android:height="50dp" />     </shape>

The question is, how to make this line vertical?

Yes, there are workarounds, such as drawing a rectangle shape 1px thick, but that complicates the drawable XML, if it consists of multiple <item> elements.

Anyone had any chance with this?

UPDATE

Case is still unsolved. However, For anyone on a Android documentation crusade - you might find this useful: Missing Android XML Manual

UPDATE

I found no other way other than the one that I marked as correct. It does the trick though feels a bit "heavy", thus if you happen to know the answer don't forget to share ;)

android android-layout line android-xml android-drawable

shareimprove this question

edited Dec 30 '13 at 13:51

Jonik

43.1k46192279

asked Apr 17 '10 at 14:57

Kaspa

6812917

 

add a comment

13 Answers

activeoldestvotes

up vote295down voteaccepted

Instead of a shape, you could try a View:

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

I have only used this for horizontal lines, but I would think it would work for vertical lines as well.

Use:

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

for a horizontal line.

shareimprove this answer

edited Oct 6 '14 at 19:14

Jared Burrows

30.9k16100132

answered Apr 17 '10 at 16:08

CommonsWare

660k10515981652

 

2 

thanks Mark :)! I am aware I can use a view to achieve this. The thing is I'm assembling a bit more complex view that I want to use as a drawable for the background of a table cell. There are different types of shapes/gradients/lines there. Using a view WOULD be a solution, however I would have to put it in a different drawing "layer" and that is potentially shooting yourself in the foot when I will come across resizing etc. I wonder just why there is no documentation on the "shape" xmls, maybe someone from google could enlighten us? :) – Kaspa Apr 17 '10 at 17:14

 

Found no other way :) – Kaspa Jun 1 '10 at 22:04

 

brilliant idea ... – Abhijit Gujar Mar 6 '15 at 6:29

 

great idea...... – Arpit Patel Aug 29 '16 at 8:04

add a comment

up vote79down vote

You can nest your shape inside a rotate tag.

<rotate xmlns:android="http://schemas.android.com/apk/res/android"    android:fromDegrees="90"    android:toDegrees="90">    <shape         android:shape="line">        <stroke            android:width="1dp"            android:color="#ff00ff"            android:dashWidth="1dp"            android:dashGap="2dp" />    </shape></rotate>

However, the only problem is the layout params defined in your layout xml will be the dimensions used to draw the original shape. Meaning if you want your line to be 30dp tall, you need to define a layout_width of 30dp in your layout xml. But the final width will also be 30dp in that case, which is likely undesirable for most situations. This essentially means both width and height have to be the same value, the value of your desired length for the line. I couldn't figure out how to fix this.

This seems to be the "android way" solution, but unless there's some fix or workaround for the dimensions issue I mention then this likely won't work for most people. What we really need is an orientation attribute in <shape/> or <stroke/>.

You can also try referencing another drawable in the rotate tag's attributes, such as:

<rotate xmlns:android="http://schemas.android.com/apk/res/android"    android:fromDegrees="90"    android:toDegrees="90"    android:drawable="@drawable/horizontal_line" />

However I haven't tested this and expect it to have the same issues.

-- EDIT --

Oh, I actually figured out a fix. You can use a negative margin in your layout xml to get rid of the undesired extra space. Such as:

<ImageView    android:layout_width="35dp"    android:layout_height="35dp"    android:layout_marginLeft="-15dp"    android:layout_marginRight="-15dp"    android:src="@drawable/dashed_vertical_line" />

shareimprove this answer

edited Oct 6 '14 at 19:15

Jared Burrows

30.9k16100132

answered Sep 22 '10 at 20:56

cephus

1,317910

 

4 

while the negative margin will work for 99% of the devices....just know, there are devices out there that will Force Close if you do this. Some devices have trouble inflating a negative margin – Kent Andersen Nov 30 '12 at 4:44

 

@cephus I use your first code, but I need the line on top of the view. It's in the center of my view. How can I set a gravity for it(inside the shape xml file)? – Behzad Jan 10 '13 at 19:22

 

Negative margin... genius. – zgc7009 Dec 31 '15 at 18:32

add a comment

up vote15down vote

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"  android:shape="rectangle" >    <stroke android:width="1dp" android:color="@color/white" />    <size android:width="2dp" /></shape>

Work's for me . Put it as background of view with fill_parent or fixed sized in dp height

shareimprove this answer

edited Oct 4 '12 at 20:21

answered Sep 8 '12 at 12:43

logcat

2,44711832

 

add a comment

up vote9down vote

I came up with a different solution. The idea is to fill the drawable first with the color that you like the line to be and then fill the whole area again with the background color while using left or right padding. Obviously this only works for a vertical line in the far left or right of your drawable.

<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android" >    <item android:drawable="@color/divider_color" />    <item android:left="6dp" android:drawable="@color/background_color" /></layer-list>

shareimprove this answer

answered Jun 27 '13 at 15:13

Eric Kok

1,49531928

 

 

I needed background with borders on the left, right, bottom and this worked for me, thanks! – Andrii ChernenkoAug 2 '13 at 10:02 

 

Awesome, with this I managed to create neat dividers in my LinearLayout (showDividers="middle"). To get a 2dp divider, I needed to specify android:left="3dp" here. – Jonik Dec 30 '13 at 10:14 

 

Tip: to make this drawable useful more generally, use @android:color/transparent instead of hardcoding@color/background_color. – Jonik Dec 30 '13 at 10:16

 

Actually for my vertical divider needs, this solution is even simpler. :) – Jonik Dec 30 '13 at 10:28

 

@Jonik Sure, but that only works with a fixed height view, not with wrap_content. – Eric Kok Mar 13 '14 at 14:09

show 1 more comment

up vote7down vote

You can use the rotate attribute

 <item>    <rotate        android:fromDegrees="90"        android:toDegrees="90"        android:pivotX="50%"        android:pivotY="50%" >        <shape            android:shape="line"            android:top="1dip" >            <stroke                android:width="1dip"                 />        </shape>    </rotate></item>

shareimprove this answer

answered Mar 17 '15 at 6:00

user4679242

7911

 

 

Please explain a bit more why this is a better answer... – fijas Mar 17 '15 at 6:20

4 

This is definitely a better (or the best) answer because, while @commonsware's answer suffice for normal vertical lines. If we wan't to create dashed lines (say for example), this is the only answer that would work properly. – Subin Sebastian Aug 25 '15 at 4:43

add a comment

up vote4down vote

I needed to add my views dynamically/programmatically, so adding an extra view would have been cumbersome. My view height was WRAP_CONTENT, so I couldn't use the rectangle solution. I found a blog-post here about extending TextView, overriding onDraw() and painting in the line, so I implemented that and it works well. See my code below:

public class NoteTextView extends TextView {    public NoteTextView(Context context) {       super(context);    }    private Paint paint = new Paint();    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        paint.setColor(Color.parseColor("#F00000FF"));        paint.setStrokeWidth(0);        paint.setStyle(Paint.Style.FILL);        canvas.drawLine(0, 0, 0, getHeight(), paint);    }}

I needed a vertical line on the left, but the drawline parameters are drawLine(startX, startY, stopX, stopY, paint) so you can draw any straight line in any direction across the view. Then in my activity I have NoteTextView note = new NoteTextView(this); Hope this helps.

shareimprove this answer

answered Jan 21 '13 at 13:24

willlma

4,0891434

 

add a comment

up vote3down vote

its very simple... to add a vertical line in android xml...

<Viewandroid:layout_width="fill_parent"android:layout_height="1dp"android:layout_marginTop="5dp"android:rotation="90"android:background="@android:color/darker_gray"/>

shareimprove this answer

answered Dec 23 '13 at 15:54

user3130068

391

 

 

This works great when you can't use fill_parent for height because the parent height is set to wrap_content. – Sergey Aldoukhov Nov 15 '14 at 19:53

add a comment

up vote2down vote

Depends, where you want to have the vertical line, but if you want a vertical border for example, you can have the parent view have a background a custom drawable. And you can then define the drawable like this:

<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android" >    <item>        <shape            android:shape="rectangle">            <stroke android:width="1dp" android:color="#000000" />            <solid android:color="#00ffffff" />        </shape>    </item>    <item android:right="1dp">        <shape android:shape="rectangle">            <solid android:color="#00ffffff" />        </shape>    </item></layer-list>

This example will create a 1dp thin black line on the right side of the view, that will have this drawable as an background.

shareimprove this answer

answered May 7 '14 at 9:31

Lukas1

4271419

 

add a comment

up vote1down vote

You can use a shape but instead of a line make it rectangle.

android:shape="rectangle"><stroke    android:width="5dp"    android:color="#ff000000"    android:dashGap="10px"    android:dashWidth="30px" />

and In your layout use this...

<ImageView    android:layout_width="7dp"    android:layout_height="match_parent"    android:src="@drawable/dashline"    android:layout_alignParentTop="true"    android:layout_centerHorizontal="true"    android:layerType="software"/>

You might have to play with the width, depending on the size of the dashes, to get it into a single line.

Hope this helps Cheers

shareimprove this answer

answered Nov 6 '13 at 10:23

Boxlady

8315

 

add a comment

up vote0down vote

add this in your styles.xml        <style name="Divider">            <item name="android:layout_width">1dip</item>            <item name="android:layout_height">match_parent</item>            <item name="android:background">@color/divider_color</item>        </style>        <style name="Divider_invisible">            <item name="android:layout_width">1dip</item>            <item name="android:layout_height">match_parent</item>        </style>then wrap this style in a linear layout where you want the vertical line, I used the vertical line as a column divider in my table.      <TableLayout                android:id="@+id/table"                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:orientation="horizontal"                android:stretchColumns="*" >                <TableRow                    android:id="@+id/tableRow1"                    android:layout_width="fill_parent"                    android:layout_height="match_parent"                    android:background="#92C94A" >                    <TextView                        android:id="@+id/textView11"                        android:paddingBottom="10dp"                        android:paddingLeft="5dp"                        android:paddingRight="5dp"                        android:paddingTop="10dp" />    //...................................................................                        <LinearLayout                        android:layout_width="1dp"                        android:layout_height="match_parent" >                        <View style="@style/Divider_invisible" />                    </LinearLayout>        //...................................................................                    <TextView                        android:id="@+id/textView12"                        android:paddingBottom="10dp"                        android:paddingLeft="5dp"                        android:paddingRight="5dp"                        android:paddingTop="10dp"                        android:text="@string/main_wo_colon"                        android:textColor="@color/white"                        android:textSize="16sp" />  //...............................................................                      <LinearLayout                        android:layout_width="1dp"                        android:layout_height="match_parent" >                        <View style="@style/Divider" />                    </LinearLayout>    //...................................................................                    <TextView                        android:id="@+id/textView13"                        android:paddingBottom="10dp"                        android:paddingLeft="5dp"                        android:paddingRight="5dp"                        android:paddingTop="10dp"                        android:text="@string/side_wo_colon"                        android:textColor="@color/white"                        android:textSize="16sp" />                    <LinearLayout                        android:layout_width="1dp"                        android:layout_height="match_parent" >                        <View style="@style/Divider" />                    </LinearLayout>                    <TextView                        android:id="@+id/textView14"                        android:paddingBottom="10dp"                        android:paddingLeft="5dp"                        android:paddingRight="5dp"                        android:paddingTop="10dp"                        android:text="@string/total"                        android:textColor="@color/white"                        android:textSize="16sp" />                </TableRow>                <!-- display this button in 3rd column via layout_column(zero based) -->                <TableRow                    android:id="@+id/tableRow2"                    android:layout_width="match_parent"                    android:layout_height="match_parent"                    android:background="#6F9C33" >                    <TextView                        android:id="@+id/textView21"                        android:padding="5dp"                        android:text="@string/servings"                        android:textColor="@color/white"                        android:textSize="16sp" />                    <LinearLayout                        android:layout_width="1dp"                        android:layout_height="match_parent" >                        <View style="@style/Divider" />                    </LinearLayout>    ..........    .......    ......

shareimprove this answer

answered May 15 '14 at 13:00

YasirAzgar

17219

 

add a comment

up vote-1down vote

I created a RelativeLayout with a LinearLayout and a View as childs. The LinearLayout (I don't know if it can be a RelativeLayout as well) contains the Views as normal, and the View is the line.

Here's the code:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent">    <LinearLayout        android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:layout_alignParentLeft="true">        <-- Your views here -->    </LinearLayout>    <View        android:layout_width="1dp"        android:layout_height="fill_parent"        android:background="#000000"        android:layout_alignParentRight="true" /></RelativeLayout>

shareimprove this answer

edited Feb 28 '12 at 13:56

Matt Fenwick

27.6k1191152

answered Feb 28 '12 at 9:33

Zaggo0

867

 

add a comment

up vote-1down vote

 <View        android:layout_width="2dp"        android:layout_height="40dp"        android:background="#ffffff"        android:padding="10dp" />`

shareimprove this answer

answered Jan 12 '15 at 8:46

Surender Kumar

623413

 

add a comment

up vote-2down vote

Very simple and I think better approach.

<TextView            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:textAppearance="?android:attr/textAppearanceMedium"            android:text="Section Text"            android:id="@+id/textView6"            android:textColor="@color/emphasis"            android:drawableBottom="@drawable/underline"/>

underline.xml

<?xml version="1.0" encoding="utf-8"?><shape      xmlns:android="http://schemas.android.com/apk/res/android"      android:shape="rectangle">      <size android:width="1000dp" android:height="2dp" />      <solid android:color="@color/emphasis"/></shape>

shareimprove this answer

answered Nov 18 '14 at 5:27

https://stackoverflow.com/questions/2658772/vertical-line-using-xml-drawable