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
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
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 :
|
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 🙂
2 comments
Please share your code with me or provide a snippet or share the stacktrace of your exact issue.