Showing posts with label round-corner. Show all posts
Showing posts with label round-corner. Show all posts

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