Offset in Google Map View when used with TabLayout and CoordinatorLayout

Issue

I have a TabLayout and a ViewPager with scrolling behavior. In the ViewPager, there are two layouts: -

1. (RecyclerView + ProgressBar)
2. Google Map View

1) When the tab is at RecyclerView, the tabLayout will scroll/hide away when the Recycler view is scrolled. This part is working as expected.

2) However, when the tab is at the Google Map View, the whole view is shifted down. the Zoom buttons and google copyright info is out of view. (See image below). When the scrolling behavior is commented off, the map is shown correctly, but recyclerView no longer hides the tablayout.

Is there a way to show the map correctly and at the same time allow the tablayout to be hidden when the recyclerview is displayed?

The following is the xml for the coordinatorLayout

<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.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent"
        android:orientation="vertical">

        <android.support.design.widget.TabLayout
            android:id="@+id/tab_layout"
            style="@style/TabLayoutTheme"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:elevation="4dp"
            android:theme="@style/TabLayoutTheme"
            app:layout_scrollFlags="scroll|enterAlways"
            app:tabSelectedTextColor="@color/primary_text" />

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

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

Solution

Remove the scrolling view behavior from XML and add it dynamically when other than MapFragment is selected.After update changes your xml should look like below.

Your Xml File

<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:id="@+id/appbar_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/transparent"
    android:orientation="vertical">

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        style="@style/TabLayoutTheme"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:elevation="4dp"/>

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

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

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

In your activity which are handling tabs.Add "addOnPageCahgeListener" like below.Where you will turn on/off layout-behaviour on the basis of selected tab

    mTabLayout = (TabLayout) findViewById(R.id.tab_layout);
    appBarLayout = (AppBarLayout) findViewById(R.id.appbar_layout);

viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        public void onPageSelected(int position) {
            switch (position) {
                case 0:
                    turnOffTabLayoutScrolling();
                    break;
                case 1:
                    turnOnTabLayoutScrolling();
                    break;
            }
        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    });

Code to Turn off/on scrolling

public void turnOffTabLayoutScrolling() {

    //turn off scrolling

    AppBarLayout.LayoutParams toolbarLayoutParams = (AppBarLayout.LayoutParams) mTabLayout.getLayoutParams();
    toolbarLayoutParams.setScrollFlags(0);

    CoordinatorLayout.LayoutParams appBarLayoutParams = (CoordinatorLayout.LayoutParams) appBarLayout.getLayoutParams();
    appBarLayoutParams.setBehavior(null);
    appBarLayout.setLayoutParams(appBarLayoutParams);
}

public void turnOnTabLayoutScrolling() {

    //turn on scrolling
    AppBarLayout.LayoutParams toolbarLayoutParams = (AppBarLayout.LayoutParams) mTabLayout.getLayoutParams();
    toolbarLayoutParams.setScrollFlags(AppBarLayout.LayoutParams.SCROLL_FLAG_SCROLL | AppBarLayout.LayoutParams.SCROLL_FLAG_ENTER_ALWAYS);
    mTabLayout.setLayoutParams(toolbarLayoutParams);

    CoordinatorLayout.LayoutParams appBarLayoutParams = (CoordinatorLayout.LayoutParams) appBarLayout.getLayoutParams();
    appBarLayoutParams.setBehavior(new AppBarLayout.Behavior());
    appBarLayout.setLayoutParams(appBarLayoutParams);
}

If you are facing problem following the guide line below is the link of complete TabLayout Sample with map on one tab.

https://www.dropbox.com/s/z5gu45b55juuhsv/TabLayoutSample.zip

Answered By - waleedsarwar86