Home » Android » How to remove blank space around an image in Android?

How to remove blank space around an image in Android?

Posted by: admin May 14, 2020 Leave a comment

Questions:

Given an image with alpha channel (transparency) I would like to remove any blank space between the image boundaries and the actual image.
This should be done in a backgound task or with a loading screen, with an acceptable running time to not cripple the user experience.

enter image description here

How can I achieve this result?

How to&Answers:

I had difficulties to find best practices or even advices to solve my problem. Based on this anwer by JannGabriel, who crops the image right and bottom by reducing image size, i managed to make a step further and also remove the top and left blank spaces, and to generally improve elaboration time. The result is good, and i am currently using it in my project.
I’m fairly new to Android programming and any advice on this method is welcome.

public static Bitmap TrimBitmap(Bitmap bmp) {
    int imgHeight = bmp.getHeight();
    int imgWidth  = bmp.getWidth();


    //TRIM WIDTH - LEFT
    int startWidth = 0;
    for(int x = 0; x < imgWidth; x++) {
        if (startWidth == 0) {
            for (int y = 0; y < imgHeight; y++) {
                if (bmp.getPixel(x, y) != Color.TRANSPARENT) {
                    startWidth = x;
                    break;
                }
            }
        } else break;
    }


    //TRIM WIDTH - RIGHT
    int endWidth  = 0;
    for(int x = imgWidth - 1; x >= 0; x--) {
        if (endWidth == 0) {
            for (int y = 0; y < imgHeight; y++) {
                if (bmp.getPixel(x, y) != Color.TRANSPARENT) {
                    endWidth = x;
                    break;
                }
            }
        } else break;
    }



    //TRIM HEIGHT - TOP
    int startHeight = 0;
    for(int y = 0; y < imgHeight; y++) {
        if (startHeight == 0) {
            for (int x = 0; x < imgWidth; x++) {
                if (bmp.getPixel(x, y) != Color.TRANSPARENT) {
                    startHeight = y;
                    break;
                }
            }
        } else break;
    }



    //TRIM HEIGHT - BOTTOM
    int endHeight = 0;
    for(int y = imgHeight - 1; y >= 0; y--) {
        if (endHeight == 0 ) {
            for (int x = 0; x < imgWidth; x++) {
                if (bmp.getPixel(x, y) != Color.TRANSPARENT) {
                    endHeight = y;
                    break;
                }
            }
        } else break;
    }


    return Bitmap.createBitmap(
            bmp,
            startWidth,
            startHeight,
            endWidth - startWidth,
            endHeight - startHeight
    );

}

Explanation:
For each side of the image, a FOR loop is run to check if pixels does not contains transparent color, returning the first non-transparent pixel useful coordinate. This is done elaborating coordinates using as a base the opposite dimension than the dimension to trim: to find y, scan x for every y.

To check where the Vertical-Top blank space ends, it runs the following steps:

  1. Starting is from the top row (y=0)
  2. Checks all the columns of the row (x from 0 to imageWidth)
  3. If a non-transparent pixel is found, break the loop and save the y coordinate. Otherwise continue.
  4. At the ending of the columns, go to the next row (y+1) and start checking columns agains. Break if a non-transparent pixel has already been found.

Similiar methods are used for the other dimensions, only changing the direction of the scan.

Once obtained the 4 coordinates for the first useful pixels of the image, the Bitmap.createBitmap method is invoked, with the original bitmap as a base image, and the useful pixels coordinates as Top-Left and Bottom-Right limits for the resize.

Note 1: It is useful to note that the coordinates 0, 0 equals to Top-Left.

Note 2: The ending width and height in Bitmap.createBitmap are reduced by the new starting relative coordinate, otherwise the new image will have the boundaries wrongly pushed bottom-right. Figure it like this: you have an image 100x100px, so with ending coordinates 100,100. Changing the starting coordinates to 50,50 will bring the ending coordinates of your elaboration rectangle to 150,150 (100 original coordinate + 50 of modified starting point), pushing it outside the original image boundaries. To avoid this, the new ending coordinate is reduced by the new starting coordinate (100 + 50 new starting coord – 50 new starting coord adjustment)

Note 3: in the original answer, a check for all the pixels in a given direction is run using the same dimension of the coordinate to find, returning the most advanced useful pixel. Checking the opposite dimension and stopping at the first useful pixel increased performances.

Answer:

Kotlin implementation for answer @Manzotin with fix small bugs.

fun Bitmap.trimBorders(color: Int): Bitmap {
    var startX = 0
    [email protected] for (x in 0 until width) {
        for (y in 0 until height) {
            if (getPixel(x, y) != color) {
                startX = x
                [email protected]
            }
        }
    }
    var startY = 0
    [email protected] for (y in 0 until height) {
        for (x in 0 until width) {
            if (getPixel(x, y) != color) {
                startY = y
                [email protected]
            }
        }
    }
    var endX = width - 1
    [email protected] for (x in endX downTo 0) {
        for (y in 0 until height) {
            if (getPixel(x, y) != color) {
                endX = x
                [email protected]
            }
        }
    }
    var endY = height - 1
    [email protected] for (y in endY downTo 0) {
        for (x in 0 until width) {
            if (getPixel(x, y) != color) {
                endY = y
                [email protected]
            }
        }
    }

    val newWidth = endX - startX + 1
    val newHeight = endY - startY + 1

    return Bitmap.createBitmap(this, startX, startY, newWidth, newHeight)
}