I want to add a circular profile image inside my constraintlayout which is inside the cardview which is again inside cnstrntlyout like whtsappp

Issue

Like this (watsapp SS)

Im stuck with it i can not find how to round profile pics like this and than i dont know how to constraint my my 3 text views basically im trying to create something like this Screenshot of what im trying to say The problem in the above screenshot (which is of a tutorial on youtube) he used vector asset as an profile but i want to use jgp files and than round it and constraint my 3 textviews accordingly like i said . I would love some help Thanks.

Solution

Try ShapeableImageView in your android project. To use above view in android, you need to add dependency material design 1.2.0 or higher.

implementation 'com.google.android.material:material:1.2.0'

In your style.xml add,

<style name="ShapeAppearanceOverlay.App.CornerSize50Percent" parent="">
        <item name="cornerSize">50%</item>
    </style>

In your layout file , add this view

<com.google.android.material.imageview.ShapeableImageView
        android:layout_width="150dp"
        android:layout_height="150dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:srcCompat="@mipmap/ic_launcher"
        app:strokeColor="@android:color/darker_gray"  
        android:layout_margin="10dp"
        app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.App.CornerSize50Percent"
        />

Result

Answered By - Vivek Gupta