Android sliding items horizontal like in Duolingo App

Question

I was playing around try to implement sliding functionality like in Duolingo Activity with horizontal lessons list. The link to screen capture of this functionality LINK. Screenshot

With horizontal slider the sliding has no such effects. What will be the proper way to implement such UX sliding widget?

Could I costumize the default ListView with adding the transition effect? Or could be it possible to do it with CardView? Do some external lib offer this like twoway-view?

score 4 · Accepted Answer · answered Jan 19 '15 at 13:21

4

Use classic ViewPager to show content and then apply to pager this PageTransformer:

   if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
            mPager.setPageTransformer(false, new ViewPager.PageTransformer() {
                @Override
                public void transformPage(View page, float position) {
                    final float normalizedposition = Math.abs(Math.abs(position) - 1);
                    page.setScaleX(normalizedposition / 2 + 0.5f);
                    page.setScaleY(normalizedposition / 2 + 0.5f);
                }
            });
        }

answered Jan 19 '15 at 13:21

Miroslav Michalec

1,569
1
19
22

1

I was gonna answer the same. That's certainly a ViewPager with custom `PageTransformer`. Also don't forget to override `getPageWidth` on your Pager adapter and return something like `0.8f` – Budius Jan 19 '15 at 15:07
MiroM That is very close to that I am looking for. And Budius scaling with overriding getPageWidth is also ok, but my fragments now arent centered. Every time I slide the ViewPager the fragments get stick to the left margin of display. And The last fragment stays scaled. – RenatoIvancic Jan 22 '15 at 22:56
Ok, so I used custom `PageTransformer`, but without Overriding `getPageWidth`. I had problems with centering and last fragment was not responding correct. Instead I added the paddings on the ViewPager in layout file and the used `android:clipToPadding`. Got the other part of the solution from [link](http://blog.neteril.org/blog/2013/10/14/android-tip-viewpager-with-protruding-children/) – RenatoIvancic Jan 23 '15 at 03:43

score 0 · Answer 2 · edited Jan 19 '15 at 13:44

0

This is the exact requirement for your postings. Kindly go through this URL https://github.com/davidschreiber/FancyCoverFlow. Download the zip and run the sample. Enjoy!! Its easy to customize too...

edited Jan 19 '15 at 13:44

tolgap

9,629
10
51
65

answered Jan 19 '15 at 13:41

Chandru

5,954
11
45
85

Android sliding items horizontal like in Duolingo App

2 Answers2

Linked