A new way to implement navigation in your app 🏎

Overview

ExpandableBottomBar

Maven Central GitHub code size in bytes CircleCI

A new way to improve navigation in your app

Its really easy integrate to your project

take it, faster, faster

Important: library was migrated from JCenter to MavenCentral

It means that it may be necessary to add mavenCentral repository to your repositories list

allprojects {
    repositories {
        // your repositories

        mavenCentral()
    }
}
  • Maven
<dependency>
  <groupId>com.github.st235</groupId>
  <artifactId>expandablebottombar</artifactId>
  <version>X.X</version>
  <type>pom</type>
</dependency>
  • Gradle
implementation 'com.github.st235:expandablebottombar:X.X'
  • Ivy
<dependency org='com.github.st235' name='expandablebottombar' rev='X.X'>
  <artifact name='expandablebottombar' ext='pom' ></artifact>
</dependency>

P.S.: Check out latest version code in badge at the top of this page.

Usage

Really simple as I wrote earlier

Firstly, you should declare your view in xml file

    <github.com.st235.lib_expandablebottombar.ExpandableBottomBar
        android:id="@+id/expandable_bottom_bar"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        app:exb_backgroundCornerRadius="25dp"
        app:exb_backgroundColor="#2e2e2e"
        app:exb_itemInactiveColor="#fff"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

Then you should add menu items to your navigation component

        val bottomBar: ExpandableBottomBar = findViewById(R.id.expandable_bottom_bar)

        bottomBar.addItems(
                ExpandableBottomBarMenuItem.Builder(context = this)
                        .addItem(R.id.icon_home, R.drawable.ic_bug, R.string.text, Color.GRAY)
                        .addItem(R.id.icon_go, R.drawable.ic_gift, R.string.text2, 0xFFFF77A9)
                        .addItem(R.id.icon_left, R.drawable.ic_one, R.string.text3, 0xFF58A5F0)
                        .addItem(R.id.icon_right, R.drawable.ic_two, R.string.text4, 0xFFBE9C91)
                        .build()
        )

        bottomBar.onItemSelectedListener = { view, menuItem ->
            /**
             * handle menu item clicks here,
             * but clicks on already selected item will not affect this callback
             */
        }
        
        bottomBar.onItemReselectedListener = { view, menuItem ->
            /**
             * handle here all the click in already selected items
             */
        }

Xml menu declaration

If your menu is constantly, you may specify it from xml

Firstly, you should declare menu items in xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/home"
        android:title="@string/text"
        android:icon="@drawable/ic_home"
        app:exb_color="#FF8888" />

    <item
        android:id="@+id/settings"
        android:title="@string/text4"
        android:icon="@drawable/ic_settings"
        app:exb_color="@color/colorSettings" />

    <item
        android:id="@+id/bookmarks"
        android:title="@string/text3"
        android:icon="@drawable/ic_bookmarks"
        app:exb_color="#fa2 />
</menu>

each item tag has following attributes:

property type description
id reference an id of menu item
exb_color reference/color color of element, it may be color reference or color
icon reference icon reference (vector drawables supported)
title reference/text item title
exb_badgeColor color notification badge background color. It will override the color from layout attribute
exb_badgeTextColor color notification badge text color. It will override the color from layout attribute

Just like any Android menu 😉

Then you should reference this xml file at the view attributes

    <github.com.st235.lib_expandablebottombar.ExpandableBottomBar
        android:id="@+id/expandable_bottom_bar"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        app:exb_backgroundCornerRadius="25dp"
        app:exb_itemInactiveColor="#fff"
        app:exb_items="@menu/bottom_bar"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

Xml attributes

property type description
exb_elevation dimen component elevation (important: api 21+)
exb_backgroundColor color bottom bar background color
exb_transitionDuration integer time between one item collapsed and another item expanded
exb_backgroundCornerRadius dimen bottom bar background corners radius
exb_itemInactiveColor color item menu color, when its inactive
exb_itemBackgroundCornerRadius dimen item background corner radius
exb_itemStyle enum: normal, outline, stroke controls the style of items. normal = items are filled with solid color; outline = no fill, only border; stroke = fill + border
exb_itemBackgroundOpacity float item background opacity (important: final color alpha calculates by next formulae alpha = opacity * 255)
exb_item_vertical_margin dimen top & bottom item margins
exb_item_horizontal_margin dimen left & right item margins
exb_item_vertical_padding dimen top & bottom item padding
exb_item_horizontal_padding dimen left & right item padding
exb_items reference xml supported menu format
exb_notificationBadgeBackgroundColor color notification badge background color. Will be applied to all menu items
exb_notificationBadgeTextColor color notification badge text color. Will be applied to all menu items

Notification badges

    /**
     * Returns notification object
     */
    val notification = bottomBar.getNotificationFor(i.itemId) // itemId is R.id.action_id

   notification.show() // shows simple dot-notification
   notification.show("string literal") // shows notification with counter. Counter could not exceed the 4 symbols length

  notification.clear() // removes notification badge from menu item

Navigation Components support

Usually Drawer or BottomNavigationView attached to navigation controller with NavigationUI.setupWithNavController(view, navController), but this system is not applicable to customview components. That's why ExpandableBottomBar offers it's own ExpandableBottomBarNavigationUI

To attach ExpandableBottomBar to your navigation components you should use the same approach

    ExpandableBottomBarNavigationUI.setupWithNavController(bottomNavigation, navigationController)

Coordinator Layout support

Do you waiting for Coordinator Layout support - and it is already here! Fabs and Snackbars aligned by bottom bar! Hooray 🎉

Available without registration and SMS, starting from 0.8 version. Seriously, everything is already working out of the box - nothing needs to be done.

But... if you need to support hiding the menu by list/grid scroll - then you are really lucky!

This functionality is very simple to implement. You need to redeclare custom Coordinator Layout Behavoir to ExpandableBottomBarScrollableBehavior.

    <github.com.st235.lib_expandablebottombar.ExpandableBottomBar
            android:id="@+id/expandable_bottom_bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            app:layout_behavior="github.com.st235.lib_expandablebottombar.behavior.ExpandableBottomBarScrollableBehavior"
            app:items="@menu/bottom_bar" />

Really easy ;D

After integration this behavior should looks like:

Migration guide

You may found all necessary info about migration from old versions here

Screens

License

MIT License

Copyright (c) 2019 - present, Alexander Dadukin

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
Comments
  • MVVM Support (Navigation component)

    MVVM Support (Navigation component)

    Hello @st235

    Please add MVVM support

    navController = Navigation.findNavController(this, R.id.nav_host_fragment);

    So user can use this library with navigation component also. so user can handle only one activity and all fragment.

    Thanks

    good first issue feature request 
    opened by rajam1215 17
  • avoid recreation of fragment

    avoid recreation of fragment

    hello @st235

    sins the MVVM support it is awesome, but we need one more enhancement in the library, so Fragment not create every time when any bottom menu item clicked with MVVM

    Thanks

    wontfix 
    opened by rajam1215 7
  • Class referenced in the layout file, github.com.st235.lib_expandablebottombar.ExpandableBottomBar, was not found in the project or the libraries

    Class referenced in the layout file, github.com.st235.lib_expandablebottombar.ExpandableBottomBar, was not found in the project or the libraries

    Am I doing wrong here? Gradle implementation 'com.github.st235:expandablebottombar:1.5.1' xml <github.com.st235.lib_expandablebottombar.ExpandableBottomBar android:id="@+id/expandable_bottom_bar" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_margin="20dp" app:exb_backgroundCornerRadius="25dp" app:exb_backgroundColor="#2e2e2e" app:exb_itemInactiveColor="#fff" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" />

    help wanted 
    opened by shahzad1 6
  • Back Stack maintain Without Recreating Fragment

    Back Stack maintain Without Recreating Fragment

    package ng.com.obkm.bottomnavviewwithfragments;

    import android.content.Intent; import android.os.Bundle; import android.support.annotation.NonNull; import android.support.design.widget.BottomNavigationView; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.Toolbar; import android.view.Menu; import android.view.MenuItem; import android.widget.Toast;

    import ng.com.obkm.bottomnavviewwithfragments.home.HomeFragment;

    public class MainActivity extends AppCompatActivity {

    boolean doubleBackToExitPressedOnce = false;
    final Fragment fragment1 = new HomeFragment();
    final Fragment fragment2 = new DashboardFragment();
    final Fragment fragment3 = new NotificationsFragment();
    final FragmentManager fm = getSupportFragmentManager();
    Fragment active = fragment1;
    BottomNavigationView navigation;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        navigation = (BottomNavigationView) findViewById(R.id.navigation);
        navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);
        setFragment(fragment1, "1", 0);
    }
    
    
    private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener
            = new BottomNavigationView.OnNavigationItemSelectedListener() {
    
        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            switch (item.getItemId()) {
                case R.id.navigation_home:
                    setFragment(fragment1, "1", 0);
                    return true;
                case R.id.navigation_dashboard:
                    setFragment(fragment2, "2", 1);
                    return true;
                case R.id.navigation_notifications:
                    setFragment(fragment3, "3", 2);
                    return true;
            }
            return false;
        }
    };
    
    public void setFragment(Fragment fragment, String tag, int position) {
        if (fragment.isAdded()) {
            fm.beginTransaction().hide(active).show(fragment).commit();
        } else {
            fm.beginTransaction().add(R.id.main_container, fragment, tag).commit();
        }
        navigation.getMenu().getItem(position).setChecked(true);
        active = fragment;
    }
    
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main_menu, menu);
        return super.onCreateOptionsMenu(menu);
    }
    
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int id = item.getItemId();
    
        if (id == R.id.action_settings) {
            startActivity(new Intent(MainActivity.this, SettingsActivity.class));
            return true;
        }
    
        return super.onOptionsItemSelected(item);
    }
    
    @Override
    public void onBackPressed() {
        if (active == fragment1) {
            if (doubleBackToExitPressedOnce) {
                super.onBackPressed();
                return;
            }
            this.doubleBackToExitPressedOnce = true;
            Toast.makeText(this, "Please click BACK again to exit", Toast.LENGTH_SHORT).show();
        } else {
            setFragment(fragment1, "1", 0);
        }
    }
    

    }

    wontfix 
    opened by ayaz56 6
  • Bottom Bar not showing properly

    Bottom Bar not showing properly

    I was using this library for like 1 year ago, and yesterday i update my Android Studio as well as other plugin upgrade (gradle, kotlin, sdk, etc).

    when i try run my apps after update, the bottom bar only showing white box (i marked bottom bar location with red box) image

    I've tried from upgrading this library into 1.4.0 version, adding mavencentral() to project gradle, and checking code where it attach to navigation controller.

    what could possibly go wrong? i can't find it. Please help

    Here code what i use

    MainActivity.kt val navController = Navigation.findNavController(this@MainActivity, R.id.nav_host_fragment) ExpandableBottomBarNavigationUI.setupWithNavController(binding.expandableBottomBar, navController)

    activity_main.xml `

    <github.com.st235.lib_expandablebottombar.ExpandableBottomBar
        android:id="@+id/expandable_bottom_bar"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:layout_marginHorizontal="15dp"
        android:layout_marginBottom="10dp"
        android:background="?android:attr/windowBackground"
        android:paddingVertical="20dp"
        app:exb_backgroundCornerRadius="15dp"
        app:exb_itemInactiveColor="#B5B5B5"
        app:exb_items="@menu/bottom_nav_menu"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />`
    

    image

    mobile_navigation.xml `

    <fragment
        android:id="@+id/navigation_notification"
        android:name="com.catty.app.fragments.NotificationFragment"
        android:label="@string/notification"
        tools:layout="@layout/fragment_notification" />
    
    <fragment
        android:id="@+id/navigation_profile"
        android:name="com.catty.app.profile.ProfileFragment"
        android:label="@string/profile"
        tools:layout="@layout/fragment_profile" />`
    
    good first issue question need info 
    opened by hnfnfl 4
  • There was a problem when importing version 1.4.0

    There was a problem when importing version 1.4.0

    When using version 1.4.0, studio cannot find ExpandableBottomBar, when I changed to version 1.3.0, it can run normally. I have tried to clear the cache. I don't know if this is an example?

    bug good first issue question 
    opened by ZXHHYJ 3
  • Adjust the height for item text to prevent DPI issue

    Adjust the height for item text to prevent DPI issue

    I was unable to replicate this issue while using a regular user app but when in use with AOSP, I noticed an issue when adjusting font size to anything above 'Default'.

    Test:

    • Import aar to AOSP
    • Utilize the library
    • Adjust the font size to Large or above under Settings

    See image to notice issue described above

    • https://i.imgur.com/zm4s2mz.jpg
    opened by BoredOutOfMyGit 3
  • The tint is fixed when reusing the icon used in

    The tint is fixed when reusing the icon used in "ExpandableBootomBar".

    Here is my menu/bottom.xml

    <?xml version="1.0" encoding="utf-8"?>
    <menu
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:android="http://schemas.android.com/apk/res/android">
    
        <item
            android:id="@+id/bottom_home"
            android:title="@string/menu_home"
            app:exb_color="#000000"
            app:exb_icon="@drawable/round_home_black_24" />
        ...
    </menu>
    

    and here is my activity_main.xml

    ...
    <github.com.st235.lib_expandablebottombar.ExpandableBottomBar
                android:id="@+id/bottom_bar"
                android:layout_width="match_parent"
                android:layout_height="80dp"
                android:layout_margin="20dp"
                app:layout_behavior="github.com.st235.lib_expandablebottombar.behavior.ExpandableBottomBarScrollableBehavior"
                app:layout_constraintBottom_toBottomOf="parent"
                app:exb_backgroundCornerRadius="10dp"
                app:exb_itemInactiveColor="#ccc"
                app:exb_items="@menu/bottom"
                />
    ...
    

    If I try to use the @drawable/round_home_black_24 drawable icon in another view, the tint of the drawable is also applied to #ccc in the other view.

    here is image. KakaoTalk_20200521_153513872

    The original color of the drawable is black, and I haven't set the tint property.

    bug good first issue 
    opened by WoodyCrow 3
  • How can I remove menuitems title?

    How can I remove menuitems title?

    First of all thank you for make this library :)

    Is this the only way to remove menuitems title?

    <item
       android:id="@+id/home"
       android:title=""
       ... />
    

    It has some padding on title space when I select it. but I don't want it. are there any other way to remove it?

    wontfix feature request need info 
    opened by jadenkor 3
  • Cannot resolve method addItems(?)

    Cannot resolve method addItems(?)

    I just started a fresh project and wanted to add this library to my app, but i cant add items to the bottom bar and the method doesnt work. It is a java project but as far as I know it shouldnt matter.

    d

    How can I fix this? I dont think I did anything wrong since there is not much that I can do wrong for this library.

    bug 
    opened by yasanglass 3
  • How to use onItem click listener in java

    How to use onItem click listener in java

    Hello @st235

    Please describe some code peace, how to use setOnItemSelected listener in java class, and describe add multiple fragments. it is very useful library

    Thanks

    help wanted 
    opened by rajam1215 2
Releases(1.5.1)
Owner
Alexander Dadukin
Cats. Algorithms. Kotlin. 😻
Alexander Dadukin
:fire: The powerful and easiest way to implement modern material popup menu.

PowerMenu ?? The powerful and easiest way to implement modern material popup menu. PowerMenu can be fully customized and used for popup dialogs. Downl

Jaewoong Eum 1k Dec 29, 2022
Space Navigation is a library allowing easily integrate fully customizable Google Spaces like navigation to your app.

Space-Navigation-View Introduction Space Navigation is a library allowing easily integrate fully customizable Google [Spaces][1] like navigation to yo

Arman 2k Dec 23, 2022
Bottom Navigation widget component inspired by the Google Material Design Guidelines at https://www.google.com/design/spec/components/bottom-navigation.html

Material Bottom Navigation Library Lightweight Bottom Navigation library component inspired by the Google Material Design Guidelines at https://www.go

Alessandro Crugnola 1.4k Dec 18, 2022
Simple library which enable you to add a drawer(slide-out) navigation to your android application

SimpleSideDrawer is an android library to add a drawer navigation into your android application. This library has high affinity with other libraries l

null 217 Nov 25, 2022
Implementation of "Side Navigation" or "Fly-in app menu" pattern for Android (based on Google+ app)

Android SideNavigation Library Implementation of "Side Navigation" or "Fly-in app menu" pattern for Android (based on Google+ app). Description The Go

Evgeny Shishkin 319 Nov 25, 2022
Navigation menu for Android (based off Google+ app)

RibbonMenu Navigation menu for Android (based on Google+ app). Usage Menus are created in xml as normal, adding text and an icon. In the layout you wa

David Scott 487 Nov 24, 2022
Android - Blur Navigation Drawer like Etsy app.

Blur Navigation Drawer Library[DEPRECATED] Blur Navigation Drawer like Etsy app. Demo You can download a demo here. Updates Version 1.1 Add support fo

Vasilis Charalampakis 414 Nov 23, 2022
An Android library that allows you to easily create applications with slide-in menus. You may use it in your Android apps provided that you cite this project and include the license in your app. Thanks!

SlidingMenu (Play Store Demo) SlidingMenu is an Open Source Android library that allows developers to easily create applications with sliding menus li

Jeremy Feinstein 11.1k Dec 21, 2022
Kai Liao 2.2k Jan 3, 2023
Suhuf is an android library that is used to build bottom sheets in an elegant way.

Suhuf is an android library that is used to build bottom sheets in an elegant way.

Rahmat Rasyidi Hakim 10 Nov 15, 2021
A customizable and easy to use BottomBar navigation view with sleek animations, with support for ViewPager, ViewPager2, NavController, and badges.

AnimatedBottomBar A customizable and easy to use bottom bar view with sleek animations. Examples Playground app Download the playground app from Googl

Joery 1.2k Dec 30, 2022
A simple Floating Action Button that shows an anchored Navigation View

Floating Navigation View A simple Floating Action Button that shows an anchored Navigation View and was inspired by Menu Material Fixed created by Tom

André Mion 1.3k Dec 29, 2022
Spotify like android material bottom navigation bar library.

SuperBottomBar About Spotify like android material bottom navigation bar library. GIF Design Credits All design and inspiration credits belongs to Spo

Ertugrul 73 Dec 10, 2022
You can easily add awesome animated context menu to your app.

ContextMenu You can easily add awesome animated context menu to your app. Check this project on dribbble Check this project on Behance Usage: For a wo

Yalantis 3.8k Dec 28, 2022
** A slide-out menu implementation, which allows users to navigate between views in your app.

MenuDrawer A slide-out menu implementation, which allows users to navigate between views in your app. Most commonly the menu is revealed by either dra

Simon Vig Therkildsen 2.6k Dec 8, 2022
Android-NewPopupMenu 3.9 0.0 Java is an android library to create popup menu with GoogleMusic app-like style.

Android-NewPopupMenu Android-NewPopupMenu is an android library to create popup menu with GoogleMusic app-like style. Requirements Tested with APIv4 H

u1aryz 159 Nov 21, 2022
An app that helps you create & remove WSA icon in the start menu

WSA Helper An application that allows you to manager WSA's icons in start menus

LSPosed 142 Dec 24, 2022
Navigation Component: THE BEST WAY to create navigation flows for your app

LIVE #017 - Navigation Component: A MELHOR FORMA de criar fluxos de navegação para o seu app! Código fonte do projeto criado na live #017, ensinando c

Kaique Ocanha 4 Jun 15, 2022
Alligator is a modern Android navigation library that will help to organize your navigation code in clean and testable way.

Alligator Alligator is a modern Android navigation library that will help to organize your navigation code in clean and testable way. Features Any app

Artur Artikov 290 Dec 9, 2022