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    lt shape xmlns android  http   schemas android com apk res android  android shape  line  gt       lt stroke android width  1dp  android color   0000FF   gt       lt size android height  50dp    gt        lt  shape gt    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  lt item gt  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

User · Answer

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

User · Answer

its very simple    to add a vertical line in android xml      lt View android layout width  fill parent  android layout height  1dp  android layout marginTop  5dp  android rotation  90  android background   android color darker gray   gt

User · Answer

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    lt  xml version  1 0  encoding  utf-8   gt   lt layer-list xmlns android  http   schemas android com apk res android   gt       lt item android drawable   color divider color    gt       lt item android left  6dp  android drawable   color background color    gt   lt  layer-list gt

User · Answer

To make a vertical line  just use a rectangle with width of 1dp    lt shape gt       lt size         android width  1dp          android height  16dp    gt       lt solid         android color   c8cdd2    gt   lt  shape gt    Don t use stroke  use solid  which is the  fill  color  to specify the color of the line

User · Answer

You can use a shape but instead of a line make it rectangle    android shape  rectangle  gt   lt stroke     android width  5dp      android color   ff000000      android dashGap  10px      android dashWidth  30px    gt      and In your layout use this      lt 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   gt    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

User · Answer

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

User · Answer

It looks like no one mentioned this option    lt  xml version  1 0  encoding  utf-8   gt   lt layer-list xmlns android  http   schemas android com apk res android   gt       lt item android drawable   color white  android width  1dp   gt   lt  layer-list gt

User · Answer

I think this is the simplest solution    lt  xml version  1 0  encoding  utf-8   gt   lt layer-list xmlns android  http   schemas android com apk res android  gt        lt item         android gravity  center  gt           lt shape android shape  rectangle  gt               lt size android width  1dp    gt               lt solid android color   0000FF    gt           lt  shape gt       lt  item gt    lt  layer-list gt

User · Answer

Instead of a shape  you could try a View   lt View     android layout width  quot 1dp quot      android layout height  quot match parent quot      android background  quot  FF0000FF quot    gt   I have only used this for horizontal lines  but I would think it would work for vertical lines as well  Use   lt View     android layout width  quot match parent quot      android layout height  quot 1dp quot      android background  quot  FF0000FF quot    gt   for a horizontal line

User · Answer

add this in your styles xml           lt style name  Divider  gt               lt item name  android layout width  gt 1dip lt  item gt               lt item name  android layout height  gt match parent lt  item gt               lt item name  android background  gt  color divider color lt  item gt           lt  style gt            lt style name  Divider invisible  gt               lt item name  android layout width  gt 1dip lt  item gt               lt item name  android layout height  gt match parent lt  item gt           lt  style gt   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          lt TableLayout                 android id    id table                  android layout width  match parent                  android layout height  wrap content                  android orientation  horizontal                  android stretchColumns      gt                    lt TableRow                     android id    id tableRow1                      android layout width  fill parent                      android layout height  match parent                      android background   92C94A   gt                        lt TextView                         android id    id textView11                          android paddingBottom  10dp                          android paddingLeft  5dp                          android paddingRight  5dp                          android paddingTop  10dp    gt                                                                                                      lt LinearLayout                         android layout width  1dp                          android layout height  match parent   gt                            lt View style   style Divider invisible    gt                       lt  LinearLayout gt                                                                                                     lt 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    gt                                                                                             lt LinearLayout                         android layout width  1dp                          android layout height  match parent   gt                            lt View style   style Divider    gt                       lt  LinearLayout gt                                                                                                  lt 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    gt                        lt LinearLayout                         android layout width  1dp                          android layout height  match parent   gt                            lt View style   style Divider    gt                       lt  LinearLayout gt                        lt 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    gt                   lt  TableRow gt                    lt  -- display this button in 3rd column via layout column zero based  -- gt                    lt TableRow                     android id    id tableRow2                      android layout width  match parent                      android layout height  match parent                      android background   6F9C33   gt                        lt TextView                         android id    id textView21                          android padding  5dp                          android text   string servings                          android textColor   color white                          android textSize  16sp    gt                        lt LinearLayout                         android layout width  1dp                          android layout height  match parent   gt                            lt View style   style Divider    gt                       lt  LinearLayout gt

User · Answer

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    lt  xml version  1 0  encoding  utf-8   gt   lt layer-list xmlns android  http   schemas android com apk res android   gt       lt item gt           lt shape             android shape  rectangle  gt               lt stroke android width  1dp  android color   000000    gt               lt solid android color   00ffffff    gt            lt  shape gt       lt  item gt        lt item android right  1dp  gt           lt shape android shape  rectangle  gt               lt solid android color   00ffffff    gt           lt  shape gt       lt  item gt    lt  layer-list gt    This example will create a 1dp thin black line on the right side of the view  that will have this drawable as an background

User · Answer

lt  xml version  1 0  encoding  utf-8   gt   lt layer-list xmlns android  http   schemas android com apk res android  gt        lt item         android bottom  -3dp          android left  -3dp          android top  -3dp  gt            lt shape android shape  rectangle  gt               lt solid android color   color colorPrimary    gt               lt stroke                 android width  2dp                  android color   1fc78c    gt           lt  shape gt        lt  item gt    lt  layer-list gt

User · Answer

You can use the rotate attribute    lt item gt       lt rotate         android fromDegrees  90          android toDegrees  90          android pivotX  50           android pivotY  50    gt           lt shape             android shape  line              android top  1dip   gt               lt stroke                 android width  1dip                     gt           lt  shape gt       lt  rotate gt   lt  item gt

User · Answer

lt  xml version  1 0  encoding  utf-8   gt   lt shape xmlns android  http   schemas android com apk res android    android shape  rectangle   gt       lt stroke android width  1dp  android color   color white    gt       lt size android width  2dp    gt   lt  shape gt    Work s for me   Put it as background of view with fill parent or fixed sized in dp height

User · Answer

Seems like there s a bug when using rotate drawable in Android M and above as per the thread here   stackoverflow com a 8716798 3849039 As per my opinion  creating a custom view is the best solution for this  Below link save my time  https   gist github com mlagerberg 4aab34e6f8bc66b1eef7 revisions

User · Answer

lt View         android layout width  2dp          android layout height  40dp           android background   ffffff          android padding  10dp    gt

User · Answer

Although  CommonsWare s solution works  it can t be used e  g  in a layer-list drawable  The options combining  lt rotate gt  and  lt shape gt  cause the problems with size  Here is a solution using the Android Vector Drawable  This Drawable is a 1x10dp white line  can be adjusted by modifying the width  height and strokeColor properties    lt  xml version  quot 1 0 quot  encoding  quot utf-8 quot   gt   lt vector xmlns android  quot http   schemas android com apk res android quot      android viewportWidth  quot 1 quot      android viewportHeight  quot 10 quot      android width  quot 1dp quot      android height  quot 10dp quot  gt        lt path         android strokeColor  quot  FFFFFF quot          android strokeWidth  quot 1 quot          android pathData  quot M0 5 0 V10 quot    gt    lt  vector gt

[android] Vertical line using XML drawable

Examples related to android

Examples related to android-layout

Examples related to line

Examples related to android-xml

Examples related to android-drawable