Android - Set a border around an ImageView

问题

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 a background resource to the ImageView, and add a padding of 1dp to create the border effect:

<LinearLayout
        android:layout_width="100dp"
        android:layout_height="100dp" >

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/image_border"
        android:padding="1dp"
        android:src="@drawable/test_image" />

</LinearLayout>

Apparently this should work, but it doesn't, or at least not as expected.
The problem is that the ImageView background fills the entire 100x100px cell's space, thus, if the image's width is less than 100px, then the top and bottom border will appear larger.

Notice the yellow border, I need it to be exactly 1px around the ImageView:

Any help, idea, suggestion of any kind is much, much appreciated.

回答1:

If you put the padding=1 and the background color in the LinearLayout, you'll have a 1px yellow border.

回答2:

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.

回答3:

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)

回答4:

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

回答5:

Just add the property adjustViewBounds to the ImageView.

<ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/image_border"
        android:padding="1dp"
        android:adjustViewBounds="true"
        android:src="@drawable/test_image" />

Kindly note that android:adjustViewBounds="true" works only with android:layout_width and android:layout_height set to "wrap_content".

回答6:

This is what worked for me:

    <ImageView
        android:id="@+id/dialpad_phone_country_flag"
        android:layout_width="22dp"
        android:layout_height="15dp"
        android:scaleType="fitXY"
        android:background="@color/gen_black"
        android:padding="1px"/>

回答7:

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"

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

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

回答8:

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!