A
A
Andrey Kovalchuk2016-10-28 13:56:18
Android
Andrey Kovalchuk, 2016-10-28 13:56:18

How to make TabLayout scroll with ViewPager?

106a3d5aa22147658192822503d497eb.jpg
Of good. Can you please tell me how to make it so that when scrolling the list (ViewPager) down, the entire AppBar leaves? Then we scroll up and, voila, we see our bar again. Like Google apps.
If not a completely accurate answer, then a link to the material, I would be very grateful.
Below layout.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorMainBackground"
    android:fitsSystemWindows="true">

    <android.support.design.widget.CoordinatorLayout
        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.support.v7.widget.Toolbar
                android:id = "@+id/toolbar"
                android:layout_width = "match_parent"
                android:theme="@style/ThemeOverlay.AppCompat.Dark"
                android:layout_height = "?attr/actionBarSize"
                android:background="?attr/colorPrimary"/>

            <android.support.design.widget.TabLayout
                android:id="@+id/tabLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:tabIndicatorColor="@android:color/white"
                app:tabIndicatorHeight="6dp"
                app:tabSelectedTextColor="@android:color/white"
                app:tabTextColor="@android:color/white"/>

        </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.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_refresh"
            android:layout_gravity="end|bottom"
            android:layout_marginBottom="@dimen/fab_margin"
            android:layout_marginRight="@dimen/fab_margin"
            />
    </android.support.design.widget.CoordinatorLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:menu="@menu/menu_navigation"
        app:headerLayout="@layout/navigation_header"/>

</android.support.v4.widget.DrawerLayout>

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Alex Kisel, 2016-11-06
@ziginsider

Because for layout you use CoordinatorLayout, then an easy way:
Add one line in the description of the Toolbar:

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

or we do the same in the code when we initialize the toolbar:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
AppBarLayout.LayoutParams params =  (AppBarLayout.LayoutParams) toolbar.getLayoutParams();
params.setScrollFlags(AppBarLayout.LayoutParams.SCROLL_FLAG_SCROLL | AppBarLayout.LayoutParams.SCROLL_FLAG_ENTER_ALWAYS);

If you need to fine-tune the animation, you will have to manually:
For example, you have a listView and an appbar that needs to be hidden or shown again when we rotate the list.
We get the list, we get the appbar... For example, like this:
We listen to the scroll of the list and start the corresponding animation:
listView.setOnScrollListener(new AbsListView.OnScrollListener() {
            @Override
            public void onScrollStateChanged(AbsListView view, int scrollState) {
            }

            @Override
            public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
                if (view.getId() == listView.getId()) {
                    final int currentFirstVisibleItem = listView.getFirstVisiblePosition();
                    if (currentFirstVisibleItem > mLastFirstVisibleItem) {

                        //прячем appbar
                        appbar.animate().translationY(-appbar.getBottom()).setInterpolator(new AccelerateInterpolator()).start();

                    } else if (currentFirstVisibleItem < mLastFirstVisibleItem) {

                        //возвращаем на место...
                        appbar.animate().translationY(0).setInterpolator(new DecelerateInterpolator()).start();

                    }
                    mLastFirstVisibleItem = currentFirstVisibleItem;
                }
            }
        });

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question