What is layout_collapseParallaxMultiplier
used in CollapsingToolbarLayout
?
I have seen the android developer doc, but I didn't understand.
please explain this parameter & it's effect when it used with layout_collapseMode
with example.
Below is a simple example of xml.
<android.support.design.widget.CollapsingToolbarLayout ... >
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:src="@drawable/random_pattern"
android:scaleType="fitXY"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.75"/>
</android.support.design.widget.CollapsingToolbarLayout>
Parameter layout_collapseParallaxMultiplier determines what part of the image (in percent) will be hidden under the bottom content. So, for example, setting this parameter to value 1.0 means that top boundary of appbar's image is bound to the top edge of the screen and doesn't move when scrolling.
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.
In very simple words:
When scrolling we see the following - appbar image starts hiding under the content and beyond the top edge of the screen. Parameter layout_collapseParallaxMultiplier
determines what part of the image (in percent) will be hidden under the bottom content.
So, for example, setting this parameter to value 1.0
means that top boundary of appbar's image is bound to the top edge of the screen and doesn't move when scrolling. And main content is moving up the top of the image.
When the parameter is not set this corresponds to the value 0.5
and image will be overlapped above and below synchronously.
This was explained on Android Design Support Library:
In addition to pinning a view, you can use
app:layout_collapseMode="parallax"
(and optionallyapp:layout_collapseParallaxMultiplier="0.7"
to set the parallax multiplier) to implement parallax scrolling (say of a siblingImageView
within theCollapsingToolbarLayout
). This use case pairs nicely with theapp:contentScrim="?attr/colorPrimary"
attribute forCollapsingToolbarLayout
, adding a full bleed scrim when the view is collapsed.
This is a behavior example when you use app:layout_collapseMode="parallax"
.
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