Android:How to divide an image without using canvas

Question

I am making a sliding puzzle type game (http://en.wikipedia.org/wiki/Sliding_puzzle). I would like the user to be able to select an image, and then have that image be displayed.

However, before I can do that, I need to divide the image they select into 9 different squares that make up the original image.

Any ideas on how to do this without a canvas? Or should I just use canvas instead.

Thanks :)

Answer 1

You can use the Bitmap API. Have a look on this example: http://androidattop.blogspot.de/2012/05/splitting-image-into-smaller-chunks-in.html

On the example that is provided on the link above, an ImageView is provided and from that you are getting the image's bitmap. Then temporarily you can save the splitted parts into an arraylist of bitmaps (ArrayList). The only thing left, is to provide these bitmap into a GridView. Here is the method that you need to add in your code:

private void splitImage(ImageView image, int chunkNumbers) { 

    //For the number of rows and columns of the grid to be displayed
    int rows,cols;

    //For height and width of the small image chunks 
    int chunkHeight,chunkWidth;

    //To store all the small image chunks in bitmap format in this list 
    ArrayList<bitmap> chunkedImages = new ArrayList<bitmap>(chunkNumbers);

    //Getting the scaled bitmap of the source image
    BitmapDrawable drawable = (BitmapDrawable) image.getDrawable();
    Bitmap bitmap = drawable.getBitmap();
    Bitmap scaledBitmap = Bitmap.createScaledBitmap(bitmap, bitmap.getWidth(), bitmap.getHeight(), true);

    rows = cols = (int) Math.sqrt(chunkNumbers);
    chunkHeight = bitmap.getHeight()/rows;
    chunkWidth = bitmap.getWidth()/cols;

    //xCoord and yCoord are the pixel positions of the image chunks
    int yCoord = 0;
    for(int x=0; x<rows; x++){
        int xCoord = 0;
        for(int y=0; y<cols; y++){
            chunkedImages.add(Bitmap.createBitmap(scaledBitmap, xCoord, yCoord, chunkWidth, chunkHeight));
            xCoord += chunkWidth;
        }
        yCoord += chunkHeight;
    }

    /* Now the chunkedImages has all the small image chunks in the form of Bitmap class. 
     * You can do what ever you want with this chunkedImages as per your requirement.
     * I pass it to a new Activity to show all small chunks in a grid for demo.
     * You can get the source code of this activity from my Google Drive Account.
     */

    //Start a new activity to show these chunks into a grid 
    Intent intent = new Intent(ImageActivity.this, ChunkedImageActivity.class);
    intent.putParcelableArrayListExtra("image chunks", chunkedImages);
    startActivity(intent);
}

Note that in the example above is being used an intent and a putParcelableArrayListExtra to pass them into a new activity but you don't really need to do that. As you can just declare a GridView into your layout. Then you can create a class which is extending the BaseAdapter class and set the Images. Finally, call the setAdapter method of the GridView.

Answer 2

The below code snippet shows how to split/divide an image into number of smaller chunks/pieces.

package com.android.imagesplitter;

import java.util.ArrayList;
import android.app.Activity;
import android.content.Intent;
import android.graphics.Bitmap;
import android.graphics.drawable.BitmapDrawable;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;

public class ImageActivity extends Activity implements OnClickListener {

    @Override
    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        Button b1 = (Button) findViewById(R.id.three);
        Button b2 = (Button) findViewById(R.id.four);
        Button b3 = (Button) findViewById(R.id.five);

        b1.setOnClickListener(this);
        b2.setOnClickListener(this);
        b3.setOnClickListener(this);
    }

    @Override
    public void onClick(View view){

        int chunkNumbers = 0;

        switch (view.getId()) {
            case R.id.three:
                chunkNumbers = 9 ; 
                break;
            case R.id.four:
                chunkNumbers = 16 ;
                break;
            case R.id.five:
                chunkNumbers = 25 ;
        }

        //Getting the source image to split
        ImageView image = (ImageView) findViewById(R.id.source_image);

        //invoking method to split the source image
        splitImage(image, chunkNumbers);
    }

    private void splitImage(ImageView image, int chunkNumbers) { 

        //For the number of rows and columns of the grid to be displayed
        int rows,cols;

        //For height and width of the small image chunks 
        int chunkHeight,chunkWidth;

        //To store all the small image chunks in bitmap format in this list 
        ArrayList<bitmap> chunkedImages = new ArrayList<bitmap>(chunkNumbers);

        //Getting the scaled bitmap of the source image
        BitmapDrawable drawable = (BitmapDrawable) image.getDrawable();
        Bitmap bitmap = drawable.getBitmap();
        Bitmap scaledBitmap = Bitmap.createScaledBitmap(bitmap, bitmap.getWidth(), bitmap.getHeight(), true);

        rows = cols = (int) Math.sqrt(chunkNumbers);
        chunkHeight = bitmap.getHeight()/rows;
        chunkWidth = bitmap.getWidth()/cols;

        //xCoord and yCoord are the pixel positions of the image chunks
        int yCoord = 0;
        for(int x=0; x<rows; x++){
            int xCoord = 0;
            for(int y=0; y<cols; y++){
                chunkedImages.add(Bitmap.createBitmap(scaledBitmap, xCoord, yCoord, chunkWidth, chunkHeight));
                xCoord += chunkWidth;
            }
            yCoord += chunkHeight;
        }

        /* Now the chunkedImages has all the small image chunks in the form of Bitmap class. 
         * You can do what ever you want with this chunkedImages as per your requirement.
         * I pass it to a new Activity to show all small chunks in a grid for demo.
         * You can get the source code of this activity from my Google Drive Account.
         */

        //Start a new activity to show these chunks into a grid 
        Intent intent = new Intent(ImageActivity.this, ChunkedImageActivity.class);
        intent.putParcelableArrayListExtra("image chunks", chunkedImages);
        startActivity(intent);
    }
}

http://androidattop.blogspot.com/2012/05/splitting-image-into-smaller-chunks-in.html

Answer 3

This might be your solution: Cutting the image in jigsaw shapes in android

Here's a complete example, I'd particularly take a look at the createPieces method: