How to add icon in the circular image view

Question

I have two circular image view, one is containing the profile pic and other is for the camera. Following is my XML file:

1. Welocome.xml

<?xml version="1.0" encoding="utf-8"?>
<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:background="@drawable/bg"
    android:orientation="vertical"
    tools:context=".activity.WelcomeActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="@dimen/margin40"
        android:text="Welcome to Almachat"
        android:textColor="#ffffff"
        android:textSize="25dp" />

    <FrameLayout
        android:layout_width="220dp"
        android:layout_height="220dp"
        android:layout_gravity="center"
        android:layout_marginTop="@dimen/margin10">

        <com.almabay.almachat.circularImageView.CircularImageView
            android:id="@+id/profilePic"
            android:layout_width="170dp"
            android:layout_height="170dp"
            android:layout_gravity="bottom|center_horizontal" />

        <com.almabay.almachat.circularImageView.CircularImageView
            android:id="@+id/iv_camera"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:layout_gravity="top|right"
            android:layout_marginTop="@dimen/margin30"
            android:background="@drawable/color"
            />
    </FrameLayout>

    <TextView
        android:id="@+id/txtName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="@dimen/margin20"
        android:textColor="#ffffff"
        android:textSize="30sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/txtSomeText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Some static text will be here"
        android:textColor="#ffffff"
        android:textSize="20sp" />

    <Button
        android:id="@+id/btnContinue"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="@dimen/margin20"
        android:background="#F7AE21"
        android:padding="@dimen/padding20"
        android:text="Continue"
        android:textColor="#ffffff" />
</LinearLayout>

2.color.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >
    <gradient
        android:angle="270"
        android:endColor="#F7AE21"
        android:startColor="#F7AE21" />
    <stroke
        android:width="10dp"
        android:color="#F7AE21" ></stroke>
</shape>

This is giving me the following design:

I want to add a camera icon like the following image:

CircularImageView.java

public class CircularImageView extends ImageView {

    public CircularImageView(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(), 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("#BAB399"));
        canvas.drawCircle(finalBitmap.getWidth() / 2 + 0.7f,
                finalBitmap.getHeight() / 2 + 0.7f,
                finalBitmap.getWidth() / 2 + 0.1f, paint);
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        canvas.drawBitmap(finalBitmap, rect, rect, paint);

        return output;
    }
}

How can I add a camera icon inside the circular image view? If I am setting the camera icon in the background, only the camera icon is displayed. No circular image view is there.

After using the following code :

<com.almabay.almachat.circularImageView.CircularImageView
    android:id="@+id/iv_camera"
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:layout_gravity="top|right"
    android:layout_marginTop="@dimen/margin30"
    android:background="@drawable/color"
    android:src="@drawable/camera" />

I am getting the following screen:

How can I set the image size to accommodate inside CircularImageView.

Torsi

i already have drawable with camera image but when i am using iv_camera.setImageResource(R.drawable.camera) only camera icon is being displayed .I want camera icon inside image view as shown in the screenshot . – Torsi

best option use drawable and set as background yaronvazana.com/wp-content/uploads/2015/08/fab.png – Edify

Answer 1

You're using a library for Circular ImageView. So you need to check if there's any attribute to set an icon inside the ImageView. Anyway, here's how you can achieve the desired behaviour. You can add an image with the camera icon inside instead of setting a background colour.

<com.almabay.almachat.circularImageView.CircularImageView
    android:id="@+id/iv_camera"
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:layout_gravity="top|right"
    android:layout_marginTop="@dimen/margin30"
    android:background="@drawable/image_with_camera" />

Another approach you might try to get this behaviour is setting the camera image as a src attribute.

<com.almabay.almachat.circularImageView.CircularImageView
    android:id="@+id/iv_camera"
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:layout_gravity="top|right"
    android:layout_marginTop="@dimen/margin30"
    android:background="@drawable/color"
    android:padding="5dp"
    android:src="@drawable/image_camera" />

Ickes

I am not using a library ,i am using a class name CircularImageview .Please see my edited code for this class. – Torsi

Then my answer should work. Can you please try it and report again? – Ickes

It is adding the camera image but size is not perfect.Please check my edited code for the corresponding screen shot . – Torsi

Thanks for the screenshot. Please go with the second option I've mentioned in my answer. – Ickes

You want me to use the image having camera inside a circle as image source? – Torsi

Yes. And for icons with right sizes, here's a bunch of icons provided by Google. design.google.com/icons – Ickes

Answer 2

Logic is here to use frame layout

 <FrameLayout
                    android:layout_width="150dp"
                    android:layout_height="150dp"
                    android:layout_gravity="center"
                    android:layout_marginTop="10dp">

                    <xxx.xxxx.CircleImageView
                        android:id="@+id/profilePic"
                        android:layout_width="150dp"
                        android:layout_height="150dp"
                        android:src="@drawable/male"
                        android:layout_gravity="bottom|center_horizontal" />

                    <xxx.xxx.CircleImageView
                        android:id="@+id/iv_camera"
                        android:layout_width="40dp"
                        android:layout_height="40dp"
                        android:src="@drawable/editfloat"
                        android:layout_gravity="top|right"

                        />
                </FrameLayout>

Washcloth

Exactly what I needed. Thank you very much – Radiology

Ur Welcome Brother 👍👌 – Washcloth

this should be right answer ever in all questions about this +1 – Mendy

Answer 3

   <FrameLayout
            android:id="@+id/image_logo"
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:layout_gravity="center"
            android:layout_marginTop="@dimen/padding_48"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <androidx.appcompat.widget.AppCompatImageView
                android:id="@+id/profilePic"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="bottom|center_horizontal"
                app:srcCompat="@drawable/ic_profile" />

            <androidx.appcompat.widget.AppCompatImageView
                android:id="@+id/iv_camera"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_gravity="bottom|right"
                app:srcCompat="@drawable/add_profile"
                />
        </FrameLayout>

add_profile

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <solid android:color="@color/rosy_pink"/>
        </shape>
    </item>
    <item
        android:drawable="@drawable/ic_item_select_plus_add"
        android:bottom="@dimen/padding_12"
        android:left="@dimen/padding_12"
        android:right="@dimen/padding_12"
        android:top="@dimen/padding_12"/>
</layer-list>


           `android:layout_gravity="bottom|right"`

result :

Bedel

This should be an acceptable answer. Very impressive. – Hernando

Answer 4

Use this, from melanke answer How to create a circular ImageView in Android?

public class MLRoundedImageView extends ImageView {

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

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

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

@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 = getCroppedBitmap(bitmap, w);
    canvas.drawBitmap(roundBitmap, 0, 0, null);

}

public static Bitmap getCroppedBitmap(Bitmap bmp, int radius) {
    Bitmap sbmp;

    if (bmp.getWidth() != radius || bmp.getHeight() != radius) {
        float smallest = Math.min(bmp.getWidth(), bmp.getHeight());
        float factor = smallest / radius;
        sbmp = Bitmap.createScaledBitmap(bmp, (int)(bmp.getWidth() / factor), (int)(bmp.getHeight() / factor), false);
    } else {
        sbmp = bmp;
    }

    Bitmap output = Bitmap.createBitmap(radius, radius,
            Config.ARGB_8888);
    Canvas canvas = new Canvas(output);

    final int color = 0xffa19774;
    final Paint paint = new Paint();
    final Rect rect = new Rect(0, 0, radius, radius);

    paint.setAntiAlias(true);
    paint.setFilterBitmap(true);
    paint.setDither(true);
    canvas.drawARGB(0, 0, 0, 0);
    paint.setColor(Color.parseColor("#BAB399"));
    canvas.drawCircle(radius / 2 + 0.7f,
            radius / 2 + 0.7f, radius / 2 + 0.1f, paint);
    paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
    canvas.drawBitmap(sbmp, rect, rect, paint);

    return output;
}}

Famulus

Answer 5

 <FrameLayout
                android:layout_width="@dimen/_100sdp"
                android:layout_height="@dimen/_100sdp"
                android:layout_gravity="center"
                android:layout_marginTop="10dp">

                <de.hdodenhof.circleimageview.CircleImageView
                    android:id="@+id/profilePic"
                    android:layout_width="@dimen/_100sdp"
                    android:layout_height="@dimen/_100sdp"
                    android:layout_gravity="bottom|center_horizontal"
                    android:src="@drawable/ic_upload" />

                <de.hdodenhof.circleimageview.CircleImageView
                    android:id="@+id/iv_camera"
                    android:layout_width="@dimen/_30sdp"
                    android:layout_height="@dimen/_30sdp"
                    android:layout_gravity="top|right"
                    android:src="@drawable/edit"/>
            </FrameLayout>

English

Answer 6

You can do this by using only single imageview. Not sure why everyone's recommending using two imageviews for single camera image inside circular shape.

1. Create a circular drawable.
2. Now add camera icon to imageview using src attribute.
3. Add circular drawable to same imageview using background attribute. Also give padding to it to make camera icon little separated from boundry.

Cyrene