CODEWITHSUNDEEP
androidlayoutandroid-glide
sha
sha

Reputation: 1420

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

Upvotes: 1

Views: 136

Answers (2)

sha
sha

Reputation: 1420

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.

Upvotes: 1

rupesh jain
rupesh jain

Reputation: 3430

Place a textview next to imageview. Both the imageview and textview should have background with rounded corners. You will need to work with your UX designer.

The textview and image view should have same height so that hey align correctly.

Upvotes: 0

Related Questions