How to use FlycoTabLayout: add tab bars to an Android app

What FlycoTabLayout is and when to use it

FlycoTabLayout is a library for Android apps. It gives you a ready-made tab bar, so you do not have to build one from scratch. The README describes three kinds of tab layout: SlidingTabLayout, CommonTabLayout and SegmentTabLayout.

• Use it if you are an Android developer who wants a styled tab bar.
• Use SlidingTabLayout if your app already uses ViewPager and you want a sliding tab strip with indicators.
• Use CommonTabLayout if you need tabs that work without ViewPager.
• Use it if you need tabs with icons or unread-message badges.
• Do not use it for Jetpack Compose projects, iOS or web projects. The README describes only Android View-based widgets and mentions no Compose support.

Add FlycoTabLayout to your Android project with Gradle

The prerequisites are Android Studio with Gradle and an Android project that uses AndroidX. Add the dependency to your build.gradle file. The version shown here is the one in the README for the AndroidX build.

If your project still uses the old support libraries, the README lists a legacy set of dependencies instead. Use the AndroidX line for new projects.

Choose the right tab type: SlidingTabLayout or CommonTabLayout

SlidingTabLayout is deeply modified from PagerSlidingTabStrip and is tied to ViewPager. It has a setViewPager method that accepts a list of titles. A second overload also accepts a FragmentActivity and a list of fragments, so you do not need to set up the adapter yourself.

CommonTabLayout does not depend on ViewPager, so you can use it with other widgets. Its setTabData method takes a list of CustomTabEntity objects, a FragmentManager, a container view ID and a list of fragments, and it switches the fragments itself. SegmentTabLayout is also included, but the README gives no usage details for it.

Style indicators, text, icons and unread tips with attributes

Both layouts are styled with XML attributes that start with tl_. The README lists them in a table. Some apply only to one tab type, and the table marks those cases. Check the table before you assume an attribute works everywhere.

• Indicator: tl_indicator_color, tl_indicator_height, tl_indicator_width, tl_indicator_corner_radius, tl_indicator_gravity and tl_indicator_style (NORMAL, TRIANGLE or BLOCK).
• Text: tl_textsize, tl_textSelectColor, tl_textUnselectColor and tl_textBold.
• Tab spacing: tl_tab_padding, tl_tab_space_equal and tl_tab_width.
• Icons (CommonTabLayout only): tl_iconWidth, tl_iconHeight, tl_iconVisible, tl_iconGravity and tl_iconMargin.
• Indicator animation (CommonTabLayout only): tl_indicator_anim_enable, tl_indicator_anim_duration and tl_indicator_bounce_enable.
• tl_indicator_width_equal_title applies only to SlidingTabLayout.

Check the demo and the README before you build

The README includes three preview GIFs that show the tab types in use. Look at them to see the styles before you choose. The project also lists two dependencies, NineOldAndroids and FlycoRoundView, which you should expect to be part of the build.