Tab Layout covering parts of fragment, layout_below not working

Question

So I have a UserAreaActivity that has a layout with tabLayout. Each one of the tabs is its own fragment, however in each fragments layout the tabLayout covers the top of the fragments layout. I have tried using the android:layout_below and giving it the id of the tabLayout but it isnt working properly. Here is my fragments code:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/tabLayout"
tools:context="com.example.aleksandr.godspeedinvestments.OfferFragment">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
    <TextView
        android:text="After Repair Value"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/afRepValTV" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="number"
        android:ems="10"
        android:id="@+id/afRepValueET"
        android:hint="After Repair Value" />

    <TextView
        android:text="Closing Cost"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/cc1TV" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/cc1OutTV" />

    <TextView
        android:text="Agents Fee"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/afTV" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/afOutTV" />

    <TextView
        android:text="Repairs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/repTV" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="number"
        android:ems="10"
        android:id="@+id/repET"
        android:hint="Repairs" />

    <View
        android:id="@+id/SplitLine_hor1"
        android:layout_width="match_parent"
        android:layout_height= "2dp"
        android:background="@android:color/darker_gray" />

    <TextView
        android:text="Net"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/netTV" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/netOutTV" />

    <TextView
        android:text="Closing Cost"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/cc2TV" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/cc2OutTV" />

    <TextView
        android:text="Holding Cost"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/holdCostTV" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/holdCostOutTV" />

    <TextView
        android:text="Profit"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/profitTV" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/profitOutTV" />
    <View
        android:id="@+id/SplitLine_hor2"
        android:layout_width="match_parent"
        android:layout_height= "2dp"
        android:background="@android:color/darker_gray" />

    <TextView
        android:text="Offer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/offerTV" />

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

</RelativeLayout>

And here is my UserAreaActivity.xml file

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_user_area"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.aleksandr.godspeedinvestments.UserAreaActivity">

<android.support.design.widget.AppBarLayout
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    >
    <include
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        layout="@layout/toolbar_layout"
        />

    <android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tabLayout"
        app:tabMode="fixed"
        app:tabGravity="fill"
        app:tabTextAppearance="@style/MyTabStyle"
        ></android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>

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

EDIT: To clarify all of this should be included in the fragments layout

Put the `layout_below` attribute on the `ViewPager`. – Mike M. Dec 16 '16 at 04:27 — Mike M., Dec 16 '16 at 04:27

score 4 · Accepted Answer · answered Dec 16 '16 at 05:01

As @Mike M pointed out, add the attribute "layout_below" in your ViewPager. And give an ID to your AppBarLayout. Your UserAreaActivity.xml will look like this.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_user_area"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.aleksandr.godspeedinvestments.UserAreaActivity">
    <android.support.design.widget.AppBarLayout
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:id="@+id/toolbarLayout"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    >
        <include
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        layout="@layout/toolbar_layout"
       />
       <android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tabLayout"
        app:tabMode="fixed"
        app:tabGravity="fill"
        app:tabTextAppearance="@style/MyTabStyle"
        ></android.support.design.widget.TabLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@+id/toolbarLayout"
    android:id="@+id/viewPager"
    ></android.support.v4.view.ViewPager>
</RelativeLayout>

Thank you so much for the quick reply, what you did worked perfectly! You have no idea how many other questions and youtube videos i looked through for an answer and couldnt find it, seriously thank you so much! — Aleksandr Diamond, Dec 16 '16 at 05:20

score 0 · Answer 2 · answered Nov 21 '18 at 09:23

0

Adding the attribute app:layout_behavior="@string/appbar_scrolling_view_behavior" to the ViewPager worked for me. If it's not in your string file already, the value is android.support.design.widget.AppBarLayout$ScrollingViewBehavior

answered Nov 21 '18 at 09:23

Jack

5,354
2
29
54

Tab Layout covering parts of fragment, layout_below not working

2 Answers2

Linked