CODEWITHSUNDEEP
androidbitmap
ericlee
ericlee

Reputation: 2753

How to create white border around bitmap?

For example I want a white border of 10pixel around all 4 side of the bitmap. I am not using it for imageview I am currently using this code to crop image. May I know how I could add a white border into it?

public Bitmap scaleCenterCrop(Bitmap source, int newHeight, int newWidth) {
    int sourceWidth = source.getWidth();
    int sourceHeight = source.getHeight();

    // Compute the scaling factors to fit the new height and width, respectively.
    // To cover the final image, the final scaling will be the bigger 
    // of these two.
    float xScale = (float) newWidth / sourceWidth;
    float yScale = (float) newHeight / sourceHeight;
    float scale = Math.max(xScale, yScale);

    // Now get the size of the source bitmap when scaled
    float scaledWidth = scale * sourceWidth;
    float scaledHeight = scale * sourceHeight;

    // Let's find out the upper left coordinates if the scaled bitmap
    // should be centered in the new size give by the parameters
    float left = (newWidth - scaledWidth) / 2;
    float top = (newHeight - scaledHeight) / 2;

    // The target rectangle for the new, scaled version of the source bitmap will now
    // be
    RectF targetRect = new RectF(left, top, left + scaledWidth, top + scaledHeight);

    // Finally, we create a new bitmap of the specified size and draw our new,
    // scaled bitmap onto it.
    Bitmap dest = Bitmap.createBitmap(newWidth, newHeight, source.getConfig());
    Canvas canvas = new Canvas(dest);
    canvas.drawBitmap(source, null, targetRect, null);

    return dest;
}

Upvotes: 22

Views: 33306

Answers (8)

porya74
porya74

Reputation: 112

the accepted answer is nice but in the cases that bitmap contains a transparent background, it fills all over the background of source bitmap with white pixels. so it doesn't work fine for all cases.

a better way to achieve this goal is using Canvas#drawLine method like the following code:

    Bitmap drawBorder(Bitmap source) {
    int width = source.getWidth();
    int height = source.getHeight();
    Bitmap bitmap = Bitmap.createBitmap(width, height, source.getConfig());
    Canvas canvas = new Canvas(bitmap);
    Paint paint = new Paint();
    paint.setStrokeWidth(50);
    paint.setColor(Color.WHITE);

    canvas.drawLine(0, 0, width, 0, paint);
    canvas.drawLine(width, 0, width, height, paint);
    canvas.drawLine(width, height, 0, height, paint);
    canvas.drawLine(0, height, 0, 0, paint);
    canvas.drawBitmap(source, 0, 0, null);

    return bitmap;
        }

in this way we first create a second bitmap using source bitmap width, height and config and use drawline() mathod four times to draw four lines using coordinates of end points of each line around the second bitmap and then draw the source bitmap on the second bitmap that must be returned.

Upvotes: 1

AJay
AJay

Reputation: 1

Try this it will also add border to your canvas

    canvas.drawLine(0, 0, canvas.getWidth(), 0, paint2);
        canvas.drawLine(0, 0, 0, canvas.getHeight(), paint2);
        canvas.drawLine(0, canvas.getHeight(), canvas.getWidth(),
                canvas.getHeight(), paint2);
        canvas.drawLine(canvas.getWidth(), 0, canvas.getWidth(),
                canvas.getHeight(), paint2);

Upvotes: 0

Daniel López Lacalle
Daniel López Lacalle

Reputation: 6785

I wrote a function for this:

private Bitmap addWhiteBorder(Bitmap bmp, int borderSize) {
    Bitmap bmpWithBorder = Bitmap.createBitmap(bmp.getWidth() + borderSize * 2, bmp.getHeight() + borderSize * 2, bmp.getConfig());
    Canvas canvas = new Canvas(bmpWithBorder);
    canvas.drawColor(Color.WHITE);
    canvas.drawBitmap(bmp, borderSize, borderSize, null);
    return bmpWithBorder;
}

Basically it creates a new Bitmap adding 2 * bordersize to each dimension and then paints the original Bitmap over it, offsetting it with bordersize.

Upvotes: 73

Dim
Dim

Reputation: 21

You can draw 4 rectangles after painting your bitmap's stuff.

point 0,0,3,sizey
point 0,0,sizex,3
point 0,sizey-3,sizex,sizey
point sizex-3,0,sizex,sizey

Upvotes: 2

caguilar187
caguilar187

Reputation: 763

As for a way of doing this. You make your bitmap bigger than the one your adding to it and then fill the canvas with the background you want. If you need to add other effects you can look into the canvas options for clipping the rect and adding rounded corners and such.

RectF targetRect = new RectF(left+10, top+10, left + scaledWidth, top + scaledHeight);
Bitmap dest = Bitmap.createBitmap(newWidth+20, newHeight+20, source.getConfig());
Canvas canvas = new Canvas(dest);
canvas.drawColor(Color.WHITE);
canvas.drawBitmap(source, null, targetRect, null);

Upvotes: 16

Michele
Michele

Reputation: 6131

You can create your targetRectangle 20px wider and 20px higher

RectF targetRect = new RectF(left, top, left + scaledWidth + 20, top + scaledHeight + 20);

and paint the background white

Upvotes: 0

Chris
Chris

Reputation: 1766

Its not elegant but you can always just draw a rectangle behind it, you already have the code to do this and any performance impact is going to be unnoticeable

Upvotes: 0

Kevin Galligan
Kevin Galligan

Reputation: 17352

A super easy way of doing it would be to set the ImageView background to white and add a padding value.

If that doesn't work, create a FrameLayout with w/h of wrap_content, set its background to white, put the ImageView in there, and set the ImageView's margins to the desired border width.

Upvotes: 0

Related Questions