How to create vertical BottomNavigationView android?

Question

I have an activity that have 4 fragment on top and BottomNavigationView with 4 items on bottom. It is working fine in mobile devices. When i go for tablet with LANDASCAPE i want to move that BottomNavigationView to left of the activity with vertical orientation like below.

Is this achievable using BottomNavigationView or should I go for NavigationMenu android.

with bottomNavigationMenu, you can't achieve this, however you can try this : https://stackoverflow.com/a/29809691/5479863 — Abdul Aziz, Jan 17 '19 at 10:14
You can customize `NavigationView` in `DrawerLayout` to have such UI. — Jeel Vankhede, Jan 24 '19 at 05:56

score 6 · Answer 1 · edited Jan 23 '19 at 04:32

Well i managed to do it, what you want with BottomNavigationView, by some tweaking in orientation change and moving some views. Firstly for tap into orientation change i added this to Activity tag in AndroidManifest

android:configChanges="orientation|screenSize"

and in my Activity i added following

 @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        if (newConfig.orientation == Configuration.ORIENTATION_LANDSCAPE) {
            Toast.makeText(this, "landscape", Toast.LENGTH_SHORT).show();
            BottomNavigationView navigation= (BottomNavigationView) findViewById(R.id.navigation);
            navigation.setRotation(90f);
            navigation.getLayoutParams().width=480;
            navigation.requestLayout();
            navigation.setY(600f);
            navigation.setX(-435f);
           // navigation.requestLayout();
            BottomNavigationMenuView menuView = (BottomNavigationMenuView) navigation.getChildAt(0);
            for (int i = 0; i < menuView.getChildCount(); i++) {
                final View iconView = menuView.getChildAt(i);
                iconView.setRotation(-90f);
            }
        } else if (newConfig.orientation == Configuration.ORIENTATION_PORTRAIT){
            recreate();
        }
    }

and my XML is

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginBottom="8dp"
        android:text="@string/title_home"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="0dp"
        android:layout_marginEnd="0dp"
        android:background="?android:attr/windowBackground"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/navigation" />

</android.support.constraint.ConstraintLayout>

Definitely, you have to change navigation.getLayoutParams().width, setX and setY according to your phone needs. You can create a function to calculate the position. Sorry its 10:30 in the day and was coding all night so going for rest, so couldn't write that function. But i would write that function if you want. Its what i got working for my phone Vivo Y51L, you can have look at screenshots.

Screenshots

score 1 · Answer 2 · answered Jan 17 '19 at 11:31

1

Since you can't customize BottomNavigation to be used in a vertical how it's wanted from you.. I would recommend (if you still haven't managed to fix it) switching to this library : SideMenu-Android Or you can create a customized Navigation Drawer.

answered Jan 17 '19 at 11:31

Elio Lako

1,333
2
16
26

score 0 · Answer 3 · edited Jan 24 '19 at 07:17

0

   <item 
    android:id="@+id/text"
    android:title="@string/about"
    android:icon="@android:drawable/ic_menu_info_details"
    app:showAsAction="never"/>

Put app:showAsAction="never" in evey menu item and try...

edited Jan 24 '19 at 07:17

Noordeen

1,547
20
26

answered Mar 12 '18 at 12:05

I have updated my question. Toolbar menu is not my issue. I want my Bottom Navigation View should move to the left of the activity as in the above image only for Tablet - Landscape mode – Anbarasu Chinna Mar 12 '18 at 12:36
Not yet solved. Just used bottom navigation for both Mobile and Tablet. – Anbarasu Chinna Jan 17 '19 at 13:18

score 0 · Answer 4 · answered Jan 22 '19 at 12:21

i am afraid that BottomNavigationView only handles bottom of the page navigation you should create your own custom drawer or use one of the menus in this link further more if these didn't help you could see this documentation on how to handle different layouts

hope this helps

score 0 · Answer 5 · answered Jan 24 '19 at 09:28

You cant move the BottomNavigationView to left area of the layout.

BottomNavigationView does not meet tablet material design specification

The only way is You need to check the screen orientation on the start like

if (islandcape()){

//Create the Navigation view layout here.. 

}else{

//Create the BottomNavigationView layout here .. 

}

Note: You need to write a function to check the orientation and replace the islandcape() in the above code

Also try the bellow library that will do the job neatly.

Iiro Krankka https://github.com/roughike/BottomBar

How to create vertical BottomNavigationView android?

5 Answers5

Linked