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

Question

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 (http://www.inter-fuser.com/2010/01/android-coverflow-widget.html)?

(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):

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.

Answer 1

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() {

    @Override
    public void onPageSelected(int position) {
    }

    @Override
    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
                .getAdapter()).getItem(position);

        // 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(R.id.image).setScale(scale);
        sampleFragment.scaleImage(scale);


        // 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);
            sampleFragment.scaleImage(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.
    @Override
    public void onPageScrollStateChanged(int state) {
        if (state == ViewPager.SCROLL_STATE_IDLE) {
            setTextViewAlpha(1);
            ScaleableFragment sampleFragment = (ScaleableFragment) ((ShowHeroShotImageFragmentPagerAdapter) pager
                    .getAdapter()).getItem(pager.getCurrentItem());
            sampleFragment.scaleImage(1);
            sampleFragment.enableClicks();

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

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

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.

Answer 2

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:

<LinearLayout
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="0.1" />

<LinearLayout
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="0.8"
    android:orientation="vertical" >

    <!-- fragment contents go here -->

</LinearLayout>

<LinearLayout
    android:layout_width="0dp"
    android:layout_height="match_parent"
    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(R.id.pager);
    mPager.setAdapter(mAdapter);
    mPager.setPageMargin(getResources().getDisplayMetrics().widthPixels / -7);
    mPager.setOffscreenPageLimit(2);

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

Answer 3

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.

Answer 4

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