how to design Single page application with auto-scrolling tabs in Android?

Question

I have seen a few single page Application websites, in which whenever we tap any of the tab, the page gets scrolled vertically in order to show that selected section, and vice versa, if we scroll the page vertically, then the tabs automatically get changed according to the displayed section. Something like this

I want something like that in my android app. So please let me know how to get started with. Please guide me the direction or suggest me something which can help me out in doing that.

Agone

#7561853 take a look at this, is that what you‘re looking for? – Karli

I think simple scroll view with smooth scroll to a position will work for you on tab selection. – Sumer

@HituBansal have you check the solution given below? – Orison

Answer 1

You need to go with VerticalViewPager as shown in this SO post and use TabLayout along with it.

Let me know if you face any problem.

Code from the given SO link:

/**
* Uses a combination of a PageTransformer and swapping X & Y coordinates
* of touch events to create the illusion of a vertically scrolling ViewPager. 
* 
* Requires API 11+
* 
*/
public class VerticalViewPager extends ViewPager {

    public VerticalViewPager(Context context) {
        super(context);
        init();
    }

    public VerticalViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        // The majority of the magic happens here
        setPageTransformer(true, new VerticalPageTransformer());
        // The easiest way to get rid of the overscroll drawing that happens on the left and right
        setOverScrollMode(OVER_SCROLL_NEVER);
    }

    private class VerticalPageTransformer implements ViewPager.PageTransformer {

        @Override
        public void transformPage(View view, float position) {

            if (position < -1) { // [-Infinity,-1)
                // This page is way off-screen to the left.
                view.setAlpha(0);

            } else if (position <= 1) { // [-1,1]
                view.setAlpha(1);

                // Counteract the default slide transition
                view.setTranslationX(view.getWidth() * -position);

                //set Y position to swipe in from top
                float yPosition = position * view.getHeight();
                view.setTranslationY(yPosition);

            } else { // (1,+Infinity]
                // This page is way off-screen to the right.
                view.setAlpha(0);
            }
        }
    }

    /**
     * Swaps the X and Y coordinates of your touch event.
     */
    private MotionEvent swapXY(MotionEvent ev) {
        float width = getWidth();
        float height = getHeight();

        float newX = (ev.getY() / height) * width;
        float newY = (ev.getX() / width) * height;

        ev.setLocation(newX, newY);

        return ev;
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev){
        boolean intercepted = super.onInterceptTouchEvent(swapXY(ev));
        swapXY(ev); // return touch coordinates to original reference frame for any child views
        return intercepted;
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        return super.onTouchEvent(swapXY(ev));
    }

}

Orison

Answer 2

I would use RecyclerView in this case. If you set it in vertical orientation and set item height to be match_parent, the user can scroll up and down like a single page website. Besides that, with clicking on the specific tab you can scroll the list to the particular position. You can also use animations once each item appears/disappears.

You will have control over the design and content of each section as RecyclerView gives you the option to have different design and content for each item.

Hope it helps.

Loosetongued