Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Collapsing toolbar not collapsing when scrolled

I am trying to implement collapsing toolbar in my android application. I am able to show the toolbar the way I want it to , but it is not collapsing when I scroll.

I am using below code

activity.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:fitsSystemWindows="true"
android:orientation="vertical"
tools:context=".MainActivity">

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

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <com.gigamole.navigationtabstrip.NavigationTabStrip
        android:id="@+id/nts_strip"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:background="@color/colorPrimary"
        android:elevation="4dp"
        app:nts_active_color="@color/white"
        app:nts_animation_duration="300"
        app:nts_color="@color/white"
        app:nts_corners_radius="1.5dp"
        app:nts_inactive_color="@color/white_transparent"
        app:nts_titles="@array/nts_titles" />

    <android.support.v4.view.ViewPager
        android:id="@+id/pager_photos"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@color/white_transparent" />
</LinearLayout>
</LinearLayout>

main_toolbar.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"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_collapseMode="parallax"
android:orientation="vertical">

<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.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsingToolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_scrollFlags="scroll|enterAlwaysCollapsed">

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

            <TextView
                android:id="@+id/tv_toolbar_title"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center_vertical"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:textColor="@color/white" />
        </android.support.v7.widget.Toolbar>
    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

below is how the screen looks like

enter image description here

like image 655
karan Avatar asked Nov 23 '16 10:11

karan


People also ask

How do I disable scrolling in collapsing Toolbar layout Android?

How do I disable scrolling in collapsing toolbar layout Android? The solution is simple, we just need to set the app:scrimAnimationDuration=”0" in our collapsing toolbar layout like the below code snippet. Now just run the code and see the results, you will see then there will be no fading animation anymore.

What is a collapsing Toolbar?

Android CollapsingToolbarLayout is a wrapper for Toolbar which implements a collapsing app bar. It is designed to be used as a direct child of a AppBarLayout. This type of layout is commonly seen in the Profile Screen of the Whatsapp Application.


1 Answers

Add

app:layout_behavior="@string/appbar_scrolling_view_behavior"

for LinearLayout in activity.xml file.

Also add

app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"

for Toolbar

like image 83
Piyush Avatar answered Sep 26 '22 23:09

Piyush