Search code examples
androidandroid-layoutlistviewandroid-relativelayout

First view in RelativeLayout expand to fill remaining space


I am working on a layout with a cardview, a checkbox and a button with the initial structure as shown in the first image:

Layout with hidden listview layout with expanded listview

In this case the listview is not shown until the user clicks an image inside the cardview, so when this happens the dessired structure is like the second image

However as the listview is actually inside a fragment I can't achieve the dessired layout because wrap_content and match_parent for the cardview gives me the next result

enter image description here

And as you can see the cardview overlaps the button and the checkbox goes beyond the screen

Right now this is my layout:

<?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="match_parent"
            android:background="@android:color/white">

<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/card"
    android:layout_marginTop="5dp"
    android:layout_marginLeft="5dp"
    android:layout_marginRight="5dp"
    android:layout_alignParentTop="true"
    >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="5dp"
        >


            <ImageButton
                android:layout_width="@dimen/event_invitation_expand_icon"
                android:layout_height="@dimen/event_invitation_expand_icon"
                android:id="@+id/shrink"
                android:src="@drawable/ic_shrink"
                android:background="@android:color/transparent"
                android:scaleType="fitCenter"
                android:layout_gravity="center_vertical"
                android:layout_marginRight="5dp"/>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/shrink"
            android:layout_marginTop="5dp"
            android:id="@+id/list">

            <fragment
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:name="ListFragment"
                tools:layout="@layout/fragment_list"/>
        </RelativeLayout>

    </RelativeLayout>

</android.support.v7.widget.CardView>

<CheckBox
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/checkBox"
    android:layout_marginTop="20dp"
    android:layout_below="@+id/card"/>

<Space
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@+id/button"
    android:layout_below="@+id/checkBox"/>

<Button
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/button"
    android:layout_alignParentBottom="true"
    style="@android:style/Widget.DeviceDefault.Button.Borderless"
    />

I hope you can help me to set the max height of the card view to stop growing when the space is filled.

I have also tried to set the checkbox always at top of the bottom and the cardview to fill the remaining space and although it gives me the correct structure when the listview is expanded, it doesn't work for the list hidden since the cardview fills the space with nothing.

Update

As suggested I have tried changing the root layout to LinearLayout using weight, however, I got the same result as before and if I change the weight of the cardview to 1 and the checkbox to 0 I am able to get the desired layout for the expanded list but not for the hidden case.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
            android:background="@android:color/white"
          android:orientation="vertical">



    <android.support.v7.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/card"
        android:layout_marginTop="5dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_weight="0">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:padding="5dp"
            >



            <ImageButton
                android:layout_width="@dimen/event_invitation_expand_icon"
                android:layout_height="@dimen/event_invitation_expand_icon"
                android:id="@+id/shrink"
                android:src="@drawable/ic_shrink"
                android:background="@android:color/transparent"
                android:scaleType="fitCenter"
                android:layout_gravity="center_vertical"
                android:layout_marginRight="5dp"/>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/shrink"
            android:layout_marginTop="5dp"
            android:id="@+id/list">

            <fragment
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:name="ListFragment"
                tools:layout="@layout/fragment_list"/>

        </RelativeLayout>

    </android.support.v7.widget.CardView>

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

    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/check"
        android:id="@+id/check"
        android:layout_marginTop="20dp"
        android:layout_below="@+id/card"
        />

</LinearLayout>

<Button
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/button"
    android:textStyle="bold"
    android:textColor="@android:color/white"
    />


Solution

  • You'll need to use a LinearLayout and use Weight for the childs. You can change all views weight on click.

    But I think you'll need to put your CheckBox inside a layout and set this layout weight. Otherwise you'll mess with the height.
    Didn't look to close to your layout, but you may need to do that for CardView too.
    Just keep that in mind.

    Hope this helps