Drawable in View getting squashed

Question

Problem & Question:

I currently have a view pager, with just 2 pages/views inside it, which are next to each other horizontally.

My views are custom ones which draw a two-color gradient and an image over the top of it at a low opacity/alpha value.

I'm finding that when I swipe across the screen to move from the first view/page to the second or vice-versa, the images are getting squashed. How can I stop this from happening, and draw them normally?

Example:

The left image shows the first view that is visible, pre-swipe; the right image shows the two views, midway through swipe.

Code:

I have a Drawable variable I set earlier, overlayImage, that I have not done anything to other than setting opacity.

@Override
protected void onDraw(Canvas canvas) {
    p.setShader(new LinearGradient(0, 0, 0, getHeight(), startColor, endColor, Shader.TileMode.MIRROR));
    canvas.drawPaint(p);

    //Pretty sure the mistake is around these two next lines
    overlayImage.setBounds(canvas.getClipBounds());
    overlayImage.draw(canvas);
}

Answer 1

I actually think it is in your

overlayImage.setBounds(canvas.getClipBounds());

line of code. When you are getting the clip bounds of the left most (swiping in the right most) view, it is getting the size of the viewable area (i.e. the smaller shrinking area) and thus the image is being drawn into that shrinking space.

You probably want to be setting the bounds by the overall size of the view it is being overlayn on, not the clipped bounds. Use instead getHeight() and getWidth() of the canvas and build up your own bounds.

I actually think that you really should setup the overlayImage bounds ONLY ONCE in your setup code. The draw code shouldnt necessarily need to set that up at all, then when the view begins to go off screen the drawing of the overlayImage will naturally move with the rest of the drawing canvas.