How to have custom image view with Rounded Rectangle in android

Question

How to have custom circular imageview like this custom circular imageview

I wrote my xml like this and also check my card that it's correct or not

<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/tools"
xmlns:cardview="http://schemas.android.com/apk/res-auto"
android:id="@+id/mood_cardView_id"
android:layout_width="110dp"
android:layout_height="110dp"
android:layout_margin="10dp"
android:foreground="?android:attr/selectableItemBackground"
app:ignore="NamespaceTypo"
cardview:cardCornerRadius="10dp"
cardview:cardElevation="8dp">

<LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:background="@android:color/black"
        android:orientation="vertical"
        >
        <TextView
            android:id="@+id/titleCat"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="18sp"
            android:textColor="#FFF"
            android:text="Romance"
            android:textAlignment="center"
            android:layout_margin="5dp"/>
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"



    </LinearLayout>

Try this one : https://stackoverflow.com/a/60058794/3974530 – InsaneCat Mar 11 '20 at 05:26 — InsaneCat, Mar 11 '20 at 05:26

score 2 · Answer 1 · answered Mar 11 '20 at 05:31

You can make a simple circle with white border and transparent content with shape.

// res/drawable/circle.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="0dp"
    android:shape="ring"
    android:thicknessRatio="1.9"
    android:useLevel="false" >
    <solid android:color="@android:color/transparent" />

    <stroke
        android:width="10dp"
        android:color="@android:color/white" />
</shape>

Then make a layerlist drawable and put it as background to your imageview.

// res/drawable/img.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

<item android:drawable="@drawable/circle"/>    
<item android:drawable="@drawable/ic_launcher"/>

And put it as background to your imageview.

   <ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/img"/>

This code might help to fit in your view ..

Diwyanshu sharma · Answer 2 · 2020-03-11T05:41:24.217

You will have to put use this RoundedImageView in your xml layout then. This will for the RoundedImageView, but over the RoundedImageViewshould use framelayout

Use this FrameLayout on the top

    <FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

      <com.package.RoundedImageView
                            android:id="@+id/pic"
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:layout_gravity="center"
                            android:scaleType="fitXY"
                            android:src="@mipmap/user_contact"
                            android:visibility="visible">
        </com.package.RoundedImageView>

</FrameLayout>

then put this class in your project

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.ColorDrawable;
import android.graphics.drawable.Drawable;
import android.support.v7.widget.AppCompatImageView;
import android.util.AttributeSet;
import android.util.Log;

public class RoundedImageView extends AppCompatImageView {

    private static final String TAG = RoundedImageView.class.getSimpleName();

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

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

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

    @Override
    protected void onDraw(Canvas canvas) {

        try {
            Drawable drawable = getDrawable();

            if (drawable == null) {
                return;
            }

            if (getWidth() == 0 || getHeight() == 0) {
                return;
            }

            Bitmap bitmap;
            int w = getWidth(), h = getHeight();

            if (w <= 0 || h <= 0) {
                return;
            }

            if (drawable instanceof BitmapDrawable) {
                Bitmap b = ((BitmapDrawable) drawable).getBitmap();
                bitmap = b.copy(Bitmap.Config.ARGB_8888, true);
            } else if (drawable instanceof ColorDrawable) {
                bitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
                Canvas c = new Canvas(bitmap);
                c.drawColor(((ColorDrawable) drawable).getColor());

            } else {
                return;
            }

            Bitmap roundBitmap = getRoundedCroppedBitmap(bitmap, Math.min(w, h));
            canvas.drawBitmap(roundBitmap, 0, 0, null);
        } catch (Exception e) {
            Log.e(TAG, "onDraw Exception", e);
        }

    }

    private 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(), Bitmap.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("#edebec"));
        canvas.drawCircle(finalBitmap.getWidth() / 2,
                finalBitmap.getHeight() / 2,
                finalBitmap.getWidth() / 2, paint);
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        canvas.drawBitmap(finalBitmap, rect, rect, paint);

        return output;
    }
}

How to have custom image view with Rounded Rectangle in android

2 Answers2