Android Custom Shape Imageview

Today I am sharing an article for custom shape image-view in android using canvas. There is no library needed, using canvas you can make any type of shape with simple java code. You can make any shape like- circle, oval, triangle, Hexagonal or any thing else. Below is the code copy to them according to your need.

1)MainActivity.java-
package com.androidhub4you.crop;

import android.app.Activity;

import android.graphics.Bitmap;

import android.graphics.BitmapFactory;

import android.os.Bundle;

import android.widget.ImageView;

public class MainActivity extends Activity {

 

private ImageView imageViewRound;

private ImageView imageViewOval;

private ImageView imageViewTriangle;

private ImageView imageViewHexaGon;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

imageViewRound=(ImageView)findViewById(R.id.imageView_round);

imageViewOval=(ImageView)findViewById(R.id.imageView_oval);

imageViewTriangle=(ImageView)findViewById(R.id.imageView_triangle);

imageViewHexaGon=(ImageView)findViewById(R.id.imageView_hexagon);

 

Bitmap icon = BitmapFactory.decodeResource(getResources(),R.drawable.pic1);

 

imageViewRound.setImageBitmap(icon);

imageViewOval.setImageBitmap(icon);

imageViewTriangle.setImageBitmap(icon);

imageViewHexaGon.setImageBitmap(icon);

 

 

}

 

}

 

2)activity_main.xml-

<LinearLayout xmlns:android=http://schemas.android.com/apk/res/android&#8221;

xmlns:tools=http://schemas.android.com/tools&#8221;

android:layout_width=“match_parent”

android:layout_height=“match_parent”

android:gravity=“center”

android:orientation=“vertical”

tools:context=“.MainActivity” >

<com.androidhub4you.crop.RoundedImageView

android:id=“@+id/imageView_round”

android:layout_width=“100dp”

android:layout_height=“100dp”

android:layout_marginTop=“15dp”

android:src=“@drawable/ic_launcher” />

<com.androidhub4you.crop.OvalImageView

android:id=“@+id/imageView_oval”

android:layout_width=“100dp”

android:layout_height=“100dp”

android:layout_marginTop=“15dp”

android:src=“@drawable/ic_launcher” />

<com.androidhub4you.crop.TriangleImageView

android:id=“@+id/imageView_triangle”

android:layout_width=“100dp”

android:layout_height=“100dp”

android:layout_marginTop=“15dp”

android:src=“@drawable/ic_launcher” />

<com.androidhub4you.crop.HexagonImageView

android:id=“@+id/imageView_hexagon”

android:layout_width=“100dp”

android:layout_height=“100dp”

android:layout_marginTop=“15dp”

android:src=“@drawable/ic_launcher” />

</LinearLayout>

Circle Shape:

package com.androidhub4you.crop;

import android.content.Context;

import android.graphics.Bitmap;

import android.graphics.Bitmap.Config;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.graphics.PorterDuff.Mode;

import android.graphics.PorterDuffXfermode;

import android.graphics.Rect;

import android.graphics.drawable.BitmapDrawable;

import android.graphics.drawable.Drawable;

import android.util.AttributeSet;

import android.widget.ImageView;

public class RoundedImageView extends ImageView {

public RoundedImageView(Context ctx, AttributeSet attrs) {

super(ctx, attrs);

}

@Override

protected void onDraw(Canvas canvas) {

Drawable drawable = getDrawable();

if (drawable == null) {

return;

}

if (getWidth() == 0 || getHeight() == 0) {

return;

}

Bitmap b = ((BitmapDrawable) drawable).getBitmap();

Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);

int w = getWidth(), h = getHeight();

Bitmap roundBitmap = getRoundedCroppedBitmap(bitmap, w);

canvas.drawBitmap(roundBitmap, 0, 0, null);

}

public static Bitmap getRoundedCroppedBitmap(Bitmap bitmap, int radius) {

Bitmap finalBitmap;

if (bitmap.getWidth() != radius || bitmap.getHeight() != radius)

finalBitmap = Bitmap.createScaledBitmap(bitmap, radius, radius,

false);

else

finalBitmap = bitmap;

Bitmap output = Bitmap.createBitmap(finalBitmap.getWidth(),

finalBitmap.getHeight(), Config.ARGB_8888);

Canvas canvas = new Canvas(output);

final Paint paint = new Paint();

final Rect rect = new Rect(0, 0, finalBitmap.getWidth(),

finalBitmap.getHeight());

paint.setAntiAlias(true);

paint.setFilterBitmap(true);

paint.setDither(true);

canvas.drawARGB(0, 0, 0, 0);

paint.setColor(Color.parseColor(“#BAB399”));

canvas.drawCircle(finalBitmap.getWidth() / 2 + 0.7f,

finalBitmap.getHeight() / 2 + 0.7f,

finalBitmap.getWidth() / 2 + 0.1f, paint);

paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));

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

return output;

}

}

Oval Shape:

package com.androidhub4you.crop;

import android.content.Context;

import android.graphics.Bitmap;

import android.graphics.Bitmap.Config;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.graphics.PorterDuff.Mode;

import android.graphics.PorterDuffXfermode;

import android.graphics.Rect;

import android.graphics.RectF;

import android.graphics.drawable.BitmapDrawable;

import android.graphics.drawable.Drawable;

import android.util.AttributeSet;

import android.widget.ImageView;

public class OvalImageView extends ImageView {

public OvalImageView(Context ctx, AttributeSet attrs) {

super(ctx, attrs);

}

@Override

protected void onDraw(Canvas canvas) {

Drawable drawable = getDrawable();

if (drawable == null) {

return;

}

if (getWidth() == 0 || getHeight() == 0) {

return;

}

Bitmap b = ((BitmapDrawable) drawable).getBitmap();

Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);

int w = getWidth(), h = getHeight();

Bitmap roundBitmap = getOvalCroppedBitmap(bitmap, w);

canvas.drawBitmap(roundBitmap, 0, 0, null);

}

public static Bitmap getOvalCroppedBitmap(Bitmap bitmap, int radius) {

Bitmap finalBitmap;

if (bitmap.getWidth() != radius || bitmap.getHeight() != radius)

finalBitmap = Bitmap.createScaledBitmap(bitmap, radius, radius,

false);

else

finalBitmap = bitmap;

Bitmap output = Bitmap.createBitmap(finalBitmap.getWidth(),

finalBitmap.getHeight(), Config.ARGB_8888);

Canvas canvas = new Canvas(output);

Paint paint = new Paint();

final Rect rect = new Rect(0, 0, finalBitmap.getWidth(),

finalBitmap.getHeight());

paint.setAntiAlias(true);

paint.setFilterBitmap(true);

paint.setDither(true);

canvas.drawARGB(0, 0, 0, 0);

paint.setColor(Color.parseColor(“#BAB399”));

RectF oval = new RectF(0, 0, 130, 150);

canvas.drawOval(oval, paint);

paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));

canvas.drawBitmap(finalBitmap, rect, oval, paint);

return output;

}

}

Triangle Shape:

package com.androidhub4you.crop;

import android.content.Context;

import android.graphics.Bitmap;

import android.graphics.Bitmap.Config;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.graphics.Path;

import android.graphics.Point;

import android.graphics.PorterDuff.Mode;

import android.graphics.PorterDuffXfermode;

import android.graphics.Rect;

import android.graphics.drawable.BitmapDrawable;

import android.graphics.drawable.Drawable;

import android.util.AttributeSet;

import android.widget.ImageView;

public class TriangleImageView extends ImageView {

public TriangleImageView(Context ctx, AttributeSet attrs) {

super(ctx, attrs);

}

@Override

protected void onDraw(Canvas canvas) {

Drawable drawable = getDrawable();

if (drawable == null) {

return;

}

if (getWidth() == 0 || getHeight() == 0) {

return;

}

Bitmap b = ((BitmapDrawable) drawable).getBitmap();

Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);

int w = getWidth(), h = getHeight();

Bitmap roundBitmap = getRoundedCroppedBitmap(bitmap, w);

canvas.drawBitmap(roundBitmap, 0, 0, null);

}

public static Bitmap getRoundedCroppedBitmap(Bitmap bitmap, int radius) {

Bitmap finalBitmap;

if (bitmap.getWidth() != radius || bitmap.getHeight() != radius)

finalBitmap = Bitmap.createScaledBitmap(bitmap, radius, radius,

false);

else

finalBitmap = bitmap;

Bitmap output = Bitmap.createBitmap(finalBitmap.getWidth(),

finalBitmap.getHeight(), Config.ARGB_8888);

Canvas canvas = new Canvas(output);

Paint paint = new Paint();

final Rect rect = new Rect(0, 0, finalBitmap.getWidth(),

finalBitmap.getHeight());

Point point1_draw = new Point(75, 0);

Point point2_draw = new Point(0, 180);

Point point3_draw = new Point(180, 180);

Path path = new Path();

path.moveTo(point1_draw.x, point1_draw.y);

path.lineTo(point2_draw.x, point2_draw.y);

path.lineTo(point3_draw.x, point3_draw.y);

path.lineTo(point1_draw.x, point1_draw.y);

path.close();

canvas.drawARGB(0, 0, 0, 0);

paint.setColor(Color.parseColor(“#BAB399”));

canvas.drawPath(path, paint);

paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));

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

return output;

}

}

Hexagonal Shape:

package com.androidhub4you.crop;

import android.content.Context;

import android.graphics.Bitmap;

import android.graphics.Bitmap.Config;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.graphics.Path;

import android.graphics.Point;

import android.graphics.PorterDuff.Mode;

import android.graphics.PorterDuffXfermode;

import android.graphics.Rect;

import android.graphics.drawable.BitmapDrawable;

import android.graphics.drawable.Drawable;

import android.util.AttributeSet;

import android.widget.ImageView;

public class HexagonImageView extends ImageView {

public HexagonImageView(Context ctx, AttributeSet attrs) {

super(ctx, attrs);

}

@Override

protected void onDraw(Canvas canvas) {

Drawable drawable = getDrawable();

if (drawable == null) {

return;

}

if (getWidth() == 0 || getHeight() == 0) {

return;

}

Bitmap b = ((BitmapDrawable) drawable).getBitmap();

Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);

int w = getWidth(), h = getHeight();

Bitmap roundBitmap = getRoundedCroppedBitmap(bitmap, w);

canvas.drawBitmap(roundBitmap, 0, 0, null);

}

public static Bitmap getRoundedCroppedBitmap(Bitmap bitmap, int radius) {

Bitmap finalBitmap;

if (bitmap.getWidth() != radius || bitmap.getHeight() != radius)

finalBitmap = Bitmap.createScaledBitmap(bitmap, radius, radius,

false);

else

finalBitmap = bitmap;

Bitmap output = Bitmap.createBitmap(finalBitmap.getWidth(),

finalBitmap.getHeight(), Config.ARGB_8888);

Canvas canvas = new Canvas(output);

Paint paint = new Paint();

final Rect rect = new Rect(0, 0, finalBitmap.getWidth(),

finalBitmap.getHeight());

Point point1_draw = new Point(75, 0);

Point point2_draw = new Point(0, 50);

Point point3_draw = new Point(0, 100);

Point point4_draw = new Point(75, 150);

Point point5_draw = new Point(150, 100);

Point point6_draw = new Point(150, 50);

Path path = new Path();

path.moveTo(point1_draw.x, point1_draw.y);

path.lineTo(point2_draw.x, point2_draw.y);

path.lineTo(point3_draw.x, point3_draw.y);

path.lineTo(point4_draw.x, point4_draw.y);

path.lineTo(point5_draw.x, point5_draw.y);

path.lineTo(point6_draw.x, point6_draw.y);

path.close();

canvas.drawARGB(0, 0, 0, 0);

paint.setColor(Color.parseColor(“#BAB399”));

canvas.drawPath(path, paint);

paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));

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

return output;

}

}

DOWONLOAD ZIP CODE

For more help or suggestion post your comment.

Thanks,
Read more: http://www.androidhub4you.com/2014/10/android-custom-shape-imageview-rounded.html#ixzz3K3Dy8crM

Advertisements

One comment on “Android Custom Shape Imageview

  1. Hi my name is Denise and I just wanted to drop you a quick note here instead of calling you. I discovered your Android Custom Shape Imageview | Rz Rasel page and noticed you could have a lot more hits. I have found that the key to running a successful website is making sure the visitors you are getting are interested in your subject matter. There is a company that you can get targeted traffic from and they let you try the service for free for 7 days. I managed to get over 300 targeted visitors to day to my site. Visit them here: http://bbqr.me/4fj5

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s