EdgeEffect in AppBarLayout

Question

I have a CollapsingToolbar as a parent in my view, which looks like this:

 <?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout xmlns:tools="http://schemas.android.com/tools" style="@style/XmatchYmatch" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:fitsSystemWindows="true"> <android.support.design.widget.AppBarLayout android:id="@+id/appbar" app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" android:layout_width="match_parent" android:layout_height="@dimen/appbar_image_height" android:fitsSystemWindows="true" android:transitionName="@string/shared_element_anim_name" android:background="@color/red"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar" style="@style/XmatchYmatch" android:minHeight="0dp" app:statusBarScrim="@color/translucent_black" app:expandedTitleTextAppearance="@android:color/transparent" android:fitsSystemWindows="true" app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"> <RelativeLayout android:id="@+id/toolbar_content_parent" style="@style/XmatchYmatch" android:fitsSystemWindows="true" app:layout_collapseMode="parallax" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <ImageView android:id="@+id/toolbar_iv" style="@style/XmatchYmatch" android:scaleType="centerCrop" tools:ignore="ContentDescription"/> <TextView android:id="@+id/toolbar_title" style="@style/ImageText.Title" android:layout_alignParentBottom="true" android:maxLines="2"/> <TextView android:id="@+id/toolbar_dm" style="@style/ImageText.Subtitle" android:layout_above="@id/toolbar_title" android:maxLines="2"/> </RelativeLayout> <include android:id="@+id/toolbar" layout="@layout/toolbar"/> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android" style="@style/XmatchYmatch"> <LinearLayout android:id="@+id/section_parent" style="@style/XmatchYmatch.Vert" android:animateLayoutChanges="true"/> </android.support.v4.widget.NestedScrollView> <FrameLayout style="@style/XmatchYwrap" android:background="@color/dark_red" app:layout_anchor="@id/detail_fragment" app:layout_anchorGravity="bottom|right|end"> <Button android:id="@+id/button" style="@style/Subhead" android:layout_width="match_parent" android:background="?android:attr/selectableItemBackground" android:text="@string/button_text" android:textColor="@android:color/white"/> <ProgressBar android:id="@+id/sign_progress" style="@style/ProgressBar" android:layout_gravity="center" android:visibility="gone"/> </FrameLayout> </android.support.design.widget.CoordinatorLayout> 

I have a border effect below the Toolbar when I scroll all the way to the top. Like this:

But I want the edge effect to be lower than the StatusBar . Like this:

How can I do it?

EDIT: I tried to make NestedScrollView my parent, and it works. But that’s not how I want my hierarchy to be.

Answer 1

You can try changing the color of the edge effect in AppTheme by adding the following line

<item name="android:colorEdgeEffect">@color/my_color</item>

Hope this helps.