Is there a way to create preview slider in android

Question

I'm trying to create interface like

.

Central element is ViewPager with full-size image, top element is RecyclerView with preview images. But I couldn't find the way to magnet elements to center. Is there way to override behavior of RecyclerView?

Answer 1

First of all, you can use this google official example to create visual effect of pulling this view to center. You'll have ImageView over ViewPager for displaying animated appearing. When animation will be finished, make make your ImageView Gone and show requested image in ViewPager.

Answer 2

The LinearLayoutManager have a scrollToPositionWithOffset method that takes both the position and also the offset of the start of the item from the start of the RecyclerView, which seems like it would accomplish what you need.
You can use this image slider(https://github.com/jjhesk/LoyalNativeSlider) instead of the ViewPager .

Answer 3

I found the solution exactly what you need. I created a small example on github.com: AndroidPreviewSlider

The thing is that top view is ViewPager and center view is ViewPager too. Detailed code is below:

Adapter for top preview

public class PhotoPreviewAdapter extends FragmentPagerAdapter {

    private static final int DEFAULT_SIDE_PREVIEW_COUNT = 3;

    private final int sidePreviewCount;

    private final List<PhotoInfo> photoInfos;

    public PhotoPreviewAdapter(FragmentManager fm, List<PhotoInfo> photoInfos) {
        this(fm, DEFAULT_SIDE_PREVIEW_COUNT, photoInfos);
    }

    public PhotoPreviewAdapter(FragmentManager fm, int sidePreviewCount, List<PhotoInfo> photoInfos) {
        super(fm);
        this.sidePreviewCount = sidePreviewCount;
        this.photoInfos = photoInfos;
    }

    public int getSidePreviewCount() {
        return sidePreviewCount;
    }

    @Override
    public Fragment getItem(int position) {
        if (isDummy(position)) {
            return DummyPreviewFragment.newInstance();
        } else {
            return PhotoPreviewFragment.newInstance(photoInfos.get(getRealPosition(position)));
        }
    }

    private boolean isDummy(int position) {
        return position < sidePreviewCount || position > photoInfos.size() - 1 + sidePreviewCount;
    }

    private int getRealPosition(int position) {
        return position - sidePreviewCount;
    }

    @Override
    public int getCount() {
        return photoInfos.size() + (sidePreviewCount * 2);
    }

    @Override
    public float getPageWidth(int position) {
        return 1.0f / getElementsPerPage();
    }

    private int getElementsPerPage() {
        return (sidePreviewCount * 2) + 1;
    }
}

Adapter for central view is simple

public class PhotoViewAdapter extends FragmentPagerAdapter {

    private final List<PhotoInfo> photoInfos;

    public PhotoViewAdapter(FragmentManager fm, List<PhotoInfo> photoInfos) {
        super(fm);
        this.photoInfos = photoInfos;
    }

    @Override
    public Fragment getItem(int position) {
        return PhotoViewFragment.newInstance(photoInfos.get(position));
    }

    @Override
    public int getCount() {
        return photoInfos.size();
    }
}

And one of the main is sync listener

public class OnSyncPageChangeListener implements ViewPager.OnPageChangeListener {

    private int scrollState = ViewPager.SCROLL_STATE_IDLE;

    private final ViewPager syncToViewPager;
    private final ViewPager syncWithViewPager;

    public OnSyncPageChangeListener(ViewPager syncToViewPager, ViewPager syncWithViewPager) {
        this.syncToViewPager = syncToViewPager;
        this.syncWithViewPager = syncWithViewPager;
    }

    @Override
    public void onPageScrolled(final int position, final float positionOffset, final int positionOffsetPixels) {
        if (scrollState != ViewPager.SCROLL_STATE_IDLE) {
            final float ratio = calculateRatioForPosition(position);
            final float scrollX = syncWithViewPager.getScrollX();
            final float scrollY = syncWithViewPager.getScrollY();
            syncToViewPager.scrollTo((int) (scrollX * ratio), (int) scrollY);
        }
    }

    private float calculateRatioForPosition(int position) {
        final float syncToViewPagerWidth = syncToViewPager.getWidth();
        final float syncWithViewPagerWidth = syncWithViewPager.getWidth();

        final float syncToViewPagerElementWeight = syncToViewPager.getAdapter().getPageWidth(position);
        final float syncWithViewPagerElementWeight = syncWithViewPager.getAdapter().getPageWidth(position);

        final float syncToViewPagerElementsCount = (1.0f / syncToViewPagerElementWeight);
        final float syncWithViewPagerElementsCount = (1.0f / syncWithViewPagerElementWeight);

        final float syncToViewPagerElementWidth = syncToViewPagerWidth / syncToViewPagerElementsCount;
        final float syncWithViewPagerElementWidth = syncWithViewPagerWidth / syncWithViewPagerElementsCount;

        return syncToViewPagerElementWidth / syncWithViewPagerElementWidth;
    }

    @Override
    public void onPageSelected(final int position) {

    }

    @Override
    public void onPageScrollStateChanged(final int state) {
        scrollState = state;
        if (state == ViewPager.SCROLL_STATE_IDLE) {
            syncToViewPager.setCurrentItem(syncWithViewPager.getCurrentItem(), false);
        }
    }
}

And finally init ViewPager's

@Bind(R.id.photoPreviewPager)
ViewPager photoPreviewPager;

@Bind(R.id.photoViewPager)
ViewPager photoViewPager;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    ButterKnife.bind(this);

    final List<PhotoInfo> photoInfos = PhotoInfosProvider.generate();

    final PhotoPreviewAdapter photoPreviewAdapter = new PhotoPreviewAdapter(getSupportFragmentManager(), photoInfos);
    final PhotoViewAdapter photoViewAdapter = new PhotoViewAdapter(getSupportFragmentManager(), photoInfos);

    photoPreviewPager.setAdapter(photoPreviewAdapter);
    photoPreviewPager.addOnPageChangeListener(new OnSyncPageChangeListener(photoViewPager, photoPreviewPager));

    photoViewPager.setAdapter(photoViewAdapter);
    photoViewPager.setOffscreenPageLimit(photoPreviewAdapter.getSidePreviewCount() * 2 + 1);
    photoViewPager.addOnPageChangeListener(new OnSyncPageChangeListener(photoPreviewPager, photoViewPager));
}

More detailed code is in repo