Split A Single Image into parts (just like sprite for HTML)

anchit

23 November 2018

In this blog, we will learn to split a single image into parts(just like sprite for HTML) in your android application.

If you don’t know what exactly sprite image is here is what “w3schools” definition :

An image sprite is a collection of images put into a single image.

A web page with many images can take a long time to load and generates multiple server requests.

Using image sprites will reduce the number of server requests and save bandwidth.

-https://www.w3schools.com

For more details on Sprite, you can read their whole article from here.

After getting a general idea of what a sprite image is, now we will look into how we can simply implement similar functionality in android.

APPROACH :

We will use an image library for faster implementation to get an image from a URL (I have used glide, you can use any library or your own code to get the image from URL).
Firstly we will extract the image as a bitmap from the Url. ( Let’s call this base_bitmap).
Now, we will break this bitmap( base_bitmap ) into a list of bitmaps depending how much part do we need in our single image view.
After this, we will simply iterate this list and add each bitmap into image view inside a Grid layout.

CODE :

Here I am having a sprite image with 15 images, with 5 rows and 3 columns.

and I have made Grid layout with 3 columns and 5 rows

activity_main.xml

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <GridLayout
            android:id="@+id/grid_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" 
            android:columnCount="3" 
            android:rowCount="5" />
    </LinearLayout>

<LinearLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

<GridLayout

android:id="@+id/grid_layout"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:columnCount="3"

android:rowCount="5" />

</LinearLayout>

For Handling Image and processing it further, I have made a separate class ImageHelper.java

public class ImageHelper {
    public static void loadSpriteImages(@NonNull GridLayout gridLayout, String imageUrl) {
        Context context = gridLayout.getContext();
        Glide.with(context)
                .load(imageUrl)
                .dontAnimate()
                .into(new SimpleTarget<GlideDrawable>() {
                    @Override
                    public void onResourceReady(GlideDrawable resource, GlideAnimation<? super GlideDrawable> glideAnimation) {
                        loadSpriteImagesIntoGridLayout(gridLayout, context, ((GlideBitmapDrawable) resource).getBitmap());
                    }
                });


    }

    private static void loadSpriteImagesIntoGridLayout(@NonNull GridLayout gridLayout, Context context, Bitmap bitmap) {
        int columnCount = 3;
        List<Bitmap> bitmapList = convertBitMapToList(bitmap);
        for (int iterator = 0; iterator < 15; iterator++) {
            addImageViewToGridLayout(gridLayout,context,bitmapList.get(iterator),iterator/columnCount, iterator %columnCount, columnCount);
        }
    }

    private static List<Bitmap> convertBitMapToList(Bitmap bitmap) {
        List<Bitmap> resultList = new ArrayList<Bitmap>();

        int width =  bitmap.getWidth();
        int height =  bitmap.getHeight();

        int boxWidth = width/3;
        int boxHeight = height/5;

        int startwidth = 0;
        int startHeight = 0;
        for (int iterator = 0; iterator < 15; iterator++) {

            if (iterator%3 == 0 && iterator != 0){
                startHeight +=boxHeight;
                startwidth = 0;

            }else if (iterator%3 == 1){
                startwidth = boxWidth;

            }else if (iterator%3 == 2 ){
                startwidth = boxWidth *2;

            }
            Bitmap topStart = Bitmap.createBitmap(bitmap, startwidth,startHeight,boxWidth,boxHeight);
            resultList.add(topStart);
        }
        return resultList;
    }

    private static void addImageViewToGridLayout(GridLayout gridLayout,Context context,Bitmap bitmap, int row, int col, int columnCount) {

        //add new ImageView to ImageView list, partialImagesList
        ImageView xImage = new ImageView(context);
        xImage.setImageBitmap(bitmap);
        xImage.setScaleType(ImageView.ScaleType.FIT_XY);
        xImage.setMinimumHeight(100);

        //GridLayout Param in specific row# and col#
        GridLayout.Spec imageRow = GridLayout.spec(row);
        GridLayout.Spec imageCol = GridLayout.spec(col);

        GridLayout.LayoutParams xParam = new GridLayout.LayoutParams(imageRow, imageCol);
        xParam.width = GridLayout.LayoutParams.WRAP_CONTENT;
        xParam.height = GridLayout.LayoutParams.WRAP_CONTENT;

        int margin = 50/columnCount;

        //space in between
        xParam.setMargins(margin, margin, margin, margin);

        //update ImageView to GridLayout
        gridLayout.addView(xImage, xParam);
    }
}

public class ImageHelper {

public static void loadSpriteImages(@NonNull GridLayout gridLayout, String imageUrl) {

Context context = gridLayout.getContext();

Glide.with(context)

.load(imageUrl)

.dontAnimate()

.into(new SimpleTarget<GlideDrawable>() {

@Override

public void onResourceReady(GlideDrawable resource, GlideAnimation<? super GlideDrawable> glideAnimation) {

loadSpriteImagesIntoGridLayout(gridLayout, context, ((GlideBitmapDrawable) resource).getBitmap());

}

});

}

private static void loadSpriteImagesIntoGridLayout(@NonNull GridLayout gridLayout, Context context, Bitmap bitmap) {

int columnCount = 3;

List<Bitmap> bitmapList = convertBitMapToList(bitmap);

for (int iterator = 0; iterator < 15; iterator++) {

addImageViewToGridLayout(gridLayout,context,bitmapList.get(iterator),iterator/columnCount, iterator %columnCount, columnCount);

}

private static List<Bitmap> convertBitMapToList(Bitmap bitmap) {

List<Bitmap> resultList = new ArrayList<Bitmap>();

int width = bitmap.getWidth();

int height = bitmap.getHeight();

int boxWidth = width/3;

int boxHeight = height/5;

int startwidth = 0;

int startHeight = 0;

for (int iterator = 0; iterator < 15; iterator++) {

if (iterator%3 == 0 && iterator != 0){

startHeight +=boxHeight;

startwidth = 0;

}else if (iterator%3 == 1){

startwidth = boxWidth;

}else if (iterator%3 == 2 ){

startwidth = boxWidth *2;

}

Bitmap topStart = Bitmap.createBitmap(bitmap, startwidth,startHeight,boxWidth,boxHeight);

resultList.add(topStart);

}

return resultList;

}

private static void addImageViewToGridLayout(GridLayout gridLayout,Context context,Bitmap bitmap, int row, int col, int columnCount) {

//add new ImageView to ImageView list, partialImagesList

ImageView xImage = new ImageView(context);

xImage.setImageBitmap(bitmap);

xImage.setScaleType(ImageView.ScaleType.FIT_XY);

xImage.setMinimumHeight(100);

//GridLayout Param in specific row# and col#

GridLayout.Spec imageRow = GridLayout.spec(row);

GridLayout.Spec imageCol = GridLayout.spec(col);

GridLayout.LayoutParams xParam = new GridLayout.LayoutParams(imageRow, imageCol);

xParam.width = GridLayout.LayoutParams.WRAP_CONTENT;

xParam.height = GridLayout.LayoutParams.WRAP_CONTENT;

int margin = 50/columnCount;

//space in between

xParam.setMargins(margin, margin, margin, margin);

//update ImageView to GridLayout

gridLayout.addView(xImage, xParam);

}

And in our MainActivity.java file, I just called the ImageHelper function like this :

ImageHelper.loadSpriteImages(mGridLayout,mImageUrl);

1	ImageHelper.loadSpriteImages(mGridLayout,mImageUrl);

And it is done.

Just for your reference what we achieved through this code block :

Original Sprite Image :

Image in our app :

See it’s easy and simple.

Thanks for reading this article.

Keep Coding and Keep sharing 🙂