Creating Beautiful Top and Bottom Navigation Bar in Android

In this article, we will introduce how to use bubble-navigation to create beautiful top and bottom navigation bar in android.

Top naviation bar in android

Creating Beautiful Top Navigation Bar in Android

Bottom navigation bar in android

Creating Beautiful Bottom Navigation Bar in Android

AuthorLinksMade withLast update
gauravk95Office HomeJavaFeb 12, 2022

How to use bubble-navigation?

(1) Create a xml for layout

<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>

(2) use it in android

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

There are some methods for bubble-navigation.

MethodDescription
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