Add border to ImageView Android with Universal Image Loader

Question

I would like to add a border (white) around my ImageView.

Here is the code of the layout :

<ImageView
                android:id="@+id/detail_annonce_image_user"
                android:layout_width="65dp"
                android:layout_height="65dp"
                android:layout_alignParentRight="true"
                android:layout_marginRight="30dp"
                android:layout_marginTop="225dp"
                android:scaleType="centerCrop"
                android:src="@drawable/avatar1" />

And here is the JAVA code :

    options = new DisplayImageOptions.Builder()
            .displayer(new RoundedBitmapDisplayer(2000))
            .cacheOnDisc(true)
            .build();

if (avatarUser.contains("avatar") == true) {
    if (avatarUser.equals("avatar1")) {
        imageUser_txt.setImageResource(R.drawable.avatar1) ;
    }
    else if (avatarUser.equals("avatar2")) {
        imageUser_txt.setImageResource(R.drawable.avatar2) ;
    }
    else if (avatarUser.equals("avatar3")) {
        imageUser_txt.setImageResource(R.drawable.avatar3) ;
    }
    else if (avatarUser.equals("avatar4")) {
        imageUser_txt.setImageResource(R.drawable.avatar4) ;
    }
    else if (avatarUser.equals("avatar5")) {
        imageUser_txt.setImageResource(R.drawable.avatar5) ;
    }
    else if (avatarUser.equals("avatar6")) {
        imageUser_txt.setImageResource(R.drawable.avatar6) ;
    }
    else {
        imageUser_txt.setImageResource(R.drawable.avatar1) ;
    }

} else {
    imageLoader.displayImage(avatarUser, imageUser_txt, options);
}

imageUser_txt.bringToFront();

Answer 1

You need to create a custom image view by extending ImageView. Use this ImageView in layout xml file using following code you can create white bar around image view

public class CustomImageView extends ImageView {
private Context myCtx;
private int borderSize = 6;
Bitmap bmp;
Bitmap bmpWithBorder;
private Drawable drawable;
public CustomImageView(Context context) {
super(context);
myCtx = context;
// TODO Auto-generated constructor stub
}
public CustomImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
myCtx = context;
}
public CustomImageView(Context context, AttributeSet attrs) {
super(context, attrs);
myCtx = context;
}
/* (non-Javadoc)
* @see android.widget.ImageView#onDraw(android.graphics.Canvas)
*/
@Override
protected void onDraw(Canvas canvas) {
// TODO Auto-generated method stub
super.onDraw(canvas);
try{
drawable = getDrawable();
bmp = ((BitmapDrawable)drawable).getBitmap() ;
bmpWithBorder = Bitmap.createBitmap(bmp.getWidth() + borderSize * 2, bmp.getHeight() + borderSize * 2, bmp.getConfig());
canvas.drawBitmap(bmpWithBorder, 0 , 0 , null);
canvas.drawColor(Color.WHITE);
Resources res = myCtx.getResources();
canvas.drawBitmap(bmp, borderSize, borderSize, null);
}
catch (NullPointerException e) {
// TODO: handle exception
e.printStackTrace();
}
}
}

Answer 2

Add padding and background to your ImageView. Padding will be the width of the border and background will be the color of it.

<ImageView
       android:id="@+id/detail_annonce_image_user"
       android:layout_width="65dp"
       android:layout_height="65dp"
       android:layout_alignParentRight="true"
       android:layout_marginRight="30dp"
       android:layout_marginTop="225dp"
       android:scaleType="centerCrop"
       android:src="@drawable/avatar1"
       android:padding="5dp"
       android:background="#ffffff" />