Border for an Image view in Android

Question

How can I set a border for an ImageView and change its color in Android

User · Answer

ImageView in xml file   lt ImageView             android id    id myImage              android layout width  100dp              android layout height  100dp               android padding  1dp              android scaleType  centerCrop              android cropToPadding  true              android background   drawable border image               android src   drawable ic launcher    gt    save below code with the name of border image xml and it should be in drawable folder   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 gradient         android angle  270          android endColor   ffffff          android startColor   ffffff    gt        lt corners android radius  0dp    gt        lt stroke         android width  0 7dp          android color   b4b4b4    gt   lt  shape gt    if you want to give rounded corner to the border of image then you may change a line in border xml file   lt corners android radius  4dp    gt

User · Answer

I found it so much easier to do this   1  Edit the frame to have the content inside  with 9patch tool    2  Place the ImageView inside a Linearlayout  and set the frame background or colour you want as the background of the Linearlayout  As you set the frame to have the content inside itself  your ImageView will be inside the frame  right where you set the content with the 9patch tool

User · Answer

Just add this code in your ImageView   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 oval quot  gt        lt solid         android color  quot  color white quot   gt        lt size         android width  quot 20dp quot          android height  quot 20dp quot   gt       lt stroke         android width  quot 4dp quot  android color  quot  android color black quot   gt       lt padding android left  quot 1dp quot  android top  quot 1dp quot  android right  quot 1dp quot          android bottom  quot 1dp quot    gt   lt  shape gt

User · Answer

Add the following code to a shape   lt gradient     android angle  quot 135 quot      android endColor  quot  FF444444 quot      android centerColor  quot  FFAAAAAA quot      android startColor  quot  FFFFFFFF quot   gt     t voila  you ve got a  more or less  indented border  with the light source set to left-top  Fiddle with the size of the bitmap  in relation to the size of the imageview  I used a 200dp x 200dp imageview and a bitmap of 196dp x 196dp in the example  with a radius of 14dp for the corners  and the padding to get the best result  Switch end and startcolor for a bevelled effect  Here s the full code of the shape you see in the image  save it in res drawable  e g  border shape xml    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  gt       lt gradient         android angle  quot 135 quot          android endColor  quot  FF444444 quot          android centerColor  quot  FFAAAAAA quot          android startColor  quot  FFFFFFFF quot   gt       lt padding         android top  quot 2dp quot          android left  quot 2dp quot          android right  quot 2dp quot          android bottom  quot 2dp quot   gt       lt corners         android radius  quot 30dp quot   gt   lt  shape gt   And call it in your imageview like this  android scaleType  quot center quot      android background  quot  drawable border shape quot  android cropToPadding  quot true quot  android adjustViewBounds  quot true quot   And here is the code for the bitmap with rounded corners  Bitmap getRoundedRectBitmap Bitmap bitmap  float radius        Paint paint   new Paint        PorterDuffXfermode pdmode   new PorterDuffXfermode PorterDuff Mode SRC IN       Bitmap bm   Bitmap createBitmap bitmap getWidth    bitmap getHeight    Bitmap Config ARGB 8888       Canvas canvas   new Canvas bm       Rect rect   new Rect 0  0  bitmap getWidth    bitmap getHeight         RectF rectF   new RectF rect       canvas drawARGB 0  0  0  0       paint setColor 0xff424242       canvas drawRoundRect rectF  radius  radius  paint       paint setXfermode pdmode       canvas drawBitmap bitmap  rect  rect  paint       return bm

User · Answer

You can use 9 patch in Android Studio to make borders  I was looking for a solution but I did not find any so I skipped that part  Then I went to the Google images of Firebase assets and I accidentally discovered that they use 9patch   Here s the link  https   developer android com studio write draw9patch You just need to drag where the edges are  It s just like border edge in Unity

User · Answer

Add a background Drawable like res drawables background xml    lt  xml version  1 0  encoding  UTF-8   gt   lt shape xmlns android  http   schemas android com apk res android  gt     lt solid android color   android color white    gt     lt stroke android width  1dp  android color   android color black    gt   lt  shape gt    Update the ImageView background in res layout foo xml        lt ImageView   android layout width  wrap content    android layout height  wrap content    android padding  1dp    android background   drawable background    android src   drawable bar    gt        Exclude the ImageView padding if you want the src to draw over the background

User · Answer

I set the below xml to the background of the Image View as Drawable  It works    lt  xml version  1 0  encoding  UTF-8   gt   lt shape xmlns android  http   schemas android com apk res android  gt       lt solid android color   FFFFFF    gt       lt stroke android width  1dp  android color   000000    gt       lt padding android left  1dp  android top  1dp  android right  1dp          android bottom  1dp    gt   lt  shape gt    And then add android background   drawable yourXmlFileName  to your ImageView

User · Answer

This is an old post I know  but I thought this might possibly help someone out there   If you want to simulate a translucent border that doesn t overlap the shape s  solid  color  then use this in your xml  Note that I don t use the  stroke  tag here at all as it seems to always overlap the actual drawn shape      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   55111111    gt                lt padding                 android bottom  10dp                  android left  10dp                  android right  10dp                  android top  10dp    gt                lt corners android radius  5dp    gt           lt  shape gt       lt  item gt       lt item gt           lt shape android shape  rectangle   gt               lt padding                 android bottom  5dp                  android left  5dp                  android right  5dp                  android top  5dp    gt                lt solid android color   ff252525    gt           lt  shape gt       lt  item gt   lt  layer-list gt

User · Answer

First of adding the background colour that you want as the colour of your border  then   change the cropToPadding to true and after that add padding   Then you will have your border for your imageView

User · Answer

Create Border  Create an xml file  e g   frame image view xml   with the following content in your drawable folder    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   dimen borderThickness          android color   color borderColor    gt       lt padding         android bottom   dimen borderThickness          android left   dimen borderThickness          android right   dimen borderThickness          android top   dimen borderThickness    gt       lt corners android radius  1dp    gt   lt  -- remove line to get sharp corners -- gt   lt  shape gt    Replace  dimen borderThickness and  color borderColor with whatever you want or add corresponding dimen   color   Add the Drawable as background to your ImageView    lt ImageView         android id    id my image view          android layout width  wrap content          android layout height  wrap content          android background   drawable frame image view          android cropToPadding  true          android adjustViewBounds  true          android scaleType  fitCenter    gt    You have to use android cropToPadding  true   otherwise the defined padding has no effect  Alternatively use android padding   dimen borderThickness  in your ImageView to achieve the same  If the border frames the parent instead of your ImageView  try to use android adjustViewBounds  true    Change Color of Border  The easiest way to change your border color in code is using the tintBackgound attribute   ImageView img   findViewById R id my image view   img setBackgroundTintList ColorStateList valueOf Color RED      changes border color to red   or  ImageView img   findViewById R id my image view   img setBackgroundTintList getColorStateList R color newColor      Don t forget to define your newColor

User · Answer

This has been used above but not mentioned exclusively   setCropToPadding boolean     If true  the image will be cropped to fit within its padding    This will make the ImageView source to fit within the padding s added to its background   Via XML it can be done as below-  android cropToPadding  true

User · Answer

Following is my simplest solution to this lengthy trouble    lt FrameLayout     android layout width  112dp      android layout height  112dp      android layout marginLeft  16dp   lt  -- May vary according to your needs -- gt      android layout marginRight  16dp   lt  -- May vary according to your needs -- gt      android layout centerVertical  true  gt       lt  -- following imageView acts as the boarder which sitting in the background of our main container ImageView -- gt       lt ImageView         android layout width  112dp          android layout height  112dp          android background   000   gt       lt  -- following imageView holds the image as the container to our image -- gt       lt  -- layout margin defines the width of our boarder  here it s 1dp -- gt       lt ImageView         android layout width  110dp          android layout height  110dp          android layout margin  1dp          android id    id itemImageThumbnailImgVw          android src   drawable banana          android background   FFF   gt   lt  FrameLayout gt    In the following answer I ve explained it well enough  please have a look at that too   I hope this will be helpful to someone else out there

User · Answer

you must create a background xml in res drawable this code   lt  xml version  1 0  encoding  UTF-8   gt   lt shape xmlns android  http   schemas android com apk res android  gt   lt solid android color   FFFFFF    gt   lt corners android radius  6dp    gt   lt stroke     android width  6dp      android color   android color white    gt   lt padding     android bottom  6dp      android left  6dp      android right  6dp      android top  6dp    gt   lt  shape gt

User · Answer

For those who are searching custom border and shape of ImageView  You can use android-shape-imageview    Just add compile  com github siyamed android-shape-imageview 0 9   aar  to your build gradle   And use in your layout    lt com github siyamed shapeimageview BubbleImageView     android layout width  match parent      android layout height  match parent      android src   drawable neo      app siArrowPosition  right      app siSquare  true   gt

User · Answer

In the same xml I have used next        lt RelativeLayout         android layout width  wrap content          android layout height  wrap content          android background   ffffff   lt  -- border color -- gt          android padding  3dp  gt   lt  -- border width -- gt            lt ImageView             android layout width  160dp              android layout height  120dp              android layout centerHorizontal  true              android layout centerVertical  true              android scaleType  centerCrop    gt       lt  RelativeLayout gt

User · Answer

Following is the code that i used to have black border  Note that i have not used extra xml file for border    lt ImageView     android layout width  wrap content      android layout height  wrap content      android src   drawable red minus icon      android background   000000      android padding  1dp   gt

User · Answer

I almost gave up about this   This is my condition using glide to load image  see detailed glide issue here about rounded corner transformations and here  I ve also the same attributes for my ImageView  for everyone answer here 1  here 2  amp  here 3  android cropToPadding  true  android adjustViewBounds  true  android scaleType  fitCenter   android layout width  wrap content  android layout height  wrap content  android background   drawable path to rounded drawable    But still no success   After researching for awhile  using a foreground attributes from this SO answer here give a result android foreground   drawable all round border white   unfortunately it giving me the  not nice  border corner like below image

[android] Border for an Image view in Android?

Examples related to android

Examples related to border

Examples related to imageview