Recently I ran into a little challenge with some designs for an Android application. The designs called for a drop shadow to appear on the application TitleBar and the footer bar. The drop shadow effect should appear on top of the scrolling list items. However, I learned that with the Android ListView component there is already an effect called the fading edge. An additional problem is producing a realistic drop shadow effect that appears to float over the items below it rather than take up space between the TitleBar and the ListView.
The first problem, the built in fading edge effect of the ListView makes the list item appear to fade from the screen as it scrolls to the top or bottom of the list. In general this is a nice effect as the ListView produces it’s own shadow and fade as the list is scrolled under the TitleBar. However, this effect clashes with a custom drop shadow effect on the TitleBar because when list items are pressed or selected they produce a slight glow and blur effect at the top/bottom of the list just below the drop shadow. There are two properties of the ListView component that need to be turned “off” for the effects to be removed:
<?xml version="1.0" encoding="utf-8"?> <ListView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="fill_parent" android:layout_width="fill_parent" android:cacheColorHint="#00000000" android:fadingEdge="none"/>
The fadingEdge=”none” setting removes the blurring and fading of list items as they scroll off screen and the cachColorHint=”#0000000″ removes the list from turning black while scrolled even though the background maybe set to be transparent (you can also set a custom list item drawable background to take care of this problem). There is an interesting article about why this effect is part of the ListView component that can be read on the Android Developer blog.
So now you have a list that has no shadow, fade, or blur effects. To get the shadow to appear to float above the scrolling content I created a a nice drop shadow PNG file in Photoshop with transparent background. I then used the Android Draw 9-Patch tool to make the shadow file scale horizontally across the top and bottom of the application. You now get the following results:
To get the shadow to “float” on top of the ListView, I used a Relative layout to position the items. I also used my own custom TitleBar and ListAdapter in the application to get the desired appearance, as well as added a static footer graphic. What you get a nice drop shadow on the top and bottom of the application that is always on top of the list. This approach as the advantage that the list is underneath the drop shadow not just position below it as it might be if you used a LinearLayout.
You can download the full project code on GitHub.