5

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 enter image description here

3 Answers 3

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: enter image description here

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.

6
  • Nice work, can you add the white background when the icon is selected like in the design? Mar 16, 2021 at 16:47
  • What do you mean by white background? Mar 16, 2021 at 17:34
  • Oh, do you mean the elevation bottom bar? It is there it's just that the contrast isn't great, because I changed the default background color of my app to be white, so it's barely visible. I'm going to change it back and replace the GIF, but this isn't a change in the navigation bar itself Mar 16, 2021 at 17:36
  • 1
    yes, the elevated bottom bar still have a sort of background Mar 16, 2021 at 18:06
  • It's an extension to the navigation bar from material.io so it does have a background by default. I've updated the gif to one with a higher contrast background (#f3f3f3) Mar 17, 2021 at 7:26
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]
-1

You can do this by using a selector. For this you need two separate images: 1) when state selected is true means your selected image 2) default means when no icon is selected.

XML

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true"
          android:drawable="@drawable/YOUR SELECTED IMAGE">

    </item>
    <item android:drawable="@drawable/YOUR DEFAULT IMAGE"></item>

</selector>

Then use this selector as a drawable for each image icon for the bottom navigation view. You can add other attributes in selector a/c to your requirements.

1
  • Thanks, but I already know those. But the new position of the selected icon, and the background. ??? Feb 25, 2020 at 5:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.