CODEWITHSUNDEEP
android
Ronel
Ronel

Reputation: 1

How to implement this image stack effect in Android?

I looked at the H&M Android app and trying to figure out how to implement some widget. Can anyone have an idea how this image frame is implemented? I can guess that it using openGL.

https://lh6.ggpht.com/Q-WH9L6rIIPEaEpp2ty0uXH7VqDbVqE_0x2f22o4cjvCHsVm-lTDtfqRkGWRRzywnas

Upvotes: 0

Views: 380

Answers (2)

Leif
Leif

Reputation: 26

I will venture a guess ;)

First the front image is created. In this case, it is built by inflating a linear layout with an ImageView and a TextView. Then this is cached to a Bitmap (at setup phase, not draw time).

In onDraw, that bitmap is drawn to the screen. Then the canvas is clipped to avoid drawing that area any more. Saves a lot of drawing time to not do a quadruple overdraw of transparent pixels.

Then the backgrounds are drawn like this:

        for(int i = NUMBER_OF_LAYERS - 1; i > 0; i--) {
            canvas.save();
            float rotation = MAX_ANGLE * shiftModifier * ((float) i / (NUMBER_OF_LAYERS - 1));
            canvas.rotate(rotation, mImageHalfWidth, mImageHalfHeight);
            paint.setAlpha((int) (255f / (2 * i)));
            canvas.drawRect(mBitmap.getBounds(), paint);
            canvas.restore();
        }

NUMBER_OF_LAYERS is the number of backgrounds layers.

MAX_ANGLE is the rotation angle for the most tilted layer.

shiftModifier is used to animate the background layers. It moves from zero (background completely hidden) to one (background angle = MAX_ANGLE).

paint is just a Paint with color set to white.

Upvotes: 1

madlymad
madlymad

Reputation: 6540

A transparent png frame? Which could also be nine-patch!

Upvotes: 1

Related Questions