Tab animations that sync with the scrolling progress of ViewPager

Tab Animation

Easily create TabLayout.Tab animations that sync with the scrolling progress of ViewPager.

Features

• Animate Tab when scrolling ViewPager
• Animate Tab after selected/unselected
• Support ViewPager and ViewPager2
• Create animations with DSL

Demo

Tab	Indicator	Bottom Navigation

Usage

Gradle

implementation 'jp.co.cyberagent.android:tab-animation:x.y.z'

Step 1

Create animation info for Tab:

val animationInfo = viewIdAnimationInfo {
  animateText<Float> {
    property(View.SCALE_X)
    startValue(0.8f)
    endValue(1f)
  }
  animateText<Float> {
    property(View.SCALE_Y)
    startValue(0.8f)
    endValue(1f)
  }
}

Step 2

Link the TabLayout, ViewPager and animation info:

// TabLayout extension function
tabLayout.setupAnimationTabWithViewPager(
  viewPager,
  animationInfo,
  SimpleTab.TEXT
)

Advanced Usage

Custom tab view

Provide the layout file id instead of SimpleTab:

tabLayout.setupAnimationTabWithViewPager(
  viewPager,
  animationInfo,
  R.layout.my_custom_tab
) { tab, view, position ->
  // bind data here
}

Custom animate target

Specify the target id in viewIdAnimationInfo:

viewIdAnimationInfo {
  animate<MyView, Float>(R.id.my_view) {
    ...
  }
}

Custom property

// Create tint property
animateIcon<ColorStateList> {
  property(
    getter = { ImageViewCompat.getImageTintList(this)!! },
    setter = { ImageViewCompat.setImageTintList(this, it) }
  )
  ...
}

Custom evaluator

Current support property types:

• Int (ARGB)
• Float
• IntArray
• FloatArray
• PointF
• Rect
• ColorStateList

You must specify the evaluator if the property type you want to animate is not listed:

animate<MyView, MyType> {
  evaluator(MyEvaluator)
  ...
}

Specify KeyFrames

animateText<Float> {
  property(View.ALPHA)
  startValue(0f)
  endValue(1f)
  keyFrame(0.8f, 0.2f)
}

Lazy value

Animation info will be evaluated after the layout of Tab.
You can calculate the value based on the view:

animateIcon<Float> {
  property(View.TRANSLATION_X)
  startValue { view ->
    view.width / 2f
  }
  endValue { 0f }
}

GitHub