How to know whether the page is selected from Swipe or Click of Tab of Viewpager

Question

I have a ViewPager which Toolbar tabs.

I have to know how many times user clicked tabs and how many times user swiped and selected a page.

I am using ViewPager.OnPageChangeListener() for this purpose.

viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override public void onPageSelected(int position) {
         // Here i am sending the GA event
    }

    @Override public void onPageScrollStateChanged(int state) {

    }
  });

OnPageSelected is called for both click and swipe of page. How will I differentiate the page selected is from click of tabs or its from swipe of Viewpager ?

Einberger

Answer 1

Here is my solution. I am basing on single variable.

public class MainActivity extends AppCompatActivity {

    // remember last action
    private Action lastAction = Action.RESET;

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

        // ...

        mViewPager = findViewById(R.id.viewPager);
        mViewPager.setAdapter(mSectionsPagerAdapter);
        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int i, float v, int i1) {
                // No-op
            }

            @Override
            public void onPageSelected(int i) {
                if (lastAction == Action.RESET) {
                    lastAction = Action.SWIPE;
                    Log.d(TAG, "onPageSelected: SWIPED");
                } else {
                    lastAction = Action.RESET;
                }
            }

            @Override
            public void onPageScrollStateChanged(int i) {
                // No-op
            }
        });

        mTabLayout = findViewById(R.id.tabLayout);
        mTabLayout.setupWithViewPager(mViewPager);
        mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                if (lastAction == Action.RESET) {
                    lastAction = Action.SELECT;
                    Log.d(TAG, "onPageSelected: SELECTED");
                } else {
                    lastAction = Action.RESET;
                }
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                // No-op
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {
                // No-op
            }
        });
    }
}

Limitation:

Content for viewPager must be loaded before adding listeners because this solutions is basing on ordered calls (onTabSelected, onPageSelected).

Preview:

Queasy

where will i find that ACTION class? – Farrah

It is just an enum. – Queasy

Answer 2

In this example I will be checking if the user selected the page at index 1 by swiping or by tapping the tab:

Note: You can use tabLayout.getChildAt(0) to get the main sliding layout, and

((ViewGroup) tabLayout.getChildAt(0)).getChildAt(desiredPosition) //to get the tab at desired position

Using this, we add onClickListener to the desired tab and once clicked, its onClick() method will be called first followed by the onTabSelected() method of the TabSelectedListener of the TabLayout.

 private Boolean tabClicked = false; //variable which determines after entering the onTabSelected() method, if onClick was called or not

 ((ViewGroup) tabLayout.getChildAt(0)).getChildAt(1).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                tabClicked = true;
            }
        });


  tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                if(tab.getPosition()==1){
                    if(tabClicked){ 
                         //your tab was clicked, do work here
                    }
                    else{ 
                         //your tab was swiped, do some work here
                    }
                    tabClicked = false;
                }
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {}

            @Override
            public void onTabReselected(TabLayout.Tab tab) {}

        });

Sarcous

Answer 3

The tabview you use, is a textview. So there will be onclicklistener for this textview. You could track the tab click on onClick() method of listener!

Recto

Answer 4

Try this

 fun onTabClickedListener(callback: String.() -> Unit){
        tabContainer?.let { tabContainer->
            for (i in 0 until tabContainer.tabCount) {
                val text = tabContainer.getTabAt(i)?.text.toString() ?: ""
                (tabContainer.getChildAt(0) as ViewGroup).getChildAt(i).tag = text
                (tabContainer.getChildAt(0) as ViewGroup).getChildAt(i).setOnClickListener {
                    callback(text)
                }
            }

        }
    }```

Healall

Answer 5

I tried the above solutions and they did not work for me. The below solution worked for me.

enter code here class TestFragment : Fragment{
 private var lastAction = Action.RESET

 private fun addPagerListener() {
    viewPager?.addOnPageChangeListener(object : ViewPager.OnPageChangeListener {
        override fun onPageScrolled(
            position: Int,
            positionOffset: Float,
            positionOffsetPixels: Int
        ) {
            // Do nothing
        }

        override fun onPageSelected(position: Int) {
            when (lastAction) {
                Action.RESET -> Unit
                Action.SWIPE -> onPageSwiped(position)
                Action.CLICKED -> onTabClicked(position)
            }
            lastAction = Action.RESET
        }

        override fun onPageScrollStateChanged(state: Int) {
            if (state == ViewPager.SCROLL_STATE_DRAGGING && lastAction == Action.RESET) {
                lastAction = Action.SWIPE
            }
        }
    })

    tabLayout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
        override fun onTabSelected(tab: TabLayout.Tab) {
            if (lastAction == Action.RESET) {
                lastAction = Action.CLICKED
            }
        }

        override fun onTabUnselected(tab: TabLayout.Tab) {
            // Do nothing
        }

        override fun onTabReselected(tab: TabLayout.Tab) {
            // Do nothing
        }
    })
}

fun onTabClicked(position: Int) {//action to be here
}

fun onPageSwiped(position: Int) {//action to be here
}
}

and here is the enum

private enum class Action {
RESET, SWIPE, CLICKED

}

Where