How to make an ImageButton circular with a rectangular image inside? - android-layout

Question

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ProfileMainActivity">
<ImageView
android:layout_width="match_parent"
android:layout_height="240dp"
android:src="#drawable/cp"
android:scaleType="centerCrop"/>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="240dp"
android:clipToPadding="false">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
</LinearLayout>
</ScrollView>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_marginBottom="8dp"
android:layout_marginRight="10dp"
/>
<ImageButton
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_gravity="top|left"
android:layout_marginTop="200dp"
android:layout_marginLeft="20dp"
android:src="#drawable/dp"
android:scaleType="centerCrop"
android:background="?attr/selectableItemBackgroundBorderless"
/>
</FrameLayout>
I need the image to be cropped within the black circle , but it doesn't happen.
Moreover I noticed that the ripple from the ImageButton touch goes out in a circular area, so I was guessing that there might be some way to fit the image within that area itself.
Dimension of Stock Image:- 495x495

Answer 1

I suggest you recreate the image as circular bitmap. You can use this a method like this one. Just introduce the necessary round pixels.
public static Bitmap getRoundedCornerBitmap(Bitmap bitmap, int pixels) {
if (bitmap == null)
return null;
Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap
.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(output);
final Paint paint = new Paint();
final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
final RectF rectF = new RectF(rect);
final float roundPx = pixels;
paint.setAntiAlias(true);
canvas.drawRoundRect(rectF, roundPx, roundPx, paint);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(bitmap, rect, rect, paint);
return output;
}

Answer 2

Using a library you can easily fixed this issue> This may helps you com.mikhaellopez:circularimageview:3.0.2. Hope that it works and solve your issue