How to resize child of RelativeLayout when making another child visible?

Question

When I call view.setVisibility(View.VISIBLE) on the RelativeLayout @+id/saveCancelBar below, it covers part of the FrameLayout. I would like the FrameLayout to shrink to fit the RelativeLayout. If I put everything in a LinearLayout rather than a RelativeLayout, showing the SaveCancelBar simply shifts everything upwards and moves part of the Toolbar off screen

<RelativeLayout
    android:id="@+id/content_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center|bottom">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimary"
        android:elevation="4dp"
        android:layout_alignParentTop="true"
        android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

    <LinearLayout
        android:id="@+id/content_view_panes"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/toolbar"
        android:orientation="horizontal"
        android:gravity="bottom">

        <WebView
            android:id="@+id/mainWebView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:visibility="gone" />

        <FrameLayout
            android:id="@+id/listContainer"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </LinearLayout>
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="@color/colorPrimaryDark"
        android:layout_below="@+id/content_view_panes"
        android:visibility="gone"
        android:id="@+id/saveCancelBar">
        <Button
            android:id="@+id/editorCancelButton"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="@string/editor_cancel"
            android:textColor="@color/white"
            android:layout_alignParentLeft="true"
            android:background="@color/colorPrimaryDark"/>
        <Button
            android:id="@+id/editorSaveButton"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="@string/editor_save"
            android:textColor="@color/white"
            android:layout_alignParentRight="true"
            android:background="@color/colorPrimaryDark"/>
    </RelativeLayout>
</RelativeLayout>

Answer 1

You'll need to do two things.

Firstly, the FrameLayout with id listContainer will not shirk vertically because it's parent has layout_height set to match_parent. You should wrap the parent content_view_panes and the saveCancelBar in a LinearLayout with vertical orientation, and set the layout_height to 0dp, with layout_width set to 1. For a child of a LinearLayout, this tells it to fill up the remaining space. You don't need to alter the width or height of listContainer as it will resize based on it's parent.

Now when you change the visibility of saveCancelBar the content_view_panes, and thus listContainer, will have their height adjusted.

E.g.:

<RelativeLayout
android:id="@+id/content_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center|bottom">

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/colorPrimary"
    android:elevation="4dp"
    android:layout_alignParentTop="true"
    android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@+id/toolbar"
    android:orientation="vertical">
    <LinearLayout
        android:id="@+id/content_view_panes"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal">

        <WebView
            android:id="@+id/mainWebView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:visibility="gone" />

        <FrameLayout
            android:id="@+id/listContainer"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </LinearLayout>
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="@color/colorPrimaryDark"
        android:layout_below="@+id/content_view_panes"
        android:visibility="gone"
        android:id="@+id/saveCancelBar">
        <Button
            android:id="@+id/editorCancelButton"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="@string/editor_cancel"
            android:textColor="@color/white"
            android:layout_alignParentLeft="true"
            android:background="@color/colorPrimaryDark"/>
        <Button
            android:id="@+id/editorSaveButton"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="@string/editor_save"
            android:textColor="@color/white"
            android:layout_alignParentRight="true"
            android:background="@color/colorPrimaryDark"/>
    </RelativeLayout>
</LinearLayout>