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
3 Answers
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.
-
Nice work, can you add the white background when the icon is selected like in the design? Mar 16, 2021 at 16:47
-
-
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
-
1yes, 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
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]
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.
-
Thanks, but I already know those. But the new position of the selected icon, and the background. ??? Feb 25, 2020 at 5:40