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!

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!