WebView inside RelativeLayout

Question

I have a relative layout containing a web view and two other relative layouts (Navigation bars- one at the top and one at the bottom of the screen). I'm trying to get the WebView to sit in between these two like this:

This is what I see:

At the moment, all that shows up is the WebView with black spaces where the two bars should be. Where am I going wrong? Cheers guys!

My XML code:

 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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/activity_web_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.liutaurasmazonas.cslogintrying.WebViewActivity">


    <RelativeLayout
        android:id="@+id/rl1"
        android:layout_width="300dp"
        android:layout_height="90dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentStart="true">

        <ImageButton
            android:id="@+id/ibNewsBlack"
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:layout_alignParentBottom="true"
            android:layout_alignParentStart="true"
            android:background="#00ffffff"
            android:scaleType="fitEnd"
            app:srcCompat="@drawable/newsbutton2" />

        <ImageButton
            android:id="@+id/ibEconCalBlack"
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:layout_alignParentBottom="true"
            android:layout_alignParentStart="true"
            android:layout_marginStart="90dp"
            android:background="#00ffffff"
            android:cropToPadding="false"
            android:scaleType="fitEnd"
            app:srcCompat="@drawable/economiccalendarbuttongrey2" />

        <ImageButton
            android:id="@+id/ibLiveRates"
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:layout_alignParentTop="true"
            android:layout_toEndOf="@+id/ibEconCalBlack"
            android:background="#00ffffff"
            android:scaleType="fitEnd"
            app:srcCompat="@drawable/liveratesbuttonblue2" />

        <ImageButton
            android:id="@+id/ibSettingsBlack"
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:layout_alignParentEnd="true"
            android:layout_alignParentTop="true"
            android:background="#00ffffff"
            android:scaleType="fitEnd"
            app:srcCompat="@drawable/settingsbuttongrey2" />

    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/relativeLayout6"
        android:layout_width="match_parent"
        android:layout_height="95dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true">

        <ImageView
            android:id="@+id/imageView5"
            android:layout_width="790dp"
            android:layout_height="65dp"
            android:layout_alignParentStart="true"
            android:scaleType="matrix"
            app:srcCompat="@drawable/topbarcremebackgroundddd2" />

        <ImageButton
            android:id="@+id/addAProfile"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_alignBottom="@+id/imageView5"
            android:layout_alignParentStart="true"
            android:layout_marginBottom="7dp"
            android:layout_marginStart="16dp"
            android:background="#00ffffff"
            android:scaleType="fitXY"
            app:srcCompat="@drawable/pluss" />

        <ImageView
            android:id="@+id/imageView4"
            android:layout_width="210dp"
            android:layout_height="45dp"
            android:layout_alignBottom="@+id/addAProfile"
            android:layout_centerHorizontal="true"
            android:background="#00ffffff"
            android:scaleType="fitXY"
            app:srcCompat="@drawable/bestsearchbar" />

        <ImageButton
            android:id="@+id/imageButton2"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_alignBottom="@+id/imageView4"
            android:layout_alignParentEnd="true"
            android:layout_marginEnd="12dp"
            android:background="#00ffffff"
            android:scaleType="fitXY"
            app:srcCompat="@drawable/bell" />
        </RelativeLayout>

    <WebView
        android:layout_above="@+id/rl1"
        android:layout_below="@+id/relativeLayout6"
        android:id="@+id/webView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_marginTop="64dp" />

</RelativeLayout>

Answer 1

Don't create your web-view in the start of the layout.

First create both the top and bottom navigation bars.

Later create your web-view with the following properties :

Webview : bottom of Top Navigation bar layout

Webview : above to Bottom Navigation bar layout

This will solve your problem.