Search code examples
javaandroiddrawerlayoutnavigation-drawer

Android navigation drawer does not close when click outside the drawer (a fragment in main activity)

For some reason, the navigation drawer does not close when tapping outside the drawer.Its another fragment with ListView in MainActivity:

enter image description here

When tapping the fragment on right it does not close drawer instead it acts like as if the fragment occupies the whole screen and the click listener is still active in the fragment.

activity_main.xml:

<RelativeLayout 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/main_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/holo_orange_dark"
    android:minHeight="?attr/actionBarSize"
    android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
    app:title="Apartment Guide"
    app:titleTextColor="@android:color/white" />

<android.support.v4.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:id="@+id/drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@+id/toolbar"
    tools:context=".MainActivity">

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="220dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@color/white"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/header"
        app:itemTextColor="@android:color/darker_gray"
        app:menu="@menu/drawer_menu" />

</android.support.v4.widget.DrawerLayout>

<FrameLayout
    android:id="@+id/fragment_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@+id/toolbar">

</FrameLayout>

MainActivity.java:

    @Override
protected void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    Toolbar toolbar = findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

    mDrawerLayout = findViewById(R.id.drawer);
    fragmentContent = findViewById(R.id.fragment_content);
    mToggle = new ActionBarDrawerToggle(this, mDrawerLayout, R.string.drawer_opened, R.string.drawer_closed) {
        @Override
        public void onDrawerOpened(View drawerView) {
            super.onDrawerOpened(drawerView);
            getSupportActionBar().setTitle(R.string.drawer_opened);
        }

        @Override
        public void onDrawerClosed(View drawerView) {
            super.onDrawerClosed(drawerView);
            getSupportActionBar().setTitle(R.string.drawer_closed);
        }

        @Override
        public void onDrawerSlide(View drawerView, float slideOffset) {
            super.onDrawerSlide(drawerView, slideOffset);
            fragmentContent.setTranslationX(slideOffset * drawerView.getWidth());
            mDrawerLayout.bringChildToFront(drawerView);
            mDrawerLayout.requestLayout();
        }
    };
    mToggle.getDrawerArrowDrawable().setColor(getResources().getColor(R.color.white));

    mDrawerLayout.addDrawerListener(mToggle);
    mToggle.syncState();
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);

    if (savedInstanceState == null)
        selectDrawerItem(null);

    NavigationView navigationView = findViewById(R.id.nav_view);
    navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
            selectDrawerItem(menuItem);
            return true;
        }
    });
}

Not sure where I'm doing wrong as closing drawer when tapping outside the drawer area should be the default behavior in drawerLayouts.

Solution

  • This happens because you NavigationDrawer is not capturing the view because the activity elements are not included in it, and to have it working properly, you have to make the NavigationDrawer is the main root of your Activity layout and the RelativeLayout is a child of it, like the following:

    <android.support.v4.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:id="@+id/drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@+id/toolbar"
    tools:context=".MainActivity">

    <RelativeLayout 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/main_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_orange_dark"
            android:minHeight="?attr/actionBarSize"
            android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
            app:title="Apartment Guide"
            app:titleTextColor="@android:color/white" />

        <FrameLayout
            android:id="@+id/fragment_content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@+id/toolbar">

        </FrameLayout>

    </RelativeLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="220dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@color/white"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/header"
        app:itemTextColor="@android:color/darker_gray"
        app:menu="@menu/drawer_menu" />

</android.support.v4.widget.DrawerLayout>