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]