Wednesday 21 August 2013

Before Flipping

Image Flipping (Mirroring) in ImageView

After Flipping

Image Flipping (Mirroring) in ImageView
flipped horizontal in mobile

Image Flipping (Mirroring) in ImageView
Horizontal Flip
Create new Android Project
Project Name: PlayingwithBitmaps
Build Target: Android 2.3.3   //or greater than that
Application Name: PlayingwithBitmaps
Package Name: com.hamad.playingwithbitmaps
Create Activity: Main
Min SDK: 10 // or greater than that


  1. create main layout:
  • One image view to display the image.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000000" >

    <ImageView
        android:id="@+id/imViewAndroid"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:src="@drawable/car" />

</RelativeLayout>

 2. code of main activity:

package com.shaikhhamadali.blogspot.playingwithbitmaps;

import android.os.Bundle;
import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Matrix;
import android.widget.ImageView;

public class Main extends Activity {
 ImageView imViewAndroid;
 public static final int FLIP_VERTICAL = 1;
 public static final int FLIP_HORIZONTAL = 2;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  imViewAndroid = (ImageView) findViewById(R.id.imViewAndroid);
  imViewAndroid.setImageBitmap(flipImage(BitmapFactory.decodeResource(getResources(), R.drawable.car),2));
 }
 public Bitmap flipImage(Bitmap src, int type) {
  // create new matrix for transformation
  Matrix matrix = new Matrix();
  // if vertical
  if(type == FLIP_VERTICAL) {
   // y = y * -1
   matrix.preScale(1.0f, -1.0f);
  }
  // if horizonal
  else if(type == FLIP_HORIZONTAL) {
   // x = x * -1
   matrix.preScale(-1.0f, 1.0f);
   // unknown type
  } else {
   return null;
  }

  // return transformed image
  return Bitmap.createBitmap(src, 0, 0, src.getWidth(), src.getHeight(), matrix, true);
 }
}

3. note that:
  • With the help of this,flipImage() method you can flip image on image on click,on action_down,on etc.
  • This technique is basically same as rotation, however, it transforms rotation with a reverse direction.
    - For vertical flipping: [ x = x, y = y * -1 ]
    - For horizontal flipping: [ x = x * -1, y = y ]
4. conclusion:
  • Some information about Matrix and Image Flipping.
  • Know how to flip image bitmap from drawables.
5. About the post:
  •  The code seems to explain itself due to comments, and is very easy to understand.
  •  Don’t mind to write a comment whatever you like to ask, to know,to suggest or recommend.
  •  Hope you enjoy it!

6. Source Code:
        you can download the source code here

Cheers,
Hamad Ali Shaikh