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
demo_tab demo_indicator demo_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