381

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

1
  • 1
    I have a answer for changing a ImageView's color, hope can help.
    – ruidge
    Commented Dec 18, 2013 at 11:12

18 Answers 18

626

I set the below xml to the background of the Image View as Drawable. It works.

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF" />
    <stroke android:width="1dp" android:color="#000000" />
    <padding android:left="1dp" android:top="1dp" android:right="1dp"
        android:bottom="1dp" />
</shape>

And then add android:background="@drawable/yourXmlFileName" to your ImageView

18
  • 117
    And then add android:background="@drawable/yourXmlFileName" to ImageView Commented Apr 7, 2011 at 8:02
  • 11
    The border works both both the left and right, but for top and bottom it fills the parent to the top.
    – Maurice
    Commented Jul 22, 2011 at 8:48
  • 4
    Oh good, that's what I want too. Remember to set padding for your ImageView. Commented Aug 15, 2012 at 4:55
  • 7
    @Maurice You can set cropToPadding to true.
    – MikkoP
    Commented Aug 7, 2013 at 16:21
  • 4
    dont forget set cropToPadding="true"
    – landry
    Commented Jun 5, 2015 at 11:33
175

Following is the code that i used to have black border. Note that i have not used extra xml file for border.

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/red_minus_icon"
    android:background="#000000"
    android:padding="1dp"/>
7
  • 34
    yeah.. it looks like a border. But when you use a drawable image with tranparent background, then it will not show your image with border properly. it shows black color whereever you have the transparent. So your answer is not a best approach.
    – Praveen
    Commented May 19, 2011 at 9:09
  • 23
    Yeah! but you have a border without creating another xml file.
    – user609239
    Commented Jun 8, 2011 at 7:16
  • 7
    This doesn't work when you resize the image using android:scaleType="centerCrop". Commented Feb 23, 2013 at 21:04
  • 8
    this is bad because it creates unnecessary overdraw
    – Ifrit
    Commented Apr 19, 2013 at 20:13
  • 1
    @Silox for scaleType="centerCrop", make sure to also add cropToPadding="true"
    – Adam Johns
    Commented Apr 28, 2016 at 13:07
36

ImageView in xml file

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

save below code with the name of border_image.xml and it should be in drawable folder

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <gradient
        android:angle="270"
        android:endColor="#ffffff"
        android:startColor="#ffffff" />

    <corners android:radius="0dp" />

    <stroke
        android:width="0.7dp"
        android:color="#b4b4b4" />
</shape>

if you want to give rounded corner to the border of image then you may change a line in border.xml file

<corners android:radius="4dp" />
2
  • 4
    just a note on this, if the image is set dynamically then the border needs to be set again in code other wise the image is over the border.
    – Rob85
    Commented Oct 20, 2016 at 14:43
  • I didn't see any weirdness when I used `ImageView.setImageBitmap(photoBmp)' Commented Jul 6, 2020 at 23:40
25

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.

  <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#55111111" />

            <padding
                android:bottom="10dp"
                android:left="10dp"
                android:right="10dp"
                android:top="10dp" />

            <corners android:radius="5dp" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle" >
            <padding
                android:bottom="5dp"
                android:left="5dp"
                android:right="5dp"
                android:top="5dp" />

            <solid android:color="#ff252525" />
        </shape>
    </item>
</layer-list>
2
  • I like this too but if you make the outside edges too small, the corners are blank. It works well with anything 2dp and above.
    – John Stack
    Commented Sep 18, 2012 at 13:19
  • The benefit of this method is that it allows for rounded corners. If you don't want the border from the previous answer to overlap, add padding to the ImageView tag. The drawback to this method is that the border will bleed into the image area if using a translucent background. So I choose the previous method because I like the translucent background better than the rounded corners.
    – Leo Landau
    Commented Sep 12, 2013 at 18:09
6

Create Border

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

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:width="@dimen/borderThickness"
        android:color="@color/borderColor" />
    <padding
        android:bottom="@dimen/borderThickness"
        android:left="@dimen/borderThickness"
        android:right="@dimen/borderThickness"
        android:top="@dimen/borderThickness" />
    <corners android:radius="1dp" /> <!-- remove line to get sharp corners -->
</shape>

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

Add the Drawable as background to your ImageView:

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

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.

1
  • the stroke looks good - however, there's a transparent gap (top and bottom) between the frame and the image. Commented Jul 6, 2020 at 22:43
6

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.

<com.google.android.material.imageview.ShapeableImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        app:strokeColor="@color/black"
        app:strokeWidth="2dp"
        app:srcCompat="@drawable/sample_image" />

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:

<com.google.android.material.imageview.ShapeableImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        app:shapeAppearanceOverlay="@style/circleImageView"
        app:srcCompat="@drawable/sample_image"
        app:strokeColor="@color/black"
        app:strokeWidth="2dp" />

Add the below code to your styles.xml file:

<!-- Circle Shape -->
<style name="circleImageView" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
</style>

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

Edit: As mentioned by @Pezcraft in comments, android:padding="2dp" needs to be added to prevent the stroke from getting cut.

1
  • 4
    android:padding="2dp" is essential to avoid cutting off the stroke
    – Pezcraft
    Commented Apr 25, 2022 at 18:13
4

Add a background Drawable like res/drawables/background.xml:

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
  <solid android:color="@android:color/white" />
  <stroke android:width="1dp" android:color="@android:color/black" />
</shape>

Update the ImageView background in res/layout/foo.xml:

...
<ImageView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:padding="1dp"
  android:background="@drawable/background"
  android:src="@drawable/bar" />
...

Exclude the ImageView padding if you want the src to draw over the background.

3

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

you must create a background.xml in res/drawable this code

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFFFFF" />
<corners android:radius="6dp" />
<stroke
    android:width="6dp"
    android:color="@android:color/white" />
<padding
    android:bottom="6dp"
    android:left="6dp"
    android:right="6dp"
    android:top="6dp" />
</shape>
2

For those who are searching custom border and shape of ImageView. You can use android-shape-imageview

image

Just add compile 'com.github.siyamed:android-shape-imageview:0.9.+@aar' to your build.gradle.

And use in your layout.

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

Following is my simplest solution to this lengthy trouble.

<FrameLayout
    android:layout_width="112dp"
    android:layout_height="112dp"
    android:layout_marginLeft="16dp" <!-- May vary according to your needs -->
    android:layout_marginRight="16dp" <!-- May vary according to your needs -->
    android:layout_centerVertical="true">
    <!-- following imageView acts as the boarder which sitting in the background of our main container ImageView -->
    <ImageView
        android:layout_width="112dp"
        android:layout_height="112dp"
        android:background="#000"/>
    <!-- following imageView holds the image as the container to our image -->
    <!-- layout_margin defines the width of our boarder, here it's 1dp -->
    <ImageView
        android:layout_width="110dp"
        android:layout_height="110dp"
        android:layout_margin="1dp"
        android:id="@+id/itemImageThumbnailImgVw"
        android:src="@drawable/banana"
        android:background="#FFF"/> </FrameLayout>

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!

1

In the same xml I have used next:

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ffffff" <!-- border color -->
        android:padding="3dp"> <!-- border width -->

        <ImageView
            android:layout_width="160dp"
            android:layout_height="120dp"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:scaleType="centerCrop" />
    </RelativeLayout>
1

First of adding the background colour that you want as the colour of your border, then enter image description here

change the cropToPadding to true and after that add padding.

Then you will have your border for your imageView.

1

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:

enter image description here

1

Just add this code in your ImageView:

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <solid
        android:color="@color/white"/>

    <size
        android:width="20dp"
        android:height="20dp"/>
    <stroke
        android:width="4dp" android:color="@android:color/black"/>
    <padding android:left="1dp" android:top="1dp" android:right="1dp"
        android:bottom="1dp" />
</shape>
1

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.

9patch in action

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.

0

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).

0

Indented border

Add the following code to a shape:

<gradient
    android:angle="135"
    android:endColor="#FF444444"
    android:centerColor="#FFAAAAAA"
    android:startColor="#FFFFFFFF"/>

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

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:angle="135"
        android:endColor="#FF444444"
        android:centerColor="#FFAAAAAA"
        android:startColor="#FFFFFFFF"/>
    <padding
        android:top="2dp"
        android:left="2dp"
        android:right="2dp"
        android:bottom="2dp"/>
    <corners
        android:radius="30dp"/>
</shape>

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.