CODEWITHSUNDEEP
androidtabsandroid-viewpager
Dario
Dario

Reputation: 757

Android Viewpager with nav Tabs exits the bottom screen

In my App i use the ViewPager with Tabs for the different tasks that the app can do.

It's work fine but i have a graphical issue with the Pager Container.

PROBLEM: The device have a screen size and with match_parent i can cover the entire width and height of it. But i don't know why, with the code below, the Pager Container has moved from the toolbar down and then out of the screen.

ASK:

How can i avoid this problem? It is my fault or is it normal?

CODE

<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/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="scrollable"
            app:tabGravity="fill"/>
    </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>

The result is this enter image description here

And the viewpager go out of screen!

How i can avoid this?

I use this Guide

SOLUTION

<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.design.widget.AppBarLayout
        android:id="@+id/appbar"
        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/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="scrollable"
            app:tabGravity="fill"/>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/appbar"/>

</RelativeLayout>

Upvotes: 0

Views: 1194

Answers (2)

Devendra Vaja
Devendra Vaja

Reputation: 3964

Let us dissect the Views/ View Groups in the picture.

1) android.support.design.widget.CoordinatorLayout
This is inherited from the android.view.ViewGroup having width and height as below

android:layout_width="match_parent" <= Full screen width in this case, rootView
android:layout_height="match_parent" <= Full screen height in this case, rootView

2) android.support.design.widget.AppBarLayout
This is inherited from LinearLayout with Vertical Orientation having width and height as below 

android:layout_width="match_parent" <= Full screen width
android:layout_height="wrap_content" <= Occupy screen height sufficient    
                                     enough to hold all the child Views.

3) AppBarLayout->child(0)->android.support.v7.widget.Toolbar
Inherited from android.view.ViewGroup having width and height as below

android:layout_width="match_parent" <= Full screen width
android:layout_height="?attr/actionBarSize" <= phone and OS version    
                                             dependent, say it is 48dip.

4) AppBarLayout->child(1)->android.support.design.widget.TabLayout
Inherited from FrameLayout with Horizontal Scrolling Capability

   android:layout_width="match_parent" <= Full screen width
   android:layout_height="wrap_content" <= Occupy screen height sufficient    
                                         to completely visible.

5) android.support.v4.view.ViewPager
The main player of the view, inherited from the ViewGroup having width and height as below

android:layout_width="match_parent" <= Full screen width.
android:layout_height="match_parent" <= Full screen height.

Important Information:
The ViewGroup do not follow any policy like other inherited ViewGroups such as LinearLayout, RelativeLayout and so on where the children are adjusted based on the width and height of the other children availability. So ViewPager will have height and width same as the parent i.e. CoordinateLayout size but at offset from the top based on the LinearLayout height. This is the reason you could see the ViewPager going out of the screen.

There are various references at StackOverflow which tries to solve the problem but for your issue here is the simplest and logical resolution.

Solution:

STEP#1) Move the ViewPager into the AppBarLayout and set background with the required color.

<android.support.design.widget.AppBarLayout>
...
...
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#FFFFFF" <= Replace this color of choice
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />


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

STEP#2) OPTIONAL, Remove the scrolling property from the Toolbar otherwise one could see the blank space below the end of the ViewPager when scrolled up.

app:layout_scrollFlags="scroll|enterAlways"

Your utlimate file should look like 

<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:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

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

        <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.AppBarLayout>

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

I hope that helps...
Happy Coding... ;)

Upvotes: 2

Alex Townsend
Alex Townsend

Reputation: 1564

This is because of the app:layout_behavior on your ViewPager.

The way it works is by off-setting your ViewPager the height of the toolbar down/out of the screen. When you scroll, and your Toolbar translates up/off the screen, it also slides your ViewPager up and in to the regular position. When you scroll and your Toolbar re-enters the view, it will translate your ViewPager down some to make room for the Toolbar.

Upvotes: 1

Related Questions