Increase height of selected icon in navigation bottom view android when using custom icon?

Question

Please, I want to use custom icon for bottom navigation view in android like this. How to change icon position when selected? When they are selected they go up a bit. Do you create a selected icon with a certain margin or is there a way to set the height in android? This image is from a flutter library though. I want to reproduce that in an Android Java project. Or find a library that implement it

Answer 1

Inside your bottomNavigationView.setOnNavigationItemSelectedListener for each icon pressed call that animation method animateBottomIcon(int itemIndex, boolean isChecked).

    BottomNavigationView bottomNav;
    BottomNavigationMenuView menuView;

    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
      bottomNav.setClipChildren(false);
      bottomNav.setClipToPadding(false);
      bottomNav.setClipToOutline(false);
      menuView.setClipChildren(false);
    menuView = (BottomNavigationMenuView) bottomNav.getChildAt(0);
}

private void animateBottomIcon(int itemIndex, boolean isChecked) {
        final View view = menuView.getChildAt(itemIndex).findViewById(com.google.android.material.R.id.icon);
        ObjectAnimator translateUpAnimator = ObjectAnimator.ofFloat(view, "translationY",
                0,
                (float) (-(bottomNav.getHeight() / 2))).setDuration(500);
        if(!isChecked) {
            translateUpAnimator.start();
        }
        if(currentItemIndex != -1) {
            final View currentView = menuView.getChildAt(currentItemIndex).findViewById(com.google.android.material.R.id.icon);
            ObjectAnimator translateDownAnimator = ObjectAnimator.ofFloat(currentView, "translationY",
                    0,
                    (float) (-(bottomNav.getHeight() / 2))).setDuration(500);
            if (!isChecked) {
                translateDownAnimator.reverse();
            }
        }
    }

Usually the menu icon will be cut off by the BottomNavigation to avoid that use: android:clipChildren="false" on the root view of your layout, and in your java class, inside onCreateView():

bottomNav.setClipChildren(false); bottomNav.setClipToPadding(false); bottomNav.setClipToOutline(false);

and most importantly on your menuItem, because it's the parent of your icon items. menuView.setClipChildren(false);.

Remember to give your bottom navigation view a fixed height.

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottom_nav"
    android:layout_width="match_parent"
    android:layout_height="56dp"
    app:layout_constraintBottom_toBottomOf="parent"
    android:layout_gravity="bottom"
    android:background="@color/white"
    app:itemIconSize="54dp"
    app:elevation="12dp"
    app:labelVisibilityMode="unlabeled"
    app:menu="@menu/menu_bottom_nav">[![enter image description here][1]][1]

Answer 2

UPDATE: The library is live here https://github.com/Kwasow/BottomNavigationCircles-Android

I stumbled upon your question and created a custom android navigation bar inspired by the design.

The navigation bar looks like this:

The code for it is located here: https://github.com/Kwasow/Archipelago/blob/main/app/src/main/java/com/github/kwasow/archipelago/views/CustomBottomNavigation.kt

The bg_green_circle.xml drawable looks like this:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <size
        android:width="24dp"
        android:height="24dp"/>
    <solid android:color="#6CB86A"/>
</shape>

I might turn it into a package in the future, but it still requires some work. I'll update the post if it happens.