--- title: 'Streamlining Android Development 3: HELU Collapsing Tab Bar' url: 'https://helu.cz/blog/streamlining-android-helu-collapsing-tab-bar' markdown: 'https://helu.cz/blog/streamlining-android-helu-collapsing-tab-bar.md' date: '2019-01-15' description: 'This week I will show you how to add a nicely animated collapsing tab bar using HELUCollapsingTabBar to your application which is fully customizable. It can be used as a navigation bar for filtering or just as an action button. Need a simple, easy-to-' taxonomy: category: - blog tag: - How-To - Android archives_month: - jan_2019 archives_year: - '2019' --- # Streamlining Android Development 3: HELU Collapsing Tab Bar Need a simple, easy-to-control [video player](https://helu.cz/blog/streamlining-android-helu-videoview) for your app? Or a customized [bottom button sheet](https://helu.cz/blog/streamlining-android-helu-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**. ![](https://helu.cz/user/pages/02.blog/streamlining-android-helu-collapsing-tab-bar/helucollapsingtabbar1.gif#center) 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: ``` ``` 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(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](https://github.com/Tuxilero/HELU-Utils). [ Previous Post](https://helu.cz/blog/streamlining-android-helu-bottom-button-sheet) [Next Post ](https://helu.cz/blog/streamlining-android-helu-parallax-view) --- #### Popular Tags [How-To](https://helu.cz/blog/tag:How-To) [DIY](https://helu.cz/blog/tag:DIY) [Android](https://helu.cz/blog/tag:Android) [Boosted](https://helu.cz/blog/tag:Boosted) [Scooter](https://helu.cz/blog/tag:Scooter) [Battery](https://helu.cz/blog/tag:Battery) [Repair](https://helu.cz/blog/tag:Repair) [Linux](https://helu.cz/blog/tag:Linux) [Laser](https://helu.cz/blog/tag:Laser) [Engraving](https://helu.cz/blog/tag:Engraving) [Painting](https://helu.cz/blog/tag:Painting) [Art](https://helu.cz/blog/tag:Art) [GRUB](https://helu.cz/blog/tag:GRUB) [Bluetooth](https://helu.cz/blog/tag:Bluetooth) [Windows 10](https://helu.cz/blog/tag:Windows%2010) [Fix](https://helu.cz/blog/tag:Fix) #### Related Posts - 100 [Streamlining Android Development 4: HELU Parallax View](https://helu.cz/blog/streamlining-android-helu-parallax-view "Streamlining Android Development 4: HELU Parallax View") - 75 [Streamlining Android Development 5: Splitting Android resources like a pro!](https://helu.cz/blog/splitting-android-resources-like-a-pro "Streamlining Android Development 5: Splitting Android resources like a pro!") - 75 [Streamlining Android Development 2: HELU Bottom Button Sheet](https://helu.cz/blog/streamlining-android-helu-bottom-button-sheet "Streamlining Android Development 2: HELU Bottom Button Sheet") - 75 [Streamlining Android Development 1: HELU VideoView](https://helu.cz/blog/streamlining-android-helu-videoview "Streamlining Android Development 1: HELU VideoView") - 50 [Boosted Rev: Battery Cells Replace - Part 4](https://helu.cz/blog/boosted-rev-battery-cells-replace-part-4 "Boosted Rev: Battery Cells Replace - Part 4") #### Archives - [ 4 July 2022 ](https://helu.cz/blog/archives_month:jul_2022) - [ 1 April 2021 ](https://helu.cz/blog/archives_month:apr_2021) - [ 1 November 2020 ](https://helu.cz/blog/archives_month:nov_2020) - [ 1 July 2020 ](https://helu.cz/blog/archives_month:jul_2020) - [ 1 September 2019 ](https://helu.cz/blog/archives_month:sep_2019) - [ 4 January 2019 ](https://helu.cz/blog/archives_month:jan_2019) - [ 1 February 2014 ](https://helu.cz/blog/archives_month:feb_2014) --- ## Navigation - Parent: [Blog](https://helu.cz/blog.md) - Previous: [Streamlining Android Development 4: HELU Parallax View](https://helu.cz/blog/streamlining-android-helu-parallax-view.md) - Next: [Streamlining Android Development 2: HELU Bottom Button Sheet](https://helu.cz/blog/streamlining-android-helu-bottom-button-sheet.md)