Convert Figma logo to code with AI

Devlight logoNavigationTabStrip

Navigation tab strip with smooth interaction.

2,236
312
2,236
38

Top Related Projects

:octocat: 📃 FoldingCell is an expanding content cell with animation made by @Ramotion

:octocat: PaperOnboarding is a material design UI slider. Swift UI library by @Ramotion

:octocat: ⭕️ CircleMenu is a simple, elegant UI menu with a circular layout and material design animations. Swift UI library made by @Ramotion

Quick Overview

The NavigationTabStrip is an Android library that provides a customizable and interactive navigation tab strip for Android applications. It offers a visually appealing and user-friendly way to navigate between different views or screens within an app.

Pros

  • Customizable Appearance: The library allows for extensive customization of the tab strip's appearance, including colors, sizes, and animations.
  • Smooth Animations: The tab strip provides smooth and responsive animations when switching between tabs, enhancing the overall user experience.
  • Flexible Layout: The library can be easily integrated into various layout structures, making it suitable for a wide range of Android app designs.
  • Lightweight and Efficient: The NavigationTabStrip is a lightweight library that adds minimal overhead to the app's performance.

Cons

  • Limited Documentation: The project's documentation could be more comprehensive, making it challenging for new users to get started quickly.
  • Dependency on External Libraries: The library requires the use of the Android Support Library, which may not be suitable for all projects.
  • Lack of Community Support: The project does not have a large and active community, which could limit the availability of support and updates.
  • Potential Compatibility Issues: As the library is not maintained by a major Android development company, there may be compatibility issues with newer Android versions or devices.

Code Examples

// Creating a NavigationTabStrip
val navigationTabStrip = NavigationTabStrip(context)
navigationTabStrip.addTab("Tab 1")
navigationTabStrip.addTab("Tab 2")
navigationTabStrip.addTab("Tab 3")

This code creates a NavigationTabStrip instance and adds three tabs to it.

// Customizing the NavigationTabStrip
navigationTabStrip.setTabIndex(1, true)
navigationTabStrip.setTabTextColor(Color.GRAY)
navigationTabStrip.setTabTextSize(16f)
navigationTabStrip.setTabStripColor(Color.WHITE)
navigationTabStrip.setTabStripIndicatorColor(Color.BLUE)

This code customizes the appearance of the NavigationTabStrip by setting the selected tab index, tab text color, tab text size, tab strip color, and tab strip indicator color.

// Handling tab selection events
navigationTabStrip.setOnTabSelectedListener { index ->
    // Handle tab selection logic here
}

This code sets an OnTabSelectedListener on the NavigationTabStrip to handle tab selection events.

Getting Started

To use the NavigationTabStrip library in your Android project, follow these steps:

  1. Add the library to your project's build.gradle file:
dependencies {
    implementation 'com.github.Devlight:NavigationTabStrip:1.1.2'
}
  1. Add the NavigationTabStrip to your layout XML file:
<com.gigamole.navigationtabstrip.NavigationTabStrip
    android:id="@+id/navigation_tab_strip"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />
  1. In your activity or fragment, create an instance of the NavigationTabStrip and customize it as needed:
val navigationTabStrip = findViewById<NavigationTabStrip>(R.id.navigation_tab_strip)
navigationTabStrip.addTab("Tab 1")
navigationTabStrip.addTab("Tab 2")
navigationTabStrip.addTab("Tab 3")
navigationTabStrip.setOnTabSelectedListener { index ->
    // Handle tab selection logic here
}

That's it! You've now integrated the NavigationTabStrip library into your Android app.

Competitor Comparisons

:octocat: 📃 FoldingCell is an expanding content cell with animation made by @Ramotion

Pros of Folding Cell

  • Folding Cell provides a unique and visually appealing way to display content, allowing users to expand and collapse sections of information.
  • The library offers a high degree of customization, allowing developers to adjust the animation, colors, and other visual aspects to fit their application's design.
  • Folding Cell is well-documented and has a active community, making it easier for developers to get started and find support.

Cons of Folding Cell

  • Folding Cell may be more complex to implement than a simple tab strip, as it requires more complex layout and animation handling.
  • The library may have a larger footprint than a basic tab strip, which could impact performance in some cases.
  • Folding Cell may not be as widely used as a traditional tab strip, which could make it harder to find pre-built integrations or plugins.

Code Comparison

Folding Cell (Swift):

let cell = FoldingCell(style: .default, reuseIdentifier: "MyCell")
cell.contentView.backgroundColor = UIColor(red: 0.13, green: 0.17, blue: 0.21, alpha: 1.0)
cell.layer.cornerRadius = 10
cell.clipsToBounds = true

Navigation Tab Strip (Kotlin):

val tabStrip = NavigationTabStrip(context)
tabStrip.addTab("Home")
tabStrip.addTab("Explore")
tabStrip.addTab("Profile")
tabStrip.setOnTabSelectedListener { position, title -> /* Handle tab selection */ }

:octocat: PaperOnboarding is a material design UI slider. Swift UI library by @Ramotion

Pros of Paper Onboarding

  • Provides a smooth and engaging onboarding experience with a paper-like animation.
  • Supports customization of the onboarding content and styling.
  • Includes built-in support for pagination and navigation.

Cons of Paper Onboarding

  • May not be suitable for all types of onboarding content, as the paper-like animation may not fit the design.
  • Requires more setup and configuration compared to a simpler onboarding solution.

Code Comparison

Paper Onboarding

val onboardingController = PaperOnboardingController(
    pages = pages,
    infoTextColor = Color.WHITE,
    pageItemTextColor = Color.WHITE,
    pageItemIconUnselectedColor = Color.WHITE.withAlpha(200),
    pageItemIconSelectedColor = Color.WHITE,
    titleTextSize = 18f,
    titleTopMargin = 44f,
    imageTopMargin = 72f,
    imageSize = 100f,
    pageItemIconSize = 50f,
    pageItemSpacing = 12f,
    bottomInset = 50f
)

Navigation Tab Strip

val navigationTabStrip = NavigationTabStrip(context)
navigationTabStrip.addTab("Home")
navigationTabStrip.addTab("Discover")
navigationTabStrip.addTab("Profile")
navigationTabStrip.setOnTabSelectedListener { position ->
    // Handle tab selection
}

:octocat: ⭕️ CircleMenu is a simple, elegant UI menu with a circular layout and material design animations. Swift UI library made by @Ramotion

Pros of Circle Menu

  • Circular Layout: Circle Menu provides a unique circular layout for navigation, which can be visually appealing and intuitive for users.
  • Customizable Appearance: The library offers a high degree of customization, allowing developers to adjust the size, color, and animation of the menu items.
  • Smooth Animations: Circle Menu features smooth and fluid animations when interacting with the menu, enhancing the overall user experience.

Cons of Circle Menu

  • Limited Functionality: Compared to NavigationTabStrip, Circle Menu may have a more limited set of features and functionality, as it is primarily focused on the circular menu layout.
  • Potential Performance Issues: Depending on the complexity of the menu and the number of items, Circle Menu may have some performance implications, especially on older or less powerful devices.

Code Comparison

NavigationTabStrip:

val navigationTabStrip = NavigationTabStrip(context)
navigationTabStrip.addTab("Home")
navigationTabStrip.addTab("Search")
navigationTabStrip.addTab("Profile")
navigationTabStrip.setOnTabSelectedListener { position -> /* handle tab selection */ }

Circle Menu:

let circleMenu = CircleMenu()
circleMenu.addItem(title: "Home", image: UIImage(named: "home"))
circleMenu.addItem(title: "Search", image: UIImage(named: "search"))
circleMenu.addItem(title: "Profile", image: UIImage(named: "profile"))
circleMenu.didSelectItemAt = { index in /* handle item selection */ }

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README


Devlight


NavigationTabStrip

Navigation tab strip with smooth interaction.

Android Arsenal       Android       Download       License       Codacy


Devlight

You can check the sample app here.

Warn

This library is not more supported. 
If you want to add new feature or fix a bug, grab source code and do it. 
If you think your fix or feature would be useful to other developers, 
I can add link of your repository to this README file. 
Thank you for using our libraries.

Download

You can download a .aar from GitHub's releases page.

Or use Gradle jCenter:

dependencies {
    repositories {
        mavenCentral()
        maven {
            url  'http://dl.bintray.com/gigamole/maven/'
        }
    }
    implementation 'com.github.devlight.navigationtabstrip:navigationtabstrip:+'
}

Or Gradle Maven Central:

compile 'com.github.devlight.navigationtabstrip:navigationtabstrip:1.0.4'

Or Maven:

<dependency>
    <groupId>com.github.devlight.navigationtabstrip</groupId>
    <artifactId>navigationtabstrip</artifactId>
    <version>1.0.4</version>
    <type>aar</type>
</dependency>

Android SDK Version

NavigationTabStrip requires a minimum SDK version of 11.

Sample

Parameters

For NTS you can set such parameters as:

  • color:
    allows you to set strip color.

  • size:
    allows you to set titles size. By default NTS use auto titles size.

  • weight:
    allows you to set weight(height) of strip.

  • factor:
    allows you to set strip resize factor.

  • titles:
    allows you to set NTS titles. This is your tabs.

  • type:
    allows you to set strip type - line or point.

  • gravity:
    allows you to set strip gravity - top or bottom.

  • view pager:
    allows you to connect NTS with ViewPager. If you want your can also set OnPageChangeListener.

  • typeface:
    allows you to set custom typeface to your titles.

  • corners radius:
    allows you to set corners radius of strip.

  • animation duration:
    allows you to set animation duration.

  • inactive color:
    allows you to set inactive titles color.

  • active color:
    allows you to set active title color.

  • tab strip listener:
    allows you to set listener which triggering on start or on end when you set tab index.

Tips

If your set ViewPager you can action down on active tab and do like drag.
NTS use only upper case titles.

Init

Check out in code init:

final NavigationTabStrip navigationTabStrip = (NavigationTabStrip) findViewById(R.id.nts);
navigationTabStrip.setTitles("Nav", "Tab", "Strip");
navigationTabStrip.setTabIndex(0, true);
navigationTabStrip.setTitleSize(15);
navigationTabStrip.setStripColor(Color.RED);
navigationTabStrip.setStripWeight(6);
navigationTabStrip.setStripFactor(2);
navigationTabStrip.setStripType(NavigationTabStrip.StripType.LINE);
navigationTabStrip.setStripGravity(NavigationTabStrip.StripGravity.BOTTOM);
navigationTabStrip.setTypeface("fonts/typeface.ttf");
navigationTabStrip.setCornersRadius(3);
navigationTabStrip.setAnimationDuration(300);
navigationTabStrip.setInactiveColor(Color.GRAY);
navigationTabStrip.setActiveColor(Color.WHITE);
navigationTabStrip.setOnPageChangeListener(...);
navigationTabStrip.setOnTabStripSelectedIndexListener(...);

Other methods check out in sample.

And XML init:

<com.gigamole.navigationtabstrip.NavigationTabStrip
    android:layout_width="match_parent"
    android:layout_height="50dp"
    app:nts_color="#000"
    app:nts_size="15sp"
    app:nts_weight="3dp"
    app:nts_factor="2.5"
    app:nts_titles="@array/titles"
    app:nts_type="point"
    app:nts_gravity="top"
    app:nts_typeface="fonts/typeface.otf"
    app:nts_corners_radius="1.5dp"
    app:nts_animation_duration="300"
    app:nts_active_color="#000"
    app:nts_inactive_color="#c4c4c4"/>

Getting Help

To report a specific problem or feature request, open a new issue on Github.

Xamarin

Thanks to Martijn van Dijk for developing Xamarin bindings library for NavigationTabStrip.
Plugin is available on Nuget.

Credits

Keren RijenskySrikant ShettyOleg Frolov

Author

Created by Basil Miller - @gigamole

Company

Facebook     Twitter     LinkedIn

Here you can see open source work developed by Devlight LLC.
This and another works is an exclusive property of Devlight LLC.

If you want to use this library in applications which will be available on Google Play, please report us about it or author of the library.

Whether you're searching for a new partner or trusted team for creating your new great product we are always ready to start work with you.

You can contact us via info@devlight.io or opensource@devlight.io.
Thanks in advance.

Devlight LLC, 2016
devlight.io