Today's #AndroidDev and #AndroidDesign #Protip from +Roman Nurik is about padding and scroll indicators for scrollable containers like list views.

We do quite a bit of app UI review here on the Android Developer Relations team and one of the common issues with UI fit-and-finish we come across is improper padding and scroll indicators for padded scroll containers like ListViews, GridViews, and ScrollViews.

If you set top or bottom padding on your scroll container, make sure to set the clipToPadding attribute to false to ensure that as content scrolls, the padding scrolls away with it. If you don't set this attribute, your content will seem to scroll off into thin air, which can lead to a breakdown in your app's visual depth and hierarchy.

If you set left or right—well, start or end—padding on your scroll container (which you often should, per the Metrics and Grids section of the Android Design guide [1]), make sure scroll indicators hug the screen edges where possible, rather than the inset content. To do so, simply set the scrollbarStyle attribute to "outsideOverlay". This declutters content visuals and makes scrollbars feel a bit more consistent across your app.

In summary:

<ListView
    …
    android:clipToPadding="false"
    android:scrollbarStyle="outsideOverlay" />

An illustration of these issues can be found in the attached animation and diagram.

That's all for today, but if you have any other fit-and-finish protips, let's hear them in the comments!

[1] Metrics and Grids: http://goo.gl/4u8LeX
Photo
Shared publiclyView activity