2

I'm currently working with a RecyclerView which has an horizontal LinearLayout. The RecyclerView occupies all the screen:

enter image description here

and I'm finding the way to make a fix transformation of the RecyclerView like this:

enter image description here

note that the transformation is like a "sinking" or "downfall" to make a "deep" effect. Since the items' size can change, I need a permanent transformation, that's why I'm thinking to make it in the RecyclerView

Is there anyway to do it? maybe a way to do it on onDraw ??

Thank you very much in advance.

Regards.

Rafael.


ADD:

I'd like to notice that PageTransformer does something similar. In fact, the thing that I want is very similar of what Samsung Galaxy S3 makes when you scroll with one of their Launchers (which uses ViewPager), but I'd like to make that transformation fixed:

enter image description here


WHAT AM I TRYING?

I'm trying to scroll a large horizontal adapter of RecyclerView, but I'd like to "fold" a little bit the view to make a little impression of "cylinder".

Rafael Ruiz Muñoz
  • 5,333
  • 6
  • 46
  • 92
  • you were close in your question title: make a class that extends `RecyclerView` and override its `dispatchDraw` method, use `Matrix#setPolyToPoly` to make perspective transformation – pskink Nov 11 '15 at 18:14
  • of course you would need to call `setPolyToPoly` twice, unless you are the "Matrix expert" (like Mr Anderson ;)) and know how to flip it and translate – pskink Nov 11 '15 at 21:14
  • Hi @pskink that's definitely the solution, but I can't get how to do it since there's not much documentation of those practices... could you be more specific, maybe via answer and I will validate it ? (Thank you very much) – Rafael Ruiz Muñoz Nov 13 '15 at 11:50
  • you have problems with `dispatchDraw` or `polyToPoly` ? – pskink Nov 13 '15 at 11:52
  • Since I've never done that, I don't know how to start, I've tried to export this example and work with it, but I wasn't able: http://www.java2s.com/Code/Android/2D-Graphics/DrawPolygon.htm – Rafael Ruiz Muñoz Nov 13 '15 at 12:00
  • 1
    see [here](http://pastebin.com/QJUf6XEc) – pskink Nov 13 '15 at 12:32
  • I understand now... if you write an answer I will check as valid!! thank you very much !! – Rafael Ruiz Muñoz Nov 13 '15 at 12:37
  • doesn't seem finally what I was looking since the final result is a disaster :( – Rafael Ruiz Muñoz Nov 13 '15 at 15:02

1 Answers1

2

make a class that extends RecyclerView and override its dispatchDraw (or draw) method, use Matrix#setPolyToPoly to make perspective transformation, the below code makes something like "Star Wars" effect, you would need to call setPolyToPoly twice and apply the Matrix on both halves of your custom view:

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        final float DELTAX = w * 0.15f;
        float[] src = {
                0, 0, w, 0, w, h, 0, h
        };
        float[] dst = {
                0, 0, w, 0, w - DELTAX, h, DELTAX, h
        };
        matrix.setPolyToPoly(src, 0, dst, 0, 4);
    }

    @Override
    protected void dispatchDraw(Canvas canvas) {
        canvas.save();
        canvas.concat(matrix);
        super.dispatchDraw(canvas);
        canvas.restore();
    }
pskink
  • 23,874
  • 6
  • 66
  • 77
  • just one thing.. any idea of how to do it twice ? – Rafael Ruiz Muñoz Nov 13 '15 at 12:53
  • 1
    make two `Matrices`, call `setPolyToPoly` twice, and finally apply those `Marices` twice, each time setting the correct clipping on the `Canvas` – pskink Nov 13 '15 at 13:05
  • Sorry, didn't find the way... I want to make 2 transformations to make the figure above... I'm doing in this way, but not getting the result at all: http://pastebin.com/f6mKNzbu but dont worry about that, I'll figure out – Rafael Ruiz Muñoz Nov 13 '15 at 14:41
  • I'm mathematician hehehehe. I know how to make it theorically (I split the layout in two and I apply my transformations to each one: http://pastebin.com/f6mKNzbu) but doesn't seem to work together – Rafael Ruiz Muñoz Nov 13 '15 at 15:10
  • if you are mathematician, so maybe you will tell me what is difference between `Matrix#pre*` and `Matrix#post*` methods? just in simple words? not in that math jargon... – pskink Nov 13 '15 at 15:14
  • hehehe if a preconcats the b, then matrix a = b×a... if a postconcats b, then a = a×b...., where × stands for matrix multiplication, not scalar multiplication. Math is not my problem, my problem is that I'm trying to put in practice my math into android and I can't get it done.... this is how I do it, for example, in GIMP (by using matrices): http://oi68.tinypic.com/qqpqg9.jpg – Rafael Ruiz Muñoz Nov 13 '15 at 15:22
  • And... obviously, × is not commutative, so that's why there are 2 methods. – Rafael Ruiz Muñoz Nov 13 '15 at 15:26
  • yes, doesn't work, but with this new thing with two matrices I'll try to tweak it.... let's hope it will work... I'm going to accept it anyway. Thank you – Rafael Ruiz Muñoz Nov 13 '15 at 15:31
  • it works, vertically, i tested that on ListView which is vertical, just exchange x <-> y – pskink Nov 13 '15 at 15:33
  • in fact that's what I'm doing right now... Thank you very much for helping... I really appreciate it... did you study math as well? – Rafael Ruiz Muñoz Nov 13 '15 at 15:34
  • ooops my code is here, i linked your code by accident, http://pastebin.com/KgP8GVuK, btw the second Matrix, can it be made by simply scale the first by (-1, 1) ??? this is a good question for you ... ;-) – pskink Nov 13 '15 at 15:38
  • I don't think so, it's a shear, not a rotation matrix... is that your question ? I didn't understand it very well :D – Rafael Ruiz Muñoz Nov 13 '15 at 15:44
  • ok, see my code, i compute 2 matrices, and the second is a mirror of the first (since there are two symmetrical trapezoids) so my question is if i can compute the second matrix based on the first (i just made a test that proves that i cannot be done but i dont know why...., my bad math...) – pskink Nov 13 '15 at 15:58
  • If you want to see the result, I've got the math... this is the real video (scrolling, plain, normal...): https://media.giphy.com/media/poXqCl7331qDu/giphy.gif and this is the result applying the math :D https://media.giphy.com/media/YcoFn4klZTDVu/giphy.gif the code I've done is: http://pastebin.com/eiqkSc6m – Rafael Ruiz Muñoz Nov 13 '15 at 16:35
  • code looks ok, but... the the result gif is imho wrong as it always shows one half only, is it what you wanted? – pskink Nov 13 '15 at 16:44
  • no :), just a light transformation to make it "fold" – Rafael Ruiz Muñoz Nov 13 '15 at 16:52
  • also I've tried the "replace" with `UNION`, `REPLACE` and `XOR` – Rafael Ruiz Muñoz Nov 13 '15 at 16:55