How to set the color of an Android ScrollView fading edge?

Question

I have an Android scrollview with a white background. The fading edge is a white translucent gradient. I would like to change it be black instead of white. I have a ListView in the same project with a white background that has a black fading edge by default, but I can't find where (if anywhere) that was set.

Delmardelmer

Answer 1

Just found it out by trial and error.

Simply set android:background="@color/yourColor" for the <ScrollView>. It will set the shadow to the given colour.

Complemental

Yep, devilishly simple. As you'd imagine, you then just have to set the scrollview immediate child to the background you want. Thanks! – Delmardelmer

Depending on the loading time of the listview this may look awkward. (e.g. listview appears with the background color before the list cells are drawn on top)... – Clouse

It would be better to set the same color as background of your cells and the listview. Then just change the cachecolorhint to the desired edge fading color – Clouse

Answer 2

If you want a different color fading edge than the background, you have to override the ScrollView's getSolidColor() method. For example:

@Override
public int getSolidColor() {
    return Color.rgb(0x30, 0x30, 0x30);
}

Coquina

I don't know why nobody has voted up what is clearly the most general and best answer. Just look at JavaDoc of View and it clearly states as much. – Coastwise

He's right, this is the only way to get a colored fade area while using a background image. Just extend the ListView class. – Palliasse

A complete class solution for this question is posted here: #4051403 – Palliasse

The link Thomas Corner mentions does provide a far simpler solution if you just use a color as background for your listview. – Clouse

This is the correct answer. This answer must be accepted. Awesome – Yevette

Answer 3

You can use:

    final int glowDrawableId = context.getResources().getIdentifier("overscroll_glow",
            "drawable", "android");
    final Drawable androidGlow = context.getResources().getDrawable(glowDrawableId);
    androidGlow.setColorFilter(Color.RED, PorterDuff.Mode.SRC_IN);

    int edgeDrawableId = context.getResources().getIdentifier("overscroll_edge", "drawable",
            "android");
    final Drawable androidEdge = context.getResources().getDrawable(edgeDrawableId);
    androidEdge.setColorFilter(Color.RED, PorterDuff.Mode.SRC_IN);

Morganatic

Good article describing this is: evendanan.net/android/branding/2013/12/09/branding-edge-effect – Dummy

Answer 4

EDIT: this does not answer the question, which was asking for ScrollView. This answer only works on AbsListView and descendants (including ListView).

---

Fading edge color is controlled by the android:cacheColorHint attribute.

E.g.:

<ScrollView android:cacheColorHint="#ff000000" android:background="#ffffffff" />

will set the background to white, and the cacheColorHint is used to draw the fading edge color -- in this case, it would be black.

Indemnify

I have tried this attribute, but it does not work. It appears that this attribute/method only apply to AbsListView. – Delmardelmer

What about developer.android.com/intl/zh-CN/reference/android/view/… ? – Indemnify

I had this question about a horizontalscrollview, and the above modifications to the xml worked for it (at least on the emulator). – Vitriolic

This works for me in the emulator (Android 2.3) but not on an actual device (Motorola Razer Android 2.3.5). – Cleave

No such attribute in ScrollView! – Thoer

It doesn't work for a ScrollView since that attribute doesn't exist. It works only for ListView. – Saccharify

Answer 5

You can use this:

https://github.com/AndroidAlliance/EdgeEffectOverride

Simple clean and working perfect!

Thoer

as I understand the question this is not really the solution, but I was looking for this anyways. So thanks for that – Seersucker

Answer 6

If you don't know what changed the color of your fading edge, it was probably the application of a style or theme. Check your manifest for android:theme="something" in an Activity. If the theme is from the group android.R.style.Theme.Light the edge will be white. The default android.R.style.Theme and android.R.style.Theme.Black will have black fading edges. Themes also affect other attributes, so check out the attributes fully before you throw them in for one thing.

Renferd

I have checked the Activity theme, it is @android:style/Theme.NoTitleBar the source of which only contains android:windowNoTitle=true. – Delmardelmer

The comment above it: <!-- Variant of the default (dark) theme with no title bar --> So, you are using the dark theme which includes black fading edges. you want Theme.Light.NoTitleBar – Renferd

I have changed to this theme, and it has not affected the fading edge color. – Delmardelmer

try setting the style on the list itself just to make sure it's not being overridden in a tighter scope – Renferd

Answer 7

Do this:

  <ScrollView
    android:theme="@style/scrollUpdate"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1" >

in values\styles put the style

<style name="scrollUpdate">
    <item name="colorAccent">@color/yourcolor</item>
    <item name="android:color">@color/yourcolor</item>
    <item name="colorPrimary">@color/yourcolor</item>
    <item name="colorPrimaryDark">@color/yourcolor</item>
</style>

works to me tks!

Diploid