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

Popular posts from this blog

php - Zend Framework / Skeleton-Application / Composer install issue -

c# - Better 64-bit byte array hash -

python - PyCharm Type error Message -