How to make Circular ImageView and Rounded Corner ImageView in Android

How to make Circular ImageView and Rounded Corner ImageView in Android

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 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.

How to make Circular ImageView and Rounded Corner ImageView in Android

We will first create a class that we can use to change or adjust the amount of rounded corner we wanted in our ImageView. 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 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.

package inducesmile.com.androidcircularimageview;

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 http://ruibm.com/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 and convert it 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="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/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.

package inducesmile.com.androidcircularimageview;

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 code for this tutorial below. If you are having hard time downloading the tutorials, kindly contact me.

Remember to subscribe with your email so that you will be among the first to receive our new post once it is published

OTHER INTERESTING POSTS:

3 Comments

Add a Comment