How to trim image at the bottom left to get such half rounded shape inside cardview in XML, trimmed-CodePudding

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?

CodePudding user response：

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