st235 / expandablebottombar

A new way to implement navigation in your app 🏎

ExpandableBottomBar

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 menu To access menu call bottomBar.menu on your navigation view

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

        menu.add(
            MenuItemDescriptor.Builder(
                this,
                R.id.icon_home,
                R.drawable.ic_home,
                R.string.text, 
                Color.GRAY
            )
                .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 menu = bottomBar.menu
    val notification = menu.findItemById(i.itemId).notification() // 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.

expandablebottombar's Issues

custom font support for text in bottom bar

it would be nice to have custom font support for text in bottom nav bar

how can i use onItemSelectedListener?

hi , i'm new in Kotlin. i use addItems but i don't know how use onItemSelectedListener. how can i connect my fragments? pls help

Increase Font Size

How Can You Increase font size?

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)

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" />`

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" />`

Back Stack maintain Without Recreating Fragment

Manifest merger failed with multiple errors, see logs

Manifest merger failed with multiple errors, see logs

app.gradle
apply plugin: 'com.android.application'

apply plugin: 'kotlin-android'

apply plugin: 'kotlin-android-extensions'

android {
compileSdkVersion 28
defaultConfig {
applicationId "com.psycho.expandablemenudemo"
minSdkVersion 19
targetSdkVersion 28
versionCode 1
versionName "1.0"
testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
}
}
}

dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation"org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
implementation 'com.android.support:appcompat-v7:28.0.0'
implementation 'com.android.support.constraint:constraint-layout:1.1.3'
implementation 'com.github.st235:expandablebottombar:0.8'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'com.android.support.test:runner:1.0.2'
androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
}

AndroidManifest.xml

<application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        tools:replace="android:appComponentFactory"
        android:theme="@style/AppTheme">
    <activity android:name=".MainActivity">
        <intent-filter>
            <action android:name="android.intent.action.MAIN"/>

            <category android:name="android.intent.category.LAUNCHER"/>
        </intent-filter>
    </activity>
</application>

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);
    }
}

}

How add badge for menu items?

How to add notification badge for menu items bottomNavigation.getOrCreateBadge(menuItemId)?

setting Font or typeface to title's

Thanks for the amazing library...
I wonder how to set my own type face to titles.

Runtime updation of MenuItem Values ?

Runtime updation of MenuItem Values ?

or invalidation of bottomBar

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?

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.

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

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

Can you make this library of JAVA language？

This library is really beautiful. I like it very much. Can you make a Java language of this library?

How am I supposed to integrate this project?

Where can I download it from? Where is it hosted?

The readme only contains an identifier and version number (implementation 'com.github.st235:expandablebottombar:0.4') but where is this downloaded from?

Could you add some instructions?

Hacktoberfest 2020

The annual Hacktoberfest is around the corner! Register on Hacktoberfest's website and open 4 pull requests during October 2020 to receive the swags (if you're the first 70,000 participants)!

Recently, we do not have opened issues, but there is a lot of space for fixing bugs, implementing new features and small refactorings.

Remarks

• Please observe Hacktoberfest's rules, terms and FAQ. If a pull request is marked invalid or spam it would not be counted and the person may be disqualified for the swags.
• Hacktoberfest 2020 is an event presented by DigitalOcean, Intel and DEV.

Failed to resolve:

Is this the latest release?
Failed to resolve: com.github.st235:expandablebottombar:1.4.2

ExpandableBottomBarNavigationUI navigation not working when onItemSelectedListener added

ExpandableBottomBarNavigationUI navigation not working when onItemSelectedListener added to disable notification when tab clicked

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.

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.

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

Is there a way to use this in a java project?

Default Item selection

Hey, thanks for this amazing library.
Can you please let me know how I can select the position by default instead of its always-on first position?

dynamic item control

Hello,
It would be great if we could dinamically add/remove or hide item after bottom bar init...

P.S or list getter/setter to manipulate manually.

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

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?

bottom bar has a peek height

White background under icon and title of item selected in a fragment layout

Hi, I have a question about using the BottomBar in a fragment, I tried both with my own icons and with those of the example app by creating the menu programmatically and I noticed the same problem, that is, that the background of the icons and titles appears differently white color, i.e. the icon and the title are "illuminated" by the color but this overlaps with the white

Screen

Activity

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

ExpandableBottomBarScrollableBehavior isn't working for me.

I've tried the ExpandableBottomBarScrollableBehavior but it didn't working for me even after applying each attributes.

Add the ability to vary the activeColor in an existing menu

For my project I would need the possibility to vary the activeColor, at the moment it is not possible as the field is a "val", perhaps others could also use it, is it possible as a modification?
Thank you very much rMarduk87

how to select menu item via position

in normal bottom navigation : selctedItemPostion(0)
so how to do in ExpandableBottomBar