bottomNavigationView destinations can be positioned horizontally instead of stacked

user_8288148 0
Viewed 1180

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.

enter image description here And when I rotate to landscape, text and icons should appear horizontally like this. enter image description here 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!

bottomnavigationview material-design landscape android
1 Answers

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!

user_100231600
Related