Center an ImageView (inside a RelativeLayout) to a LinearLayout (that is outside the RelativeLayout)

Question

I try to achieve something like the image below :

Except that the Pin should be center to the first group of labels & the Flag to the second one.

Here is the code I currently have :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context=".TestDesignActivity"
    >

    <RelativeLayout
        android:id="@+id/ll01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/ll03"
        android:layout_alignTop="@id/ll02"
        android:layout_marginEnd="5dp"
        android:padding="5dp"
        >

        <ImageView
            android:id="@+id/iv01"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:background="@drawable/ic_pin"
            />

        <View
            android:layout_width="2dp"
            android:layout_height="wrap_content"
            android:layout_above="@+id/iv02"
            android:layout_below="@+id/iv01"
            android:layout_centerHorizontal="true"
            android:background="@color/md_grey_500"
            />

        <ImageView
            android:id="@+id/iv02"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentStart="true"
            android:background="@drawable/ic_flag"
            />
    </RelativeLayout>

    <LinearLayout
        android:id="@+id/ll02"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_toEndOf="@+id/ll01"
        android:orientation="vertical"
        >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ellipsize="end"
            android:maxLines="2"
            android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque metus massa, aliquet id diam et, pellentesque tincidunt nibh. Suspendisse et sodales diam, nec porta dui. Sed."
            android:textColor="@color/black"
            android:textSize="16sp"
            />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ellipsize="end"
            android:maxLines="3"
            android:text="Lorem ipsum dolor sit."
            android:textSize="12sp"
            />
    </LinearLayout>

    <Space
        android:id="@+id/space"
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:layout_alignParentEnd="true"
        android:layout_below="@id/ll02"
        android:layout_toEndOf="@+id/ll01"
        />

    <LinearLayout
        android:id="@+id/ll03"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_below="@id/space"
        android:layout_toEndOf="@+id/ll01"
        android:orientation="vertical"
        >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ellipsize="end"
            android:maxLines="2"
            android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque metus massa, aliquet id diam et, pellentesque tincidunt nibh. Suspendisse et sodales diam, nec porta dui. Sed."
            android:textColor="@color/black"
            android:textSize="16sp"
            />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ellipsize="end"
            android:maxLines="3"
            android:text="Lorem ipsum dolor sit."
            android:textSize="12sp"
            />
    </LinearLayout>
</RelativeLayout>

I'm not quite sure if it's possible (in XML) to access from a child view to another view that isn't in the same "view level" ...

So maybe should I do it programmatically ?

Like inflate my view with my content, evaluate the size of the LinearLayout and applied the half to the top margin (and do the same for bottom) ?

Note :

• The vertical grey bar should be centered to Pin and Flag .

• The vertical grey bar should adapt is size to the size of the two label groups.

• The vertical grey bar should be doted (I will create a CustomView for that, I think).

Answer 1

You can achieve this by ConstraintLayout as root.

Set top/bottom of Pin and Flag to be constrained at top/bottom of Layout in their right(which shows texts). This will center these pictures vertically for those text layout. Then constraint vertical line between Pin and Flag , so it resize and fill up space between those two. Just remember that you need 1 layout for each set of texts at right.

In addition, I think you make make that dotted line with shape xml and setting dashGap and dashWidth of stroke.