10clouds / fluidbottomnavigation-android

Fluid Bottom Navigation library for Android

Fluid Bottom Navigation

Sample

Installation

Use the JitPack package repository.

Add jitpack.io repository to your root build.gradle file:

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

Next add library to your project build.gradle file: Gradle:

implementation 'com.github.10clouds:FluidBottomNavigation-android:{last_release_version}'

Usage

Place FluidBottomNavigation in your layout:

<com.tenclouds.fluidbottomnavigation.FluidBottomNavigation
            android:id="@+id/fluidBottomNavigation"
            android:layout_height="wrap_content"
            android:layout_width="0dp" />

then set navigation items to component:

fluidBottomNavigation.items =
                listOf(
                        FluidBottomNavigationItem(
                                getString(R.string.news),
                                ContextCompat.getDrawable(this, R.drawable.ic_news)),
                        FluidBottomNavigationItem(
                                getString(R.string.inbox),
                                ContextCompat.getDrawable(this, R.drawable.ic_inbox)),
                        FluidBottomNavigationItem(
                                getString(R.string.calendar),
                                ContextCompat.getDrawable(this, R.drawable.ic_calendar)),
                        FluidBottomNavigationItem(
                                getString(R.string.chat),
                                ContextCompat.getDrawable(this, R.drawable.ic_chat)),
                        FluidBottomNavigationItem(
                                getString(R.string.profile),
                                ContextCompat.getDrawable(this, R.drawable.ic_profile)))

Application with example is in app folder

Customization

You can customize component from XML layout file, using attributes:

app:accentColor="@color/accentColor"
app:backColor="@color/backColor"
app:iconColor="@color/iconColor"
app:iconSelectedColor="@color/iconSelectedColor"
app:textColor="@color/textColor"

or from Java/Kotlin code:

fluidBottomNavigation.accentColor = ContextCompat.getColor(this, R.color.accentColor)
fluidBottomNavigation.backColor = ContextCompat.getColor(this, R.color.backColor)
fluidBottomNavigation.textColor = ContextCompat.getColor(this, R.color.textColor)
fluidBottomNavigation.iconColor = ContextCompat.getColor(this, R.color.iconColor)
fluidBottomNavigation.iconSelectedColor = ContextCompat.getColor(this, R.color.iconSelectedColor)

---

Library made by Jakub Jodełka

fluidbottomnavigation-android's Issues

latest android studio

since android studio's new version (electric eel) came,it's build structure has been changed and now it doesn't show the option of root build.gradle

Icon stays at the top position after fast, random clicks on the bottom bar

Device: OnePlus 3T
System: 8.0.0

PS. Checked with the newest version from 6d190a7

programmatically set selected item

Hi
I need to set one of the items as default selected when the view is shown and I need to change selected item inside code.
How do I programmatically set selected item ?

Icon is too small, and can't set icon size

first selecting icon will hide when i click another select icon on android 5.0

first selecting icon will hide when i click another select icon on android 5.0
please fix this

Onclik not add in perticuler position

Onclik not add in perticuler position

FluidBottomNavigation-android does not support androidx

Is there any way to use this with androidx integration?

How to use listener from tab change

Gradle fail

I tried to add the library to my project:

my gradle file is like that:

` apply plugin: 'com.android.application'

android {
	compileSdkVersion 27
	defaultConfig {
		applicationId "com.package.myAppname"
		minSdkVersion 15
		targetSdkVersion 27
		versionCode 1
		versionName "1.0"
		testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
	}
	buildTypes {
		release {
			minifyEnabled false
			proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
		}
	}
}

dependencies {
	implementation fileTree(dir: 'libs', include: ['*.jar'])
	implementation 'com.android.support:appcompat-v7:27.1.1'
	implementation 'com.android.support.constraint:constraint-layout:1.1.3'
	implementation 'com.tenclouds.fluidbottomnavigation:fluid-bottom-navigation:1.1'
	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'

}

`

but I have this message:
Failed to resolve: com.tenclouds

Any suggestion ?

Changes Fragment on Menu Item

On click on Navigation item, there is no option to change fragment in window?

Keep title when selecting tabs

Hi there, I was testing your library and really like it. I was just wondering if there's a way to have an attribute for keeping titles visible by default while navigating through tabs. I'd really appreciate it. Thanks in advance for any response!

Support for java

Can this library support with java?
or
Is any separate java lib available?

Cannot change Bottom Navigation Height

Bottom Navigation is too small. Cannot change its height.

I've tried changing the properties:
android:layout_height="wrap_content"
and this one as well:
app:height="67dp"

Also tried changing icon size but no effect.

Back Color Not Change Issue resolve after some changes in FluidBottomNavigation class

@10clouds

There is one method name drawItemView in FluidBottomNavigation class. Just add below code.

with(backgroundContainer){
                setBackgroundColor(backColor)
            }

can we use it with Nav controller ?

val navView: BottomNavigationView = findViewById(R.id.nav_view)

val navController = findNavController(R.id.nav_host_fragment)

navView.setupWithNavController(navController)

Can we use it in this way ?

Hello, may i have pure java

setIconSelectedColor is not working

I have successfully integrated this library into my Android(Java) application and now I want to change the color of the icon upon selecting any tab. By far I have done this but it's not working:

fluidBottomNavigation.setOnTabSelectedListener(
                new OnTabSelectedListener() {
                    @Override
                    public void onTabSelected(int i) {
                        Fragment fragment = null;
                        switch (i) {
                            case 0:
                                fragment = new HomeFragment();
                                fluidBottomNavigation.setIconSelectedColor(R.drawable.ic_home_active);
                                break;
                            case 1:
                                fragment = new TicketsFragment();
                                fluidBottomNavigation.setIconSelectedColor(R.drawable.icon_tickects_active);
                                break;

                            case 2:
                                fluidBottomNavigation.setIconSelectedColor(R.drawable.icon_kanz_active);
                                fragment = new KanzFragment();
                                break;

                            case 3:
                                fluidBottomNavigation.setIconSelectedColor(R.drawable.icon_favorites_active);
                                fragment = new FavoriteFragment();
                                break;

                            case 4:
                                fluidBottomNavigation.setIconSelectedColor(R.drawable.icon_carts_active);
                                fragment = new CartFragment();
                                break;
                        }

                        //replacing the fragment
                        if (fragment != null) {
                            FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
                            ft.addToBackStack(null);
                            ft.replace(R.id.content_frame, fragment);
                            ft.commit();
                        }

                    }
                }
        );

```Been stuck on this for a while now.

shadow on top

by adding elevation, and stroke on "top" drawable , can u add better solution for shadow?

Warning from Android Studio,

I would love to be able to use it in an Android project but when compiling in Android Studio I got this Warning message:
"API 'variant.getJavaCompile()' is obsolete and has been replaced with 'variant.getJavaCompileProvider()' . It will be removed at the end of 2019"

Do you think you might upload a newer version? Cause if so I would be so grateful!
Thanks so much!

back color is not working

I am trying to change back color from white to some other color, its not working. Please check and let me know..

Notification count

Hi there, I was testing your library and really like it. I thought it might be a feature to add notification count. I really appreciate it. Thanks in advance for the reply!

How can i set notification badge icon.

how to make background transparent ?

How to make a situation where no tab is selected

Animation stuttering when switching between tabs fastly

Device: OnePlus 3T
System: 8.0.0 (reproducible on every emulator tested api 25,26,27)

Possible solution:
Deselect animation should start only after select animation or somehow blend animation to start from another state than selected/deselected

Change Animation

change animation if it's possible, changing select or deselect animation easily

How to use this library in android java application

I have imported this library and write down java code for fluidBottomNavigation. But it does not show in activity after the run.Below is my code.

fluidBottomNavigation = findViewById(R.id.fluidBottomNavigation);

    fluidBottomNavigation.setAccentColor(ContextCompat.getColor(this, R.color.colorPrimaryDark));
    fluidBottomNavigation.setBackColor(ContextCompat.getColor(this, R.color.colorPrimaryDark));
    fluidBottomNavigation.setTextColor(ContextCompat.getColor(this, R.color.colorPrimaryDark));
    fluidBottomNavigation.setIconColor(ContextCompat.getColor(this, R.color.colorPrimary));
    fluidBottomNavigation.setIconSelectedColor(ContextCompat.getColor(this, R.color.color_green));
    fluidBottomNavigationItems.add(new FluidBottomNavigationItem(
            getString(R.string.str_add_client),
            ContextCompat.getDrawable(this, R.drawable.ic_call)));

    fluidBottomNavigationItems.add(new FluidBottomNavigationItem(
            getString(R.string.str_add_client),
            ContextCompat.getDrawable(this, R.drawable.ic_about)));

    fluidBottomNavigationItems.add(new FluidBottomNavigationItem(
            getString(R.string.str_add_client),
            ContextCompat.getDrawable(this, R.drawable.ic_calendar)));

    fluidBottomNavigationItems.add(new FluidBottomNavigationItem(
            getString(R.string.str_add_client),
            ContextCompat.getDrawable(this, R.drawable.ic_change_password)));

    fluidBottomNavigationItems.add(new FluidBottomNavigationItem(
            getString(R.string.str_add_client),
            ContextCompat.getDrawable(this, R.drawable.ic_delete)));

Latest version

Can you add the latest version of the Bottom Navigation