Android Apps Development : Working with bitmap image

Playing with image is always a fun. Now we are going to explore this type of fun in android. Have you ever played a game where part of a picture is shown to you and you are asked whose picture is it? Our target is to develop such an app in android with bitmap image.


Clue 1:

---

Clue 2:

---

Clue 3:

---

Clue 4:

---

The app would be like above proceeding with gradual appearance of segments of an image to give you clues and you need to trace out whose image is this.

First, we design our lay out. The design is just for a demo and you might improve this design with your own ideas.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TableLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_centerInParent="false"
        android:layout_marginTop="116dp" >

        <TableRow
            android:id="@+id/tableRow1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <ImageView
                android:id="@+id/imageView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_action_search" />

        </TableRow>

        <TableRow
            android:id="@+id/tableRow2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <ImageView
                android:id="@+id/imageView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_action_search" />

        </TableRow>

        <TableRow

            android:id="@+id/tableRow3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

        </TableRow>

        <TableRow
            android:id="@+id/tableRow4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

        </TableRow>

        <TableRow
            android:id="@+id/tableRow5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <Button
                android:id="@+id/nextPart"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/nextPart" />

        </TableRow>

        <TableRow
            android:id="@+id/tableRow6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <Button
                android:id="@+id/nextImage"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/nextImage" />

        </TableRow>

    </TableLayout>

</RelativeLayout>


Here we have used Relative Layout and Table layout. Image View is used to load images. And two buttons are added to browse next part of an image and next image.

Next, we will go to our code block. First, add three images in your drawable folder(res/drawable-hdpi, res/drawable-mdpi, res/drawable-ldpi ). Why do we need three images? It is nothing mandatory about the number of images you take. You can use as many image as you can. Let, name of the images we take are image1, image2, image3. We will show ¼  part of an image in each click. Now, we need to initiate the task this way:


public class MainActivity extends Activity implements OnClickListener {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.activity_main, menu);
        return true;
    }
           

            public void onClick(View v) {
                        // TODO Auto-generated method stub
                       
            }
   
}


We have created our activity which implements onclicklistener. Then, initialize some variables. Here, two imageView imageLoader1 and imageLoader2  have been created.

public class MainActivity extends Activity implements OnClickListener {
           
            private int imageCounter = 0;
            private int imagePart = 0;
            private int numberOfSlice = 4;
            private int sliceNo = 0;
            private ImageView imageLoader1, imageLoader2;
            private int[] imageList = {R.drawable.image1,R.drawable. image2,R.drawable.image3};
   private int numberOfImage = imageList.length;
    final Bitmap[] bmp=new Bitmap[numberOfImage* numberOfSlice];
    final  Bitmap[] source = new Bitmap[numberOfImage];


Bitmap[] bmp will be used to store slice of every image. That’s why numberOfImage* numberOfSlice   is used. For our example we need 12 slices (3 images, 4 slices each).  Bitmap[] source will contain the source images. Int[] imageList contains the list of images.

Now, initialize image loader and button in oncreate method. Also set onclicklistener method for button.

public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
       
        imageLoader1 = (ImageView) findViewById(R.id.imageView1);
        imageLoader2 = (ImageView) findViewById(R.id.imageView2);
       
        Button nextPart = (Button)findViewById(R.id.nextPart);
        Button nextImage = (Button)findViewById(R.id.nextImage);
       
        nextPart.setOnClickListener(this);
        nextImage.setOnClickListener(this);

}


Now, load 12 slices of the 3 images in bitmap array.

   int k=0;
       
        for(int imageNo = 0; imageNo < numberOfImage; imageNo++ )
        {
             source[imageNo] = BitmapFactory.decodeResource(this.getResources(), imageList[imageNo]);
             int width = source[imageNo].getWidth();
             int height = source[imageNo].getHeight();
           
              for(int i=0;i<2;i++){
                  for(int j=0;j<2;j++){
                       

                          bmp[k]=Bitmap.createBitmap(source[imageNo],0,(i*height)/2,((width/2)+(j*width/2)),height/2);
                         
                          k++;
                 
               }
               }
        }


Then, load the first slice of the first image in image Loader. It will be displayed when app starts.

imageLoader1.setImageBitmap(bmp[0]);


Then implement the click event. When nextImage button is clicked, the first slice of next image just immediate to current image will be displayed.

public void onClick(View arg0) {
                       
                        switch (arg0.getId()) {
                       
                        case R.id.nextImage:
                        {
                                    imageCounter++;
                                    sliceNo = 0;
                                    if(imageCounter == numberOfImage)
                                               
                                                imageCounter = 0;
                                   
                                    imageLoader2.setImageBitmap(null);
                                   
                                   
                                    imageLoader1.setImageBitmap(bmp[imageCounter*4]);
                        }
                       
                        break;
     }


When nextPart button is clicked, next slice of the current image will be displayed. If all slices have been displayed, a message will be shown that “it is the complete image”.

case R.id.nextPart:
                                   
                                    sliceNo++;
                                    if(sliceNo == 1)
                                               
                                    {
                                               
                                                imageLoader1.setImageBitmap(bmp[(imageCounter*4) + sliceNo]);
                                    }
                                   
                                    else if (sliceNo == 2)
                                    {
                                                imageLoader2.setImageBitmap(bmp[(imageCounter*4) + sliceNo]);
                                    }
                                    else if (sliceNo == 3)
                                    {
                                               
                                                imageLoader2.setImageBitmap(bmp[(imageCounter*4)+ sliceNo]);
                                               
                                    }
                                    else
                                    {
                                                sliceNo = 0;
                                                Toast.makeText(MainActivity.this, "This is complete image", 5).show();
                                    }
                                                                       
                                    break;
                        default:
                                    break;
                        }


You can easily trigger many interesting things like these with bitmap images in android using this basic learning. Hopefully you enjoyed the learning!

Share this post and also read Create Database and Table in Android and Working with bitmap image in Android to know how Guess Who? image and other apps and games can be created in android.