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
This demo "ok" for static image view.
ReplyDeleteBut my Requirement is: Create dynamic "Circular ImageView" and image Load from URL.
Please any idea regarding this then help me,
Thanks.
So just use above code for your dynamic image. Just use above canvas for your row.xml for imageview.
Deleteplease give the code for dynamic image..How to use it in Recyclerview
DeleteExtend the custome image view with NetworkImageView of volley library
DeleteVery nice, thank you!
ReplyDeletehow do i compress and expand an image with fingers , android code pls..?
ReplyDeletei mean resizing an image with fingers without affecting image quality , android code
ReplyDeletethank you so much .. but I seem to have a problem displaying the image.. all of the shapes displays in half. like the circle shape imageview it only display half of the image and the other half is nothing.. it seems like the image is moved towards the left side.. can you help me please
ReplyDeleteI am not sure what going on with your case, may be source image size is big and your image-view size is very less compare to original image. you can re-size your image using Bitmap method before displaying to them into image-view something like-
DeleteBitmap bitmap = Bitmap.createScaledBitmap(sourceImage, width, height, true);
Great job!!
ReplyDeleteThank you!
DeleteThank you very very much Manish, well Done!!!!
ReplyDeleteplz tell me a how set otp in android project that means ONE TIME PSSWORD in installing time or CALL SERViCES
ReplyDeleteThanks a lot Manish!!! Your code just helped me a lot! :D
ReplyDeleteHai Manish It's Superb Tutorial ....
ReplyDeleteI need the circle as Full layout(Big Circle)....
In this u r showing small circle..
For that what can i do...?
Plsss Reply me...
Hi manish thanks for posting this good tutorial, actually i am facing a problem like if i increase the width and height of the image view the actual image ill not showing in the imageview so please guide me to overcome from this issue.
ReplyDeleteThanks in advance...
This tutorial worked so smoothly....thanx a lot.
ReplyDeleteThank you and your welcome!
DeleteThis comment has been removed by the author.
Deletewhat is the library of roundimage to build?
ReplyDeleteNo library required, just use given canvas.
Deletewow!!!! you are great man .... thanks dude....
ReplyDeleteYour welcome and thanks :)
Deletei m new to android ... u made classes for shapes but where did u instantiate classes in main activity ????
ReplyDeletePlease check activity_main.xml, I am using that shape as VIEW with package name.
DeletePlease check activity_main.xml, I am using that shape as VIEW with package name.
ReplyDelete<com.androidhub4you.crop.RoundedImageView
Got it?
can you please tell me how to create heart shape Image View
ReplyDeleteI don't think Java have shape for heart. You can achieve it using SVG file, please Google for it.
DeleteThis comment has been removed by the author.
DeleteHi
DeleteCan u please tell me hw to draw a semi circle imageView.
Hi
ReplyDeleteCan u please tell me hw to draw a semi circle imageView.
Read more: http://www.androidhub4you.com/2014/10/android-custom-shape-imageview-rounded.html#ixzz3sUbVWAsk
semi circle means?
DeleteThis comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteI'm using images dynamically from an object, and the image still being a square. I did:
ReplyDeleteA class that inherits from Image View.
In my adapter I use Image View in the row line
And in the XML file I put the package of the class
Can you help me pls?
Did you try this demo? Well try below step-
Delete1)In Your Activity class just pass the list of data
2)In Adapter class load the row.xml and your adapter must extend Base Adapter.
3)in your row.xml use the canvas of shape like- com.manish.MyCustomShape.
That's all.
Thank you for your answer, I have a question, I'm using images with extension .jpg instead of .png, it has something to do? Other thing is this line in your activity: Bitmap icon = BitmapFactory.decodeResource(getResources(),R.drawable.pic1); I don't use that line. In my adapter, I set a background drawable to the Image View.
DeleteI don't know if for that reason it still not working
The line that I ignore is the key. Thank you too much for your tutorial. It's easy, and without other libraries , I love it
DeleteThank you nice lines!
DeleteWhat about the square image ? i can't find the square.java file can you please send me this code?
ReplyDeleteWhy you need square image shape? Android res provide us square shape so we don't need canvas. well you can create shape too it is not much tough. You can get code for that on stackoverflow.
Deletevery nice tutorial. thank you.
ReplyDeleteThanks buddy!
Deleteyour image static but not dynamic use .so please idea for dynamic image use
ReplyDelete1)If you are trying to display in list-view then inside base adapter convert your image URL to bitmap using lazy loading and set it on your image-view.
Delete2)If you have 1 image inside activity then just convert it into Bitmap and set on your ImageView.
Thanks,you save my day !
ReplyDeleteYour welcome and thank you!
Deleteyour code is work fine when i added a button for taking gallery image before that app is crashing.plz help me sort out this problem.
ReplyDeleteshare your log cat please.
DeleteThanks a lot for this code it's really works good. But I have one problem image is compressed inside the imageview, height is ok but but width is compressed. I changed the valued of getwidth in the class but there is no correction. Thanks
ReplyDeleteI think you are using a big size of image to set into small size of imageView. So solution is before setting into imageView resize your image. you will find code to resize image on stackoverflow. Some thing like height/4, width/4.
DeleteThanks, I am sure you are righte I'll see how can I fix it.
ReplyDeleteplease provide the dependencies
ReplyDeleteThis project have no dependencies, just copy the canvas file and call inside your layout with package name.
Deletehey thanks this is awesome, I do have one question (I'm a little new to custom views in android). My image is getting squished when i input it, is there a way to have the view not resize the image and instead just trim off the corners (very similar to what happens in html when you use border-radius)
ReplyDeleteThanks!
Hey I tried above code i am getting NullPointerException on line
ReplyDeleteBitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);
can you help me to get out of this problem.
Thanxs.
Just make null check-
Deleteif(bitmap!=null){
//only then go inside
Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);
}
This comment has been removed by the author.
ReplyDeleteActual problem was from here
ReplyDeleteBitmap icon = BitmapFactory.decodeResource(getResources(), R.drawable.mickeymouse);
I am not able to use getResources() function because I have created a custom adapter and extending ArrayAdapter.
Please help me with solution.
Thanking you.
I am not sure where is problem, just pass the context and we have it inside our canvas-
Deletepublic TriangleImageView(Context ctx, AttributeSet attrs) {
super(ctx, attrs);
}
so from there you can use context something like this-
ctx.getResources().
or you can create a global variable too like-
on top-
Context context;
and inside constructor-
this.contex=ctx;
and use this contex with getResoucres().
This comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteI have tried it but what is "pic1" on this line
ReplyDelete-> Bitmap icon = BitmapFactory.decodeResource(getResources(), R.drawable.pic1);
It will show cannot resolve the symbol pic1
Thanks!!! :)
ReplyDeleteHello, first, thanks for the tutorial. I have a question, why you copy the original bitmap? this step is necesary? You can explain me please? Thanks
ReplyDeletebaki sab theeek hai, ye batao ke custom view ke bahar border kaise denge.
ReplyDelete