Layout with tabs with ad on bottom and a button above it

Question

I have created a layout with tabs

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

    <android.support.design.widget.CoordinatorLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

            <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"/>

            <android.support.design.widget.TabLayout
                    android:id="@+id/tabs"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"/>

        </android.support.design.widget.AppBarLayout>

        <android.support.v4.view.ViewPager
                android:id="@+id/pager"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"/>

    </android.support.design.widget.CoordinatorLayout>

    <com.google.android.gms.ads.AdView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            ads:adSize="SMART_BANNER"
            ads:adUnitId="@string/ad_id"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true">
    </com.google.android.gms.ads.AdView>

</RelativeLayout>

One of the tabs is

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

    <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/image_section"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:orientation="vertical">
        <ImageView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/image"/>

        <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/text"
                android:gravity="center"/>
    </LinearLayout>

    <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/button"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:gravity="center"/>

</RelativeLayout>

The problem is that before the ad loads I can see the button all the way on the bottom. How would I make the layout for the tab to take up exactly the space available instead of the whole screen? Same way if I added a button and make it be on top, instead of appearing below the tabs, it appears all the way on the top.

EDIT: I would like to make it look like this image

The button is part of tab content that is shown and the ad is part of the main layout. The problem is that whenever I set button to android:layout_alignParentBottom="true" then I end up with it being on the bottom and hidden behind the ad.

Answer 1

Change the root of your main layout to vertical LinearLayout instead of RelativeLayout.

Now you have two children in LinearLayout i.e CoordinatorLayout and AdView.

Since you want AdView to lie below CoordinatorLayout and CordinatorLayout to occupy the rest of the space,

set the height of CoordinatorLayout as android:layout_height="match_parent" with android:layout_weight="1" and the issue should be fixed.

Also change the height of AppBarLayout and TabLayout to match_parent.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ads="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1">

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"/>

            <android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_height="match_parent"/>

        </android.support.design.widget.AppBarLayout>

        <android.support.v4.view.ViewPager
            android:id="@+id/pager"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

    </android.support.design.widget.CoordinatorLayout>

    <com.google.android.gms.ads.AdView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_gravity="center"
        ads:adSize="SMART_BANNER"
        ads:adUnitId="@string/ad_id">

    </com.google.android.gms.ads.AdView>

</LinearLayout>

There is no need to change in the other layout. But I would recommend you use LinearLayout as the root layout instead of RelativeLayout

So here are the changes that I would recommend doing in your tab layout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:id="@+id/image_section"
        android:orientation="vertical">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/image"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/text"
            android:gravity="center"/>
    </LinearLayout>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/button"
        android:layout_centerHorizontal="true"
        android:gravity="center"/>

</LinearLayout>

Edit: Attaching images for better understanding: