Vertical line using XML drawable
Solution 1
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.
Solution 2
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" />
Solution 3
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>
Solution 4
<?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
Solution 5
I think this is the simplest solution:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:gravity="center">
<shape android:shape="rectangle">
<size android:width="1dp" />
<solid android:color="#0000FF" />
</shape>
</item>
</layer-list>
Related videos on Youtube
Kaspa
Updated on August 06, 2021Comments
-
Kaspa almost 3 years
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 ;)
-
Kaspa about 14 yearsthanks 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? :)
-
Kent Andersen over 11 yearswhile 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
-
Behzad over 11 years@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)?
-
Andrii Chernenko almost 11 yearsI needed background with borders on the left, right, bottom and this worked for me, thanks!
-
Jonik over 10 yearsAwesome, with this I managed to create neat dividers in my LinearLayout (
showDividers="middle"
). To get a 2dp divider, I needed to specifyandroid:left="3dp"
here. -
Jonik over 10 yearsTip: to make this drawable useful more generally, use
@android:color/transparent
instead of hardcoding@color/background_color
. -
Jonik over 10 yearsActually for my vertical divider needs, this solution is even simpler. :)
-
Eric Kok about 10 years@Jonik Sure, but that only works with a fixed height view, not with
wrap_content
. -
Todd Freed over 9 yearsHere is the perfection of this technique : stackoverflow.com/questions/10457135/…
-
Sergey Aldoukhov over 9 yearsThis works great when you can't use fill_parent for height because the parent height is set to wrap_content.
-
C-- over 8 yearsThis 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.
-
George over 6 yearsUsing marginRight/Start and Left/End is also sometimes interesting to get space on the sides.
-
Bob Barbara over 4 yearsWonderful. Add
android:height
tosize
if you want to control also that dimension.