Viewpager overflows the screen inside coordinator layout

Question

I'm trying to use the design support library to implement tabs. The issue is that the viewpager overlaps the toolbar and tablayout when i remove the attribute

 app:layout_behavior="@string/appbar_scrolling_view_behavior" 

of the viewpager.

viewpager overlaps the toolbar and tablayout

and when i add the attribute the viewpager overflows the screen.

viewpager overflows the screen

I just need the viewpager to occupy the space left after the tablayout and the toolbar and not overflow the screen...

Here is my activity_main.xml

<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.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    >

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlways"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

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

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

and here is my fragment_1.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin">

  <TextView
    android:id="@+id/tV_item1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="@dimen/activity_horizontal_margin"
    android:gravity="center"
    android:text="@string/tab1_q_persons"
    android:textSize="20sp"
    android:textStyle="bold" />

  <TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:text="0 people"
    android:textSize="30sp"
    android:textStyle="bold" />

  <ImageView
    android:id="@+id/iV_plus"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

  <ImageView
    android:id="@+id/iV_minus"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />


  <RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1">

    <Button
        android:id="@+id/nextBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_gravity="end"
        android:background="@color/colorPrimary"
        android:elevation="12dp"
        android:text="@string/next" />

 </RelativeLayout>

</LinearLayout>

Any help will be appreciated

Answer 1

I know it seems late. But I send my answer.

In activity_main.xml use RelativeLayout instead of CoordinatorLayout and you can remove AppBar. For defining Toolbar as AppBar you can use this code in MainActivity.java:

Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(mToolbar);

In fragment_1.xml use another widget like CardView or ScrollView instead of LinearLayout or you may use LinearLayout inside of replaced widget.

activity_main.xml

<RelativeLayout
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.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlways"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        android:layout_alignParentTop="true"/>

    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabGravity="fill"
        app:tabMode="fixed" 
        android:layout_below="@id/toolbar"/>

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

</RelativeLayout>

fragment_1.xml

<android.support.v7.widget.CardView
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">

<LinearLayout 

    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin">

      <TextView
        android:id="@+id/tV_item1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/activity_horizontal_margin"
        android:gravity="center"
        android:text="@string/tab1_q_persons"
        android:textSize="20sp"
        android:textStyle="bold" />

      <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="0 people"
        android:textSize="30sp"
        android:textStyle="bold" />

      <ImageView
        android:id="@+id/iV_plus"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

      <ImageView
        android:id="@+id/iV_minus"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />


      <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <Button
            android:id="@+id/nextBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_gravity="end"
            android:background="@color/colorPrimary"
            android:elevation="12dp"
            android:text="@string/next" />

     </RelativeLayout>

    </LinearLayout>
</android.support.v7.widget.CardView>

This solution solved same problem for me.