Anchor an ImageView to corner of another ImageView

Question

How to anchor an ImageView to bottom right corner of another ImageView like the ones in the above picture (1-man and 2-pencil)

I am using retrofit to load my sources as oval into ImageViews

I do this :

   Glide.with(context)
        .asBitmap()
        .load(model)
        .fitCenter()
        .apply(RequestOptions.circleCropTransform())
        .into(object : BitmapImageViewTarget(this) {
            override fun setResource(resource: Bitmap?) {
                setImageDrawable(
                    resource?.run {
                        RoundedBitmapDrawableFactory.create(
                            resources,
                            if (borderSize > 0) {
                                createBitmapWithBorder(borderSize, borderColor)
                            } else {
                                this
                            }
                        ).apply {
                            isCircular = true
                        }
                    }
                )
            }
        })

Answer 1

Base concept

To build such layout you can use for example ConstraintLayout or RelativeLayout.

Using RelativeLayout you can build such structure:

<RelativeLayout
    android:layout_width="200dp"
    android:layout_height="200dp">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginEnd="20dp"
        android:layout_marginBottom="20dp"
        android:background="#00f" />

    <ImageView
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:background="#f0f" />

</RelativeLayout>

Which should look like there:

Small circle

For smaller circle (grey one) you can use only one ImageView. Just set light background - as background and pen icon - as src.

1) For ImageView background you have to create new drawable with two shapes. First ont is for white border around, second it's just light gray background.

You can set padding second shape (here, in example, there is 5dp)

<?xml version="1.0" encoding="utf-8"?><?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="#FFFFFF" />
        </shape>
    </item>

    <item
        android:bottom="5dp"
        android:left="5dp"
        android:right="5dp"
        android:top="5dp">
        <shape android:shape="oval">
            <solid android:color="#CACACA" />
        </shape>
    </item>

</layer-list>

2) As icon you can use drawable (e.g. vector) or just image and set it as src

After this point it should look like there:

3) Set padding in ImageView to scale your (pen) icon correctly:

<ImageView
    android:layout_width="70dp"
    android:layout_height="70dp"
    android:layout_alignParentEnd="true"
    android:layout_alignParentBottom="true"
    android:background="@drawable/small_circle_background"
    android:padding="16dp"
    android:src="@drawable/small_circle_icon" />

Big circle

Best approach is to use some library like Picasso or Glide.

For Glide, you can use CircleTransform() to crop received image in to circle. When loading image you can just use transform() method:

Glide.with(this)
    .load(URL)
    .transform(new CircleTransform(context))
    .into(imageView);

When CircleTransform is:

import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Paint;

import androidx.annotation.NonNull;

import com.bumptech.glide.load.engine.bitmap_recycle.BitmapPool;
import com.bumptech.glide.load.resource.bitmap.BitmapTransformation;

import org.jetbrains.annotations.NotNull;

import java.security.MessageDigest;

public class CircleTransform extends BitmapTransformation {

    @Override protected Bitmap transform(@NotNull BitmapPool pool, @NotNull Bitmap toTransform, int outWidth, int outHeight) {
        return circleCrop(pool, toTransform);
    }

    private static Bitmap circleCrop(BitmapPool pool, Bitmap source) {
        if (source == null) return null;

        int size = Math.min(source.getWidth(), source.getHeight());
        int x = (source.getWidth() - size) / 2;
        int y = (source.getHeight() - size) / 2;

        Bitmap squared = Bitmap.createBitmap(source, x, y, size, size);

        Bitmap result = pool.get(size, size, Bitmap.Config.ARGB_8888);

        Canvas canvas = new Canvas(result);
        Paint paint = new Paint();
        paint.setShader(new BitmapShader(squared, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP));
        paint.setAntiAlias(true);
        float r = size / 2f;
        canvas.drawCircle(r, r, r, paint);
        return result;
    }

    @Override
    public void updateDiskCacheKey(@NonNull MessageDigest messageDigest) {

    }
}

Final result