making the edge of the scrollview fade when scrolling in android

Question

I have a ScrollView with an image in it.

I want the edges of the ScrollView to make a fade effect when I scroll the image. I'm not talking about the effect you get when you get to the end of the scroll. I want the fade to always exist.

That's what i did (not doing any effect):

<ScrollView
    android:id="@+id/scrollView1"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="0.84"
    android:background="@drawable/screen_nespresso"
    android:fadingEdge="horizontal"
    android:fadingEdgeLength="@dimen/padding_large"
    android:fillViewport="false"
    android:scrollbarAlwaysDrawVerticalTrack="true"
    android:visibility="visible" >

Thanks!

score 121 · Accepted Answer · edited Aug 16 '22 at 06:11

121

Here is what worked for me:

<ScrollView
    android:requiresFadingEdge="vertical"
    android:fadingEdgeLength="150dp">

Or instead in your code, you could do the following:

ScrollView scroll = findById(...);
scroll.setVerticalFadingEdgeEnabled(true);
// Or `scroll.setHorizontalFadingEdgeEnabled(true)`.
scroll.setFadingEdgeLength(150);

edited Aug 16 '22 at 06:11

Top-Master

7,611
5
39
71

answered May 24 '13 at 00:31

Akshat

4,515
4
27
28

For some more detail: This works in API level 14 and higher. See http://developer.android.com/reference/android/R.attr.html#fadingEdge. That page also recommends avoiding the fading edge for performance reasons. – gkanwar Aug 25 '15 at 04:09
1

Really glad this was implemented into the view. Makes life much easier. – RyPope Nov 15 '16 at 17:27
1

can we change the fading color? It's white. – Muhammad Saqib Apr 29 '17 at 16:28
Also in case anyone wondering if this can be done on a recyclerview: https://stackoverflow.com/questions/33720836/horizontal-recyclerview-with-fading-edges The key attribute here is: `android:requiresFadingEdge="horizontal|vertical"` – Neon Warge Oct 18 '18 at 01:34

score 7 · Answer 2 · edited Apr 18 '19 at 01:25

7

this is for horizontal:

<HorizontalScrollView
    android:id="@+id/scroll"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:requiresFadingEdge="horizontal"
    android:fadingEdgeLength="80dp">

edited Apr 18 '19 at 01:25

answered Jul 13 '17 at 05:58

batsheva

2,175
1
20
32

For those like me who aren't 100% on reading XML, the key attributes to look at here are `android:requiresFadingEdge` and `android:fadingEdgeLength`. – Nic Dec 23 '17 at 20:58

score 4 · Answer 3 · answered Apr 08 '21 at 14:16

4

Just add these 3 line of code in scroll view and it will look awesome!

 android:fadingEdgeLength="80dp"
 android:overScrollMode="never"
 android:requiresFadingEdge="vertical"

answered Apr 08 '21 at 14:16

Prateek

189
1
6

score 3 · Answer 4 · answered Apr 19 '20 at 17:39

Add these lines in your ScrollView xml code.

<ScrollView
    android:id="@+id/scrollView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fadeScrollbars="true"
    android:requiresFadingEdge="vertical"
    android:fadingEdgeLength="50dp">

making the edge of the scrollview fade when scrolling in android

4 Answers4

Linked