Convert Figma logo to code with AI

Ashok-Varma logoBottomNavigation

This Library helps users to use Bottom Navigation Bar (A new pattern from google) with ease and allows ton of customizations

4,351
688
4,351
26

Top Related Projects

(Deprecated) A custom view component that mimics the new Material Design Bottom Navigation pattern.

A library to reproduce the behavior of the Bottom Navigation guidelines from Material Design.

An android lib for enhancing BottomNavigationView. 一个增强BottomNavigationView的安卓库。

An bottom navigation bar for Android

Bottom Navigation widget component inspired by the Google Material Design Guidelines at https://www.google.com/design/spec/components/bottom-navigation.html

Yet another material bottom bar library for Android

Quick Overview

BottomNavigation is an Android library that provides an implementation of the Bottom Navigation component from Material Design. It offers a customizable and easy-to-use solution for adding a bottom navigation bar to Android applications, allowing users to quickly switch between top-level views.

Pros

  • Easy integration with minimal setup required
  • Highly customizable appearance and behavior
  • Supports both fixed and shifting modes
  • Compatible with older Android versions (API 14+)

Cons

  • Limited to bottom navigation use cases
  • May require additional customization for complex layouts
  • Not officially supported by Google (third-party library)
  • Potential for conflicts with other navigation libraries

Code Examples

  1. Basic setup of BottomNavigation:
val bottomNavigation: BottomNavigationView = findViewById(R.id.bottom_navigation)
bottomNavigation.setOnNavigationItemSelectedListener { item ->
    when(item.itemId) {
        R.id.action_home -> {
            // Handle home action
            true
        }
        R.id.action_search -> {
            // Handle search action
            true
        }
        R.id.action_profile -> {
            // Handle profile action
            true
        }
        else -> false
    }
}
  1. Customizing the appearance:
val bottomNavigation: BottomNavigationView = findViewById(R.id.bottom_navigation)
bottomNavigation.setBackgroundColor(ContextCompat.getColor(this, R.color.colorPrimary))
bottomNavigation.itemIconTintList = null
bottomNavigation.itemTextColor = ContextCompat.getColorStateList(this, R.color.bottom_nav_colors)
  1. Adding badges to menu items:
val bottomNavigation: BottomNavigationView = findViewById(R.id.bottom_navigation)
val badge = bottomNavigation.getOrCreateBadge(R.id.action_notifications)
badge.isVisible = true
badge.number = 99

Getting Started

  1. Add the dependency to your app's build.gradle file:
dependencies {
    implementation 'com.ashokvarma.android:bottom-navigation-bar:2.2.0'
}
  1. Add the BottomNavigationView to your layout XML:
<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:menu="@menu/bottom_navigation_menu" />
  1. Create a menu resource file (bottom_navigation_menu.xml) with your navigation items:
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/action_home"
        android:icon="@drawable/ic_home"
        android:title="Home" />
    <item
        android:id="@+id/action_search"
        android:icon="@drawable/ic_search"
        android:title="Search" />
    <item
        android:id="@+id/action_profile"
        android:icon="@drawable/ic_profile"
        android:title="Profile" />
</menu>
  1. Initialize and set up the BottomNavigationView in your activity or fragment as shown in the code examples above.

Competitor Comparisons

(Deprecated) A custom view component that mimics the new Material Design Bottom Navigation pattern.

Pros of BottomBar

  • More customizable appearance with extensive theming options
  • Supports badges and notifications out of the box
  • Smoother animations and transitions between tabs

Cons of BottomBar

  • Larger library size compared to BottomNavigation
  • Less frequently updated and maintained
  • May require more setup and configuration for basic usage

Code Comparison

BottomNavigation:

bottomNavigation.add(BottomNavigationItem(R.drawable.ic_home, "Home"))
bottomNavigation.add(BottomNavigationItem(R.drawable.ic_search, "Search"))
bottomNavigation.add(BottomNavigationItem(R.drawable.ic_profile, "Profile"))
bottomNavigation.setOnTabSelectedListener { position, wasSelected ->
    // Handle tab selection
}

BottomBar:

bottomBar.setItems(
    BottomBarTab(R.drawable.ic_home, "Home"),
    BottomBarTab(R.drawable.ic_search, "Search"),
    BottomBarTab(R.drawable.ic_profile, "Profile")
)
bottomBar.setOnTabSelectListener { tabId ->
    // Handle tab selection
}

Both libraries offer similar functionality for creating bottom navigation bars in Android applications. BottomNavigation provides a more straightforward API with less configuration required, while BottomBar offers more customization options and built-in features like badges. The choice between the two depends on the specific needs of your project and the level of customization desired.

A library to reproduce the behavior of the Bottom Navigation guidelines from Material Design.

Pros of ahbottomnavigation

  • More customization options for the bottom navigation bar appearance
  • Supports landscape mode and tablet layouts
  • Includes a notification badge feature out of the box

Cons of ahbottomnavigation

  • Less frequently updated compared to BottomNavigation
  • Slightly more complex implementation due to additional features
  • May have a steeper learning curve for beginners

Code Comparison

BottomNavigation:

val bottomNavigation = findViewById<BottomNavigationView>(R.id.bottom_navigation)
bottomNavigation.setOnNavigationItemSelectedListener { item ->
    when(item.itemId) {
        R.id.action_home -> // Handle home action
        R.id.action_profile -> // Handle profile action
    }
    true
}

ahbottomnavigation:

val bottomNavigation = findViewById<AHBottomNavigation>(R.id.bottom_navigation)
bottomNavigation.setOnTabSelectedListener { position, wasSelected ->
    when(position) {
        0 -> // Handle home action
        1 -> // Handle profile action
    }
    true
}

Both libraries offer similar basic functionality for implementing bottom navigation in Android apps. BottomNavigation provides a simpler, more straightforward implementation, while ahbottomnavigation offers more advanced features and customization options at the cost of slightly increased complexity.

An android lib for enhancing BottomNavigationView. 一个增强BottomNavigationView的安卓库。

Pros of BottomNavigationViewEx

  • Built on top of the official BottomNavigationView, providing extended functionality
  • Supports dynamic badge updates and customization
  • Offers more flexibility in styling and behavior customization

Cons of BottomNavigationViewEx

  • May require more setup and configuration compared to BottomNavigation
  • Less actively maintained (last update was in 2020)
  • Potentially larger library size due to additional features

Code Comparison

BottomNavigation:

BottomNavigationBar bottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bottom_navigation_bar);
bottomNavigationBar
    .addItem(new BottomNavigationItem(R.drawable.ic_home, "Home"))
    .addItem(new BottomNavigationItem(R.drawable.ic_search, "Search"))
    .initialise();

BottomNavigationViewEx:

BottomNavigationViewEx bnve = (BottomNavigationViewEx) findViewById(R.id.bnve);
bnve.enableAnimation(false);
bnve.enableShiftingMode(false);
bnve.enableItemShiftingMode(false);
bnve.setTextVisibility(false);

Both libraries provide easy-to-use APIs for implementing bottom navigation in Android apps. BottomNavigation offers a simpler setup process, while BottomNavigationViewEx provides more advanced customization options. The choice between the two depends on the specific requirements of your project and the level of customization needed.

An bottom navigation bar for Android

Pros of PagerBottomTabStrip

  • More customization options for tab appearance and behavior
  • Built-in support for ViewPager integration
  • Smaller library size, potentially reducing app bloat

Cons of PagerBottomTabStrip

  • Less active maintenance and updates compared to BottomNavigation
  • Fewer stars and forks on GitHub, indicating potentially lower community adoption
  • Documentation is primarily in Chinese, which may be challenging for non-Chinese speakers

Code Comparison

BottomNavigation:

BottomNavigationBar bottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bottom_navigation_bar);
bottomNavigationBar
    .addItem(new BottomNavigationItem(R.drawable.ic_home, "Home"))
    .addItem(new BottomNavigationItem(R.drawable.ic_search, "Search"))
    .initialise();

PagerBottomTabStrip:

BottomTabLayout bottomTabLayout = (BottomTabLayout) findViewById(R.id.bottomTabLayout);
bottomTabLayout.setTabItems(
    new TabItem(this, R.drawable.ic_home, "Home", Color.BLUE),
    new TabItem(this, R.drawable.ic_search, "Search", Color.RED)
);

Both libraries offer similar functionality for creating bottom navigation bars in Android applications. BottomNavigation provides a more straightforward API with built-in Material Design compliance, while PagerBottomTabStrip offers more flexibility in customization and ViewPager integration. The choice between the two depends on specific project requirements and developer preferences.

Bottom Navigation widget component inspired by the Google Material Design Guidelines at https://www.google.com/design/spec/components/bottom-navigation.html

Pros of Material-BottomNavigation

  • More customizable appearance with support for custom behaviors and animations
  • Better adherence to Material Design guidelines
  • Includes a CoordinatorLayout Behavior for scrolling content

Cons of Material-BottomNavigation

  • Less actively maintained (last update was 3 years ago)
  • More complex implementation, potentially steeper learning curve
  • Fewer stars and forks on GitHub, indicating less community adoption

Code Comparison

BottomNavigation:

bottomNavigation.addItem(BottomNavigationItem(R.drawable.ic_home, "Home"))
bottomNavigation.addItem(BottomNavigationItem(R.drawable.ic_search, "Search"))
bottomNavigation.setFirstSelectedPosition(0)
bottomNavigation.initialise()

Material-BottomNavigation:

bottomNavigation.setDefaultSelectedIndex(0)
bottomNavigation.setOnMenuItemClickListener { item ->
    when (item.id) {
        R.id.home -> // Handle home click
        R.id.search -> // Handle search click
    }
}

Both libraries offer similar functionality for creating bottom navigation bars in Android applications. BottomNavigation provides a simpler API and is more actively maintained, making it a good choice for developers who prioritize ease of use and ongoing support. Material-BottomNavigation offers more customization options and closer adherence to Material Design guidelines, which may be preferable for projects requiring a high degree of visual polish or specific design requirements.

Yet another material bottom bar library for Android

Pros of ReadableBottomBar

  • More customizable animation options for item transitions
  • Supports text labels alongside icons for better accessibility
  • Lighter weight library with fewer dependencies

Cons of ReadableBottomBar

  • Less mature project with fewer contributors and updates
  • Limited documentation and usage examples compared to BottomNavigation
  • Fewer built-in styling options out of the box

Code Comparison

ReadableBottomBar:

val bottomBar = findViewById<ReadableBottomBar>(R.id.bottomBar)
bottomBar.setOnItemSelectListener { index ->
    when (index) {
        0 -> // Handle first item selection
        1 -> // Handle second item selection
    }
}

BottomNavigation:

val bottomNavigation = findViewById<AHBottomNavigation>(R.id.bottom_navigation)
bottomNavigation.setOnTabSelectedListener { position, wasSelected ->
    when (position) {
        0 -> // Handle first tab selection
        1 -> // Handle second tab selection
    }
    true
}

Both libraries offer similar functionality for implementing bottom navigation in Android apps. ReadableBottomBar provides more animation customization and text label support, while BottomNavigation has a more established ecosystem and extensive documentation. The code usage is relatively similar, with minor differences in method names and listener implementations.

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

Android Arsenal Build Status

BottomNavigation

get sample apk from Google Play Store

What is this component about?

This component that mimics the new Material Design Bottom Navigation pattern.

(currently under active development, expect to see new releases almost daily)

Features

  • This library offers ton of customisations that you can do to Bottom Navigation Bar.
  • Follows google bottom navigation bar guidelines
  • Choose your background style and tab mode.
  • each tab has it's own colors
  • supports badges with complete customization

Download

Based on your IDE you can import library in one of the following ways

Download the latest JAR or grab via Maven:

<dependency>
  <groupId>com.ashokvarma.android</groupId>
  <artifactId>bottom-navigation-bar</artifactId>
  <version>2.2.0</version>
  <type>pom</type>
</dependency>

or Gradle:

implementation 'com.ashokvarma.android:bottom-navigation-bar:2.2.0'

or Ivy:

<dependency org='com.ashokvarma.android' name='bottom-navigation-bar' rev='2.2.0'>
  <artifact name='$AID' ext='pom'/>
</dependency>

For Usage Docs Visit Wiki

Migration from V1 to V2

  1. BadgeItem has been changed to TextBadgeItem
  2. New ShapeBadgeItem implementation changed. check this page for new api usage
  3. hideText replaced with new modes. To use those mode should be set to MODE_FIXED_NO_TITLE / MODE_SHIFTING_NO_TITLE

License

BottomNavigation library for Android
Copyright (c) 2016 Ashok Varma (http://ashokvarma.me/).

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.

Other Open Source Libraries

  1. Gander : Gander is a simple in-app HTTP inspector for Android OkHttp clients. Gander intercepts and persists all HTTP requests and responses inside your application, and provides a UI for inspecting their content.
  2. SqliteManager : Sqlite Manager is a Dev Debug tool that helps to manage(Edit, Add, Clear) your android Sqlite Databases.
  3. SharedPrefManager : SharedPref Manager is a Dev Debug tool that helps to manage(Edit, Add, Clear) your android Shared Preferences.