Is there an easy way to add a border to the top and bottom of an Android View

Question

I have a TextView and I d like to add a black border along its top and bottom borders   I tried adding android drawableTop and android drawableBottom to the TextView  but that only caused the entire view to become black    lt TextView     android background   android color green      android layout width  fill parent      android layout height  wrap content      android drawableTop   android color black      android drawableBottom   android color black      android text  la la la    gt    Is there a way to easily add a top and bottom border to a View  in particular  a TextView  in Android

User · Answer

Just to enforce  phreakhead   s and user1051892   s answers   lt item android bottom android left android right android top gt  if negative  must to be greater than  lt stroke android width gt   If not  item  s painting will be mixed with stroke  s painting and you may think these values are not working

User · Answer

First make a xml file with contents shown below and name it border xml and place it inside the layout folder inside the res directory   lt  xml version  1 0  encoding  UTF-8   gt   lt shape xmlns android  http   schemas android com apk res android  gt       lt stroke android width  1dp  android color   0000    gt       lt padding android left  0dp  android top  1dp  android right  0dp          android bottom  1dp    gt   lt  shape gt    After that inside the code use  TextView tv    TextView findElementById R id yourTextView   tv setBackgroundResource R layout border     This will make a black line on top and bottom of the TextView

User · Answer

The currently accepted answer doesn t work  It creates thin vertical borders on the left and right sides of the view as a result of anti-aliasing   This version works perfectly  It also allows you to set the border widths independently  and you can also add borders on the left   right sides if you want  The only drawback is that it does NOT support transparency   Create an xml drawable named  res drawable top bottom borders xml with the code below and assign it as a TextView s background property     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   DDDD00    gt   lt  -- border color -- gt           lt  shape gt       lt  item gt        lt item         android bottom  1dp           android top  1dp  gt     lt  -- adjust borders width here -- gt           lt shape android shape  rectangle  gt               lt solid android color   FFFFFF    gt    lt  -- background color -- gt           lt  shape gt       lt  item gt   lt  layer-list gt    Tested on Android KitKat through Marshmallow

User · Answer

You can also use a 9-path to do your job  Create it so that colored pixel do not multiply in height but only the transparent pixel

User · Answer

Add file to res 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 left  -2dp  android right  -2dp  gt               lt shape android shape  rectangle  gt                   lt stroke                     android width  1dp                      android color   000000    gt               lt  shape gt           lt  item gt       lt  layer-list gt    Add link on this file to background property

User · Answer

I ve used a trick so that the border is displayed outside the container  With this trick only a line is drawn so the background will be shown of the underlying view    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  -2dp          android right  -2dp          android top  -2dp  gt           lt shape android shape  rectangle   gt               lt stroke                 android width  1dp                  android color   FF000000    gt                lt solid android color   00FFFFFF    gt                lt padding android left  10dp                  android right  10dp                  android top  10dp                  android bottom  10dp    gt           lt  shape gt       lt  item gt    lt  layer-list gt

User · Answer

lt TextView     android id    id textView3      android layout width  match parent      android layout height  2dp      android background   72cdf4      android text   aa    gt    Just Add this TextView below the text where you want to add the border

User · Answer

Option 1  Shape Drawable  This is the simplest option if you want a border around a layout or view in which you can set the background  Create an XML file in the drawable folder that looks something like this    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 solid android color   8fff93    gt        lt stroke         android width  1px          android color   000    gt    lt  shape gt    You can remove the solid if you don t want a fill  The set background   drawable your shape drawable  on your layout view   Option 2  Background View  Here s a little trick I ve used in a RelativeLayout  Basically you have a black square under the view you want to give a border  and then give that view some padding  not margin   so the black square shows through at the edges   Obviously this only works properly if the view doesn t have any transparent areas  If it does I would recommend you write a custom BorderView which only draws the border - it should only be a few dozen lines of code    lt View     android id    id border      android layout width  wrap content      android layout height  wrap content      android layout alignBottom    id image      android layout alignLeft    id image      android layout alignRight    id image      android layout alignTop    id main image      android background   000    gt    lt ImageView     android id    id image      android layout width  wrap content      android layout height  wrap content      android layout         android padding  1px      android src   drawable        gt    If you re wondering  it does work with adjustViewBounds true  However  it doesn t work if you want to have a background in an entire RelativeLayout  because there is a bug that stops you filling a RelativeLayout with a View  In that case I d recommend the Shape drawable   Option 3  9-patch  A final option is to use a 9-patch drawable like this one     You can use it on any view where you can set android background   drawable       And yes it does need to be 6x6 - I tried 5x5 and it didn t work   The disadvantage of this method is you can t change the colours very easily  but if you want fancy borders  e g  only a border at the top and bottom  as in this question  then you may not be able to do them with the Shape drawable  which isn t very powerful   Option 4  Extra views  I forgot to mention this really simple option if you only want borders above and below your view  You can put your view in a vertical LinearLayout  if it isn t already  and then add empty Views above and below it like this    lt View android background   000  android layout width  match parent  android layout height  1px   gt

User · Answer

My answers is based on  Emile version but I use transparent color instead of solid  This example will draw a 2dp bottom border    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  2dp                       android color   50C0E9    gt               lt solid android color   android color transparent    gt           lt  shape gt       lt  item gt       lt item  android bottom  2dp   gt           lt shape android shape  rectangle   gt               lt stroke  android width  2dp                       android color   color bgcolor    gt               lt solid android color   android color transparent    gt           lt  shape gt       lt  item gt   lt  layer-list gt     color bgcolor is the color of the background on wich you draw your view with border   If you want to change the position of the border change the offset with one of   android bottom  2dp  android top  2dp  android right  2dp  android left  2dp    or combine them to have 2 or more borders   android bottom  2dp  android top  2dp

User · Answer

Here is a way to achieve 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 stroke                     android width  1dp                      android color   color grey coaching text    gt               lt  shape gt           lt  item gt            lt item             android bottom  1dp              android top  1dp  gt               lt shape android shape  rectangle  gt                   lt solid android color   color white    gt               lt  shape gt           lt  item gt       lt  layer-list gt    First item for stroke and second one for solid background  Hiding left and right borders

User · Answer

lt shape xmlns android  http   schemas android com apk res android  gt    lt solid android color   color light grey1    gt   lt stroke     android width  1dip      android color   color light grey1    gt    lt corners     android bottomLeftRadius  0dp      android bottomRightRadius  0dp      android topLeftRadius  5dp      android topRightRadius  5dp    gt        lt  shape gt

User · Answer

Simply add Views at the top and bottom of the View    lt  xml version  1 0  encoding  utf-8   gt   lt android support constraint ConstraintLayout xmlns android  http   schemas android com apk res android      xmlns app  http   schemas android com apk res-auto      android layout width  match parent      android layout height  match parent  gt        lt View         android layout width  match parent          android layout height  1dp          android background   color your color          app layout constraintBottom toTopOf    id textView          app layout constraintEnd toEndOf    id textView          app layout constraintStart toStartOf    id textView    gt        lt TextView         android id    id textView          android layout width  0dp          android layout height  wrap content          android layout marginTop  32dp          android gravity  center          android text  Testing          app layout constraintEnd toEndOf  parent          app layout constraintStart toStartOf  parent          app layout constraintTop toTopOf  parent    gt        lt View         android layout width  match parent          android layout height  1dp          android background   color your color          app layout constraintEnd toEndOf    id textView          app layout constraintStart toStartOf    id textView          app layout constraintTop toBottomOf    id textView    gt    lt  android support constraint ConstraintLayout gt

User · Answer

In android 2 2 you could do the following    Create an xml drawable such as  res drawable textlines xml and assign this as a TextView s background property     lt TextView android text  My text with lines above and below  android background   drawable textlines    gt     res drawable textlines xml   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   FF000000    gt               lt solid android color   FFDDDDDD    gt            lt  shape gt      lt  item gt       lt item android top  1dp  android bottom  1dp  gt          lt shape          android shape  rectangle  gt               lt stroke android width  1dp  android color   FFDDDDDD    gt               lt solid android color   00000000    gt           lt  shape gt      lt  item gt    lt  layer-list gt    The down side to this is that you have to specify an opaque background colour  as transparencies won t work   At least i thought they did but i was mistaken   In the above example you can see that the solid colour of the first shape  FFdddddd is copied in the 2nd shapes stroke colour

User · Answer

Write down below code   lt View     android layout width  wrap content      android layout height  2dip      android layout below    id topics text      android layout marginTop  7dp      android layout margin  10dp      android background   ffffff    gt

User · Answer

Try wrapping the image with a linearlayout  and set it s background to the border color you want around the text   Then set the padding on the textview to be the thickness you want for your border

User · Answer

To add a 1dp white border at the bottom only and to have a transparent background you can use the following which is simpler than most answers here   For the TextView or other view add   android background   drawable borderbottom    And in the drawable directory add the following XML  called borderbottom xml   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  -2dp  android left  -2dp  android right  -2dp  gt           lt shape android shape  rectangle  gt               lt stroke android width  1dp  android color   ffffffff    gt               lt solid android color   00000000    gt           lt  shape gt       lt  item gt   lt  layer-list gt    If you want a border at the top  change the android top  -2dp  to android bottom  -2dp   The colour does not need to be white and the background does not need to be transparent either   The solid element may not be required  This will depend on your design  thanks V  Kalyuzhnyu    Basically  this XML will create a border using the rectangle shape  but then pushes the top  right and left sides beyond the render area for the shape  This leaves just the bottom border visible

User · Answer

Just to add my solution to the list    I wanted a semi transparent bottom border that extends past the original shape  So the semi-transparent border was outside the parent rectangle     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   33000000    gt   lt  -- Border colour -- gt       lt  shape gt     lt  item gt     lt item  android bottom  2dp   gt       lt shape android shape  rectangle   gt              lt solid android color   164586    gt       lt  shape gt     lt  item gt   lt  layer-list gt    Which gives me

User · Answer

So I wanted to do something slightly different  a border on the bottom ONLY  to simulate a ListView divider  I modified Piet Delport s answer and got 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   color background trans light    gt                lt  shape gt      lt  item gt        lt  -- this mess is what we have to do to get a bottom border only  -- gt      lt item android top  -2dp           android left  -2dp           android right  -2dp           android bottom  1px  gt          lt shape          android shape  rectangle  gt                   lt stroke android width  1dp  android color   color background trans mid    gt               lt solid android color   null    gt           lt  shape gt      lt  item gt    lt  layer-list gt    Note using px instead of dp to get exactly 1 pixel divider  some phone DPIs will make a 1dp line disappear

User · Answer

You can also wrap the view in a FrameLayout  then set the frame s background color and padding to what you want  however  the textview  by default has a  transparent  background  so you d need to change the textview s background color too

User · Answer

To change this    lt TextView     android text  My text      android background   drawable top bottom border   gt    I prefer this approach in  drawable top bottom border xml      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 gt               lt gradient                 android angle  270                  android startColor   000                  android centerColor   android color transparent                  android centerX  0 01    gt           lt  shape gt       lt  item gt       lt item gt           lt shape gt               lt gradient                 android angle  90                  android startColor   000                  android centerColor   android color transparent                  android centerX  0 01    gt           lt  shape gt       lt  item gt   lt  layer-list gt    This only makes the borders  not a rectangle that will appear if your background has a color

User · Answer

Just simply add border around the image view or view   lt ImageView                 android id    id imageView2                  android layout width  90dp                  android layout height  70dp                  android layout centerVertical  true                  android layout marginRight  10dp                  android layout toLeftOf    id imageView1                  android background   android color white                  android padding  5dip    gt      After that dynamically put color into your view or image view object  objView setBackgroundColor Color GREEN      VinodJ Abhishek

User · Answer

Simplest way to add borders to inset the borders using InsetDrawable following will show top border only     lt  xml version  1 0  encoding  utf-8   gt   lt inset xmlns android  http   schemas android com apk res android      android insetBottom  -2dp      android insetLeft  -2dp      android insetRight  -2dp  gt       lt shape android shape  rectangle  gt            lt solid android color   color light gray    gt           lt stroke             android width   5dp              android color   color dark gray    gt       lt  shape gt   lt  inset gt

User · Answer

Why not just create a 1dp high view with a background color  Then it can be easily placed where you want

User · Answer

Just as  Nic Hubbard said  there is a very easy way to add a border line    lt View     android layout width  match parent      android layout height  2dp      android background   000000   gt   lt  View gt    You can change the height and background color to whatever you want

[android] Is there an easy way to add a border to the top and bottom of an Android View?

Examples related to android

Examples related to border

Examples related to android-view

Examples related to textview