Vertical line using XML drawable

Question

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:

Answer 1

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.

Answer 2

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>

Answer 3

To make a vertical line, just use a rectangle with width of 1dp:

<shape>
    <size
        android:width="1dp"
        android:height="16dp" />
    <solid
        android:color="#c8cdd2" />
</shape>

Don't use stroke, use solid (which is the "fill" color) to specify the color of the line.

Answer 4

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

Answer 5

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

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

Answer 6

Instead of a shape, you could try a View:

<View
    android:layout_width="1dp"
    android:layout_height="match_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="match_parent"
    android:layout_height="1dp"
    android:background="#FF0000FF" />

for a horizontal line.