Android studio - how to combine Linear and Relative layouts?-CodePudding

I can not combine Relative and Linear layouts. Spent several hours trying to get the result but it doesn't match what I want. I want to make the red badge @id/unreadCount bigger (28x28dp) and put it on the right side above @ id/contactName and @ id/contactPriv

Please see the image:

enter image description here

This is the original code

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="?attr/listPreferredItemHeight"
    android:background="@drawable/contact_background"
    android:gravity="center_vertical"
    android:paddingStart="@dimen/activity_padding"
    android:paddingEnd="@dimen/activity_padding">

    <RelativeLayout
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginEnd="8dp">

        <com.google.android.material.imageview.ShapeableImageView
            android:id="@ id/avatar"
            android:layout_width="48dp"
            android:layout_height="48dp"
            app:strokeColor="@android:color/transparent"
            app:shapeAppearanceOverlay="@style/roundImageView"
            app:srcCompat="@drawable/ic_person_circle" />

        <ImageView
            android:id="@ id/online"
            android:layout_width="16dp"
            android:layout_height="16dp"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:contentDescription="@string/avatar"
            app:srcCompat="@drawable/ic_circle" />

        <com.google.android.material.imageview.ShapeableImageView
            android:id="@ id/deleted"
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:visibility="gone"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:contentDescription="@string/content_deleted"
            android:background="@color/design_default_color_background"
            app:shapeAppearanceOverlay="@style/roundImageView"
            app:srcCompat="@drawable/ic_cancel_grey"
            app:strokeColor="@android:color/transparent" />

    </RelativeLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <TextView
                android:id="@ id/contactName"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="start"
                android:ellipsize="end"
                android:maxLines="1"
                android:overScrollMode="never"
                android:paddingEnd="4dp"
                android:textSize="16sp"
                android:textColor="#333333"

                android:textAppearance="@style/usernamestyle"
                tools:ignore="RtlSymmetry"
                tools:text="Contact title" />

            <androidx.appcompat.widget.AppCompatImageView
                android:id="@ id/icon_channel"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:alpha="0.75"
                android:baseline="-2dp"
                android:contentDescription="@string/channel"
                android:visibility="gone"
                app:srcCompat="@drawable/ic_channel"
                app:tint="?android:attr/textColorSecondary" />

            <androidx.appcompat.widget.AppCompatImageView
                android:id="@ id/icon_verified"
                android:layout_width="24dp"
                android:layout_height="24dp"
                android:alpha="0.75"
                android:baseline="-2dp"
                android:contentDescription="@string/channel"
                android:visibility="gone"
                app:srcCompat="@drawable/ic_verified" />

            <androidx.appcompat.widget.AppCompatImageView
                android:id="@ id/icon_staff"
                android:layout_width="24dp"
                android:layout_height="24dp"
                android:alpha="0.75"
                android:baseline="-2dp"
                android:contentDescription="@string/channel"
                android:visibility="gone"
                app:srcCompat="@drawable/ic_verified_user" />

            <androidx.appcompat.widget.AppCompatImageView
                android:id="@ id/icon_danger"
                android:layout_width="24dp"
                android:layout_height="24dp"
                android:alpha="0.75"
                android:baseline="-2dp"
                android:contentDescription="@string/channel"
                android:visibility="gone"
                app:srcCompat="@drawable/ic_danger" />

            <TextView
                android:id="@ id/unreadCount"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:layout_gravity="end|center_vertical"
                android:layout_marginStart="6dp"
                android:layout_marginTop="1dp"
                android:background="@drawable/pill_counter"
                android:gravity="center"
                android:textColor="@color/white"
                android:textSize="10sp"
                android:textStyle="bold"
                tools:ignore="SmallSp,TextContrastCheck"
                tools:text="9 " />

            <ImageView
                android:id="@ id/icon_muted"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:alpha="0.75"
                android:baseline="-2dp"
                android:contentDescription="@string/topic_muted"
                android:visibility="gone"
                app:srcCompat="@drawable/ic_notifications_off"
                app:tint="@color/colorGray" />

            <androidx.appcompat.widget.AppCompatImageView
                android:id="@ id/icon_blocked"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:alpha="0.75"
                android:baseline="-2dp"
                android:contentDescription="@string/topic_blocked"
                android:visibility="gone"
                app:srcCompat="@drawable/ic_block"
                app:tint="@color/colorGray" />

            <androidx.appcompat.widget.AppCompatImageView
                android:id="@ id/icon_archived"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:alpha="0.75"
                android:baseline="-2dp"
                android:contentDescription="@string/topic_archived"
                android:visibility="gone"
                app:srcCompat="@drawable/ic_filecab"
                app:tint="@color/colorGray" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <ImageView
                android:id="@ id/messageStatus"
                android:layout_width="16dp"
                android:layout_height="16dp"
                android:layout_gravity="center_vertical"
                android:alpha="0.8"
                android:paddingEnd="2dp"
                android:paddingTop="2dp"
                android:visibility="gone"
                tools:ignore="ContentDescription,RtlSymmetry,SmallSp"
                tools:src="@drawable/ic_done_all" />

            <TextView
                android:id="@ id/contactPriv"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="top"
                android:layout_weight="1"
                android:ellipsize="end"
                android:maxWidth="240sp"
                android:maxLines="1"
                android:overScrollMode="never"
                android:text=""
                android:textSize="13sp"
                android:textColor="#909090"
                tools:text="Contact private: Lorem ipsum dolor sit amet, consectetur adipiscing elit" />

        </LinearLayout>

    </LinearLayout>

</LinearLayout>

and my modifications that dont give the expected result:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="?attr/listPreferredItemHeight"
    android:background="@drawable/contact_background"
    android:gravity="center_vertical"
    android:paddingStart="@dimen/activity_padding"
    android:paddingEnd="@dimen/activity_padding">

    <RelativeLayout
    android:id="@ id/PersonIconHolder"
        android:layout_width="48dp"
        android:layout_height="48dp"
                android:layout_alignParentStart="true"
        android:layout_centerVertical="true"
        android:layout_marginEnd="5dp">

        <com.google.android.material.imageview.ShapeableImageView
            android:id="@ id/avatar"
            android:layout_width="48dp"
            android:layout_height="48dp"
            app:strokeColor="@android:color/transparent"
            app:shapeAppearanceOverlay="@style/roundImageView"
            app:srcCompat="@drawable/ic_person_circle" />

        <ImageView
            android:id="@ id/online"
            android:layout_width="16dp"
            android:layout_height="16dp"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:contentDescription="@string/avatar"
            app:srcCompat="@drawable/ic_circle" />

        <com.google.android.material.imageview.ShapeableImageView
            android:id="@ id/deleted"
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:visibility="gone"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:contentDescription="@string/content_deleted"
            android:background="@color/design_default_color_background"
            app:shapeAppearanceOverlay="@style/roundImageView"
            app:srcCompat="@drawable/ic_cancel_grey"
            app:strokeColor="@android:color/transparent" />

    </RelativeLayout>

    <LinearLayout
          android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toStartOf="@id/unreadCount"
        android:layout_toEndOf="@id/PersonIconHolder"
        android:orientation="vertical">

        <LinearLayout
              android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <TextView
                android:id="@ id/contactName"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="start"
                android:ellipsize="end"
                android:maxLines="1"
                android:overScrollMode="never"
                android:paddingEnd="16sp"
                android:textColor="#333333"
                android:textSize="16sp"
                android:textStyle="bold"
                tools:ignore="RtlSymmetry"
                tools:text="Contact title" />

            <androidx.appcompat.widget.AppCompatImageView
                android:id="@ id/icon_channel"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:alpha="0.75"
                android:baseline="-2dp"
                android:contentDescription="@string/channel"
                android:visibility="gone"
                app:srcCompat="@drawable/ic_channel"
                app:tint="?android:attr/textColorSecondary" />

            <androidx.appcompat.widget.AppCompatImageView
                android:id="@ id/icon_verified"
                android:layout_width="24dp"
                android:layout_height="24dp"
                android:alpha="0.75"
                android:baseline="-2dp"
                android:contentDescription="@string/channel"
                android:visibility="gone"
                app:srcCompat="@drawable/ic_verified" />

            <androidx.appcompat.widget.AppCompatImageView
                android:id="@ id/icon_staff"
                android:layout_width="24dp"
                android:layout_height="24dp"
                android:alpha="0.75"
                android:baseline="-2dp"
                android:contentDescription="@string/channel"
                android:visibility="gone"
                app:srcCompat="@drawable/ic_verified_user" />

            <androidx.appcompat.widget.AppCompatImageView
                android:id="@ id/icon_danger"
                android:layout_width="24dp"
                android:layout_height="24dp"
                android:alpha="0.75"
                android:baseline="-2dp"
                android:contentDescription="@string/channel"
                android:visibility="gone"
                app:srcCompat="@drawable/ic_danger" />



            <ImageView
                android:id="@ id/icon_muted"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:alpha="0.75"
                android:baseline="-2dp"
                android:contentDescription="@string/topic_muted"
                android:visibility="gone"
                app:srcCompat="@drawable/ic_notifications_off"
                app:tint="@color/colorGray" />

            <androidx.appcompat.widget.AppCompatImageView
                android:id="@ id/icon_blocked"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:alpha="0.75"
                android:baseline="-2dp"
                android:contentDescription="@string/topic_blocked"
                android:visibility="gone"
                app:srcCompat="@drawable/ic_block"
                app:tint="@color/colorGray" />

            <androidx.appcompat.widget.AppCompatImageView
                android:id="@ id/icon_archived"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:alpha="0.75"
                android:baseline="-2dp"
                android:contentDescription="@string/topic_archived"
                android:visibility="gone"
                app:srcCompat="@drawable/ic_filecab"
                app:tint="@color/colorGray" />

  


                
                </LinearLayout>

        <ImageView
            android:id="@ id/messageStatus"
            android:layout_width="16dp"
            android:layout_height="16dp"
            android:layout_gravity="center_vertical"
            android:alpha="0.8"
            android:paddingEnd="2dp"
            android:paddingTop="2dp"
            android:visibility="gone"
            tools:ignore="ContentDescription,RtlSymmetry,SmallSp"
            tools:src="@drawable/ic_done_all" />

            <TextView
                android:id="@ id/contactPriv"
                android:layout_width="match_parent"
            android:layout_height="0dp"
                android:layout_gravity="top"
                android:layout_weight="1"
                android:ellipsize="end"
                android:maxWidth="240sp"
                android:maxLines="1"
                android:overScrollMode="never"
                android:text=""
                android:textAppearance="?android:textAppearanceSmall"
                tools:text="Contact private: Lorem ipsum dolor sit amet, consectetur adipiscing elit" />

        </LinearLayout>
        
                    <TextView
                android:id="@ id/unreadCount"
                android:layout_width="28dp"
                android:layout_height="28dp"
                        android:layout_alignParentEnd="true"
        android:layout_centerVertical="true"
                android:layout_gravity="end|center_vertical"
        
                android:background="@drawable/pill_counter"
                android:gravity="center"
                android:padding="3dp"
                android:textColor="@color/white"
                android:textSize="10sp"
                android:textStyle="bold"
                tools:ignore="SmallSp,TextContrastCheck"
                tools:text="9 " />



</RelativeLayout>

CodePudding user response：

There is a small change. I move badge textview outside the parent linear layout and set weight to linear layout.

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="?attr/listPreferredItemHeight"
    android:background="@drawable/contact_background"
    android:gravity="center_vertical"
    android:paddingStart="@dimen/activity_padding"
    android:paddingEnd="@dimen/activity_padding">

    <RelativeLayout
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginEnd="8dp">

        <com.google.android.material.imageview.ShapeableImageView
            android:id="@ id/avatar"
            android:layout_width="48dp"
            android:layout_height="48dp"
            app:srcCompat="@drawable/ic_person_circle"
            app:strokeColor="@android:color/transparent" />

        <ImageView
            android:id="@ id/online"
            android:layout_width="16dp"
            android:layout_height="16dp"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:contentDescription="@string/avatar"
            app:srcCompat="@drawable/ic_circle" />

        <com.google.android.material.imageview.ShapeableImageView
            android:id="@ id/deleted"
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:background="@color/design_default_color_background"
            android:contentDescription="@string/content_deleted"
            android:visibility="gone"
            app:srcCompat="@drawable/ic_cancel_grey"
            app:strokeColor="@android:color/transparent" />

    </RelativeLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <TextView
                android:id="@ id/contactName"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="start"
                android:ellipsize="end"
                android:maxLines="1"
                android:overScrollMode="never"
                android:paddingEnd="4dp"
                android:textColor="#333333"
                android:textSize="16sp"
                tools:ignore="RtlSymmetry"
                tools:text="Contact title" />

            <androidx.appcompat.widget.AppCompatImageView
                android:id="@ id/icon_channel"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:alpha="0.75"
                android:baseline="-2dp"
                android:contentDescription="@string/channel"
                android:visibility="gone"
                app:srcCompat="@drawable/ic_channel"
                app:tint="?android:attr/textColorSecondary" />

            <androidx.appcompat.widget.AppCompatImageView
                android:id="@ id/icon_verified"
                android:layout_width="24dp"
                android:layout_height="24dp"
                android:alpha="0.75"
                android:baseline="-2dp"
                android:contentDescription="@string/channel"
                android:visibility="gone"
                app:srcCompat="@drawable/ic_verified" />

            <androidx.appcompat.widget.AppCompatImageView
                android:id="@ id/icon_staff"
                android:layout_width="24dp"
                android:layout_height="24dp"
                android:alpha="0.75"
                android:baseline="-2dp"
                android:contentDescription="@string/channel"
                android:visibility="gone"
                app:srcCompat="@drawable/ic_verified_user" />

            <androidx.appcompat.widget.AppCompatImageView
                android:id="@ id/icon_danger"
                android:layout_width="24dp"
                android:layout_height="24dp"
                android:alpha="0.75"
                android:baseline="-2dp"
                android:contentDescription="@string/channel"
                android:visibility="gone"
                app:srcCompat="@drawable/ic_danger" />

            <ImageView
                android:id="@ id/icon_muted"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:alpha="0.75"
                android:baseline="-2dp"
                android:contentDescription="@string/topic_muted"
                android:visibility="gone"
                app:srcCompat="@drawable/ic_notifications_off"
                app:tint="@color/colorGray" />

            <androidx.appcompat.widget.AppCompatImageView
                android:id="@ id/icon_blocked"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:alpha="0.75"
                android:baseline="-2dp"
                android:contentDescription="@string/topic_blocked"
                android:visibility="gone"
                app:srcCompat="@drawable/ic_block"
                app:tint="@color/colorGray" />

            <androidx.appcompat.widget.AppCompatImageView
                android:id="@ id/icon_archived"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:alpha="0.75"
                android:baseline="-2dp"
                android:contentDescription="@string/topic_archived"
                android:visibility="gone"
                app:srcCompat="@drawable/ic_filecab"
                app:tint="@color/colorGray" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <ImageView
                android:id="@ id/messageStatus"
                android:layout_width="16dp"
                android:layout_height="16dp"
                android:layout_gravity="center_vertical"
                android:alpha="0.8"
                android:paddingTop="2dp"
                android:paddingEnd="2dp"
                android:visibility="gone"
                tools:ignore="ContentDescription,RtlSymmetry,SmallSp"
                tools:src="@drawable/ic_done_all" />

            <TextView
                android:id="@ id/contactPriv"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="top"
                android:layout_weight="1"
                android:ellipsize="end"
                android:maxWidth="240sp"
                android:maxLines="1"
                android:overScrollMode="never"
                android:text=""
                android:textColor="#909090"
                android:textSize="13sp"
                tools:text="Contact private: Lorem ipsum dolor sit amet, consectetur adipiscing elit" />

        </LinearLayout>

    </LinearLayout>

    <TextView
        android:id="@ id/unreadCount"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_gravity="end|center_vertical"
        android:layout_marginStart="6dp"
        android:layout_marginTop="1dp"
        android:background="@drawable/pill_counter"
        android:gravity="center"
        android:textColor="@color/white"
        android:textSize="10sp"
        android:textStyle="bold"
        tools:ignore="SmallSp,TextContrastCheck"
        tools:text="9 " />

</LinearLayout>