Android - Carousel like widget which displays a portion of the left and right elements

Go To


So I've searched high and low but couldn't find an answer to my question. What I basically need is the behavior provided by Android's ViewFlipper or ViewPager but I want to display portions of the left and right views, to indicate the user there are elements to scroll, instead of having the selected view occupying the whole screen.

I would also like to add some effects to the left and side views, like dimming and scaling then down a little. Is it possible to do it with the stock ViewFlipper or ViewPager or do I have to roll out my own view group, à la cover flow (

(P.S. I don't want to use the Gallery widget, that component sucks).

This is what we need to display once a view is selected (left and right views are still displayed):

view switcher

Flinging left or right would transition the main view out, dimming and reducing it a little and doing the opposite with the next or previous view.

2012-04-03 21:15
by AngraX
Are you describing this?adneal 2012-04-04 00:11
Close, except that the selected view should not occupy the whole screen. See edit above with an image explaining the layout - AngraX 2012-04-04 20:02


I would like to give an update to anyone who might want the same feature. A lot of progress has been made to implement this feature so far and now the view is working exactly as we need it to.

The ViewPager has a method called setPageMargin(). This method can receive a negative value which will make the fragments/views to overlap each other. To arrive at the desired layout, we first dynamically calculated the left and right margins by a percentage of the screen. This can be done statically as well but since we will be targeting a range of different screen sizes, this seems to be the best approach.

Later we set the ViewPager's page margin to 2 times the size of the side margins. This makes the views snap back together. However, at this time, there will be more than one view being displayed by the ViewPager.

All you have left to do is to either apply a transform (scale) to the views to the left and right (Android 3.0+) or add some more margins around them to shrink them to the right size (pre 3.0).

The OnPageChangeListener.onPageScrolled() can be used to track the ViewPager's scrolling. A smooth transformation can be achieved. The code looks like this:

private OnPageChangeListener onPageChangeListener = new OnPageChangeListener() {

    public void onPageSelected(int position) {

    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        // positionOffset varies from 0 to 1 and indicates how far the view is
        // from the center of the ViewPager. When a view is selected (centered), this
        // value is 0.

        // Fades the text in an out while the ViewPager scrolls from one view to another.
        // On our final design the text views are fixed to the center of the screen and
        // do not scroll along with the views.
        if (positionOffset < 0.5) {
            setTextViewAlpha(1 - positionOffset * 2);
        } else {
            setTextViewAlpha((positionOffset - 0.5f) * 2);

        // It's surprisingly complicated to get the current object being displayed by
        // a ViewPager (there's no getCurrentObject method). ScaleableFragment is just
        // a custom class to allow an adapter to cache it internally and also correctly
        // manage a fragment's lifecycle and restore from a saved state.
        ScaleableFragment sampleFragment = (ScaleableFragment) ((ShowHeroShotImageFragmentPagerAdapter) pager

        // Calculates by how much the current view will be scaled down. The RATIO_SCALE
        // is 0.3 in our case, which makes the side views 70% of the size of the
        // center view. When centered, the scale will be 1. When
        // fully scrolled, the scale will be 0.7.
        float scale = 1 - (positionOffset * RATIO_SCALE);

        // Just a shortcut to findViewById(;

        // Now, if not in the last element, scale the next one up (in opposite direction).
        if (position + 1 < pager.getAdapter().getCount()) {
            sampleFragment = (ScaleableFragment) ((ShowHeroShotImageFragmentPagerAdapter) pager.getAdapter())
                    .getItem(position + 1);
            scale = positionOffset * RATIO_SCALE + (1 - RATIO_SCALE);

    // Once scrolling is done. Make sure the views are in the right scale (1 for center,
    // 0.7 for sides). Required as the onPageScrolled() method does not guarantee it
    // will interpolate to 1.0 precisely.
    public void onPageScrollStateChanged(int state) {
        if (state == ViewPager.SCROLL_STATE_IDLE) {
            ScaleableFragment sampleFragment = (ScaleableFragment) ((ShowHeroShotImageFragmentPagerAdapter) pager

            if (pager.getCurrentItem() > 0) {
                sampleFragment = (ScaleableFragment) ((ShowHeroShotImageFragmentPagerAdapter) pager.getAdapter())
                        .getItem(pager.getCurrentItem() - 1);
                sampleFragment.scaleImage(1 - RATIO_SCALE);

            if (pager.getCurrentItem() + 1 < pager.getAdapter().getCount()) {
                sampleFragment = (ScaleableFragment) ((ShowHeroShotImageFragmentPagerAdapter) pager.getAdapter())
                        .getItem(pager.getCurrentItem() + 1);
                sampleFragment.scaleImage(1 - RATIO_SCALE);

This is it. I didn't post the full solution but I hope this is enough to get someone else started.

P.S. On 3.0+ enable hardware acceleration. Without it, the scrolling looked choppy on a samsung galaxy tab 10.1.

2012-05-04 04:25
by AngraX
I am using the setPageMargin method but with no result in landscape, is only working in portrait mode for some reason i can not understand at this point, the rest is fairly simple, but if i can not get it to work in landscape then my approach (the same as you of applying a padding/margin to the not active views) then this is useless. There are some other things that i need to have in consideration apart of the setPageMargin method for this to work - Jorge Aguilar 2012-08-06 16:55
@Jorge Aguilar I really can't say without looking at the source code. Our app is in landscape mode and it works just fine - AngraX 2012-09-18 16:31
Would you be able to post the code for ScaleableFragment - Marche101 2013-02-25 21:29
Hello, can you please post the code for sampleFragment.scaleImage(scale); after using this code ViewPager's left/right previews are not visible.. - user3586231 2016-07-20 11:43
@user3586231 Sry. I no longer have access to this code - AngraX 2016-07-21 18:23


I played some with it, and my solution is pretty simple. I'm posting it here in case someone is interested.

First, the layout for each fragment should allow some gaps on either side. the simplest way I found of doing this is using weights:

    android:layout_weight="0.1" />

    android:orientation="vertical" >

    <!-- fragment contents go here -->


    android:layout_weight="0.1" />

This will leave a nice 10% margin on either side. Be sure not to set a background on these, since it will cover the neighbor fragments. Now for the pager itself: you need to use negative margins, as AngraX explained, but also be sure to pre-load the subsequent fragments, as they are visible before they would be regularly. I got good results with this:

    mPager = (ViewPager) findViewById(;
    mPager.setPageMargin(getResources().getDisplayMetrics().widthPixels / -7);

the -7 value leaves the edge of the next fragment visible, play around with your specific composition. I also recommend framing each fragment.

2012-09-24 13:58
by Steelight


Well, here's a potential answer that might be close to what you're looking for, but not exactly what you're looking for: there's a project called ViewFlow that I think provides the ability to notify the user that there are more views via indicators on the screen. It also provides the ability to buffer views to the left and right of your current view, so you might be able to poke at the code to render small parts of them by basically shrinking what it views as its available screen size.

Edit: Silly me; I should read the final question before I answer. :) I don't think you can do this with a ViewFlipper or Viewpager, unfortunately.

2012-04-03 21:21
by Jon O
Thanks anyways. I wanted to avoid developing my own widget. Maybe the source code for ViewFlipper or ViewPager is a good start though - AngraX 2012-04-04 19:39


Just use a ViewPager and play with the width of the fragments and margins. I have done so and it works fine.

2012-05-14 20:05
by Matthew Reilly