Style bottom Line in Android

Question

I need to create an android shape so that only the bottom has stroke  a dashed line   When I try the following  the stroke bisects the shape right through the center  Does anyone know how to get it right  the stroke needs to be the bottom line border  I am using the shape as a background to a TextView  Please  never mind why I need it    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 solid android color   1bd4f6    gt           lt  shape gt       lt  item gt        lt item gt           lt shape android shape  line   gt               lt padding android bottom  1dp    gt                lt stroke                 android dashGap  10px                  android dashWidth  10px                  android width  1dp                  android color   ababb2    gt           lt  shape gt       lt  item gt    lt  layer-list gt

User · Answer

This does the trick      lt item  gt       lt shape android shape  rectangle  gt           lt solid android color   YOUR BOTTOM LINE COLOR   gt       lt  shape gt   lt  item gt    lt item android bottom  1 5dp  gt       lt shape android shape  rectangle  gt           lt solid android color   YOUR BG COLOR   gt       lt  shape gt   lt  item gt

User · Answer

A Simple solution   Create a drawable file as edittext stroke xml in drawable folder  Add the below code   lt  xml version  quot 1 0 quot  encoding  quot utf-8 quot   gt   lt shape xmlns android  quot http   schemas android com apk res android quot      android shape  quot line quot      gt       lt stroke         android width  quot 1dp quot          android color  quot  android color white quot   gt       lt  stroke gt   lt  shape gt   In layout file   add the drawable to edittext as  android drawableBottom  quot  drawable edittext stroke quot    lt EditText       android textColor  quot  android color white quot        android layout width  quot match parent quot        android layout height  quot wrap content quot        android drawableBottom  quot  drawable edittext stroke quot          gt

User · Answer

Usually for similar tasks - I created layer-list drawable like this one    lt layer-list xmlns android  http   schemas android com apk res android  gt       lt item gt           lt shape android shape  rectangle  gt           lt solid android color   color underlineColor   gt           lt  shape gt       lt  item gt   lt item android bottom  3dp  gt       lt shape android shape  rectangle  gt           lt solid android color   color buttonColor   gt       lt  shape gt   lt  item gt    The idea is that first you draw the rectangle with underlineColor and then on top of this one you draw another rectangle with the actual buttonColor but applying bottomPadding  It always works   But when I needed to have buttonColor to be transparent I couldn t use the above drawable  I found one more solution   lt layer-list xmlns android  http   schemas android com apk res android  gt   lt item gt       lt shape android shape  rectangle  gt           lt solid android color   android color transparent   gt       lt  shape gt   lt  item gt    lt item android drawable   drawable white box  android gravity  bottom      android height  2dp   gt   lt  layer-list gt     as you can see here the mainButtonColor is transparent and white box is just a simple rectangle drawable with white Solid

User · Answer

This answer is for those google searchers who want to show dotted bottom border of EditText like here    Create dotted xml inside drawable folder and paste these   lt layer-list xmlns android  http   schemas android com apk res android  gt       lt item         android bottom  1dp          android left  -2dp          android right  -2dp          android top  -2dp  gt           lt shape android shape  rectangle  gt               lt stroke                 android width  0 5dp                  android color   android color black    gt                   lt solid android color   ffffff    gt               lt stroke                 android width  1dp                  android color   030310                  android dashGap  5dp                  android dashWidth  5dp    gt               lt padding                 android bottom  5dp                  android left  5dp                  android right  5dp                  android top  5dp    gt           lt  shape gt       lt  item gt   lt  layer-list gt    Then simply set the android background attribute to dotted xml we just created  Your EditText looks like this    lt EditText     android id    id editText      android layout width  match parent      android layout height  wrap content      android text  Some Text      android background   drawable dotted    gt

User · Answer

it is completely transparent Edittext with transparent background       lt item gt       lt shape android shape  rectangle   gt           lt solid android color   color transparent    gt       lt  shape gt   lt  item gt    lt item android top  -3dp  android right  -3dp  android left  -3dp  gt       lt shape gt           lt solid android color   android color transparent    gt           lt stroke              android width  2dp              android color   color bottomline    gt       lt  shape gt   lt  item gt

User · Answer

Try next xml drawable code        lt layer-list gt           lt item android top  -2dp  android right  -2dp  android left  -2dp  gt               lt shape gt                   lt solid android color   android color transparent    gt                   lt stroke                     android width  1dp                      android color   fff    gt               lt  shape gt           lt  item gt       lt  layer-list gt

User · Answer

I think you do not need to use shape if I understood you   If you are looking as shown in following image then use following layout      lt RelativeLayout xmlns android  http   schemas android com apk res android  xmlns tools  http   schemas android com tools  android layout width  match parent  android layout height  match parent   gt    lt RelativeLayout     android layout width  wrap content      android layout height  wrap content      android layout centerInParent  true      android background   1bd4f6      android paddingBottom  4dp   gt        lt TextView         android layout width  200dp          android layout height  wrap content          android background   ababb2          android padding  5dp          android text  Hello Android    gt    lt  RelativeLayout gt     lt  RelativeLayout gt    EDIT  play with these properties you will get result      android top  dimension      android right  dimension      android bottom  dimension      android left  dimension    try 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 solid android color   1bd4f6    gt       lt  shape gt   lt  item gt    lt item android top  20px      android left  0px  gt       lt shape android shape  line    gt           lt padding android bottom  1dp    gt            lt stroke             android dashGap  10px              android dashWidth  10px              android width  1dp              android color   ababb2    gt       lt  shape gt   lt  item gt    lt  layer-list gt

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 top  -6dp          android left  -6dp          android right  -6dp          android bottom  0dp  gt            lt shape android shape  rectangle  gt               lt solid android color   88FFFF00   gt               lt stroke                 android width  5dp                  android color   FF000000   gt           lt  shape gt       lt  item gt   lt  layer-list gt

User · Answer

I feel it is straightforward  without all this negative paddings or storks    lt layer-list xmlns android  http   schemas android com apk res android  gt        lt item android drawable   color main bg color   gt       lt item android gravity  bottom  gt           lt shape android shape  rectangle  gt               lt size android height  5dp   gt               lt solid android color   color bottom bar color   gt           lt  shape gt       lt  item gt   lt  layer-list gt

User · Answer

A Simple 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 bottom  -1dp          android left  -1dp          android right  -1dp          android top  -1dp  gt            lt shape android shape  rectangle  gt                lt solid android color   AARRGGBB    gt                lt stroke                 android width  5dp                  android color   android color red                  android dashWidth  10dp                  android dashGap  12dp    gt            lt  shape gt       lt  item gt   lt  layer-list gt    And finally we have something like that

User · Answer

It s kind of a hack  but I think this is probably the best way to do it  The dashed line will always be on the bottom  regardless of the height     lt layer-list xmlns android  http   schemas android com apk res android  gt        lt item gt           lt shape android shape  rectangle   gt               lt solid android color   1bd4f6    gt           lt  shape gt       lt  item gt        lt item android top  -2dp  android right  -2dp  android left  -2dp  gt           lt shape gt               lt solid android color   android color transparent    gt               lt stroke                 android dashGap  10px                  android dashWidth  10px                  android width  1dp                  android color   ababb2    gt           lt  shape gt       lt  item gt    lt  layer-list gt    Explanation   The second shape is transparent rectangle with a dashed outline  The key in making the border only appear along the bottom lies in the negative margins set the other sides  These negative margins  push  the dashed line outside the drawn area on those sides  leaving only the line along the bottom  One potential side-effect  which I haven t tried  is that  for views that draw outside their own bounds  the negative-margin borders may become visible

User · Answer

use this xml change the color with your choice    lt item gt       lt layer-list gt           lt item gt               lt shape gt                   lt solid android color   color gray 500    gt                lt  shape gt           lt  item gt           lt  -- CONTENT LAYER -- gt           lt item android bottom  2dp   gt               lt shape gt                   lt solid android color   ffffff    gt               lt  shape gt           lt  item gt       lt  layer-list gt   lt  item gt    In Case if you want programmatically  public static Drawable getStorkLineDrawable  ColorInt int colorStrok  int    iSize  int left  int top  int right  int bottom         GradientDrawable gradientDrawable   new GradientDrawable        gradientDrawable setShape GradientDrawable RECTANGLE       gradientDrawable setStroke iSize  colorStrok       LayerDrawable layerDrawable   new LayerDrawable new Drawable   gradientDrawable        layerDrawable setLayerInset 0  left  top  right  bottom       return layerDrawable      call this method like     Drawable yourLineDrawable   getStorkLineDrawable yourColor  iSize  -iSize  -iSize  -iSize  0

User · Answer

This worked best for me    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 top  -5dp  android left  -5dp  android right  -5dp  android bottom  0dp  gt           lt shape android shape  rectangle  gt               lt stroke android width  4dp  android color   ff0000   gt           lt  shape gt       lt  item gt   lt  layer-list gt    Shows the line on the bottom only  You can easily change with stroke width to size you like and also update the top  left  right on the  accordingly

User · Answer

easiest way to do this is put after that view where you want bottom border       lt  xml version  1 0  encoding  utf-8   gt       lt View     android layout width  match parent      android layout height  1dp      android background   color colorPrimary    gt

[android] Style bottom Line in Android

Examples related to android

Examples related to android-drawable

Examples related to android-styles

Examples related to layer-list