• Stars
    star
    294
  • Rank 141,303 (Top 3 %)
  • Language
    Kotlin
  • License
    Apache License 2.0
  • Created over 4 years ago
  • Updated over 3 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

AndroidBottomBar


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


License API Build Status Javadoc Profile



Including in your project

Maven Central Jitpack

Gradle

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

allprojects {
    repositories {
        mavenCentral()
    }
}

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

dependencies {
    implementation "com.github.skydoves:androidbottombar:1.0.2"
}

Usage

Add following XML namespace inside your XML layout file.

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

AndroidBottomBarView

Here is a basic example of implementing AndroidBottomBarView.

<com.skydoves.androidbottombar.AndroidBottomBarView
    android:layout_width="match_parent"
    android:layout_height="64dp"
    android:background="@color/colorPrimary"
    app:bottomBar_duration="300" // duration of the menu animation.
    app:bottomBar_flavor="icon" // decides which type (icon, title) will be shown as default.
    app:bottomBar_indicator_color="@color/md_blue_200" // color of the indicator.
    app:bottomBar_indicator_height="4dp" // height size of the indicator.
    app:bottomBar_indicator_padding="6dp" // left and right padding of the indicator.
    app:bottomBar_indicator_radius="12dp" // corner radius of the indicator.
    app:bottomBar_indicator_visible="true" // visibility of the indicator.
    app:bottomBar_menuAnimation="overshoot" // animations for selected or unselected menu item.
    app:bottomBar_selectedIndex="1" // preselected index when initialized.
  />

BottomMenuItem

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

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.

List<BottomMenuItem> 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.

app:bottomBar_flavor="icon"
ICON TITLE

Indicator

We can customize the indicator using below attributes.

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.

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

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

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.

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

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

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.

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

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.

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

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

OnMenuItemSelectedListener

We can listen to menu items are selected.
The listener gives us index, bottomMenuItem, and fromUser arguments.

androidBottomBar.onMenuItemSelectedListener = object : OnMenuItemSelectedListener {
      override fun onMenuItemSelected(index: Int, bottomMenuItem: BottomMenuItem, fromUser: Boolean) {
        // when selected, changed viewpager's current item.
        viewpager.currentItem = index
        // when selected, dismiss a badge of the item.
        androidBottomBar.dismissBadge(index)
      }
    }

OnBottomMenuInitializedListener

We can listen to the menu items are initialized when they are initialized completely.
If we want to show badges, bind AndroidBottomBarView to ViewPager or etc, we have to call them in this listener.

androidBottomBar.setOnBottomMenuInitializedListener {
    // binds to a viewpager.
    androidBottomBar.bindViewPager(viewpager)
    // shows a badge index 0.
    androidBottomBar.showBadge(index = 0)
    // gets a BottomMenuItemView by index.
    val menuItemView = androidBottomBar.getBottomMenuItemView(index = 0)
}

bindViewPager, bindViewPager2

We can bind a ViewPager and ViewPager2 to the AndroidBottomBarView for selecting menu items and moving an indicator
automatically by scrolling of viewPager.

androidBottomBar.setOnBottomMenuInitializedListener {
  androidBottomBar.bindViewPager(viewpager)
}

BottomMenuAnimation

We can customize the selected/unselected animations of menu items and an indicator.

app:bottomBar_menuAnimation="overshoot" // normal, accelerate, bounce, overshoot
NORMAL OVERSHOOT
ACCELERATE BOUNCE

AndroidBottomBarView Attributes

Attributes Type Default Description
flavor enum icon decides which type (icon, title) will be shown as default (unselected).
selectedIndex integer 0 preselected index when initialized.
indicator_visible boolean true visibility of the indicator.
indicator_color color theme accent color of the indicator.
indicator_drawable drawable null drawable of the indicator.
indicator_radius dimension 3dp corner radius of the indicator.
indicator_height dimension 4dp height of the indicator.
indicator_padding dimension 2dp padding of the indicator.
menuAnimation enum normal animations for selected or unselected BottomMenuItemView with an interpolator.
duration integer 300 duration of the menu animation.

Design Credits

All design and inspiration credits goes to Readable Tab Bar.

Find this library useful? ❤️

Support it by joining stargazers for this repository.
And follow me for my next creations! 🤩

License

Copyright 2020 skydoves (Jaewoong Eum)

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.

More Repositories

1

Pokedex

🗡️ Pokedex demonstrates modern Android development with Hilt, Material Motion, Coroutines, Flow, Jetpack (Room, ViewModel) based on MVVM architecture.
Kotlin
7,749
star
2

android-developer-roadmap

🗺 The Android Developer Roadmap offers comprehensive learning paths to help you understand Android ecosystems.
Kotlin
7,184
star
3

Balloon

🎈 Modernized and sophisticated tooltips, fully customizable with an arrow and animations for Android.
Kotlin
3,675
star
4

chatgpt-android

📲 ChatGPT Android demonstrates a Chatbot application using OpenAI's chat API on Android with Stream Chat SDK for Compose.
Kotlin
3,661
star
5

TransformationLayout

🌠 Transform between two Views, Activities, and Fragments, or a View to a Fragment with container transform animations for Android.
Kotlin
2,341
star
6

landscapist

🌻 A pluggable, highly optimized Jetpack Compose and Kotlin Multiplatform image loading library that fetches and displays network images with Glide, Coil, and Fresco.
Kotlin
2,031
star
7

ColorPickerView

🎨 Android colorpicker for getting colors from any images by tapping on the desired color.
Java
1,569
star
8

sandwich

🥪 Sandwich is an adaptable and lightweight sealed API library designed for handling API responses and exceptions in Kotlin for Retrofit, Ktor, and Kotlin Multiplatform.
Kotlin
1,507
star
9

DisneyMotions

🦁 A Disney app using transformation motions based on MVVM (ViewModel, Coroutines, Flow, Room, Repository, Koin) architecture.
Kotlin
1,502
star
10

AndroidVeil

🎭 An easy and flexible way to implement loading skeletons and shimmering effects on layouts for Android.
Kotlin
1,474
star
11

MarvelHeroes

❤️ A sample Marvel heroes application based on MVVM (ViewModel, Coroutines, Room, Repository, Koin) architecture.
Kotlin
1,239
star
12

PowerMenu

🔥 Powerful and modernized popup menu with fully customizable animations.
Java
1,191
star
13

PowerSpinner

🌀 A lightweight dropdown popup spinner, fully customizable with an arrow and animations for Android.
Kotlin
1,188
star
14

Orbital

🪐 Jetpack Compose Multiplatform library that allows you to implement dynamic transition animations such as shared element transitions.
Kotlin
1,097
star
15

DisneyCompose

🧸 A demo Disney app using Jetpack Compose and Hilt based on modern Android tech stacks and MVVM architecture.
Kotlin
945
star
16

WhatIf

☔ Fluent syntactic sugar of Kotlin for handling single if-else statements, nullable, collections, and booleans.
Kotlin
853
star
17

ExpandableLayout

🦚 An expandable layout that shows a two-level layout with an indicator.
Kotlin
825
star
18

ElasticViews

✨ An easy way to implement an elastic touch effect for Android.
Kotlin
811
star
19

Cloudy

☁️ Jetpack Compose blur effect library, which falls back onto a CPU-based implementation to support older API levels.
Kotlin
788
star
20

ProgressView

🌊 A polished and flexible ProgressView, fully customizable with animations.
Kotlin
783
star
21

FlexibleBottomSheet

🐬 Advanced Compose Multiplatform bottom sheet for segmented sizing, non-modal type, and allows interaction behind the bottom sheet similar to Google Maps.
Kotlin
733
star
22

AndroidRibbon

🎀 A fancy and beautiful ribbon with shimmer effects for Android.
Kotlin
692
star
23

pokedex-compose

🗡️ Pokedex Compose demonstrates modern Android development with Jetpack Compose, Hilt, Coroutines, Flow, Jetpack (Room, ViewModel), and Material Design based on MVVM architecture.
Kotlin
660
star
24

Needs

🌂 An easy way to implement modern permission instructions popup.
Kotlin
614
star
25

Pokedex-AR

🦄 Pokedex-AR demonstrates ARCore, Sceneform, and modern Android tech stacks — such as Hilt, Coroutines, Flow, Jetpack (Room, ViewModel, LiveData) based on MVVM architecture.
Kotlin
585
star
26

retrofit-adapters

🚆 Retrofit call adapters for modeling network responses using Kotlin Result, Jetpack Paging3, and Arrow Either.
Kotlin
501
star
27

TheMovies

🎬 A demo project for The Movie DB based on Kotlin MVVM architecture and material design & animations.
Kotlin
496
star
28

MovieCompose

🎞 A demo movie app using Jetpack Compose and Hilt based on modern Android tech stacks.
Kotlin
496
star
29

Only

💐 An easy way to persist and run code block only as many times as necessary on Android.
Kotlin
483
star
30

ColorPickerPreference

🎨 A library that lets you implement ColorPicker, ColorPickerDialog, ColorPickerPreference.
Kotlin
476
star
31

TheMovies2

🎬 A demo project using The Movie DB based on Kotlin MVVM architecture and material design & animations.
Kotlin
476
star
32

Submarine

🚤 Floating navigation view for displaying a list of items dynamically on Android.
Kotlin
473
star
33

Orchestra

🎺 A collection of Jetpack Compose libraries, which allows you to build tooltips, spinners, and color pickers.
Kotlin
458
star
34

colorpicker-compose

🎨 Kotlin Multiplatform color picker library for getting colors from any images by tapping on the desired color.
Kotlin
456
star
35

Rainbow

🌈 Fluent syntactic sugar of Android for applying gradations, shading, and tinting.
Kotlin
450
star
36

IndicatorScrollView

🧀 A dynamic scroll view that animates indicators according to its scroll position.
Kotlin
415
star
37

PreferenceRoom

🚚 Android processing library for managing SharedPreferences persistence efficiently and structurally.
Java
377
star
38

DoubleLift

🦋 Expands and collapses a layout horizontally and vertically sequentially.
Kotlin
360
star
39

GoldMovies

👑 The GoldMovies is based on Kotlin, MVVM architecture, coroutines, dagger, koin, and material designs & animations.
Kotlin
356
star
40

lazybones

😴 A lazy and fluent syntactic sugar for observing Activity, Fragment, and ViewModel lifecycles with lifecycle-aware properties.
Kotlin
353
star
41

compose-performance

📚 Curated articles to understand Compose internals and optimize Jetpack Compose performance.
340
star
42

gemini-android

✨ Gemini Android demonstrates Google's Generative AI on Android with Stream Chat SDK for Compose.
Kotlin
327
star
43

sealedx

🎲 Kotlin Symbol Processor that auto-generates extensive sealed classes and interfaces for Android and Kotlin.
Kotlin
321
star
44

Bindables

🧬 Android DataBinding kit for notifying data changes to UI layers with MVVM architecture.
Kotlin
310
star
45

GithubFollows

:octocat: A demo project based on MVVM architecture and material design & animations.
Kotlin
294
star
46

Bundler

🎁 Android Intent & Bundle extensions that insert and retrieve values elegantly.
Kotlin
263
star
47

twitch-clone-compose

🎮 Twitch clone project demonstrates modern Android development built with Jetpack Compose and Stream Chat/Video SDK for Compose.
Kotlin
226
star
48

snitcher

🦉 Snitcher captures global crashes, enabling easy redirection to the exception tracing screen for swift recovery.
Kotlin
223
star
49

compose-stable-marker

✒️ Compose stable markers for KMP to tell stable/immutable guarantees to the compose compiler.
Kotlin
222
star
50

Chamber

⚖️ A lightweight Android lifecycle-aware and thread-safe pipeline for communicating between components with custom scopes.
Kotlin
186
star
51

Flourish

🎩 Flourish implements dynamic ways to show up and dismiss layouts with animations.
Kotlin
175
star
52

BaseRecyclerViewAdapter

⚡ Fast way to bind RecyclerView adapter and ViewHolder for implementing clean sections.
Kotlin
164
star
53

Multi-ColorPicker

Android multi colorpicker for getting colors from any images by tapping on the desired color.
Kotlin
124
star
54

All-In-One

👔 Health care application for reminding health-todo lists and making healthy habits every day.
Kotlin
120
star
55

Medal

🏅An easy way to implement medal effect for Android.
Kotlin
110
star
56

viewmodel-lifecycle

🌳 ViewModel Lifecycle allows you to track and observe Jetpack's ViewModel lifecycle changes.
Kotlin
103
star
57

WaterDrink

💧 Simple water drinking reminder application based on MVP architecture.
Kotlin
77
star
58

Awesome-Android-Persistence

A curated list of awesome android persistence libraries about SQLite, ORM, Mobile Database, SharedPreferences, etc.
71
star
59

CameleonLayout

A library that let you implement double-layer-layout changing with slide animation.
Kotlin
71
star
60

SyncMarket

Let managing your application version update more simply.
Java
41
star
61

MagicLight-Controller

This simple demo application is controlling MagicLight's smart bulbs by bluetooth-le
Java
37
star
62

MethodScope

Reduce repetitive inheritance works in OOP world using @MethodScope.
Java
33
star
63

firebase-android-ktx

🔥 Kotlin & Compose-friendly Firebase extensions designed to help you focus on your business logic.
Kotlin
29
star
64

kmp-developer-roadmap

🗺 The Kotlin Multiplatform Developer Roadmap offers comprehensive learning paths to help you understand KMP ecosystems.
Kotlin
26
star
65

server-driven-compose

🧙 Server Driven Compose showcases server-driven UI approaches in Jetpack Compose with Firebase.
Kotlin
24
star
66

MapEditor

You can draw your map using by this Map Editor project.
C#
21
star
67

skydoves

🕊 skydoves
14
star
68

seungmani

This simple project is cocos-2dx c++ multi-patform(win32, android, ios, linux) game in Jan 2015.
C++
9
star
69

NityLife

This simple project is cocos-2dx c++ multi-patform(win32, android, ios, linux) game in 2014.
C++
6
star
70

soniaOnline

XNA C# win 32/64 patform MMO game in Jan 2016.
C#
5
star
71

Rurimo-Camera

You can take some screenshots or save images at clipboard so easily like just one click on Windows with this application.
C#
1
star