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
Bottom navigation bar in android
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.
| 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 |
