Lottie Bottom Navbar

General

Category
Free
Tag
Navigation
License
N/A
Registered
Sep 20, 2018
Favorites
3
Link
https://github.com/subsub/lottiebottomnavbar
See also
BubbleTabBar
MultiBackStack
routable-android
Router
Fragula 2

Additional

Language
Kotlin
Version
1.1.4 (Sep 26, 2018)
Created
Sep 17, 2018
Updated
Jul 15, 2023
Owner
Subkhan Sarif (subsub)
Contributor
Subkhan Sarif (subsub)
1
Activity
Badge
Generate
Download
Source code

Announcement

????⚠️ ABANDONED ⚠️????

Lottie Bottom Navbar

A customisable bottom navigation bar with Lottie Animation

Current Latest Version 1.2.0

What's new:

[1.2.0]

  • custom button background
  • add override button click handler to BottomMenu

[1.1.6]

  • Update Gradle minsdk version to support sdk v19

Usage

Add maven url Inside Project Level build.gradle

buildscript {
 ...
    repositories {
     ...
        maven {
            url  "https://dl.bintray.com/subsub/maven"
        }
    }
    dependencies {
     ...
    }
}

...

allprojects {
    repositories {
     ...
        maven {
            url  "https://dl.bintray.com/subsub/maven"
        }
    }
}

Add dependency into your app build.gradle

implementation "com.subkhansarif.libs:bottomnavbarlib:{latestVersion}"

Sample

See sample project.

Add LottieBottomNavbar to your layout

<com.subkhansarif.bottomnavbar.LottieBottomNavbar
        android:id="@+id/bottom_navbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:elevation="15dp"
        android:orientation="vertical"
        app:activeButtonColor="@color/colorWhite"
        app:buttonColor="@color/colorAccent"
        app:buttonContainerBackgroundColor="@color/colorWhite"
        app:buttonsHeight="56dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:offscreenPageLimit="4"
        app:setViewPagerSwipeable="false"
 app:navbarElevation="15dp"
        app:viewPagerBackground="@color/colorWhite" />

Setup menus for navbar

ArrayList<BottomMenu> menu = ArrayList();
menu.add(new BottomMenu(0L, getString(R.string.lbl_menu_profile), R.drawable.ic_person_grey, "a_cup_of_coffee.json"));
menu.add(new BottomMenu(1L, getString(R.string.lbl_menu_pet), R.drawable.ic_pets_grey, "a_cup_of_coffee.json"));
menu.add(new BottomMenu(2L, getString(R.string.lbl_menu_Food), R.drawable.ic_restaurant_menu_grey, null));

BottomMenu constructor parameters:

  • id: Long, id for your button
  • fragment: Fragment, fragment for this button
  • label: String, label for this button. This will be shown below button icon
  • icon: drawable res, image resource for this button
  • (optional) lottie_animation: String, a String of json file name for Lottie Animation.

Add menus to navbar

LottieBottomNavbar bottom_navbar = findViewById(R.id.bottom_navbar)
bottom_navbar.setFragmentManager(getSupportFragmentManager())
bottom_navbar.setMenu(menu)
bottom_navbar.setSelected(1)
bottom_navbar.setMenuClickListener(this)

Handle on tab clicked to change fragment

  • Implement IBottomClickListener in the activity
  • And Override menuClicked() to handle fragment transaction
@Override
    public void menuClicked(int position, long id) {
        FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
        switch (position) {
            case 1: {
                transaction.replace(R.id.fragmentContainer, profileFragment);
                break;
            }
            case 2: {
                transaction.replace(R.id.fragmentContainer, petFragment);
                break;
            }
            case 3: {
                transaction.replace(R.id.fragmentContainer, foodFragment);
                break;
            }
        }
        transaction.commit();
    }

Layout Properties

Name Type Description
buttonContainerBackgroundColor Color Navbar background color
buttonsHeight Dimension Navbar Height
itemCount Int How many buttons in the Navbar, this value will be overriden when setMenu() is called
offscreenPageLimit Int Set how many hidden fragment will be keep in memory. This is the same as ViewPager.OffscreenPageLimit().
setViewPagerSwipeable Boolean If set to false, the viewpager will be un-swipeable
viewPagerBackground Color The background color of the viewpager
activeButtonColor Color Color for the selected button, this affect text and image tint, but won't affect to Lottie animation image color.
buttonColor Color Default color for when button is not selected
navbarElevation Dimension Elevation for navigation bar