Базовая концепция
Для построения такого макета вы можете использовать, например, ConstraintLayout или RelativeLayout.
Используя RelativeLayout, вы можете построить такую структуру:
<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>
Что должно выглядеть здесь: 
Маленький кружок
Для меньшего круга (серого) можно использовать только один ImageView. Просто установите светлый фон - как background и значок пера - как src.
1) Для ImageView background вам нужно создать новый чертеж с двумя shape s . Во-первых, это белая рамка вокруг, во-вторых, светло-серый фон.
Вы можете установить вторую форму отступа (здесь, например, 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) В качестве значка вы можете использовать рисование (например, вектор) или просто изображение и установите его как src
После этого он должен выглядеть так:
3) Установить padding дюйм ImageView, чтобы правильно масштабировать значок (ручка):
<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" />
Большой круг
Лучший подход - использовать какую-нибудь библиотеку, такую как Picasso или Glide.
Для Glide вы можете использовать CircleTransform(), чтобы обрезать полученное изображение по кругу. При загрузке изображения вы можете просто использовать метод transform():
Glide.with(this)
.load(URL)
.transform(new CircleTransform(context))
.into(imageView);
Когда CircleTransform это:
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) {
}
}
Конечный результат
