Streamlining Android Development 3: HELU Collapsing Tab Bar

Need a simple, easy-to-control video player for your app? Or a customized bottom button sheet that meets Google Material guidelines? Then my HELU repository is perfect for you. I created this Android utilities library specifically to help streamline the development process. These utilities have come in handy on more than one project I’ve worked on.

This week, I am pleased to introduce HELUCollapsingTabBar.

Today I will show you how to add a nicely animated collapsing tab bar to your application which is fully customizable. It can be used as a navigation bar for filtering or just as an action button.

To use it in your project you first need to add the library to your gradle file:

implementation "cz.helu.android:helucollapsingtabbar:2.1.0"

Then add the HeluCollapsingTabBar view into your XML layout file:

<cz.helu.helucollapsingtabbar.HeluCollapsingTabBar
    android:id="@+id/helu_tab_bar"
    android:layout_width="wrap_content"
    android:layout_height="48dp"
    android:layout_marginBottom="12dp"
    android:layout_gravity="center_horizontal|bottom"
    android:orientation="horizontal" />

Once you are done, you need to set up the View using the Builder class, and then add buttons. You can specify a lot of options like background drawable, button size, button padding and button spacing in the Builder class. You will also have simple control over the tab bar by using the expandView(), collapseView(), isColapsed() and setSelectedPosition(index) methods. You can even customize the show-and-hide animation using LayoutTransition.

Let’s start with some preparation. What you will need are some drawables. It does not matter where you take them from, but basically, you want to have both selected and unselected drawables ready.

// Set up drawables
val alignLeft = ContextCompat.getDrawable(this, R.drawable.ic_align_left)!!
val alignLeftSelected = ContextCompat.getDrawable(this, R.drawable.ic_align_left_selected)!!
val alignCenter = ContextCompat.getDrawable(this, R.drawable.ic_align_center)!!
val alignCenterSelected = ContextCompat.getDrawable(this, R.drawable.ic_align_center_selected)!!
val alignRight = ContextCompat.getDrawable(this, R.drawable.ic_align_right)!!
val alignRightSelected = ContextCompat.getDrawable(this, R.drawable.ic_align_right_selected)!!

Now you can create the Builder class providing Context and add some buttons along with on-click actions to it.

// Create builder
val builder = HeluCollapsingTabBar.Builder(this)

// Add buttons
builder.addButton(alignLeftSelected, alignLeft, View.OnClickListener { showToast("Left") })
builder.addButton(alignCenterSelected, alignCenter, View.OnClickListener { showToast("Center") })
builder.addButton(alignRightSelected, alignRight, View.OnClickListener { showToast("Right") })

Set up the View from the Builder. You can also set up which item should be selected at the beginning.

// Setup bar
bar.initFromBuilder(builder)
bar.setSelectedPosition(1)

If you want to change the opening animation, you can do it using the custom LayoutTransition, which can look, for example, like this:

// Customize animation using LayoutTransition
bar.layoutTransition.setDuration(150) // Translation duration
bar.layoutTransition.setDuration(LayoutTransition.CHANGE_APPEARING, 200) // Translation duration
bar.layoutTransition.setStartDelay(LayoutTransition.CHANGE_DISAPPEARING, 125) // Start Delay
bar.layoutTransition.setStartDelay(LayoutTransition.APPEARING, 100) // Start Delay
bar.layoutTransition.setInterpolator(LayoutTransition.CHANGE_APPEARING, OvershootInterpolator())

And here is an example what the whole setup method might look like:

private fun setupTabBar() {
val bar = findViewById<HeluCollapsingTabBar>(R.id.helu_tab_bar)

// Set up drawables
val alignLeft = ContextCompat.getDrawable(this, R.drawable.ic_align_left)!!
val alignLeftSelected = ContextCompat.getDrawable(this, R.drawable.ic_align_left_selected)!!
val alignCenter = ContextCompat.getDrawable(this, R.drawable.ic_align_center)!!
val alignCenterSelected = ContextCompat.getDrawable(this, R.drawable.ic_align_center_selected)!!
val alignRight = ContextCompat.getDrawable(this, R.drawable.ic_align_right)!!
val alignRightSelected = ContextCompat.getDrawable(this, R.drawable.ic_align_right_selected)!!

// Add buttons
val builder = HeluCollapsingTabBar.Builder(this)
builder.addButton(alignLeftSelected, alignLeft, View.OnClickListener { showToast("Left") })
builder.addButton(alignCenterSelected, alignCenter, View.OnClickListener { showToast("Center") })
builder.addButton(alignRightSelected, alignRight, View.OnClickListener { showToast("Right") })

// Set up bar
bar.initFromBuilder(builder)
bar.setSelectedPosition(1)

// Customize animation using LayoutTransition
bar.layoutTransition.setDuration(150) // Translation duration
bar.layoutTransition.setDuration(LayoutTransition.CHANGE_APPEARING, 200) // Translation duration
bar.layoutTransition.setStartDelay(LayoutTransition.CHANGE_DISAPPEARING, 125) // Start Delay
bar.layoutTransition.setStartDelay(LayoutTransition.APPEARING, 100) // Start Delay
bar.layoutTransition.setInterpolator(LayoutTransition.CHANGE_APPEARING, OvershootInterpolator())
}

And that's all you need to do to set up and customize the tab bar using my library. I hope you like it. Check out my other small utility libraries from my HELU library series. You can see all methods and examples here.