Hello Friend,
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-
2)activity_main.xml-
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);
}
}
<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"
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;
}
}
For more help or suggestion post your comment.
Thanks,
Manish