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

Question

Like this (watsapp SS)

I'm stuck with it I can not find how to round profile pics like this and than I don't know how to constraint my my 3 text views basically I'm trying to create something like this

Screenshot of what I'm 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.

Answer 1

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