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:
- Add the library to your project's
build.gradle
file:
dependencies {
implementation 'com.github.Devlight:NavigationTabStrip:1.1.2'
}
- 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" />
- 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 designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
NavigationTabStrip
Navigation tab strip with smooth interaction.
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 defaultNTS
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 setNTS
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 connectNTS
withViewPager
. If you want your can also setOnPageChangeListener
. -
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 Rijensky | Srikant Shetty | Oleg Frolov |
---|---|---|
Author
Created by Basil Miller - @gigamole
Company
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
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
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot