Show more in Horizontal ScrollView in android

Question

I am not sure what will be the best title, but with picture, it will be clear what I want.

I have implemented Horizontal Scrollview, I have made it custom, in that only four items will be displayed and if user want to see fifth item, then he has to scroll it. I have successfully done it.

But in android 2.3.3 it is showing white view at the end when there is more items, whereas in android 4.0 it is not showing. See the image below:

Look here in android 2.3, I am showing white view which clearly telling me that, there is more buttons, but the same result I am not getting in android 4.0 or above.
Can anybody help me how to display it.

Answer 1

You can easily replicate that behavior by extending the HorizontalScrollView widget and drawing two properly placed images/drawables:

public class CustomHorizontalScrollView extends HorizontalScrollView {

    private static final int SHADOW_WIDTH = 35;
    private GradientDrawable mDrawableLeft;
    private GradientDrawable mDrawableRight;
    private Rect mBounds = new Rect();

    public CustomHorizontalScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mDrawableLeft = new GradientDrawable(Orientation.LEFT_RIGHT,
                new int[] { Color.GRAY, Color.TRANSPARENT });
        mDrawableRight = new GradientDrawable(Orientation.RIGHT_LEFT,
                new int[] { Color.GRAY, Color.TRANSPARENT });
    }

    @Override
    protected void dispatchDraw(Canvas canvas) {
        super.dispatchDraw(canvas);
        // the scroll value
        final int offset = this.getScrollX();
        mBounds.setEmpty();
        mBounds.bottom = getMeasuredHeight();
        // check made to remove the shadow if we are at the left edge of the
        // screen so we don't interfere with the edge effect
        if (offset != 0) {
            // left drawable
            mBounds.left = offset;
            mBounds.right = offset + SHADOW_WIDTH;
            mDrawableLeft.setBounds(mBounds);
            mDrawableLeft.draw(canvas);
        }
        // check made to remove the shadow if we are at the right edge of the
        // screen so we don't interfere with the edge effect
        if ((offset + getMeasuredWidth()) < computeHorizontalScrollRange()) {
            // right drawable
            mBounds.left = offset + getMeasuredWidth() - SHADOW_WIDTH;
            mBounds.right = offset + getMeasuredWidth();
            mDrawableRight.setBounds(mBounds);
            mDrawableRight.draw(canvas);
        }
    }

}