Дизайн закругленной угловой компоновки с закругленным изображением

Question

Я смущен, как проектировать макет, как показано ниже. Я могу сделать круговое изображение с помощью скольжения, но как выровнять его с макетом?

С уважением, Sree

Answer 1

Спасибо, ребята, за ответы.

Я нашел решение с моим UI идет как этот

<?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 этого

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

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

Наконец его похожим

Trick, я дал радиус скругления ровно вдвое меньше ширины моего левого изображения.

Answer 2

Место TextView рядом с ImageView. Оба изображения и textview должны иметь фон с закругленными углами. Вам нужно будет работать с вашим дизайнером UX.

Текст и изображение должны иметь такую ​​же высоту, чтобы эй правильно выравнивался.