Now you can Subscribe using RSS

Submit your Email

Monday

Rounded corners in ImageView Android Tutorial/Example

Vishal Shrestha
To get full sized from the android camera, you need to use file provider as shown in example below. What generally happens when using camera to get photos is you only get the thumbnail quality image from the data.getExtras, so to get full size image you need to save it in phone storage first and then use that image. Here are the steps involved in getting full sized image... As it's clear from the title already, in this post we will discuss how we can display round corners in an ImageView. There can be several ways to show rounded corners, some of the ones I have tried are:
  • Using a library like this one: Rounded ImageView Library
  • Create a CardView with required corner radius and put ImageView inside it.
  • Add rounding to the image itself.
In this post we will do everything our-self because, a: It's ease and b: We can. ;)
So let get started:

Here's the screenshot of rounded corner effect we will create as a result of this example:

Image-with-round-corner-in-ImageView
Round Corner in ImageView

How to Round the corners of an Image

Let's first understand how we will be rounding the corners the Image. It just requires two steps
  1. First we will draw a rectangle on a canvas with the required roundness of corners.
  2. Then we will draw the required Bitmap on the canvas with the PorterDuff.Mode.SRC_IN mode set in the paint. You are probably confused about PorterDuff, I was too. It's basically a way to merge different images with each other where different images are on different layers similar to Photoshop. Below is the image of different PorterDuff modes. You can read more about it here: PorterDuff Modes:
  3. Porter-Duff-Mode-used-for-rounding-corners-in-imageView
    Porter Duff Modes
  4. You are done! Just return the new Bitmap created by step 1 and 2 and display it in ImageView.
The Code for Rounding the corners of Image.

1. activity_main.xml
This is simple we just two ImageViews where we will add images after the corner of the image has been rounded.

<LinearLayout 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:gravity="center"
    android:orientation="vertical"
    android:padding="@dimen/activity_horizontal_margin"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="246dp"
        android:layout_height="246dp" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="246dp"
        android:layout_height="246dp" />

</LinearLayout>


2. ImageConverter.java
This is the meat of the code.  The getRoundedCornerBitmap method takes the Bitmap and the required rounded of corners as parameter and returns new Bitmap with round corners. I've comment all the main parts of the code should be self explanatory.

package com.vysh.corneredimage;

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

public class ImageConverter {
public static Bitmap getRoundedCornerBitmap(Bitmap bitmap, int pixels) {

        //Setting the width and height of the Bitmap that will be returned                        //equal to the original Bitmap that needs round corners.
        Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_8888);

        //Creating canvas with output Bitmap for drawing
        Canvas canvas = new Canvas(output);

        //Setting paint and rectangles.
        final int color = Color.BLACK;
        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);

        //SetXfermode applies PorterDuffXfermode to paint.
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));

        canvas.drawBitmap(bitmap, rect, rect, paint);

        return output;
    }
}

3. MainActivity.java
We have everything ready, now we just need the use our ImageConverter class's getRoundedCornerBitmap Method and apply the returned Bitmap as ImageView's background and we are done!

package com.vysh.corneredimage;

import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

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

        iv1 = (ImageView)findViewById(R.id.imageView1);
        iv2 = (ImageView)findViewById(R.id.imageView2);

        Bitmap bitmap1 = BitmapFactory.decodeResource(this.getResources(),R.drawable.img1);
        Bitmap circularBitmap1 = ImageConverter.getRoundedCornerBitmap(bitmap1, 100);
        Bitmap bitmap2 = BitmapFactory.decodeResource(this.getResources(),R.drawable.img2);
        Bitmap circularBitmap2 = ImageConverter.getRoundedCornerBitmap(bitmap2, 100);

        iv1.setImageBitmap(circularBitmap1);
        iv2.setImageBitmap(circularBitmap2);
    }

}

Voila! now you have finally created Images with round corner. If you have any questions, feel free to comment below. Happy Coding.

Source code: Rounded Corners in ImageView Example

Vishal Shrestha / Author & Founder

A developer by profession, a born Adventurer. I mainly do Android but like to get my hands dirty with web development and a little bit of Python. I would't rather go on a Trek than a party and you can find me having a few rounds with the heavy bag to let out the steam ;)

For Business info : My Portfolio Site.

0 comments:

Post a Comment

Coprights @ 2017 | The Code City by Vishal Shrestha Vishal Shrestha