πŸŽ‰ [Android Library] A light-weight library to easily make beautiful Navigation Bar with ton of 🎨 customization option.

Last update: Aug 10, 2022

Bubble Navigation

API Download Build Status Android Arsenal Android Weekly AwesomeAndroid

πŸŽ‰ A light-weight library to easily make beautiful Navigation Bars with a ton of 🎨 customization options.

Demos

FloatingTopBarActivity TopBarActivity
BottomBarActivity EqualBottomBarActivity

Features:

  • Support for API Level 16+
  • Highly customizable
  • Light weight and easy-to-use
  • Supports TransitionDrawable for cool state changes
  • 2 types of NavigationView for different use cases
    • BubbleNavigationConstraintView: supports spread, inside and packed mode
    • BubbleNavigationLinearView: allows equal distribution using weight or packed mode
  • Bonus BubbleToggleView to create new UI components, other than navigation
  • Add Badges

Usage

Check out the Sample app, to see how its implemented.

Gradle

  • This library is available on JCenter. To use it, add the following to build.gradle
dependencies {
    implementation 'com.gauravk.bubblenavigation:bubblenavigation:1.0.7'
}

XML

<com.gauravk.bubblenavigation.BubbleNavigationConstraintView
        android:id="@+id/top_navigation_constraint"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="380dp"
        android:background="@color/white"
        android:elevation="4dp"
        android:padding="12dp"
        app:bnc_mode="spread">

        <com.gauravk.bubblenavigation.BubbleToggleView
            android:id="@+id/c_item_rest"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:bt_active="true"
            app:bt_colorActive="@color/search_active"
            app:bt_colorInactive="@color/search_inactive"
            app:bt_icon="@drawable/ic_restaurant"
            app:bt_shape="@drawable/transition_background_drawable_restaurant"
            app:bt_title="@string/restaurant"
            app:bt_padding="@dimen/internal_padding"
            app:bt_titlePadding="@dimen/title_padding" />

         <!-- Add more child items here - max upto 5 -->
    
    </com.gauravk.bubblenavigation.BubbleNavigationConstraintView>
attr Description
bnc_mode Changes the display mode the child elements
- spread : equally distributes the child elements
- packed : elements are packed with center gravity
- inside : inside elements are equally distributed

OR

<com.gauravk.bubblenavigation.BubbleNavigationLinearView
        android:id="@+id/bottom_navigation_view_linear"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white"
        android:elevation="8dp"
        android:orientation="horizontal"
        android:padding="12dp">

        <com.gauravk.bubblenavigation.BubbleToggleView
            android:id="@+id/l_item_home"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:bt_active="true"
            app:bt_colorActive="@color/home_active"
            app:bt_colorInactive="@color/home_inactive"
            app:bt_icon="@drawable/ic_home"
            app:bt_shape="@drawable/transition_background_drawable_home"
            app:bt_title="@string/home"
            app:bt_padding="@dimen/internal_padding"
            app:bt_titlePadding="@dimen/title_padding" />
  
    <!-- Add more child items here - max upto 5 -->
    
    </com.gauravk.bubblenavigation.BubbleNavigationLinearView>

Using BubbleToggleView

BubbleToggleView is designed to work as a child component for the BubbleNavigationLinearView and BubbleNavigationConstraintView. This view can be used independently for:

  • Custom implementation of NavigationBar
  • Creation of new UI components
  • ToggleView
attr Description
bt_active Sets to Active State
bt_colorActive When in Active State, uses this color for the Icon and Title
bt_colorInctive When in Inactive State, uses this color for the Icon and Title
bt_icon Sets the Icon Drawable
bt_iconWidth Updates the Icon Width
bt_iconHeigth Updates the Icon Height
bt_title Sets the Title Text
bt_titleSize Updates the Tilte Text Size in sp
bt_shape Sets the Background Drawable. Use TransitionDrawable to get fade in-out effect when toggling
bt_showShapeAlways If true and using Normal drawable, background shape remains visible always
bt_shapeColor Changes the tint color of the shape. N/A when using TransitionDrawable or showShapeAlways is true.
bt_duration Sets time duration for toggle animation to complete in ms
bt_padding Sets the internal padding in dp
bt_titlePadding Sets the title padding in dp
bt_badgeText Sets the text for the badge
bt_badgeTextSize Sets the font size of the badge text
bt_badgeTextColor Sets the text color of the badge
bt_badgeBackgroundColor Sets the background color of the badge

Note: Normal drawables may retain the shape of each Navigation item. Setting the same drawable for each item with different bt_shapeColor properties produces a similar effect while lowering memory usage and improving performance.

Activity/Fragment

In Java

  bubbleNavigation.setNavigationChangeListener(new BubbleNavigationChangeListener() {
            @Override
            public void onNavigationChanged(View view, int position) {
                //navigation changed, do something
            }
        });

Or in Kotlin

  navigation_view.setNavigationChangeListener { view , position ->
            //navigation changed, do something here
        }
Method Description
void setCurrentActiveItem(int position) Changes the current active state for the navigation view
void setTypeface(Typeface typeface) Updates the typeface of the text
void setNavigationChangeListener(BubbleNavigationChangeListener listener) Sets the navigation change listener
int getCurrentActiveItemPosition() Returns the current active position
void setBadgeValue(int position, String value) Updates the corresponding badge text value

Contribute

Users are welcome to suggest ideas or feature requests, or report bugs and issues here

I am always open to new suggestions and good contributions.

Contact

Feel free to reach out to me at [email protected]

License:

    Copyright 2019 Gaurav Kumar

    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.

GitHub

https://github.com/gauravk95/bubble-navigation
Comments
  • 1. new intent in bottom navigation

    how can i use bottom nevigation to change activity in bottom click becouse there is not any option to change state

    BubbleNavigationLinearView bubbleNavigation = (BubbleNavigationLinearView)findViewById(R.id.bottom_navigation_view_linear);

    bubbleNavigation.setNavigationChangeListener(new BubbleNavigationChangeListener() {
        @Override
        public void onNavigationChanged(View view, int position) {
            switch (position.getItemId())
        }
    });
    

    getItemId showing error so how can i choose id to change activity in on click

    @gauravk95 Owner

    Reviewed by Tanuj1108 at 2019-03-13 13:20
  • 2. Issue with text being cutoff on buttons

    Even with only 3 buttons, the third button's text is cut off.

    Text: "Dashboard" Text visible: "Dashboar"

    Would it be possible to allow configuration of padding around the textview?

    Reviewed by gray-src at 2019-03-04 20:24
  • 3. Add Real fragments

    How to Add fragments instead of colors

    your code ArrayList fragList = new ArrayList<>(); fragList.add(ScreenSlidePageFragment.newInstance(getString(R.string.home), R.color.red_inactive)); fragList.add(ScreenSlidePageFragment.newInstance(getString(R.string.search), R.color.blue_inactive));

    i want

    ArrayList fragList = new ArrayList<>(); fragList.add(new firstFragement()); 4 more.

    please look in to it

    Reviewed by rajam1215 at 2019-08-03 09:23
  • 4. Invalid drawable tag vector on pre Lollipop

    Caused by: android.content.res.Resources$NotFoundException: File res/drawable/ic_artist.xml from drawable resource ID #0x7f0700b8
            at android.content.res.Resources.loadDrawable(Resources.java:2842)
            at android.content.res.TypedArray.getDrawable(TypedArray.java:602)
            at com.gauravk.bubblenavigation.BubbleToggleView.init(BubbleToggleView.java:118)
            at com.gauravk.bubblenavigation.BubbleToggleView.<init>(BubbleToggleView.java:71)
         Caused by: org.xmlpull.v1.XmlPullParserException: Binary XML file line #1: invalid drawable tag vector
            at android.graphics.drawable.Drawable.createFromXmlInner(Drawable.java:917)
            at android.graphics.drawable.Drawable.createFromXml(Drawable.java:858)
            at android.content.res.Resources.loadDrawable(Resources.java:2839)
            at android.content.res.TypedArray.getDrawable(TypedArray.java:602)Β 
            at com.gauravk.bubblenavigation.BubbleToggleView.init(BubbleToggleView.java:118)Β 
            at com.gauravk.bubblenavigation.BubbleToggleView.<init>(BubbleToggleView.java:71)Β 
    

    maybe VectorDrawableCompat.create() shoud fix it?

    Reviewed by palatin at 2019-04-17 08:10
  • 5. Nullpointer when trying to inital start with other then first item

    I'm trying to start wit another then the first item in Bubble-Navigation, but when i try to setCurrentActiveItem in onViewCreated I get a NullPointer (see below). How can I achieve to initial select another than the first item?

    The exception:

    java.lang.NullPointerException: Attempt to invoke virtual method 'int java.util.ArrayList.size()' on a null object reference
            at com.gauravk.bubblenavigation.BubbleNavigationConstraintView.setCurrentActiveItem(BubbleNavigationConstraintView.java:294)
    

    This is my code, nothing very special here, just trying to keep viewpager and navigation in sync and have the possibility to start with last item:

        override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
            adapter = Adapter(childFragmentManager)
            cv_navigation.setNavigationChangeListener { navView, position ->
                viewPager.setCurrentItem(position,true)
            }
            viewPager.adapter = adapter
            viewPager.addOnPageChangeListener(object: ViewPager.OnPageChangeListener {
                override fun onPageScrollStateChanged(state: Int) {
                }
    
                override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {
                }
    
                override fun onPageSelected(position: Int) {
                        cv_navigation.setCurrentActiveItem(position);
                }
            })
            if (arguments != null && savedInstanceState == null && arguments!!.getBoolean(USE_LAST)) {
                viewPager.currentItem = adapter!!.count - 1;
            }
        }
    
    
    Reviewed by matecode at 2019-03-05 12:34
  • 6. How to show the text regardless if the item is selected or not?

    I want the menu items to be shown ( item1 item2 item3) with the active menu item as the only one with the bubble background and the others as simple text. Can I do that using this library?

    Reviewed by taouichaimaa at 2021-12-20 10:51
  • 7. Use multiple drawable for items .

    I think use only a single drawable is enough for menu item . and (tint )change the color according the .

    app:bt_shape="@drawable/transition_background_drawable_home"

    Reviewed by Ali-Hassan785 at 2021-11-17 06:25
  • 8. OnResume How to State change in Java Code

    Hello Good Evening , Please mention me when anther activity on success then button cuurent state position are not showing by defult home state are show . please help mee

    Reviewed by mithunswain900 at 2021-09-21 20:33
Animated Tab Bar is an awesome navigation extension that you can use to add cool, animated and fully customizable tab navigation in your apps
Animated Tab Bar is an awesome navigation extension that you can use to add cool, animated and fully customizable tab navigation in your apps

Animated Tab Bar is an awesome navigation extension that you can use to add cool, animated and fully customizable tab navigation in your apps. The extension provides handy methods and properties to change the behaviour as well as the appearance of the navigation bar.

Jul 27, 2022
A library that you can use for bottom navigation bar. Written with Jetpack Compose
A library that you can use for bottom navigation bar. Written with Jetpack Compose

FancyBottomNavigationBar A library that you can use for bottom navigation bar. W

Jul 27, 2022
An android navigation bar widget
An android navigation bar widget

Chip Navigation Bar A navigation bar widget inspired on Google Bottom Navigation mixed with Chips component. Usage <!-- bottom_menu.xml --> <menu xmln

Aug 10, 2022
React Native lets you customize the navigation bar for Android.
React Native lets you customize the navigation bar for Android.

react-native-system-navigation-bar React Native lets you customize the navigation bar for Android. Hide Lean Back Immersive Sticky Immersive Low Profi

Aug 15, 2022
BubbleTabBar is bottom navigation bar with customizable bubble like tabs
BubbleTabBar is bottom navigation bar with customizable bubble like tabs

BubbleTabBar BubbleTabBar is bottom navigation bar with customizable bubble like tabs Usage <com.fxn.BubbleTabBar android:id="@+id/

Aug 7, 2022
Alligator is a modern Android navigation library that will help to organize your navigation code in clean and testable way.

Alligator Alligator is a modern Android navigation library that will help to organize your navigation code in clean and testable way. Features Any app

Jul 7, 2022
[ACTIVE] Simple Stack, a backstack library / navigation framework for simpler navigation and state management (for fragments, views, or whatevers).
[ACTIVE] Simple Stack, a backstack library / navigation framework for simpler navigation and state management (for fragments, views, or whatevers).

Simple Stack Why do I want this? To make navigation to another screen as simple as backstack.goTo(SomeScreen()), and going back as simple as backstack

Aug 12, 2022
Android multi-module navigation built on top of Jetpack Navigation Compose
Android multi-module navigation built on top of Jetpack Navigation Compose

MultiNavCompose Android library for multi-module navigation built on top of Jetpack Navigation Compose. The goal of this library is to simplify the se

Apr 16, 2022
DSC Moi University session on using Navigation components to simplify creating navigation flow in our apps to use best practices recommended by the Google Android Team

Navigation Components Navigate between destination using safe args How to use the navigation graph and editor How send data between destinations Demo

Feb 3, 2022
Navigation Component: THE BEST WAY to create navigation flows for your app
Navigation Component: THE BEST WAY to create navigation flows for your app

LIVE #017 - Navigation Component: A MELHOR FORMA de criar fluxos de navegação para o seu app! Código fonte do projeto criado na live #017, ensinando c

Jun 15, 2022
New style for app design simple bottom navigation with side navigation drawer UI made in Jetpack Compose.πŸ˜‰πŸ˜Ž
New style for app design simple bottom navigation with side navigation drawer UI made in Jetpack Compose.πŸ˜‰πŸ˜Ž

BottomNavWithSideDrawer New style for app design simple bottom navigtaion with side navigation drawer UI made in Jetpack Compose. ?? ?? (Navigation Co

Jul 6, 2022
Navigation Drawer Bottom Navigation View
Navigation Drawer Bottom Navigation View

LIVE #019 - Toolbar, Navigation Drawer e BottomNavigationView com Navigation Com

Jun 15, 2022
NTabLayout is a simple tab bar custom view under android which has click-sliding and scaling up animation effect.
NTabLayout is a simple tab bar custom view under android which has click-sliding and scaling up animation effect.

NTabLayout Brief NTabLayout is a simple tab bar custom view under android which has click-sliding and scaling up animation effect. This tab bar's effe

Oct 22, 2021
An Android library that allows you to easily create applications with slide-in menus. You may use it in your Android apps provided that you cite this project and include the license in your app. Thanks!

SlidingMenu (Play Store Demo) SlidingMenu is an Open Source Android library that allows developers to easily create applications with sliding menus li

Aug 17, 2022
Xdimen - Support multiple screen sizes easily by scaling your dimensions
Xdimen - Support multiple screen sizes easily by scaling your dimensions

Support multiple screen sizes easily by scaling your dimensions. How does Xdimen work? When you have a UI design with a specific dimension, and

Jul 14, 2022
A small navigation library for Android to ease the use of fragment transactions & handling backstack (also available for Jetpack Compose).
A small navigation library for Android to ease the use of fragment transactions & handling backstack (also available for Jetpack Compose).

A small navigation library for Android to ease the use of fragment transactions & handling backstack (also available for Jetpack Compose).

Jul 23, 2022
A simple navigation library for Android πŸ—ΊοΈ

Enro ??️ A simple navigation library for Android "The novices’ eyes followed the wriggling path up from the well as it swept a great meandering arc ar

Aug 4, 2022
AndroidBriefActions - Android library for sending and observing non persistent actions such as showing a message; nice readable way to call navigation actions from ViewModel or Activity/Fragment.

implementation "com.vladmarkovic.briefactions:briefactions:$briefActionsVersion" Benefits Why use brief-actions library pattern: Prevent short-term ac

Jul 25, 2021
πŸ§› Fragula is a swipe-to-dismiss extension for navigation component library for Android
πŸ§› Fragula is a swipe-to-dismiss extension for navigation component library for Android

Fragula is a swipe-to-dismiss extension for navigation component library for Android.

Aug 12, 2022