sha sha - 4 months ago 30
Android Question

Design a rounded corner layout with rounded image

I'm confused how to design the layout as shown below. I can do a circular image using glide but how to align it with the layout?

enter image description here

Regards,
Sree

sha sha
Answer

Thanks guys for the answers.

I found a solution with my UI goes like this

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="@drawable/background_chip"
android:orientation="horizontal"
>

<com.makeramen.roundedimageview.RoundedImageView
    android:id="@+id/rv_profile_pic"
    android:layout_width="@dimen/chip_pic_height_width"
    android:layout_height="@dimen/chip_pic_height_width"
    android:src="@mipmap/ic_account_circle_white_24dp"
    app:riv_oval = "true"
    android:layout_gravity="center_vertical"/>

<TextView android:id="@+id/name"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="14sp"
    android:paddingStart="@dimen/padding_half"
    android:paddingTop="@dimen/padding_half"
    android:paddingBottom="@dimen/padding_half"
    android:textColor="@color/app_bg_white"
    android:layout_gravity="center_vertical"
    style="@style/SecondaryText"/>

<ImageView
    android:id="@+id/iv_delete"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@mipmap/ic_remove_circle_white_24dp"
    android:layout_gravity="center_vertical"
    android:paddingEnd="@dimen/padding_half"
    android:paddingStart="@dimen/padding_half"
    />

   </LinearLayout>

MY background_chip lookslike this

<?xml version="1.0" encoding="utf-8"?>

<corners
    android:radius="@dimen/chip_pic_radius"/>
<solid
    android:color="@color/grey_light"/>

Finally its looking like

enter image description here

Trick is I have given the corner radius exactly half as the width of my left image.