In this tutorial we are going to learn different ways to make circular ImageView and rounded corner ImageView in android. The default ImageView in android is rectangle or square in shape so there are situations where we will like to create a circular ImageView or rounded corner ImageView in android.

This will be a simple tutorial but its important cannot be undermined when it comes to designing a visually attractive and elegant application in android.

There are different ways to achieve this but before I went further I will like us to see a sample of what we are to achieve. The image below represent a circular and rounded corner ImageView in android application.



We will first create a class that we can use to change or adjust the amount of roundedness we wanted in our image. This class can be use to create both circular and rounded corner ImageView.

Secondly, we will look into a simple library that we will add in our project which will help us to achieve the same result with less code.

Before we start, the first thing I will do is to list the environment and tools I used in this android tutorial but feel free to use whatever environment or tools you are familiar with.

Windows 7

Android Studio

Sony Xperia ZL

Min SDK 14

Target SDK 19

To create a new android application project, following the steps as stipulated below.

Go to File menu

Click on New menu

Click on Android Application

Enter Project name: AndroidCircularImageView

Package: com.inducesmile.androidcircularimageview

Keep other default selections.

Continue to click on next button until Finish button is active, then click on Finish Button

Once you are done with creating your project, make sure you change the package name if you did not use the same package.

We will create an image helper class called ImageCreator which will contain a single static method that will accept a Bitmap object and number of pixel for rounded corner as parameters. The code sample is shown below.

import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.RectF;

/*adopted from ruibm/2009/06/16/rounded-corner-bitmaps-on-android/*/

public class ImageConverter {

    public static Bitmap getRoundedCornerBitmap(Bitmap bitmap, int pixels) {
        Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(output);

        final int color = 0xff424242;
        final Paint paint = new Paint();
        final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
        final RectF rectF = new RectF(rect);
        final float roundPx = pixels;

        paint.setAntiAlias(true);
        canvas.drawARGB(0, 0, 0, 0);
        paint.setColor(color);
        canvas.drawRoundRect(rectF, roundPx, roundPx, paint);

        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        canvas.drawBitmap(bitmap, rect, rect, paint);

        return output;
    }
}

We will convert our image resource in drawable folder to a bitmap using BitmapFactory class. The Bitmap object is then passed to the static method getRoundedCornerBitmap(Bitmap bitmap, int pixels) and the result bitmap is set to the ImageView.

In our project main activity layout (activity_main.xml), one ImageView and one custom ImageView components are added to the layout file as shown in the code.

<RelativeLayout xmlns:android=""
    xmlns:tools=""
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:contentDescription="@string/hello_world"
        android:layout_marginTop="24dp" />

    <de.hdodenhof.circleimageview.CircleImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/imageView"
        android:layout_marginTop="24dp"
        android:layout_centerHorizontal="true"
        android:src="@drawable/circularimage"
        android:id="@+id/circleView"
     />

</RelativeLayout>

The custom ImageView called CircularImageView is added in the project by add a dependency in the project build.gradle file as shown below.

dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:appcompat-v7:21.0.3'
compile 'de.hdodenhof:circleimageview:1.2.1'
}

It help use to use this external library in our application. We will around assign the android:src property with an image resource.

Our MainActivity.java file is very simple and I have explain what the codes are doing. The complete code for the class is as shown.


import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.ImageView;


public class MainActivity extends ActionBarActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

Bitmap bitmap = BitmapFactory.decodeResource(this.getResources(),R.drawable.circularimage);
Bitmap circularBitmap = ImageConverter.getRoundedCornerBitmap(bitmap, 100);

ImageView circularImageView = (ImageView)findViewById(R.id.imageView);
circularImageView.setImageBitmap(circularBitmap);

}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();

//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}

return super.onOptionsItemSelected(item);
}
}

Save the file and run your project.

You can download the complete source code here http://inducesmile.com/android-tutorials-for-nigerian-developer/how-to-parse-json-in-android-example/

But android supports all image types, if i export my image as circular from photoshop or fireworks without background i can import same to android and it will still retain the shape without code.

trytillmake:
But android supports all image types, if i export my image as circular from photoshop or fireworks without background i can import same to android and it will still retain the shape without code.

You are right. It can be achieved that way but the problem is that it is not dynamic and it requires more work and time when you have many images

nollyj:


You are right. It can be achieved that way but the problem is that it is not dynamic and it requires more work and time when you have many images

no mind the guy! something u can do programmatically you dey call photoshop

Bro.... What is the essence of the code ?? Can't that CircleImageView do the job alone ??