How to trim image at the bottom left to get such half rounded shape inside cardview in XML, trimmed image at the bottom? Image attached

Question

I am trying to add image inside cardview which can be trimmed little bit from bottom left so that half rounded shape can be formed as same as shown in image. Please help me as I am getting no clue how to do it?

Answer 1

it's just a circular image with a white stroke as you can see in this image

you can use ShapeableImageView to make your image circular and add stroke to it and your code will look like this

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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=".MainActivity">
    <!--your main image-->
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:src="@color/black"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <!--your circular image-->
    <com.google.android.material.imageview.ShapeableImageView
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:padding="8dp"
        android:src="@drawable/ic_launcher_background"
        android:layout_marginTop="-40dp"
        android:layout_marginStart="20dp"
        app:layout_constraintStart_toStartOf="@+id/imageView"
        app:layout_constraintTop_toBottomOf="@+id/imageView"
        app:strokeWidth="8dp"
        app:strokeColor="@color/white"
        app:shapeAppearanceOverlay="@style/circleImageViewStyle"/>
</androidx.constraintlayout.widget.ConstraintLayout>

and here's circleImageViewStyle , in themes.xml file

    <style name="circleImageViewStyle" >
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">50%</item>
    </style>

and the result look like this for the above code