Thursday 22 August 2013

Before Round Cornered

Round Corner the Image in ImageView

Round Corner the Image in ImageView

After Round Cornered

Round Corner the Image in ImageView
Round=30

Round Corner the Image in ImageView
Round=60


Round Corner the Image in ImageView
Round=30

Round Corner the Image in ImageView
Round=60

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.Bitmap.Config;
import android.graphics.BitmapFactory;
import android.graphics.Color;
import android.graphics.PorterDuff.Mode;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.Canvas;
import android.graphics.Paint;
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(roundCornerImage(BitmapFactory.decodeResource(getResources(), R.drawable.car),60));
 }
 public Bitmap roundCornerImage(Bitmap src, float round) {
  // Source image size
  int width = src.getWidth();
  int height = src.getHeight();
  // create result bitmap output
  Bitmap result = Bitmap.createBitmap(width, height, Config.ARGB_8888);
  // set canvas for painting
  Canvas canvas = new Canvas(result);
  canvas.drawARGB(0, 0, 0, 0);

  // configure paint
  final Paint paint = new Paint();
  paint.setAntiAlias(true);
  paint.setColor(Color.BLACK);

  // configure rectangle for embedding
  final Rect rect = new Rect(0, 0, width, height);
  final RectF rectF = new RectF(rect);

  // draw Round rectangle to canvas
  canvas.drawRoundRect(rectF, round, round, paint);

  // create Xfer mode
  paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
  // draw source image to canvas
  canvas.drawBitmap(src, rect, rect, paint);

  // return final image
  return result;
 }
}

  3. note that:
  • With the help of this,roundCornerImage() method you can Create an image with round corners on your need.
  • The logic behind this is, apply a black rounded corner rectangle to the image for this effect
  4. conclusion:
  • Some information about Rect and RectF method for round corners.
  • Know how to round corner the 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