bottomNavigationView destinations can be positioned horizontally instead of stacked

Question

What I want to do is that BottomNavigation view in my Android project behaves like the IOS one. When I rotate Iphone to landscape, bar has less height and icons are on the side of the text.

When the mobile is in vertical position, text and icons should be stacked.

And when I rotate to landscape, text and icons should appear horizontally like this. Those pics are from material documentation: https://material.io/design/components/bottom-navigation.html#placement

But I can´t find how to do the second option when I rotate to landscape. Anyone knows?

Thanks!

Hsinking

hello! Did you find a solution? – Hurtado

You can find the feature request on GitHub: github.com/material-components/material-components-android/… – Planish

Hi! They decided to not implement this feature for the BottomNavigationView of material-components. Here is my assumption why (because it wasn't included in Material Design 3 guidelines) github.com/material-components/material-components-android/… And here answer from one of contributor with the confirmation github.com/material-components/material-components-android/…, after that he closed the issue. – Boole

Answer 1

I've solved it by creating custom layout. Example of item_bottom_navigation_bar.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:gravity="center"
    android:paddingTop="5dp">

    <ImageView
        android:id="@+id/icon"
        android:layout_margin="2dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

And then I've added it to each item of my BottomNavigationView:

LayoutInflater inflater = getLayoutInflater();
BottomNavigationMenuView navigationMenuView = (BottomNavigationMenuView) mBinding.bottomNavigation.getChildAt(0);
Menu menu = mBinding.bottomNavigation.getMenu();
for (int i = 0; i < menu.size(); i++) {
    BottomNavigationItemView view = (BottomNavigationItemView) navigationMenuView.getChildAt(i);
    View itemBottomNavigation = inflater.inflate(R.layout.item_bottom_navigation_bar, null, false);
    ((ImageView) itemBottomNavigation.findViewById(R.id.icon)).setImageDrawable(menu.getItem(i).getIcon());
    ((TextView) itemBottomNavigation.findViewById(R.id.title)).setText(menu.getItem(i).getTitle());
    view.removeAllViews();
    view.addView(itemBottomNavigation);
}

Where mBinding.bottomNavigation is your View (maybe findViewById(R.id.bottomNavigationView) )

I hope it's will help you!

Its

Does it behave like material bottom navigation? I mean, selection animation, etc – Hurtado

@Hurtado I don't think it will. Actually, Not with this much code. – Urba