Friday, August 6, 2010

Showing Image with Reflection in android

Code:
Step 1) The method which will perform Reflection of image.

public Bitmap getRefelection(Bitmap image)
   {
     //The gap we want between the reflection and the original image
       final int reflectionGap = 4;
     
       //Get you bit map 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 in the gap
      Paint deafaultPaint = new Paint();
      canvas.drawRect(0, height, width, height + reflectionGap, deafaultPaint);
      //Draw in the reflection
      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, 0x70ffffff, 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);
      return bitmapWithReflection;
   }


Step 2) Call this method in a ImageView
as

  Bitmap originalImage = BitmapFactory.decodeResource(getResources(),
                R.drawable.trisha);
      


//Create an Image view and add our bitmap with reflection to it
       ImageView imageView = new ImageView(this);
       imageView.setImageBitmap(getRefelection(originalImage));
    
       //Add the image to a linear layout and display it
       LinearLayout linLayout = new LinearLayout(this);
       linLayout.addView(imageView,   new LinearLayout.LayoutParams(   LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT                  )            );
          
        // set LinearLayout as ContentView
        setContentView(linLayout);

The Output would as follows:

The image with Reflection at the bottom of the image


2 comments:

Android Developers Blog

Ram's shared items

Amazon Product Ads