How to make navigation drawer and bottom navigation with the same app?

Question

I'm trying to use navigation drawer and bottom bar nav in my app.therefore i have created navigation activity first.then i tried to add bottom bar nav to that same activity. I want to develop like this app:

without BottomNavigationView in Activity.xml,app is working.but when i add BottomNavigationView inside Activity.xml app crashed.nothing showing in logcat. how can i use both bottombar nav and navigation drawer in same activity,please give me an simple example? thx

Aliton Oliveira · Answer 1 · 2020-05-11T14:34:17.330

I am using Navigation Architecture Component following version:

def nav_version = "2.0.0"
implementation "androidx.navigation:navigation-fragment:$nav_version"
implementation "androidx.navigation:navigation-ui:$nav_version"

And below is a simple code to use BottomNavigation and Navigation Drawer

public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener {

    private static final String TAG = "debinf MainActivity";

    //public static final String FRAGMENT_KEY = "fragment";

    private BottomNavigationView bottomNavigationView;
    private NavigationView navigationView;
    private DrawerLayout drawerLayout;
    private NavController navController;

    private AppBarConfiguration appBarConfiguration;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Log.i(TAG, "onCreate: ");

        bottomNavigationView = (BottomNavigationView) findViewById(R.id.main_bottomnav);
        navigationView = (NavigationView) findViewById(R.id.main_sidebar);
        drawerLayout = (DrawerLayout) findViewById(R.id.main_drawer);

        setupNavigation();

    }

    private void setupNavigation() {
        Log.i(TAG, "setupNavigation: ");
        navController = Navigation.findNavController(this, R.id.main_fragment);

        appBarConfiguration =
                new AppBarConfiguration.Builder(navController.getGraph()) //Pass the ids of fragments from nav_graph which you dont want to show back button in toolbar
                        .setDrawerLayout(drawerLayout)
                        .build();

        NavigationUI.setupActionBarWithNavController(this, navController, appBarConfiguration); //Setup toolbar with back button and drawer icon according to appBarConfiguration
        NavigationUI.setupWithNavController(navigationView, navController);
        NavigationUI.setupWithNavController(bottomNavigationView, navController);
        /*
        ** Listener for bottomNavigation must be called after been setupWithNavController
        ** This command will override NavigationUI.setupWithNavController(bottomNavigationView, navController)
        ** and the automatic transaction between fragments is lost
        * */
        //bottomNavigationView.setOnNavigationItemSelectedListener(this);
        navigationView.setNavigationItemSelectedListener(this);

    }


    @Override
    public void onBackPressed() {
        Log.i(TAG, "onBackPressed: ");
        if (drawerLayout.isDrawerOpen(GravityCompat.START)) {
            Log.i(TAG, "onBackPressed: DRAWER IS OPEN -  CLOSING IT");
            drawerLayout.closeDrawer(GravityCompat.START);
        } else {
            super.onBackPressed();
        }

    }

    @Override
    public boolean onSupportNavigateUp() {
        Log.i(TAG, "onSupportNavigateUp: ");
        // replace navigation up button with nav drawer button when on start destination
        return NavigationUI.navigateUp(navController, appBarConfiguration) || super.onSupportNavigateUp();
    }


    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
        Log.i(TAG, "onNavigationItemSelected: SIDE BAR");
        if (drawerLayout.isDrawerOpen(GravityCompat.START)) {
            drawerLayout.closeDrawer(GravityCompat.START);
        }

        // https://stackoverflow.com/questions/55990820/how-to-use-navigation-drawer-and-bottom-navigation-simultaneously-navigation-a
        // https://stackoverflow.com/questions/58345696/how-to-use-android-navigation-component-bottomnavigationview-navigationview
        // https://stackoverflow.com/questions/55667686/how-to-coordinate-a-navigation-drawer-with-a-buttom-navigation-view
        // https://ux.stackexchange.com/questions/125627/is-it-okay-to-use-both-nav-drawer-and-bottom-nav-in-home-screen-of-an-android-ap?newreg=da5d1cea03db496982a00b256647728d
        if (menuItem.getItemId() == R.id.main_menusidehome) {
            Intent intent = new Intent(MainActivity.this, NotificationActivity.class);
            startActivity(intent);
            Log.i(TAG, "onNavigationItemSelected: conta");
        }
        if (menuItem.getItemId() == R.id.main_menusideshop) {
            Log.i(TAG, "onNavigationItemSelected: compra");
        }
        if (menuItem.getItemId() == R.id.main_menusidesearch) {
            Log.i(TAG, "onNavigationItemSelected: estatistica");
        }

        return true;
    }

}

And below is acitivity_main.xml :

<androidx.drawerlayout.widget.DrawerLayout
    android:id="@+id/main_drawer"
    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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <fragment
            android:id="@+id/main_fragment"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:name="androidx.navigation.fragment.NavHostFragment"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toTopOf="@id/main_bottomnav"
            app:defaultNavHost="true"
            app:navGraph="@navigation/mainnav_graph"/>

        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/main_bottomnav"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:menu="@menu/main_navmenu"
            android:background="@color/colorAccent"
            app:itemIconTint="@drawable/botton_item_color"
            app:itemTextColor="@drawable/botton_item_color">

        </com.google.android.material.bottomnavigation.BottomNavigationView>

    </androidx.constraintlayout.widget.ConstraintLayout>

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/main_sidebar"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:menu="@menu/main_sidebarmenu"/>

</androidx.drawerlayout.widget.DrawerLayout>

I hope it helps!

score 1 · Answer 2 · answered Jan 18 '22 at 10:04

If you using includes. Just wrap app bar include with bottom navigation in some layout. For example I'm using ConstraintLayout for most of time.

content_main

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/app_bar_main">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/view_pager_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

app_bar_main

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout         
    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:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/app_bar_layout_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/gradient_main"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <com.google.android.material.appbar.MaterialToolbar
            android:id="@+id/material_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:titleTextColor="@color/white" />

    </com.google.android.material.appbar.AppBarLayout>

    <include
        android:id="@+id/content_main_include"
        layout="@layout/content_main" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

activity_main

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout 
    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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.android.tool.ui.activty.main.MainActivity"
    tools:openDrawer="start">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <include
            android:id="@+id/app_bar_include"
            layout="@layout/app_bar_main"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottomNavigationView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"
            app:menu="@menu/menu_main" />

    </androidx.constraintlayout.widget.ConstraintLayout>

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/nav_header_example"
        app:menu="@menu/activity_main_drawer" />

</androidx.drawerlayout.widget.DrawerLayout>

That's all.

score 0 · Answer 3 · answered Dec 27 '18 at 07:26

Add a parent to <include ..../> then add BottomNavigationView

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >
     <include
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@color/colorPrimary"
        app:itemTextColor="@color/colorAccent"
        app:menu="@menu/bottom_navigation_menu"/>

</RelativeLayout>

Can anyone running this project smootly because I get error "An unexpected error has occurred" when I am running it. Note: No Found error when rebuild this project link: https://github.com/CopyAndPasteHub/Android/tree/master/Templates/BottomBarWithNavigationDrawer — IT Hoky88, Jan 17 '19 at 05:08

sajad zohrei · Answer 4 · 2018-12-27T07:53:12.813

Use TabLayout instead of bottom navigation TabLayout is better and easier

create root.xml

 <?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:id="@+id/drawerlayout"
    android:layout_height="match_parent">
    <include layout="@layout/activity_main"/>
    <include layout="@layout/navi_drawer"/>    
</android.support.v4.widget.DrawerLayout>

create navi_drawer

   <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="280dp"
        android:layout_height="match_parent"
        android:layout_gravity="right"
        android:background="?attr/navigationBackground"
        android:orientation="vertical">
    </LinearLayout>

and activity_main.xml

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="?attr/backgroundActivity"
    android:orientation="vertical">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

    </android.support.v4.view.ViewPager>


    <LinearLayout
        android:id="@+id/lnrTab"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layoutDirection="rtl"
        android:orientation="vertical"
        app:layout_anchor="@+id/viewpager"
        app:layout_anchorGravity="bottom|center">

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@color/dividers_color_dark"
            app:layout_anchor="@+id/viewpager"
            app:layout_anchorGravity="bottom|center" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:clipToPadding="false"
            app:tabBackground="?attr/backgroundTab"
            app:tabContentStart="9dp"
            app:tabGravity="fill"
            app:tabIndicatorColor="@color/colorAccent"
            app:tabIndicatorHeight="1dp"
            app:tabMode="scrollable" />
    </LinearLayout>


</LinearLayout>

then MainActivity

     @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.root);

            //config your TabLayout
    }

How to make navigation drawer and bottom navigation with the same app?

4 Answers4

Linked