Alberson Melo
Alberson Melo

Reputation: 344

Fragment in ViewPager not triggering scroll on Coordinator Layout

So, I have a MainActivity with a CoordinatorLayout to make that cool scroll effect on Android. This is my activity_main.xml

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="br.com.alberson.apontadordehoras.MainActivity">

    <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:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/AppTheme.PopupOverlay">

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

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

    </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.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email" />

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

And this is my fragment.xml

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true"
    tools:context="br.com.alberson.apontadordehoras.MesFragment">

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="@dimen/activity_vertical_margin"
        android:layout_marginEnd="@dimen/activity_horizontal_margin"
        android:layout_marginLeft="@dimen/activity_horizontal_margin"
        android:layout_marginRight="@dimen/activity_horizontal_margin"
        android:layout_marginStart="@dimen/activity_horizontal_margin"
        android:layout_marginTop="@dimen/activity_vertical_margin"
        android:orientation="vertical">

        <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:elevation="@dimen/cardview_default_elevation"
            android:padding="@dimen/fab_margin"
            card_view:cardCornerRadius="@dimen/cardview_default_radius">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="@dimen/activity_vertical_margin"
                android:layout_marginEnd="@dimen/activity_horizontal_margin"
                android:layout_marginLeft="@dimen/activity_horizontal_margin"
                android:layout_marginRight="@dimen/activity_horizontal_margin"
                android:layout_marginStart="@dimen/activity_horizontal_margin"
                android:layout_marginTop="@dimen/activity_vertical_margin"
                android:orientation="vertical">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="top|start"
                    android:text="@string/realizado" />

                <TextView
                    android:id="@+id/mes_realizado"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginBottom="@dimen/activity_vertical_margin"
                    android:layout_marginTop="@dimen/activity_vertical_margin"
                    android:gravity="center"
                    android:text="70 horas"
                    android:textSize="38sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="top|start"
                    android:text="@string/media_por_dia" />

                <TextView
                    android:id="@+id/mes_media_por_dia"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginBottom="@dimen/activity_vertical_margin"
                    android:layout_marginTop="@dimen/activity_vertical_margin"
                    android:gravity="center"
                    android:text="8,5 horas"
                    android:textSize="38sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="top|start"
                    android:text="@string/horas_dia_meta" />

                <TextView
                    android:id="@+id/mes_horas_dia_para_meta"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginBottom="@dimen/activity_vertical_margin"
                    android:layout_marginTop="@dimen/activity_vertical_margin"
                    android:gravity="center"
                    android:text="8,5 horas"
                    android:textSize="38sp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="top|start"
                    android:text="@string/horas_dia_previsto" />

                <TextView
                    android:id="@+id/mes_horas_dia_para_previsto"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginBottom="@dimen/activity_vertical_margin"
                    android:layout_marginTop="@dimen/activity_vertical_margin"
                    android:gravity="center"
                    android:text="8,5 horas"
                    android:textSize="38sp"
                    android:textStyle="bold" />
            </LinearLayout>
        </android.support.v7.widget.CardView>

        <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="@dimen/activity_vertical_margin"
            android:layout_marginTop="@dimen/activity_vertical_margin"
            android:elevation="@dimen/cardview_default_elevation"
            android:padding="@dimen/fab_margin"
            card_view:cardCornerRadius="@dimen/cardview_default_radius">

            <android.support.v7.widget.GridLayout xmlns:grid="http://schemas.android.com/apk/res-auto"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginBottom="@dimen/activity_vertical_margin"
                android:layout_marginEnd="@dimen/activity_horizontal_margin"
                android:layout_marginLeft="@dimen/activity_horizontal_margin"
                android:layout_marginRight="@dimen/activity_horizontal_margin"
                android:layout_marginStart="@dimen/activity_horizontal_margin"
                android:layout_marginTop="@dimen/activity_vertical_margin"
                grid:columnCount="2">

                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:orientation="vertical"
                    grid:layout_columnWeight="1"
                    grid:layout_gravity="fill_horizontal">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:gravity="center"
                        android:text="@string/meta_desejada" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="200 horas"
                        android:textStyle="bold" />
                </LinearLayout>

                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:orientation="vertical"
                    grid:layout_columnWeight="1"
                    grid:layout_gravity="fill_horizontal">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:gravity="center"
                        android:text="@string/meta_desejada" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="200 horas"
                        android:textStyle="bold" />
                </LinearLayout>

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="@dimen/activity_vertical_margin"
                    android:orientation="vertical"
                    grid:layout_columnSpan="2"
                    grid:layout_gravity="fill_horizontal">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:text="@string/dias_uteis_restantes" />

                    <TextView
                        android:id="@+id/mes_dias_uteis_restantes"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:layout_marginTop="@dimen/activity_vertical_margin"
                        android:text="5"
                        android:textStyle="bold" />

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

In the pager, there are 2 pages, each with one fragment.

I have 2 problems:

1) The ScrollView inside this fragment is not even showing, and then not scrolling with CoordinatorLayout.

2) If I scroll the TabLayout up, the content is scrolled up and the toolbar becomes hidden, the behaviour I expected while scrolling the fragment in the ViewPager.

What am I doing wrong?

Upvotes: 1

Views: 2469

Answers (1)

Daniel Nugent
Daniel Nugent

Reputation: 43322

Instead of ScrollView use a NestedScrollView.

The collapsing Toolbar behavior that CoordinatorLayout provides requires that the scrolling element supports nested scrolling. This is needed in order to propagate the scroll event all the way up to the AppBarLayout and Toolbar.

If you are only supporting api-21 and up, you could use a ScrollView or ListView and call setNestedScrollingEnabled(true), and it would work.

For supporting lower api levels, use the support library classes that inherently support nested scrolling, such as NestedScrollView and RecyclerView.

Upvotes: 2

Related Questions