Android - Set a border around an ImageView

Question

I have a cell with a fixed width and height, let it be 100x100px. Inside that cell I want to display an ImageView with a border around.
My first idea was to put

Answer 1

just add bellow line in your ImageView layout

if layout_width and layout_height of imageview is not match_parent than use,

android:adjustViewBounds = "true"

or

android:adjustViewBounds = "true"
android:scaleType="fitXY"

or

android:adjustViewBounds = "true"
android:scaleType="centerCrop"

Answer 2

Following is the code snippet which I used in my simplest solution.

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

If you want further explanation please look at the following link where I'd explained it well enough.

Hope this may be helpful to you anyone out there!

Cheers!

Answer 3

You have to add scaletyle in your imageview. After that your image would be fit.

android:scaleType="fitXY"

Answer 4

Here is what worked for me...

<!-- @drawable/image_border -->
<shape xmlns:android="http://schemas.android.com/apk/res/android">
  <solid android:color="@color/colorPrimary"/>
  <stroke android:width="1dp" android:color="#000000"/>
  <padding android:left="1dp" android:top="1dp" android:right="1dp" android:bottom="1dp"/>
</shape>

<ImageView
  android:layout_width="300dp"
  android:layout_height="300dp"
  android:layout_gravity="center"
  android:padding="1dp"
  android:cropToPadding="true"
  android:scaleType="centerCrop"
  android:background="@drawable/image_border"/>

Here it the result that I get with an viewpager and imageview with a border.

Answer 5

If the images are variable in size then you'll always get that effect. I guess you need to set a fixed size for the ImageView and give it a set background colour - from the look of your example black would make sense. Wrap the imageview in a FrameLayout or just a view with a yellow background and 1px padding.

EDIT

---

I had a think about this and my answer didn't feel right so...

If you set each ImageView with a fixed size, padding and margin. and then set the background colour as required you can get the effect you want.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent" >


        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:background="#52D017"
            android:padding="1dp"
            android:layout_margin="5dp"
            android:src="@drawable/test1"
            tools:ignore="ContentDescription" />

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="5dp"
            android:background="#52D017"
            android:padding="1dp"
            android:src="@drawable/test2"
            tools:ignore="ContentDescription" />

</LinearLayout>

In the screenshot both displayed images are less than 100px in width and different heights.

This doesn't handle images with transparent backgrounds as then the (in this case) yellow green colour shows through. You could solve this by wrapping each ImageView in a FrameLayout. Making the ImageView background black and setting the FrameLayout to WrapContent with the required padding (I think)

Answer 6

you can use the custom imageview, from where you can get the border, here is the code. you can also change the width of padding and stroke width according to your need. It is specify just below the first line of code, thank you

public class FreeCollage extends ImageView {

    private static final int PADDING = 8;
    private static final float STROKE_WIDTH = 5.0f;

    private Paint mBorderPaint;

    public FreeCollage(Context context) {
        this(context, null);
    }

    public FreeCollage(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
        setPadding(PADDING, PADDING, PADDING, PADDING);
    }

    public FreeCollage(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        initBorderPaint();
    }

    private void initBorderPaint() {
        mBorderPaint = new Paint();
        mBorderPaint.setAntiAlias(true);
        mBorderPaint.setStyle(Paint.Style.STROKE);
        mBorderPaint.setColor(Color.WHITE);
        mBorderPaint.setStrokeWidth(STROKE_WIDTH);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawRect(PADDING, PADDING, getWidth() - PADDING, getHeight() - PADDING, mBorderPaint);
    }
}