How to set image in custom rounded corner image view in android

Question

hello am working in android camera application i want to show clicked image in rounded corner image view how can i implement these.i posted a image given below .Please assist me ?

Imageview is look like this

Answer 1

Use the custom ImageView class below.

public class RoundedImageView extends ImageView {
    private Path mMaskPath;
    private Paint mMaskPaint    = new Paint(Paint.ANTI_ALIAS_FLAG);
    private int mCornerRadius   = 10;

    public RoundedImageView(Context context) {
        super(context);

        init(context);
    }

    public RoundedImageView(Context context, AttributeSet attributeSet) {
        super(context, attributeSet);

        init(context);
    }

    public RoundedImageView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);

        init(context);
    }

    private void init(Context context) {
        ViewCompat.setLayerType(this, ViewCompat.LAYER_TYPE_SOFTWARE, null);
        mMaskPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
        mMaskPaint.setColor(context.getResources().getColor(R.color.transparent));

        mCornerRadius = (int) context.getResources().getDimension(R.dimen.image_border_curvature);
    }

    /**
     * Set the corner radius to use for the RoundedRectangle.
     */
    public void setCornerRadius(int cornerRadius) {
        mCornerRadius = cornerRadius;
        generateMaskPath(getWidth(), getHeight());
        invalidate();
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldW, int oldH) {
        super.onSizeChanged(w, h, oldW, oldH);

        if (w != oldW || h != oldH) {
            generateMaskPath(w, h);
        }
    }

    private void generateMaskPath(int w, int h) {
        mMaskPath = new Path();
        mMaskPath.addRoundRect(new RectF(0,0,w,h), mCornerRadius, mCornerRadius, Path.Direction.CW);
        mMaskPath.setFillType(Path.FillType.INVERSE_WINDING);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        if(canvas.isOpaque()) { // If canvas is opaque, make it transparent
            canvas.saveLayerAlpha(0, 0, canvas.getWidth(), canvas.getHeight(), 255, Canvas.HAS_ALPHA_LAYER_SAVE_FLAG);
        }

        super.onDraw(canvas);

        if(mMaskPath != null) {
            canvas.drawPath(mMaskPath, mMaskPaint);
        }
    }
}

Use this ImageView inside your xml.

Answer 2

I use this library https://github.com/vinc3m1/RoundedImageView more then two years and im very pleased of it. You just need to add this lines in your build.gradle

dependencies {
    compile 'com.makeramen:roundedimageview:2.2.1'
}

and define your RoundedImageView widget like this

<com.makeramen.roundedimageview.RoundedImageView
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/imageView1"
        android:src="@drawable/photo1"
        android:scaleType="fitCenter"
        app:riv_corner_radius="30dip"
        app:riv_border_width="2dip"
        app:riv_border_color="#333333"
        app:riv_mutate_background="true"
        app:riv_tile_mode="repeat"
        app:riv_oval="true" />

and voala you are ready!

Hope to help!

Answer 3

You can wrap your ImageView inside a CardView. You can use app:cardCornerRadius to set corner radius. as simple as that

<android.support.v7.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:cardCornerRadius="5dp"
        app:cardElevation="0dp">
    <ImageView
        android:id="@+id/imgUserHome"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/photo"/>
 </android.support.v7.widget.CardView>

Answer 4

Instead of trying it on your own, use some libraries like this for your purpose. It has diffrent shapes and works well.

In dependency of build.gradle of app moudle add this line:

compile 'com.github.siyamed:android-shape-imageview:0.9.+@aar'

sync gradle and now your app has accsess to the library. Now use below code for adding it to you layout:

<com.github.siyamed.shapeimageview.BubbleImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/neo"
app:siArrowPosition="right"
app:siSquare="true"/>

follow the library page for more customization.

Answer 5

Please add the below dependency in the gradle and use it in the xml as follows

compile 'de.hdodenhof:circleimageview:1.3.0'

<de.hdodenhof.circleimageview.CircleImageView xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/profile_image"
            android:layout_width="@dimen/pad_120dp"
            android:layout_height="@dimen/pad_120dp"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:src="@drawable/icon_profile" />