Before Reflection
After Reflection
Create new Android Project
Project Name: playingwithbitmap
Build Target: Android 2.3.3 //or greater than that
Application Name: PlayingwithBitmaps
Package Name: com.shaikhhamadali.blogspot.playingwithbitmaps
Create Activity: Main
Min SDK: 10 // or greater than that
1. create main layout:
<?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"
android:id="@+id/rlMain" >
<ImageView
android:id="@+id/imViewAndroid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="@drawable/beautiful" />
</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.Bitmap.Config;
import android.graphics.BitmapFactory;
import android.graphics.LinearGradient;
import android.graphics.Matrix;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.PorterDuff.Mode;
import android.graphics.PorterDuffXfermode;
import android.graphics.Shader.TileMode;
import android.widget.ImageView;
public class Main extends Activity {
ImageView imViewAndroid;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
imViewAndroid = (ImageView) findViewById(R.id.imViewAndroid);
imViewAndroid.setImageBitmap(getRefelection(BitmapFactory.decodeResource(getResources(), R.drawable.car)));
}
public Bitmap getRefelection(Bitmap image) {
// The gap we want between the reflection and the original image
final int reflectionGap = 0;
// Get your bitmap from drawable folder
Bitmap originalImage = image;
int width = originalImage.getWidth();
int height = originalImage.getHeight();
// This will not scale but will flip on the Y axis
Matrix matrix = new Matrix();
matrix.preScale(1, -1);
/*Create a Bitmap with the flip matix applied to it.
We only want the bottom half of the image*/
Bitmap reflectionImage = Bitmap.createBitmap(originalImage, 0,
height / 2, width, height / 2, matrix, false);
// Create a new bitmap with same width but taller to fit reflection
Bitmap bitmapWithReflection = Bitmap.createBitmap(width,(height + height / 2), Config.ARGB_8888);
// Create a new Canvas with the bitmap that's big enough for
// the image plus gap plus reflection
Canvas canvas = new Canvas(bitmapWithReflection);
// Draw in the original image
canvas.drawBitmap(originalImage, 0, 0, null);
//Draw the reflection Image
canvas.drawBitmap(reflectionImage, 0, height + reflectionGap, null);
// Create a shader that is a linear gradient that covers the reflection
Paint paint = new Paint();
LinearGradient shader = new LinearGradient(0,
originalImage.getHeight(), 0, bitmapWithReflection.getHeight()
+ reflectionGap, 0x99ffffff, 0x00ffffff, TileMode.CLAMP);
// Set the paint to use this shader (linear gradient)
paint.setShader(shader);
// Set the Transfer mode to be porter duff and destination in
paint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));
// Draw a rectangle using the paint with our linear gradient
canvas.drawRect(0, height, width, bitmapWithReflection.getHeight()
+ reflectionGap, paint);
if(originalImage!=null && originalImage.isRecycled()){
originalImage.recycle();
originalImage=null;
}
if(reflectionImage!=null && reflectionImage.isRecycled()){
reflectionImage.recycle();
reflectionImage=null;
}
return bitmapWithReflection;
}
}
3. note that:
- Image reflection technique is basically based on arranging two bitmaps with some opacity and gap.
- With the help of this,getRefelection() method you can get Reflection of the image,you can use it on cover flow,in view pager in fragments etc.
- Some deep information about image reflection.
- Know how to create reflection of an image bitmap from drawables.
Now-a-days lots of applications use the effect of creating a reflection of the original image, one of those being the coverflow view on the iphone. It's a nice bit of presentation polish to add to your UI, when you know it is not difficult to implement. In Android you'll need to make use of a number of classess in the graphics package such as Canvas, Matrix, Bitmap and a few others.
- 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!
Hamad Ali Shaikh
