If you can’t see the picture, please move it to Google Browser. Thank you.

Brief introduction:

Bubble Navigation is a lightweight library that makes it easy to create beautiful Navigation bars with a large number of custom options.

Effect display:





Features:

  • Support API16 +
  • High degree of customization
  • Lightweight, easy to use
  • Smooth switch
  • Two layout modes are supported
  • Add a badge
  • You can add little red dots with BubbleToggleView to create new UI components, not just navigation

Simple use:

1. Import dependencies in build.gradle of app

Dependencies {implementation 'com. Gauravk. Bubblenavigation: bubblenavigation: 1.0.7'}Copy the code

2. Representation in XML

<! - todo bubble constraint layout Using the process with constrained layout - > < com. Gauravk. Bubblenavigation. BubbleNavigationConstraintView android:layout_width="match_parent" android:layout_height="match_parent" app:bnc_mode="" > <! - todo bubble navigation view - > < com. Gauravk. Bubblenavigation. BubbleToggleView android: layout_width = "wrap_content" android:layout_height="wrap_content" app:bt_active="true" app:bt_badgeBackgroundColor="@color/green_active" app:bt_colorActive="@color/blue_active" app:bt_colorInactive="@color/blue_inactive" app:bt_icon="@drawable/ic_search" app:bt_shape="@drawable/transition_background_drawable_search" app:bt_title="@string/search" app:bt_padding="10dp" /> <! -- TODO PS: this View is an item in the navigation bar. If there are 3 items in the navigation bar, you must write 3 items. Can only write five largest -- > < / com. Gauravk. Bubblenavigation. BubbleNavigationConstraintView > <! Linear layout, todo bubbles Using the process with linear layout - > < com. Gauravk. Bubblenavigation. BubbleNavigationLinearView android:layout_width="match_parent" android:layout_height="match_parent" > </com.gauravk.bubblenavigation.BubbleNavigationLinearView>Copy the code

App: bnc_mode: there are three kinds of mode (BubbleNavigationLinearView cannot use)

  • Spread: Spread the gametes evenly
  • Packed: Packed with the center of gravity of elements
  • Inside: Equal distribution of internal elements

BubbleToggleView BubbleNavigationLinearView and BubbleNavigationConstraintView role as part of the component. Can be used to:

  • Custom implementation of navigation bar
  • Create a new UI component
  • Switch the view

3. Common attributes and their descriptions:

attribute describe
bt_active Set this parameter to default
bt_colorActive When selected, use this color for ICONS and titles
bt_colorInctive When unselected, use this color for ICONS and titles
bt_icon Set the icon
bt_iconWidth Set icon Width
bt_iconHeigth Set icon Height
bt_title Set the title
bt_titleSize Set the title text size
bt_shape Set the background shape
bt_showShapeAlways Set the background shape visible
bt_shapeColor Set the color of the shape
bt_duration Sets the duration in milliseconds for the toggle animation to complete
bt_padding padding
bt_titlePadding Set title padding
bt_badgeText Set badge text
bt_badgeTextSize Set badge text size
bt_badgeTextColor Set badge text color
bt_badgeBackgroundColor Set badge background color

4. Some basic uses:

/ / TODO navigation switch change Viewpager mNavigationConstraintView. SetNavigationChangeListener (new BubbleNavigationChangeListener () { @Override public void onNavigationChanged(View view, int position) { mViewPager.setCurrentItem(position,true); }});Copy the code
methods describe
void setCurrentActiveItem(int position) Toggles item in the navigation
void setTypeface(Typeface typeface) Update the font of text
void setNavigationChangeListener(BubbleNavigationChangeListener listener) Set the navigation change listener
int getCurrentActiveItemPosition() Returns the current valid location
void setBadgeValue(int position, String value) Update the corresponding badge text value

Click to jump to the official Github address

(The official demo uses Kotlin code)

Here is a Demo written by a blogger (Java coded oh) : Click jump

I hope this post has helped you

If you like bloggers, you can like them before you leave