CollapsingToolbarLayout not working

Question

My goal is when scrolling the viewpager, the ConstraintLayout must colapse and the tabs stick under app_barTop, but currently it's not scrolling,can someone please tell me what I am doing wrong?

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white">

    <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.v4.view.ViewPager>

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_barTop"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/white">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/app_bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/white">

            <include layout="@layout/status_bar" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:elevation="@dimen/toolbarElevation"
                app:contentInsetStart="0dp"
                tools:ignore="UnusedAttribute">

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <ImageView
                        android:id="@+id/img_plus"
                        android:layout_width="?attr/actionBarSize"
                        android:layout_height="?attr/actionBarSize"
                        android:layout_alignParentEnd="true"
                        android:scaleType="center"
                        android:src="@drawable/fab_plus"
                        android:tint="@color/app_color"
                        tools:ignore="ContentDescription" />

                    <ImageView
                        android:id="@+id/img_message"
                        android:layout_width="?attr/actionBarSize"
                        android:layout_height="?attr/actionBarSize"
                        android:scaleType="center"
                        android:src="@drawable/icon_message"
                        tools:ignore="ContentDescription" />

                    <ImageView
                        android:id="@+id/img_search"
                        android:layout_width="?attr/actionBarSize"
                        android:layout_height="?attr/actionBarSize"
                        android:layout_toStartOf="@id/img_plus"
                        android:scaleType="center"
                        android:src="@drawable/icon_search"
                        tools:ignore="ContentDescription" />

                    <TextView
                        android:id="@+id/toolbar_title"
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:layout_toEndOf="@id/img_message"
                        android:layout_toStartOf="@id/img_search"
                        android:fontFamily="sans-serif-medium"
                        android:gravity="center_vertical"
                        android:text="@string/vouch"
                        android:textColor="@color/action_bar_color"
                        android:textSize="18sp" />

                </RelativeLayout>

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

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

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <android.support.constraint.ConstraintLayout 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:layout_width="match_parent"
                android:layout_height="wrap_content">

                <Button
                    android:id="@+id/btn_view_contacts"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="8dp"
                    android:layout_marginEnd="8dp"
                    android:layout_marginStart="8dp"
                    android:layout_marginTop="8dp"
                    android:text="View Contacts"
                    android:textAllCaps="false"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintHorizontal_bias="0.1"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />

                <Button
                    android:id="@+id/btn_edit_profile"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="8dp"
                    android:layout_marginEnd="8dp"
                    android:layout_marginStart="8dp"
                    android:layout_marginTop="8dp"
                    android:text="Edit Profile"
                    android:textAllCaps="false"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintHorizontal_bias="0.9"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />

            </android.support.constraint.ConstraintLayout>

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

        <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="?android:attr/actionBarSize"
            android:layout_gravity="bottom"
            android:background="@android:color/transparent"
            app:layout_scrollFlags="scroll|enterAlways"
            app:tabGravity="fill"
            app:tabIndicatorColor="@android:color/holo_orange_dark"
            app:tabMaxWidth="0dp"
            app:tabMode="fixed"
            app:tabSelectedTextColor="@android:color/black"
            app:tabTextAppearance="@android:style/TextAppearance.Widget.TabWidget"
            app:tabTextColor="@android:color/black" />

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


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

@ʍѳђઽ૯ท one for toolbar shadow and for setting statusbar color. — Katy Colins, Aug 29 '18 at 11:08
@ʍѳђઽ૯ท but my min sdk version is 19,I can still use it? setting `app:layout_collapseMode="parallax"` I still have the issue — Katy Colins, Aug 29 '18 at 11:15

ʍѳђઽ૯ท · Accepted Answer · 2018-08-29T11:21:10.487

2

My goal is when scrolling the viewpager, the ConstraintLayout must colapse and the tabs stick under app_barTop, but currently it's not scrolling.

You don't need to add another AppBarLayout for statusbar color since there is a primaryDarkColor in material design tho. Also, add this to ConstraintLayout:

app:layout_collapseMode="parallax"

This should help for the purpose.

You have also added:

app:layout_scrollFlags="scroll|enterAlways"

To TabLayout which scrolls the tab. Instead, add:

app:layout_collapseMode="pin"

To make TabLayout stick there.

Edit #1:

How about adding:

app:layout_scrollFlags="scroll|enterAlways"

To ConstraintLayout.

edited Aug 29 '18 at 11:21

answered Aug 29 '18 at 11:14

ʍѳђઽ૯ท

16,646
7
53
108

I need to chnage it programatically is it possible then? and also adding this didn't solve the issue,I think the problem maybe this statement... One note: all views using the scroll flag must be declared before views that do not use the flag. This ensures that all views exit from the top, leaving the fixed elements behind. – Katy Colins Aug 29 '18 at 11:17
I believe removing one `AppbarLayout` for checking my codes would help. Make sure the other `AppbarLayout` contains `CollapsingToolbarLayout`. Here issue seems to be two `AppbarLayout` which is not defined by default. – ʍѳђઽ૯ท Aug 29 '18 at 13:55

CollapsingToolbarLayout not working

1 Answers1