The IndicatorBottomNavigationView library allows you to create a custom BottomNavigationView with an indicator that highlights the selected item.
- Support for Material Design 3.
- Highlight indicator for active navigation items.
- Fully customizable design.
- Perfect for modern UI designs with smooth animations.
The design for IndicatorBottomNavigationView was inspired by modern UI design trends, particularly focusing on smooth animations and a clean, intuitive user interface. The following Pinterest link showcases the inspiration behind the layout and overall style:
Design Inspiration on Pinterest
Add the following line to your root settings.gradle or build.gradle file:
maven { url = uri("https://jitpack.io") }In your module build.gradle file (usually app):
implementation("com.github.MehdiSekoba:IndicatorBottomNavigationView:v1.0.1")In your activity_main.xml (or any layout file), add the following:
<ir.mehdisekoba.indicatorbottomnavigationview.IndicatorBottomNavigationView
android:id="@+id/bottomNav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:menu="@menu/main_menu"
android:layout_marginBottom="38dp"
android:background="@drawable/bg_navigation"
android:layout_marginHorizontal="12dp"
android:clipToPadding="true"
app:indicatorShadowVisible="true"
app:indicatorHeaderColor="@color/Vivid_Red"
app:indicatorHeaderHeight="4dp"
app:labelVisibilityMode="unlabeled"
app:itemIconTint="@color/item_bottom_nav_tint"
app:indicatorShadowColor="@color/Vivid_Red"
app:itemTextColor="@color/white"
/>In your MainActivity or any relevant Activity/Fragment:
class MainActivity : AppCompatActivity() {
//Binding
private var _binding: ActivityMainBinding? = null
private val binding get() = _binding!!
//Other
private lateinit var navHost: NavHostFragment
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
_binding = ActivityMainBinding.inflate(layoutInflater)
setContentView(binding.root)
//Init nav host
navHost = supportFragmentManager.findFragmentById(R.id.navHost) as NavHostFragment
//Bottom nav menu
binding.bottomNav.apply {
itemRippleColor= ColorStateList.valueOf(Color.TRANSPARENT)
setupWithNavController(navHost.navController)
}
//Gone bottom menu
navHost.navController.addOnDestinationChangedListener { _, destination, _ ->
binding.apply {
when (destination.id) {
R.id.homeFragment -> bottomNav.isVisible = true
R.id.shopFragment -> bottomNav.isVisible = true
R.id.favoriteFragment -> bottomNav.isVisible = true
R.id.profileFragment -> bottomNav.isVisible = true
else -> bottomNav.isVisible = false
}
}
}
}
override fun onNavigateUp(): Boolean {
return navHost.navController.navigateUp() || super.onNavigateUp()
}
override fun onDestroy() {
super.onDestroy()
_binding = null
}
}- Minimum Android version: Android 7.0 (API Level 24).
- Gradle version: 8.0 or above.
- Kotlin DSL support.
Here’s a preview of how the library looks in action:
We welcome contributions to improve this library!
- Fork the repository.
- Make your changes.
- Submit a Pull Request.
Copyright (C) 2024 Mehdi Sekoba
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.