Android tab behavior

Question

I am designing tab view like feature, but i need one more functionality.

Suppose i have three tabs,

And if press tab2 - Content of second tab will show tab3 -- Content of Third will show tab1 - content of tab1 will show

and by default tab1 will be selected. and this is working fine.

Now, i need when i am scrooling the content of tab1, i need to show cotent of second tab too ( But second tab should be selected).. Just like single page application on web..

I don't need Web view. Anybody guide me how to achieve this, or if there is any sample code available on github. Please

Thanks

seems like you want to make a looping viewpager,take a look at [looping viewpager](https://stackoverflow.com/questions/7766630/changing-viewpager-to-enable-infinite-page-scrolling) — Linh Nguyen, Mar 24 '18 at 04:29
Yes similar. But i need this on scroll too. When i do scroll then it will change the position acc. Not on swipe — Ankita Kashyap, Mar 26 '18 at 09:13
So you want to automatically switch tabs when you get to the end of the current tab? — Xenolion, Mar 30 '18 at 07:09

Linh Nguyen · Accepted Answer · 2018-04-03T10:07:03.707

@AnkitaKashyap sorry mate, I kept forgot, here is your snippet code (in kotlin) if you need help, pls send me a private msg,if i got your idea correctly, here is what you want gif demo: using a tabbar with recyclerview and set addOnTabSelectedListener:

productTabs.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener{
        override fun onTabReselected(tab: TabLayout.Tab?) {

        }

        override fun onTabUnselected(tab: TabLayout.Tab?) {
        }

        override fun onTabSelected(tab: TabLayout.Tab?) {


                productRv.scrollToPosition(tab?.position?:0)
        }
    })

and set in your recyclerview :

productRv.addOnScrollListener(object : RecyclerView.OnScrollListener(){
        override fun onScrolled(recyclerView: RecyclerView?, dx: Int, dy: Int) {
            super.onScrolled(recyclerView, dx, dy)
            var scrollPosition = layoutManager.findFirstVisibleItemPosition()

            productTabs.getTabAt(scrollPosition)?.select()


        }

        override fun onScrollStateChanged(recyclerView: RecyclerView?, newState: Int) {
            super.onScrollStateChanged(recyclerView, newState)
        }
    })

score 0 · Answer 2 · answered Mar 27 '18 at 12:56

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

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));
    }

}

yes. but how to change the tabs corresponding to their selection — Ankita Kashyap, Mar 27 '18 at 16:05
You can set addOnPageChangeListener to your viewPager and in onPageSelected callback method set the tabLayout position — Zayid Mohammed, Mar 28 '18 at 04:14
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageSelected(int position) { tabLayout.setScrollPosition(position,0f,true); } }); — Zayid Mohammed, Mar 28 '18 at 04:17

Android tab behavior

2 Answers2