The main problem I've currently got with the CollapsingToolbarLayout is, that whatever I'm trying, the minHeight attribute of my Toolbar does not have any effect.
My desired result would be this: (The CollapsingToolbarLayout with a certain expanded height and a certain collapsed height (in the example 180dp), while the title either collapses or stays on the top)
But whatever I do, the title sometimes is in the center, won't completely collapse or the minHeight is ignored anyway. I have tried to set the minHeight for either AppBarLayout, CollapsingToolbarLayout, the toolbar itself, any contents, etc. also with different approaches found on the web but with no luck.
Here is the basic xml:
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:minHeight="180dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="@android:color/transparent"
app:expandedTitleGravity="bottom"
app:expandedTitleTextAppearance="@style/TextAppearence.App.ToolbarTitle"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:statusBarScrim="@android:color/transparent">
<com.xxxxxx.custom.Banner
android:id="@+id/parallax_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="@drawable/xxxxxxxx"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.6"
app:layout_scrollFlags="scroll" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="180dp"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
I hope this is enough content to explain my problem. Any help is appreciated, thanks!
This one is pretty easy. Just set bottom margin of your Toolbar
to whatever space you want to be reserved in the collapsed version.
The reasoning behind this is simple. CollapsingToolbarLayout
inherits from FrameLayout
which stacks images on top of each other. The only things it takes in account when considering collapsed bounds are toolbar height and its top / bottom margins.
You can set the height to 180dp
instead of using minHeight, and then add a TextView into the toolbar to serve as the title.
just set Toolbar collapseMode as "pin" mode, and height with your requirement size
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="100dp"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With