Mask ImageView with round corner background
The best way is to do it in Canvas
using PorterDuff
operations and/or Shaders
. Let's say your Bitmap
is available and stored in mBitmap
.
Option 1: Using Shaders.
@Override
public void onDraw(Canvas canvas) {
super.onDraw(canvas);
// Load the bitmap as a shader to the paint.
final Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
final Shader shader = new BitmapShader(mBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
paint.setShader(shader);
// Draw a circle with the required radius.
final float halfWidth = canvas.getWidth()/2;
final float halfHeight = canvas.getHeight()/2;
final float radius = Math.max(halfWidth, halfHeight);
canvas.drawCircle(halfWidth, halfHeight, radius, paint);
}
Option 2: Using PorterDuff mode.
@Override
public void onDraw(Canvas canvas) {
super.onDraw(canvas);
// Create a circular path.
final float halfWidth = canvas.getWidth()/2;
final float halfHeight = canvas.getHeight()/2;
final float radius = Math.max(halfWidth, halfHeight);
final Path path = new Path();
path.addCircle(halfWidth, halfHeight, radius, Path.Direction.CCW);
final Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
canvas.drawPath(path, paint);
}
Note:
- It's not good to create objects inside onDraw() calls. Hence you should have your paint and shader initially somewhere else. This could probably be done when you set the image bitmap to the view.
Canvas
might need to be saved and restored when it is not backed by a hardware texture. The general ideas around it are not mentioned here.- Remember to add
setWillNotDraw(false);
to the constructor.
Additional References:
- https://sriramramani.wordpress.com/2012/12/21/shaders/ has information on
Shaders
. - http://mxr.mozilla.org/mozilla-central/source/mobile/android/base/ShapedButton.java uses
Path
to curved button in Firefox for Android. - http://sriramramani.wordpress.com/2012/08/27/constructing-squishy-buttons/ has information on
Canvas
saving, restoring and special cases for pre-ICS.
I'd definite recommend Picasso, as others have. This bit of code for one of my Activity classes did the trick for me. It utilized a color I had defined in color.xml and a simple layout (shown below).
ImageView profile_image = (ImageView) findViewById(R.id.profile_image);
mContext = profile_image.getContext();
// ----------------------------------------------------------------
// apply rounding to image
// see: https://github.com/vinc3m1/RoundedImageView
// ----------------------------------------------------------------
Transformation transformation = new RoundedTransformationBuilder()
.borderColor(getResources().getColor(R.color.my_special_orange))
.borderWidthDp(5)
.cornerRadiusDp(50)
.oval(false)
.build();
Picasso.with(mContext)
.load("http://{some_url}.jpg")
.fit()
.transform(transformation)
.into(profile_image);
And the corresponding Layout file:
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="120dp"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:padding="12dp">
<ImageView
android:id="@+id/profile_image"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_gravity="center"/>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_gravity="center"
android:padding="12dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="First-Name"
android:id="@+id/profile_first_name"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Lastname"
android:id="@+id/profile_last_name" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
Here's the result: