How to place an ad below the web view

Issue

I want to place a Facebook Audience network banner ad below the web view. I do not want the ad to overlap my webview. I have failed to implement this for some days.

Here's my layout file where I placed the ad after the webview in constraint layout

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/web_view_relative_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/activity_main">

    <View
        android:id="@+id/divider"
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:background="?android:attr/listDivider"
        app:layout_constraintTop_toTopOf="parent" />

    <WebView
        android:id="@+id/web_view_documentation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <RelativeLayout
        android:id="@+id/native_banner_ad_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent" />

</android.support.constraint.ConstraintLayout>

I have placed an AppBarLayout above the webview. If I add constraints, my webview starts to overlap with app bar.

My webview height and width is set to match_parent. I want my webview to take the full space remained after ad. So, basically, if my ad is of height 100dp, webview should fill the remaining space without overlapping or underlap. Thanks in advance.

Solution

You can put the views in a vertical chain so that the WebView takes all remaining space when the RelativeRelayout container for the ad has its height set to wrap_content:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/web_view_relative_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/activity_main">

    <View
        android:id="@+id/divider"
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:background="?android:attr/listDivider"
        app:layout_constraintBottom_toTopOf="@id/web_view_documentation"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <WebView
        android:id="@+id/web_view_documentation"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@id/native_banner_ad_container"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/divider"/>

    <RelativeLayout
        android:id="@+id/native_banner_ad_container"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/web_view_documentation"/>

</android.support.constraint.ConstraintLayout>

Answered By - Pawel Laskowski