Reputation: 3973
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 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