Border for an Image view in Android?

Question

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

user_368333 · 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.

user_8562926 · Answer

Create Border

Create an xml file (e.g. "frame_image_view.xml") with the following content in your drawable folder:

Replace @dimen/borderThickness and @color/borderColor with whatever you want or add corresponding dimen / color.

Add the Drawable as background to your ImageView:

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_6891563 · 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.

user_10601286 · 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_3763032 · 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 & 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:

user_13660726 · 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_6160172 · Answer

Just add this code in your ImageView:

user_7033673 · Answer

With Material design and the new ShapeableImageView widget, you can easily create an image that has a border using the strokeColor and strokeWidth attributes. This is simple and doesn't involve creating any extra XML file.

The above code creates a black border with a width of 2dp.

In cases where you might want to add a stroke to rounded image, you can use the shapeAppearanceOverlay attribute. This allows you to draw the bitmap with the provided shape (round in this case). Check the below code for more details:

Add the below code to your styles.xml file:

Make sure your app extends the material design theme in order to use the ShapeableImageView.

user_6423246 · Answer

Add the following code to a shape:

é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):

And call it in your imageview like this:

android:scaleType="center"    
android:background="@drawable/border_shape"
android:cropToPadding="true"
android:adjustViewBounds="true"

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;
}

Border for an Image view in Android?

18 Answers

Create Border

Change Color of Border