android - How to make a gradient shape stay behind CollapsingToolbarLayout title -
i've been playing around chris bane's cheesesquare example application regarding collapsing toolbar layout , i'm having trouble adding gradient behind title on collapsing toolbar title remains readable if backdrop bright.
i've seen 1 solution here on stackoverflow deals in way.
that solution places gradient "attached" image instead of bottom of collapsing toolbar. happen is, scroll down, gradient disappear image parallaxes out of sight. want make gradient follow toolbar collapses (and keep parallax effect).
this short video should make issue clear: https://vid.me/j225
activity_contact_detail.xml
<android.support.design.widget.appbarlayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="@dimen/detail_backdrop_height" android:theme="@style/themeoverlay.appcompat.dark.actionbar"> <android.support.design.widget.collapsingtoolbarlayout android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="match_parent" app:contentscrim="?attr/colorprimary" app:expandedtitlemarginend="64dp" app:expandedtitlemarginstart="48dp" app:layout_scrollflags="scroll|exituntilcollapsed"> <framelayout android:layout_width="match_parent" android:layout_height="match_parent" app:layout_collapsemode="parallax"> <imageview android:id="@+id/backdrop" android:layout_width="match_parent" android:layout_height="match_parent" android:scaletype="centercrop" android:src="@drawable/woman"/> <view android:layout_width="match_parent" android:layout_height="?actionbarsize" android:layout_gravity="bottom" android:background="@drawable/backdrop_bg"/> </framelayout> <android.support.v7.widget.toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionbarsize" app:layout_collapsemode="pin" app:popuptheme="@style/themeoverlay.appcompat.light" /> </android.support.design.widget.collapsingtoolbarlayout> </android.support.design.widget.appbarlayout> ... <view android:layout_width="match_parent" android:layout_height="?actionbarsize" android:background="@drawable/backdrop_bg" app:layout_anchor="@id/appbar" app:layout_anchorgravity="bottom"/>
backdrop_bg.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <gradient android:angle="90" android:endcolor="#0000" android:startcolor="#303f9f" android:type="linear"/> <corners android:radius="0dp"/> </shape>
any welcome!
silly me, came issue , found solution. @whaleswallace made me realize collapsingtoolbarlayout extends framelayout (so don't need wrap image , gradient view in one) matter of adding android:layout_gravity="center_horizontal|bottom gradient view:
<android.support.design.widget.collapsingtoolbarlayout ....> <imageview android:id="@+id/backdrop" android:layout_width="match_parent" android:layout_height="match_parent" android:scaletype="centercrop" app:layout_collapsemode="parallax"/> <view android:layout_width="match_parent" android:layout_height="72dp" android:background="@drawable/backdrop_bg" android:layout_gravity="center_horizontal|bottom"/> <android.support.design.widget.collapsingtoolbarlayout/>
the image "parallaxing" in , out , gradient keep anchored bottom of appbarlayout.
Comments
Post a Comment