https://github.com/skydoves/AndroidBottomBar

🍫 A lightweight bottom navigation view, fully customizable with an indicator and animations.
https://github.com/skydoves/AndroidBottomBar

Last synced: 8 months ago
JSON representation

🍫 A lightweight bottom navigation view, fully customizable with an indicator and animations.

• Host: GitHub
• URL: https://github.com/skydoves/AndroidBottomBar
• Owner: skydoves
• License: apache-2.0
• Created: 2020-07-18T13:07:23.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2021-06-01T01:08:05.000Z (over 4 years ago)
• Last Synced: 2025-04-07T19:16:15.400Z (8 months ago)
• Language: Kotlin
• Homepage:
• Size: 374 KB
• Stars: 293
• Watchers: 4
• Forks: 23
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE
  • Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

• awesome-list - skydoves/AndroidBottomBar - 🍫 A lightweight bottom navigation view, fully customizable with an indicator and animations. (Kotlin)

README

          

AndroidBottomBar


 

🍫 A lightweight bottom navigation view, fully customizable with an indicator and animations.





  

  

   

   

  

























## Including in your project

[![Maven Central](https://img.shields.io/maven-central/v/com.github.skydoves/androidbottombar.svg?label=Maven%20Central)](https://search.maven.org/search?q=g:%22com.github.skydoves%22%20AND%20a:%22androidbottombar%22)

[![Jitpack](https://jitpack.io/v/skydoves/AndroidBottomBar.svg)](https://jitpack.io/#skydoves/AndroidBottomBar)

### Gradle

Add below codes to your **root** `build.gradle` file (not your module build.gradle file).

```gradle

allprojects {

    repositories {

        mavenCentral()

    }

}

```

And add a dependency code to your **module**'s `build.gradle` file.

```gradle

dependencies {

    implementation "com.github.skydoves:androidbottombar:1.0.2"

}

```

## Usage

Add following XML namespace inside your XML layout file.

```gradle

xmlns:app="http://schemas.android.com/apk/res-auto"

```

### AndroidBottomBarView

Here is a basic example of implementing `AndroidBottomBarView`. 


```gradle

```

### BottomMenuItem

We can add menu items to the `AndroidBottomBarView` using the `BottomMenuItem`, fully customizable.

```kotlin

androidBottomBar.addBottomMenuItems(mutableListOf(

      BottomMenuItem(this)

        .setTitle("Movie") // sets the content of the title.

        .setTitleColorRes(R.color.black) // sets the color of the title using resource.

        .setTitleActiveColorRes(R.color.white) // sets the color of the title when selected/active.

        .setTitlePadding(6) // sets the padding of the title.

        .setTitleSize(14f) // sets the size of the title.

        .setTitleGravity(Gravity.CENTER) // sets gravity of the title.

        .setIcon(R.drawable.ic_movie)

        .setIconColorRes(R.color.md_blue_200) // sets the [Drawable] of the icon using resource.

        .setIconActiveColorRes(R.color.md_blue_200) // sets the color of the icon when selected/active.

        .setBadgeText("New!") // sets the content of the badge.

        .setBadgeTextSize(9f) // sets the size of the badge.

        .setBadgeTextColorRes(R.color.white) // sets the text color of the badge using resource.

        .setBadgeColorRes(R.color.md_blue_200) // sets the color of the badge using resource.

        .setBadgeAnimation(BadgeAnimation.FADE) // sets an animation of the badge.

        .setBadgeDuration(450) // sets a duration of the badge. 

        .build(),

      

      BottomMenuItem(this)

      // .. //

```

Here is the Java way.

```java

List bottomMenuItems = new ArrayList<>();

bottomMenuItems.add(new BottomMenuItem(context)

    .setTitle("Tv")

    .setIcon(R.drawable.ic_tv)

    .build());

// add more BottomMenuItems. //

androidBottomBarView.addBottomMenuItems(bottomMenuItems);

```

### BottomBarFlavor

`BottomBarFlavor` decides which type (icon, title) will be shown as default (if unselected). 


The default flavor is icon.

```kotlin

app:bottomBar_flavor="icon"

```

| ICON | TITLE |

| :---------------: | :---------------: |

|  | 

### Indicator

We can customize the indicator using below attributes.

```gradle

app:bottomBar_indicator_color="@color/md_blue_200" // color of the indicator.

app:bottomBar_indicator_height="4dp" // height of the indicator.

app:bottomBar_indicator_padding="6dp" // padding of the indicator.

app:bottomBar_indicator_radius="12dp" // corner radius of the indicator.

app:bottomBar_indicator_visible="true" // visibility of the indicator.

```

### Title Composition

We can customize the title of the menu item.

```kotlin

.setTitle("Movie") // sets the content of the title.

.setTitleColorRes(R.color.black) // sets the color of the title using resource.

.setTitleActiveColorRes(R.color.white) // sets the color of the title when selected/active.

.setTitlePadding(6) // sets the padding of the title.

.setTitleSize(14f) // sets the size of the title.

.setTitleGravity(Gravity.CENTER) // sets gravity of the title.

```

#### TitleForm

TitleForm is a collection of attribute class that related to a menu title for customizing the menu item title easily.


Generally, we set the almost same attributes for consistency of the menu items.


We can build a common form of the title, and we can reuse on every menu item.


Then we can reduce boilerplate work from writing the same attributes on every menu item.

```kotlin

// we can create the form using kotlin dsl.

val titleForm = titleForm(this) {

  setTitleColorRes(R.color.black)

  setTitlePadding(6)

  setTitleSize(14f)

}

 androidBottomBar.addBottomMenuItems(mutableListOf(

      BottomMenuItem(this)

        // setTitleForm must be called before other title related methods.

        .setTitleForm(titleForm)

        .setTitle("Movie")

        .build(),

      BottomMenuItem(this)

        .setTitleForm(titleForm)

        .setTitle("Tv")

        .build(),

     // ** //   

```

Here is the Java way to build the `TitleForm`.

```java

TitleForm.Builder titleForm = new TitleForm.Builder(context)

    .setTitleColorRes(R.color.black)

    .setTitlePadding(6)

    .setTitleSize(14f);

```

### Icon Composition

We can customize the icon of the menu item.

```kotlin

.setIcon(R.drawable.ic_movie)

.setIconColorRes(R.color.md_blue_200) // sets the [Drawable] of the icon using resource.

.setIconActiveColorRes(R.color.md_blue_200) // sets the color of the icon when selected/active.

.setIconSize(24) // sets the size of the icon.

```

#### IconForm

IconForm is a collection of attribute class that related to a menu icon for customizing the menu item icon easily.


The same concept of the `TitleForm`, and we must call before other icon related methods.

```kotlin

// we can create the form using kotlin dsl.

val iconForm = iconForm(this) {

  setIcon(R.drawable.ic_movie)

  setIconColorRes(R.color.md_blue_200) // sets the [Drawable] of the icon using resource.

  setIconSize(24) // sets the size of the icon.

}

androidBottomBar.addBottomMenuItems(mutableListOf(

      BottomMenuItem(this)

        .setIconForm(iconForm)

        .setIcon(R.drawable.ic_star)

        .build(),

        // ** //

```

Here is the Java way to build the `IconForm`.

```java

IconForm.Builder iconForm = new IconForm.Builder(context)

        .setIconColorRes(R.color.md_blue_100)

        .setIconSize(24);

```

### Badge Composition

We can customize the badge of the menu item.

```kotlin

.setBadgeText("New!") // sets the content of the badge.

.setBadgeTextSize(9f) // sets the size of the badge.

.setBadgeTextColorRes(R.color.white) // sets the text color of the badge using resource.

.setBadgeColorRes(R.color.md_blue_200) // sets the color of the badge using resource.

.setBadgeStyle(Typeface.BOLD)// sets the [Typeface] of the badge.

.setBadgePadding(6) // sets the padding of the badge.

.setBadgeMargin(4) // sets the margin of the badge.

.setBadgeRadius(6) // sets the radius of the badge.

.setBadgeAnimation(BadgeAnimation.FADE) // sets an animation of the badge.

.setBadgeDuration(450) // sets a duration of the badge. 

```

#### Show and dismiss

We can show and dismiss badges using below methods.

```kotlin

androidBottomBar.showBadge(0) // shows the badge by an index.

androidBottomBar.showBadge(0, "123") // shows the badge by an index and changes badge text.

androidBottomBar.dismissBadge(0) // dismisses the badge by an index.

```

#### BadgeForm

BadgeForm is a collection of attribute class that related to a menu badge for customizing the menu item badge easily.


The same concept of the `TitleForm`, and we must call before other badge related methods.

```kotlin

// we can create the form using kotlin dsl.

val badgeForm = badgeForm(this) {

  setBadgeTextSize(9f)

  setBadgePaddingLeft(6)

  setBadgePaddingRight(6)

  setBadgeDuration(550)

}

androidBottomBar.addBottomMenuItems(mutableListOf(

      BottomMenuItem(this)

        .setTitle("movie")

        .setBadgeForm(badgeForm)

        .setBadgeText("New!")

        .setBadgeColorRes(R.color.md_blue_200)

        .setBadgeAnimation(BadgeAnimation.FADE)

        .build(),

      BottomMenuItem(this)

        .setTitle("star")

        .setBadgeForm(badgeForm)

        .setBadgeText("⭐⭐⭐")

        .setBadgeColorRes(R.color.white)

        .setBadgeTextColorRes(R.color.black)

        .build(),

        // ** //

```

#### BadgeAnimation

We can customize badge animations using the below method.

```gradle

.setBadgeAnimation(BadgeAnimation.FADE) // fade, scale

```

FADE | SCALE |

| :---------------: | :---------------: |

|  |  |  |  |  |  |