Develop Reference

Circular ImageView on Xamarin

I am working on a Xamarin Android application, and I need to make a Circular ImageView.
How can this be achieved?

I use the RoundedImageView library. It's written in Java, but you can write a binding to it without much problems. Once you do, you can simply add this to your .axml:
<RoundedImageView
local:riv_corner_radius="15dp"
local:riv_oval="false"
android:scaleType="centerCrop"
android:layout_width="30dp"
android:layout_height="30dp" />
Edit for future readers: I wrote a port of the RoundedImageView for Xamarin.Android, based on the library linked on this post. The source code can be found here and the NuGet package here. A MvxRoundedImageView is also included for use with MvvmCross.

Refer link: https://github.com/jamesmontemagno/CircleImageView-Xamarin.Android/blob/master/CircleImageSample/Resources/layout/Main.axml?
<refractored.controls.CircleImageView
android:id="#+id/ImageProfile"
android:layout_width="80dp"
android:layout_height="80dp"
android:scaleType="fitCenter"
android:src="#drawable/app_icon"
android:layout_gravity="center_horizontal"/>
===========================================================================
Add reference of Refractored.controls.CircleImageView to your project from nuget package.

Xamarin component is Available for the same, you can check it here

public class CircleDrawable : Drawable
{
Bitmap bmp;
BitmapShader bmpShader;
Paint paint;
RectF oval;
public CircleDrawable (Bitmap bmp)
{
this.bmp = bmp;
this.bmpShader = new BitmapShader (bmp, Shader.TileMode.Clamp, Shader.TileMode.Clamp);
this.paint = new Paint () { AntiAlias = true };
this.paint.SetShader (bmpShader);
this.oval = new RectF ();
}
public override void Draw (Canvas canvas)
{
canvas.DrawOval (oval, paint);
}
protected override void OnBoundsChange (Rect bounds)
{
base.OnBoundsChange (bounds);
oval.Set (0, 0, bounds.Width (), bounds.Height ());
}
public override int IntrinsicWidth {
get {
return bmp.Width;
}
}
public override int IntrinsicHeight {
get {
return bmp.Height;
}
}
public override void SetAlpha (int alpha)
{
}
public override int Opacity {
get {
return (int)Format.Opaque;
}
}
public override void SetColorFilter (ColorFilter cf)
{
}
}
Source: https://github.com/xamarin/xamarin-store-app/blob/master/XamarinStore.Droid/Views/CircleDrawable.cs

Refer these links:
How to create a circular ImageView in Android?
How to make an ImageView with rounded corners?
The above code works for native android. You need to tweak the code to convert into c# syntax and adopt for xamarin android. For your convenience I have changed the code to c#.
public class ImageHelper
{
public static Bitmap getRoundedCornerBitmap(Bitmap bitmap, int pixels) {
Bitmap output = Bitmap.CreateBitmap(bitmap.Width, bitmap.Height
, Android.Graphics.Bitmap.Config.Argb8888);
Canvas canvas = new Canvas(output);
Color color = Color.DodgerBlue;
Paint paint = new Paint();
Rect rect = new Rect(0, 0, bitmap.Width, bitmap.Height);
RectF rectF = new RectF(rect);
float roundPx = pixels;
paint.AntiAlias = true;
canvas.DrawARGB(0, 0, 0, 0);
paint.Color = color;
canvas.DrawRoundRect(rectF, roundPx, roundPx, paint);
paint.SetXfermode(new PorterDuffXfermode(Android.Graphics.PorterDuff.Mode.SrcIn));
canvas.DrawBitmap(bitmap, rect, rect, paint);
return output;
}

Rounded corners with Picasso

Is there a reasonable way to do rounded corners with Picasso that
Doesn't significantly slow down drawing
Works with hardware layers
Doesn't create an extra bitmap for each image
Allows resizing the downloaded bitmap into the size of the destination imageview
Most of the picasso advice on rounded corners suggests that a transformation be used, but I haven't seen an example that doesn't create an extra bitmap as part of the transformation.
This seems to be because Picasso only uses bitmaps, while the tricks to do rounded corners use the fact that you can dynamically draw the rounded corners on reasonably efficiently (most solutions use something along the lines of http://www.curious-creature.org/2012/12/11/android-recipe-1-image-with-rounded-corners/).
Doing this with Volley was a bit hacky but possible, by just changing the type of ImageView to something that took a custom drawable, which drew rounded corners. Since Picasso needs bitmaps (at least, there's only a bitmap -> bitmap transformation), this is out, since the conversion of the drawable to bitmap creates a bitmap in the process.
One solution would be to do the work to modify picasso in a branch on my own that added a bitmap -> drawable transform, but I'd imagine there's a better way to go about this.
I do not want to draw a 9-patch on top of a view to give the appearance of rounded corners.

This code works fine for me
Picasso.with(getApplicationContext())
.load(sp.getString("image_url", ""))
.transform(new RoundedTransformation(100, 0))
.fit()
.into(userProfileImg);
// here is the class for make
public class RoundedTransformation implements
com.squareup.picasso.Transformation {
private final int radius;
private final int margin; // dp
// radius is corner radii in dp
// margin is the board in dp
public RoundedTransformation(final int radius, final int margin) {
this.radius = radius;
this.margin = margin;
}
#Override
public Bitmap transform(final Bitmap source) {
final Paint paint = new Paint();
paint.setAntiAlias(true);
paint.setShader(new BitmapShader(source, Shader.TileMode.CLAMP,
Shader.TileMode.CLAMP));
Bitmap output = Bitmap.createBitmap(source.getWidth(),
source.getHeight(), Config.ARGB_8888);
Canvas canvas = new Canvas(output);
canvas.drawRoundRect(new RectF(margin, margin, source.getWidth()
- margin, source.getHeight() - margin), radius, radius, paint);
if (source != output) {
source.recycle();
}
return output;
}
#Override
public String key() {
return "rounded";
}
}

I also needed something like this, but with a border. I've searched the internet and I've found one version (without rounded corners) that looked good, but the border was over the image and I didn't like that. So I made my own version with the border outside the image.
public class BitmapBorderTransformation implements Transformation {
private int mBorderSize;
private int mCornerRadius = 0;
private int mColor;
public BitmapBorderTransformation(int borderSize, int color) {
this.mBorderSize = borderSize;
this.mColor = color;
}
public BitmapBorderTransformation(int borderSize, int cornerRadius, int color) {
this.mBorderSize = borderSize;
this.mCornerRadius = cornerRadius;
this.mColor = color;
}
#Override
public Bitmap transform(Bitmap source) {
int width = source.getWidth();
int height = source.getHeight();
Bitmap image = Bitmap.createBitmap(width, height, source.getConfig());
Canvas canvas = new Canvas(image);
canvas.drawARGB(0, 0, 0, 0);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
Rect rect = new Rect(0, 0, width, height);
if(this.mCornerRadius == 0) {
canvas.drawRect(rect, paint);
}
else {
canvas.drawRoundRect(new RectF(rect),
this.mCornerRadius, this.mCornerRadius, paint);
}
paint.setXfermode(new PorterDuffXfermode((PorterDuff.Mode.SRC_IN)));
canvas.drawBitmap(source, rect, rect, paint);
Bitmap output;
if(this.mBorderSize == 0) {
output = image;
}
else {
width = width + this.mBorderSize * 2;
height = height + this.mBorderSize * 2;
output = Bitmap.createBitmap(width, height, source.getConfig());
canvas.setBitmap(output);
canvas.drawARGB(0, 0, 0, 0);
rect = new Rect(0, 0, width, height);
paint.setXfermode(null);
paint.setColor(this.mColor);
paint.setStyle(Paint.Style.FILL);
canvas.drawRoundRect(new RectF(rect), this.mCornerRadius, this.mCornerRadius, paint);
canvas.drawBitmap(image, this.mBorderSize, this.mBorderSize, null);
}
if(source != output){
source.recycle();
}
return output;
}
#Override
public String key() {
return "bitmapBorder(" +
"borderSize=" + this.mBorderSize + ", " +
"cornerRadius=" + this.mCornerRadius + ", " +
"color=" + this.mColor +")";
}
}
Here are some samples:
Border with rounded corners:
new BitmapBorderTransformation(3, 15, Color.WHITE);
http://postimg.org/image/68fz5md39/
Rounded corners without border:
new BitmapBorderTransformation(0, 15, Color.WHITE);
http://postimg.org/image/he4681rsv/
Also you can do border without rounded corners:
new BitmapBorderTransformation(3, Color.WHITE);

this will work for any image of any size--
1) first create an empty image container for different resolution
2) then on runtime get its height and width by this-------
BitmapFactory.Options dimensions = new BitmapFactory.Options();
dimensions.inJustDecodeBounds = true;
Bitmap mBitmap = BitmapFactory.decodeResource(activity.getResources(), R.drawable.icon, dimensions);
int height = dimensions.outHeight;
int width = dimensions.outWidth;
3)
Picasso.with(getActivity())
.load(url)
.error(R.drawable.image2)
.placeholder(R.drawable.ic_drawer)
.resize(width, height )
.transform(new ImageTrans_roundedcorner())
.into(imageView1);
4) now transformation class----
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff.Mode;
import android.graphics.PorterDuffXfermode;
import android.graphics.Bitmap.Config;
import android.graphics.Rect;
import android.graphics.RectF;
import com.squareup.picasso.Transformation;
public class ImageTrans_roundedcorner implements Transformation{
private int mBorderSize=10;
private int mCornerRadius = 20;
private int mColor=Color.BLACK;
#Override
public Bitmap transform(Bitmap source) {
// TODO Auto-generated method stub
Bitmap output = Bitmap.createBitmap(source.getWidth(), source.getHeight(), Config.ARGB_8888);
Canvas canvas = new Canvas(output);
final int color = 0xff424242;
final Paint paint = new Paint();
final Rect rect = new Rect(0, 0, source.getWidth(), source.getHeight());
final RectF rectF = new RectF(rect);
final float roundPx = mCornerRadius;
paint.setAntiAlias(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(color);
canvas.drawRoundRect(rectF, roundPx, roundPx, paint);
paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
canvas.drawBitmap(source, rect, rect, paint);
// draw border
paint.setColor(color);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth((float) mBorderSize);
canvas.drawRoundRect(rectF, mCornerRadius, mCornerRadius, paint);
//-------------------
if(source != output) source.recycle();
return output;
}
#Override
public String key() {
// TODO Auto-generated method stub
return "grayscaleTransformation()";
}
}

EDIT: the answer I would suggest would be to wait for Picasso 2.3, or fork their github now, where you can actually get at a BitmapDrawable.
One approach I've found so far is that you can load images into a Target object, create a custom drawable from the bitmap that way, then set the drawable into the ImageView, where it'll draw without creating a new bitmap.
This approach sort of sucks for a few reasons though:
1) You have to manage Target objects. These are weak-referenced (thankfully), so you have to keep track of them yourself. Ick. Memory leaks ahoy.
2) When you get the callback, you had better check to make sure the state of the world is still relevant to the picture, which is part of what you want to avoid by using picasso.
In short, there are a few things that seem to prevent a better solution.
1) Picasso wraps bitmaps in PicassoDrawables. This means you you have to handle arbitrary drawables in your custom imageView (if you go that route), or special case for this class.
2) PicassoDrawable doesn't expose the source bitmap, so you have to convert the drawable to a bitmap (requires creating a new bitmap, afaict).
3) There's no bitmap -> drawable transform function (see #1 for why, most likely).
Would love to hear if there's something I'm missing, or someone has come up with a better solution. Right now my best plan is to either do the Target management proposed above, or fork the picasso repo, change PicassoDrawable to have a public accessor for the underlying bitmap, and do the conversion into a custom drawable that way in my imageView.

Creating a shadow around a canvas drawn shape?

What steps are required to create a shape e.g. rectangle with a shadow from scratch using a Canvas?
Adding a shadow layer to the paint used to draw the rectangle yielded no success.

No need for a Bitmap, just needed to set the layer type to LAYER_TYPE_SOFTWARE the original approach worked.
public class TestShapeShadow extends View
{
Paint paint;
public TestShapeShadow(Context context)
{
super(context);
paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setShadowLayer(12, 0, 0, Color.YELLOW);
// Important for certain APIs
setLayerType(LAYER_TYPE_SOFTWARE, paint);
}
#Override
protected void onDraw(Canvas canvas)
{
canvas.drawRect(20, 20, 100, 100, paint);
}
}

I followed the ideas in #pskink's answer and found a solution.
I put the code snippet here for anyone in need.
public class MyViewWithShadow extends View {
Paint paint;
int mainColor;
int shadowColor;
// shadow properties
int offsetX = -25;
int offsetY = 30;
int blurRadius = 5;
public MyViewWithShadow(Context context)
{
super(context);
mainColor = Color.RED;
shadowColor = Color.BLACK; // this color can also have alpha
paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setStyle(Paint.Style.FILL);
}
#Override
protected void onDraw(Canvas canvas)
{
// Create paint for shadow
paint.setColor(shadowColor);
paint.setMaskFilter(new BlurMaskFilter(
blurRadius /* shadowRadius */,
BlurMaskFilter.Blur.NORMAL));
// Draw shadow before drawing object
canvas.drawRect(20 + offsetX, 20 + offsetY, 100 + offsetX, 100 + offsetY, paint);
// Create paint for main object
paint.setColor(mainColor);
paint.setMaskFilter(null);
// Draw main object
canvas.drawRect(20, 20, 100, 100, paint);
}
}
[Link is now broken:]
If you wonder what shadow properties are, you can refer to this tester:
https://okawa-h.github.io/box-shadow_tester/~

create. a Path, add some elements to it
set BlurMaskFilter to a Paint
draw a path with dx, dy shadow offset
unset mask filter
draw a path again with no. offset

How to use custom views, e.g. setting drawable

I think I'm a bit confused about how to use custom views. I'm following along with slides from a talk given by Eric Burke from Square (from this year's anddevcon, slides here: http://www.andevcon.com/AndevCon_II/downloadpresentation.aspx?aid=Taming_Android__User_Experience_Lessons_from_Square_pdf.zip&sid=2).
His code, or at least the part he showed in the slides, went something like this:
public class EditablePhoto extends View {
private Bitmap framedPhoto;
private Bitmap image;
private Drawable placeholder;
public EditablePhoto(Context context) {
super(context);
}
#Override protected void onMeasure(int widthMeasureSpec,
int heightMeasureSpec) {
int measuredWidth = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);
int measuredHeight = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);
//ensure view always square
int min = Math.min(measuredHeight, measuredWidth);
setMeasuredDimension(min, min);
}
#Override
protected void onDraw(Canvas canvas) {
if(placeholder == null && image==null) return;
if(framedPhoto == null) {
createFramedPhoto(Math.min(getWidth(), getHeight()));
}
canvas.drawBitmap(framedPhoto, 0, 0, null);
}
private void createFramedPhoto(int size) {
Drawable imageDrawable = (image!=null)
? new BitmapDrawable(image) : placeholder;
Bitmap output = Bitmap.createBitmap(size, size,
Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(output);
RectF outerRect = new RectF(0, 0, size, size);
float outerRadius = size / 18f;
//Red rectangle
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setColor(Color.RED);
canvas.drawRoundRect(outerRect, outerRadius, outerRadius, paint);
paint.setXfermode(new PorterDuffXfermode(
PorterDuff.Mode.SRC_IN));
imageDrawable.setBounds(0, 0, size, size);
canvas.saveLayer(outerRect, paint, Canvas.ALL_SAVE_FLAG);
imageDrawable.draw(canvas);
canvas.restore();
}
}
What I don't get is how to actually use this View now.... Where and when do you set the bitmaps, which are private fields in this class...?
Generally confused and would love some enlightenment.

More than one year passed, but I hope this will help anyone who looking for the right answer. In my case, I putted this line of code
framedPhoto = output;
as the last one in createFramedPhoto() method. It works.
In the example, the author created a rounded rectangle as background then he draw the bitmap on it with XOR mode, so all pixel outside the rounded rectangle will be trim off.

OnDraw() is the method where you will Draw your view on canvas. here too you can analyze onDraw() will fisrt call CreateFramePhoto then draw this Bitmap on canvas .
You can add this customView in layout Either from xml or in Java Class
1) Through Xml :
<EditablePhoto android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
..........................
/>
dont forgate to add constructor EditablePhoto(Context context, AttributeSet attributeSet) for this case
2) through Java class :
EditablePhoto editablePhoto = new EditablePhoto(this);
addView(editablePhoto) // or do anthing you want with this

Android - Touch to erase portions of foreground ImageView to expose background View

So I've been struggling with this for a better part of a day. Suppose I have a custom ImageView that I want to overlay over a background View (both within a RelativeLayout), which when touched, it erases portions of the View's source bitmap like an erase tool in MS Paint, exposing the View below it. I've checked pretty much all of the threads (like this one) and they suggest to use PorterDuff SRC Mode in the Paint object as well as creating a Canvas out out the ARGB_8888 shadow copy of the source bitmap to apply the masking.
Also, I can't set the source of the overlay ahead of time since I have to download it over the network so that the ImageView's scale type takes care of the scaling for me.
Every time I override onDraw, when I apply the erase on the IV's Bitmap, it unveils a black background instead of the view below it, even though I set the background to transparent. So I'm at my last rope as to what to do in order to unveil the background view.
Here's what I have so far:
view constructor:
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
paint.setColor(Color.TRANSPARENT);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeJoin(Paint.Join.ROUND);
paint.setStrokeWidth(STROKE_WIDTH);
paint.setAntiAlias(true);
overrode setImageBitmap to set my canvas from my re-configed source bitmap:
public void setImageBitmap(Bitmap bitmap){
super.setImageBitmap(bitmap);
Drawable bd = getDrawable();
if(bd == null){
return;
}
Bitmap fullSizeBitmap = ((BitmapDrawable) bd).getBitmap();
overlay = fullSizeBitmap.copy(Config.ARGB_8888, true);
c2 = new Canvas(overlay);
}
onDraw method:
protected void onDraw(Canvas canvas) {
/*
* Override paint call by re-drawing the view's Bitmap first, then overlaying our path on top of it
*/
Drawable bd = getDrawable();
if(bd == null){
return;
}
Bitmap fullSizeBitmap = ((BitmapDrawable) bd).getBitmap();
if(fullSizeBitmap != null && c2 != null){
canvas.drawColor(Color.TRANSPARENT);
c2.drawBitmap(fullSizeBitmap, 0, 0, null);
c2.drawPath(path, paint);
canvas.drawBitmap(overlay, 0, 0, null);
}
}

I know this is a really old question but here is what I did to fix a similar problem I had. Maybe it helps someone in the future.
From API level 11 and up you have to specify this piece of code for your ImageView to unveil the image in the back and not a black area.
if (Build.VERSION.SDK_INT >= 11) {
imageview.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}
This helped me displaying the back image successfully

Can you try this solution it will help you with the erasing images in android on touch .. Or download a demo example
public class MainActivity extends Activity {
Bitmap bp;
Canvas bitmapCanvas;
DrawView drawImg;
LinearLayout ln1;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ln1 = (LinearLayout) findViewById(R.id.ln1);
drawImg = new DrawView(this);
ln1.addView(drawImg);
}
public class DrawView extends View implements View.OnTouchListener {
private int x = 0;
private int y = 0;
Bitmap bitmap;
Path circlePath;
Paint circlePaint;
private final Paint paint = new Paint();
private final Paint eraserPaint = new Paint();
public DrawView(Context context){
super(context);
setFocusable(true);
setFocusableInTouchMode(true);
this.setOnTouchListener(this);
// Set background
this.setBackgroundColor(Color.CYAN);
bp = BitmapFactory.decodeResource(getResources(), R.drawable.bg);
// Set bitmap
bitmap = Bitmap.createBitmap(320, 480, Bitmap.Config.ARGB_8888);
bitmapCanvas = new Canvas();
bitmapCanvas.setBitmap(bitmap);
bitmapCanvas.drawColor(Color.TRANSPARENT);
bitmapCanvas.drawBitmap(bp, 0, 0, null);
circlePath = new Path();
circlePaint = new Paint();
circlePaint.setAntiAlias(true);
circlePaint.setColor(Color.BLUE);
circlePaint.setStyle(Paint.Style.STROKE);
circlePaint.setStrokeJoin(Paint.Join.MITER);
circlePaint.setStrokeWidth(4f);
// Set eraser paint properties
eraserPaint.setAlpha(0);
eraserPaint.setStrokeJoin(Paint.Join.ROUND);
eraserPaint.setStrokeCap(Paint.Cap.ROUND);
eraserPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
eraserPaint.setAntiAlias(true);
}
#Override
public void onDraw(Canvas canvas) {
canvas.drawBitmap(bitmap, 0, 0, paint);
bitmapCanvas.drawCircle(x, y, 30, eraserPaint);
canvas.drawPath(circlePath, circlePaint);
}
public boolean onTouch(View view, MotionEvent event) {
x = (int) event.getX();
y = (int) event.getY();
bitmapCanvas.drawCircle(x, y, 30, eraserPaint);
circlePath.reset();
circlePath.addCircle(x, y, 30, Path.Direction.CW);
int ac=event.getAction();
switch(ac){
case MotionEvent.ACTION_UP:
Toast.makeText(MainActivity.this, String.valueOf(x), Toast.LENGTH_SHORT).show();
circlePath.reset();
break;
}
invalidate();
return true;
}
}
}