Search code examples
androidandroid-layoutandroid-toolbarandroid-xmlandroid-collapsingtoolbarlayout

CollapsingToolbarLayout not opening and close


I am trying to implement CollapsingToolbarLayout just like follows:

enter image description here

But my CollapsingToolbarLayout never opens or collapse. I have referred to this tutorial. Here is my code:

layout.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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="#FF0"
    tools:context=".activities.TasksListActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="@android:color/transparent"
        android:fitsSystemWindows="true"
        app:elevation="0dp">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:expandedTitleGravity="top"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:fitsSystemWindows="true"
                app:layout_collapseMode="pin" />

        </com.google.android.material.appbar.CollapsingToolbarLayout>

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/tasks_list_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:tint="@color/colorPrimary"
        app:srcCompat="@android:drawable/ic_input_add" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Here is the java code:

        toolbar = findViewById(R.id.toolbar);
        collToolbar = findViewById(R.id.collapsing_toolbar);

        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                onBackPressed();
            }
        });
        collToolbar.setTitleEnabled(false);
        collToolbar.setTitle("This is title");

Solution

  • The height for your AppBarLayout has been set to 60dp. Change it to 120dp or something larger and set the title to the toolbar before setting the toolbar as the supportActionBar

    <?xml version="1.0" encoding="utf-8"?>
    <androidx.coordinatorlayout.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"
        tools:context=".CollapsingToolbar">
    
        <com.google.android.material.appbar.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="120dp"
            android:fitsSystemWindows="true"
            android:background="#FF0"
            app:elevation="0dp">
    
            <com.google.android.material.appbar.CollapsingToolbarLayout
                android:id="@+id/collapsing_toolbar"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:expandedTitleGravity="bottom"
                app:expandedTitleTextAppearance="@style/TextAppearance.MaterialComponents.Headline5"
                app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
    
                <androidx.appcompat.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    android:fitsSystemWindows="true"
                    app:layout_collapseMode="pin" />
    
            </com.google.android.material.appbar.CollapsingToolbarLayout>
    
        </com.google.android.material.appbar.AppBarLayout>
    
        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/tasks_list_recycler_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />
    
        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_margin="16dp"
            android:tint="@color/colorPrimary"
            app:srcCompat="@android:drawable/ic_input_add" />
    
    </androidx.coordinatorlayout.widget.CoordinatorLayout>
    

    In your activity's java file

            toolbar = findViewById(R.id.toolbar);
            collToolbar = findViewById(R.id.collapsing_toolbar);
    
            toolbar.setTitle("This is title");
    
            setSupportActionBar(toolbar);
            getSupportActionBar().setDisplayHomeAsUpEnabled(true);
            toolbar.setNavigationOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    onBackPressed();
                }
            });
    
    

    enter image description here

    Hope this helps!