FlipTabs

FlipTabs is a lightweight library that contains a 2-tab view that switches using flip animation.

FlipTabs-Demo

Getting started

Setting up the dependency

  1. Add the JitPack repository to your root build.gradle at the end of repositories:
allprojects {
	repositories {
		...
		maven { url 'https://jitpack.io' }
	}
}
  1. Add the FlipTabs dependency in the build.gradle:
implementation 'com.github.Chrisvin:FlipTabs:v1.0'

Demo app

To run the demo project, clone the repository and run it via Android Studio.

(OR)

Download the demo apk from releases.

Usage

Adding directly in layout.xml

<com.jem.fliptabs.FlipTab
  ...
  app:leftTabText="Photos"
  app:rightTabText="Videos"
  app:startingTab="right" //or "left"
  app:overallColor="#9966EE"
  app:textColor="#FF0000" //will be ignored if overallColor is defined
  app:highlightColor="#FF0000" //will be ignored if overallColor is defined
  app:flipAnimationDuration="400"
  app:wobbleReturnAnimationDuration="200"
  app:wobbleAngle="3" />

Adding/Modifying programmatically

val flipTab = FlipTab(this)
flipTab.setLeftTabText("Photo")
flipTab.setRightTabText("Video")

//Sets color for both text, background & border
flipTab.setOverallColor(Color.BLUE)
//Sets color only bg & border
flipTab.setHighlightColor(Color.GREEN)
//Sets color only for text
flipTab.setTextColor(Color.GREEN)

//Time taken for selected tab to flip
flipTab.setFlipAnimationDuration(500)
//Time taken for tabs to revert to original state after wobble
flipTab.setWobbleReturnAnimationDuration(250)
//NOTE: totalAnimationDuration = flipAnimationDuration + wobbleReturnAnimationDuration

//Set angle upto which the tabs wobble
flipTab.setWobbleAngle(3f)

//Flip the tab (left -> right & vice versa)
flipTab.flipTabs()
//Selects the left tab (if left tab isn't already selected)
flipTab.selectLeftTab(withAnimation = true)
//Selects the right tab (if right tab isn't already selected)
flipTab.selectRightTab(withAnimation = false)
//(Does flip animation when selecting if withAnimation is true, else skips animation)

fliptab.setTabSelectedListener(object: FlipTab.TabSelectedListener {
    override fun onTabSelected(isLeftTab: Boolean, tabTextValue: String) {
        textSwitcher.setText(String.format(stringTemplate, tabTextValue))
        Toast.makeText(this@MainActivity, (if (isLeftTab) "Left" else "Right") + " tab selected", Toast.LENGTH_SHORT).show()
    }
    override fun onTabReselected(isLeftTab: Boolean, tabTextValue: String) {
        Toast.makeText(this@MainActivity, (if (isLeftTab) "Left" else "Right") + " tab reselected", Toast.LENGTH_SHORT).show()
    }
})
Kotlin

Todo

  • [ ] Current library overcomes view clipping by setting the parent layout's clipChildren & clipToPadding as false. Find a better alternative to overcome view clipping.
  • [ ] Current library changes drawable and applies scaleX on the entire selected tab in the middle of the flip animation. Find a better alternative, such as applying scaleX only on the text instead of the whole view.
  • [ ] Explore possibilities for multi tab design.

GitHub