TabLayout overlaps ViewPager Fragment

Question

i habe an TabLayout in my Application where each Tab has its own Fragment. But i cannot see the full content of my Fragment because the TabLayout overlaps the bottom of the fragment. How can i solve the problem?

activity_main.xml

<RelativeLayout
    android:id="@+id/main_layout"
    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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".activitys.MainActivity">

        <de.fhbielefeld.cardash.cardash.NonSwipeableViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

        <android.support.design.widget.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            app:tabMode="fixed"
            app:tabGravity="fill"
            android:layout_alignParentBottom="true"/>



</RelativeLayout>

fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <com.skobbler.ngx.map.SKMapViewHolder
        android:id="@+id/map_surface_holder"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_media_pause"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"/>

</RelativeLayout>

Answer 1

try this

<?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:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="com.union.experiment2.MainActivity"
tools:showIn="@layout/activity_main">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<de.fhbielefeld.cardash.cardash.NonSwipeableViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"
    app:tabMode="fixed"
    app:tabGravity="fill"
    android:layout_alignParentBottom="true"/>
<include
    layout="@layout/fragment"/>

Hope this will work make the tab layout in linear layout with orientation verticle and then just include the things u want to display in your layout