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 importance 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 represents 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 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 the drawable folder and convert it to a bitmap using BitmapFactory class. The Bitmap object is then passed to the static methodgetRoundedCornerBitmap(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);
}
}
