android coordinatorLayout+tabLayout(bottom)+viewPager is giving error

Question

I am using coordinator layout as my root layout for the activity(activity_main for which the layout code is below). In it i have a

• AppBarLayout inside having a toolbar
• ViewPager
• TabLayout

The problem is my viewpager has a recyclerView/cardview describing a list of data and the very last element in the list is getting covered by the tabLayout. Any solution ? (currently min-version to work with is jellyBean but this following for lollipop) click here to view screen with error

<?xml version="1.0" encoding="utf-8"?>

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingTop="@dimen/appbar_padding_top"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay">

    </android.support.v7.widget.Toolbar>

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


<android.support.v4.view.ViewPager
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />


<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/container"
    android:background="?attr/colorPrimary"
    android:layout_gravity="bottom"
    app:tabMode="fixed"
    app:tabGravity="fill"
    app:tabMaxWidth="0dp"
    app:tabBackground="@drawable/tab_color_selector"
    android:layout_alignParentBottom="true"
    app:tabSelectedTextColor="@color/colorPrimary"
    app:tabIndicatorColor="@color/colorPrimary" />

Answer 1

The reason why your having this problem is because the TabLayout is drawing in front of ViewPager. Now there are multiple ways to solve this but one of the easier ways would be to wrap your ViewPager and TabLayout in a Relativelayout and limit the ViewPager from drawing behind the TabLayout.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay">

        </android.support.v7.widget.Toolbar>

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

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="?attr/actionBarSize">

        <android.support.v4.view.ViewPager
            android:id="@+id/container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@+id/tab_layout"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"/>


        <android.support.design.widget.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:background="?attr/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:tabGravity="fill"
            app:tabMaxWidth="0dp"
            app:tabMode="fixed"/>
    </RelativeLayout>
</android.support.design.widget.CoordinatorLayout>

Answer 2

Add following properties to your recyclerView and check

<RecyclerView
  android:clipToPadding="false"
  android:paddingBottom="50dp"/>