Adapt layout to changing width of imageView

Question

I have a layout where one elements changes its size dynamically (the red imageView). The problem is that the Views below either disapear or don't align centered.

The first two images show how it should look like:

with LinearLayout below set to match_parent:

with LinearLayout below set to wrap_content:

This is how it looks like if the LinearLayout layout:width attribute is wrong:

here is the xml code:

<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="match_parent"
    tools:context=".MainActivity">

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

        <ImageView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:id="@+id/imageView"
            android:layout_gravity="center_horizontal"
            android:background="#ffff0000" />

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

            <Space
                android:layout_width="20px"
                android:layout_height="20px"
                android:layout_weight="1" />

            <ImageView
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:id="@+id/imageView2"
                android:background="#ff0000ff" />

            <Space
                android:layout_width="20px"
                android:layout_height="20px"
                android:layout_weight="1" />

            <ImageView
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:id="@+id/imageView3"
                android:background="#ff00ff00" />

            <Space
                android:layout_width="20px"
                android:layout_height="20px"
                android:layout_weight="1" />
        </LinearLayout>
    </LinearLayout>

</RelativeLayout>

How is it possible to adapt the layout, so the green and blue elements are always centered and the space expands when the red imageView is big, but not cut off when it is too small?

I would prefer a xml solution, since this is just a simple example and doing this programmatically could get complicated otherwise.

Answer 1

My original answer missed the "and the space expands when the red imageView is big" requirement.

You can do this using the GridLayout - layout_columnWeight is only available in, 21? or something. So you will probably want to use the v7.gridlayout support library, but it will look something like this:

<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">

<GridLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="400dp"
        android:layout_height="200dp"
        android:layout_columnSpan="5"
        android:layout_gravity="center"
        android:layout_row="0"
        android:background="#ffff0000"
        />

    <Space
        android:layout_width="20px"
        android:layout_height="20px"
        android:layout_column="0"
        android:layout_row="1"
        android:layout_columnWeight="1"
        />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_column="1"
        android:layout_row="1"
        android:background="#ff0000ff" />

    <Space
        android:layout_width="20px"
        android:layout_height="20px"
        android:layout_column="2"
        android:layout_columnWeight="1"
        android:layout_row="1" />

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_column="3"
        android:layout_row="1"
        android:background="#ff00ff0a" />

    <Space
        android:layout_width="20px"
        android:layout_height="20px"
        android:layout_column="4"
        android:layout_columnWeight="1"
        android:layout_row="1" />

</GridLayout>
</FrameLayout>