Usman Khan
Usman Khan

Reputation: 3973

CollapsingToolbarLayout title not displaying in Collapsed state with MaterialToolbar items

I am developing an Android app and using a CollapsingToolbarLayout combined with a MaterialToolbar. My goal is to display icons inside the MaterialToolbar while maintaining the visibility of the title from the CollapsingToolbarLayout. However, I'm encountering an issue where the title displays correctly in the expanded state but disappears (seemingly hidden behind the MaterialToolbar) when the toolbar is collapsed. I need the title to remain visible in both states. Below is the relevant XML configuration and any applicable code snippets:

XML Layout:

<?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">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="?attr/collapsingToolbarLayoutMediumSize"
            app:collapsedTitleGravity="start"
            app:collapsedTitleTextAppearance="@style/CollapsedTitleTextAppearance"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleGravity="bottom|start"
            app:expandedTitleMarginStart="32dp"
            app:expandedTitleTextAppearance="@style/ExpandedTitleTextAppearance"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:maxLines="2"
            app:subtitleCentered="false"
            app:titleCentered="false"
            app:titleEnabled="true">

            <com.google.android.material.appbar.MaterialToolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@color/transparent"
                android:contentInsetStart="0dp"
                android:contentInsetLeft="0dp"
                android:elevation="0dp"
                app:contentInsetStartWithNavigation="0dp"
                app:layout_collapseMode="pin">
                <!-- Toolbar content like back button, title, and actions -->

                <!--       These items I need to display always with my title.         -->
                <androidx.constraintlayout.widget.ConstraintLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@color/transparent"
                    android:orientation="horizontal">

                    <ImageView
                        android:id="@+id/back_btn"
                        android:layout_width="@dimen/_18sdp"
                        android:layout_height="@dimen/_18sdp"
                        android:layout_gravity="center_vertical"
                        android:layout_marginEnd="4dp"
                        android:padding="@dimen/_3sdp"
                        android:src="@drawable/ic_left"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="parent" />


                    <androidx.appcompat.widget.AppCompatImageView
                        android:id="@+id/favicon"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_vertical"
                        android:layout_marginEnd="@dimen/_18sdp"
                        android:src="@drawable/ic_addto_favorite"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintTop_toTopOf="parent" />
                </androidx.constraintlayout.widget.ConstraintLayout>
            </com.google.android.material.appbar.MaterialToolbar>


        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>
    
</androidx.coordinatorlayout.widget.CoordinatorLayout>

My Activity Class onResume() methods:

override fun onResume() {
        super.onResume()

        if (this::binding.isInitialized) {

            binding.collapsingToolbarLayout.titleCollapseMode =
                CollapsingToolbarLayout.TITLE_COLLAPSE_MODE_FADE

            binding.appBar.post {
                binding.appBar.setExpanded(false, false)
            }

            // Add an OnOffsetChangedListener to AppBarLayout to handle its collapse and expansion.
            binding.appBar.addOnOffsetChangedListener(AppBarLayout.OnOffsetChangedListener { _, verticalOffset ->
                if (abs(verticalOffset) == binding.appBar.totalScrollRange) {
                    // Change toolbar properties when collapsed.
                    binding.collapsingToolbarLayout.setContentScrimColor(
                        ContextCompat.getColor(
                            this,
                            R.color.white
                        )
                    )
                    binding.collapsingToolbarLayout.setCollapsedTitleTextColor(
                        ContextCompat.getColor(
                            this,
                            android.R.color.black
                        )
                    )
                } else {
                    // Change toolbar properties when expanded.
                    binding.collapsingToolbarLayout.setContentScrimColor(
                        ContextCompat.getColor(
                            this,
                            R.color.hue_grey_50
                        )
                    )
                    binding.collapsingToolbarLayout.setExpandedTitleColor(
                        ContextCompat.getColor(
                            this,
                            android.R.color.black
                        )
                    )
                }
            })
        }
    }

My Style:

<style name="CollapsingToolbarLayoutMediumStyle">
    <item name="contentScrim">@color/transparent</item>
    <item name="expandedTitleMarginStart">48dp</item>
</style>

<!-- Define the custom dimensions for the CollapsingToolbarLayout -->
<dimen name="collapsingToolbarLayoutMediumSize">180dp</dimen>

<style name="ExpandedTitleTextAppearance" parent="archivo_headline_medium_regular">
    <item name="android:ellipsize">none</item>
    <item name="android:textSize">28sp</item>
    <item name="android:maxLines">2</item>
    <item name="android:textColor">@android:color/black</item>
</style>

<style name="CollapsedTitleTextAppearance" parent="archivo_headline_small_regular">
    <item name="android:ellipsize">end</item>
    <item name="android:textSize">24sp</item>
    <item name="android:singleLine">true</item>
    <item name="android:textColor">@android:color/black</item>
</style>

Upvotes: 0

Views: 43

Answers (0)

Related Questions