android - Planning a RelativeLayout with a hidden element

Question

I'm trying to convert my list items layout to use RelativeLayout (rather than nested LinearLayouts with weights). Pictured below are two images showing how I'd like the list items to look, with coloured borders around the 4 (/5) elements in each list item.

Each list item also has a hidden view which expands when you press the arrow (purple border), to reveal another element underneath this all (yellow border in second image). I'm using SlideExpandableListView for this, which just requires the ids of the trigger and the hidden view to be set.

The initial difficulty I'm facing is getting the orange and purple elements (O+P) to stay to the right of the green and blue (G+B), while letting G+B fill the remaining space in width-ways.

The height of each element is 48dp, and the widths of O+P is also 48dp.

In the layouts I've attempted so far, O+P will overlap G+B, or trying to use a right margin on G+B, O+P goes off screen.

--

<?xml version="1.0" encoding="utf-8"?>
<!-- a single row item for a Stacks listview -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <RelativeLayout
        android:id="@+id/primary_elements"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <TextView
            android:id="@+id/listitem_name"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:text="@string/lorem_title" />

        <TextView
            android:id="@+id/listitem_notes"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:layout_below="@id/listitem_name"
            android:text="@string/lorem_paragraph" />

    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/secondary_elements"
        android:layout_width="48dp"
        android:layout_height="match_parent"
        android:layout_toRightOf="@id/listitem_name" >

        <TextView
            android:id="@+id/listitem_actionable_items"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:layout_alignBottom="@+id/listitem_notes"
            android:layout_alignParentLeft="true"
            android:layout_marginBottom="16dp"
            android:background="@color/Khaki"
            android:gravity="center"
            android:textIsSelectable="false" />

        <!-- Quick action button - specific ID is required (SlideExpandableListView lib) -->
        <RelativeLayout
            android:id="@+id/expandable_toggle_button"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:layout_alignParentLeft="true"
            android:layout_alignParentRight="true" >

            <!-- ImageView (arrow) in here, works, taken out for brevity -->
        </RelativeLayout>
    </RelativeLayout>

    <!-- Quick action expanded view - specific ID is required (SlideExpandableListView lib) -->
    <RelativeLayout
        android:id="@+id/expandable"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_below="@id/primary_elements">

        <!-- TODO - options inside the hidden view-->

    </RelativeLayout>

</RelativeLayout>

--

Answer 1

Check this out, does this work. I have removed some of the string/color names.

<?xml version="1.0" encoding="utf-8"?>
<!-- a single row item for a Stacks listview -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <RelativeLayout
        android:id="@+id/secondary_elements"
        android:layout_width="48dp"
        android:layout_height="96dp"
        android:layout_alignParentRight="true" >

        <TextView
            android:id="@+id/listitem_actionable_items"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:layout_alignBottom="@+id/listitem_notes"
            android:layout_alignParentLeft="true"
            android:layout_marginBottom="16dp"
            android:background="#addada"
            android:gravity="center"
            android:textIsSelectable="false" />

        <!-- Quick action button - specific ID is required (SlideExpandableListView lib) -->

        <RelativeLayout
            android:id="@+id/expandable_toggle_button"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:layout_alignParentLeft="true"
            android:layout_alignParentRight="true" >

            <!-- ImageView (arrow) in here, works, taken out for brevity -->
        </RelativeLayout>
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/primary_elements"
        android:layout_width="match_parent"
        android:layout_height="96dp"
        android:layout_toLeftOf="@+id/secondary_elements" >

        <TextView
            android:id="@+id/listitem_name"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:text="lorem_title" />

        <TextView
            android:id="@+id/listitem_notes"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:layout_below="@id/listitem_name"
            android:text="lorem_paragraph" />
    </RelativeLayout>

    <!-- Quick action expanded view - specific ID is required (SlideExpandableListView lib) -->

    <RelativeLayout
        android:id="@+id/expandable"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_below="@id/primary_elements" >

        <!-- TODO - options inside the hidden view -->

    </RelativeLayout>

</RelativeLayout>