Seamless animation when switching tabs

Question

I am using ActionBar.Tabs with ViewPager and it looks like

I implemented ActionBar.TabListener and ViewPager.OnPageChangeListener to support when the user views the pages in the ViewPager, the tab indicator will change accordingly (the blue indicator will move to the corresponding tab).

Now I realized that the blue indicator changes without any animation, and it does not look very good. (when I iterate from tab1 to tab2, the blue indicator disappears under tab1 and appears under tab2). Is there a way to change it so that when switching tabs, the blue tab indicator moves smoothly between the tabs?

Answer 1

Use the TabLayout class in the design support library: https://developer.android.com/reference/android/support/design/widget/TabLayout.html

It has setupWithViewPager to easily connect it to the ViewPager , and it has a sliding indicator panel.

Answer 2

In my case, this came about due to the TabSelectedListener . In tab_layout.addOnTabSelectedListener() I have the onTabSelected method onTabSelected , where I opened another action without delay.

 view.tab_layout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener { override fun onTabReselected(tab: TabLayout.Tab?) { } override fun onTabUnselected(tab: TabLayout.Tab?) { } override fun onTabSelected(tab: TabLayout.Tab?) { if (tab?.position == 1) { MapsActivity.showScreen( this@ThisFragment ) } } }) 

I rewrote this method with a delay:

  override fun onTabSelected(tab: TabLayout.Tab?) { if (tab?.position == 1) { // Show tab animation and open an activity. view.tab_layout.postDelayed({ // This check is optional. if (isAdded && view.tab_layout.selectedTabPosition == 1) { MapsActivity.showScreen( this@YourFragment ) } }, 250) } } 

I also tried changing the duration value, but I don’t know how (it didn’t help):

 view.tab_layout.animation = object: Animation() {} view.tab_layout.animation.duration = 1000 view.tab_layout.layoutAnimation = LayoutAnimationController(object: Animation() {}) view.tab_layout.layoutAnimation.delay = 1000f view.tab_layout.layoutAnimation.animation.duration = 1000