Toolbar buttons don't respond to touch when a Navigation Drawer is open

Question

I'm working on a material design version of my app using the appcompat v7 libraries, and I've hit an issue with the navigation drawer. When it opens, buttons in the material design toolbar cease to function - any touch outside the navigation drawer just closes the drawer. A following is a gif of what I mean

the gif http://images.rymate.co.uk/images/83JXi1X.png

Here is the xml layout I'm using for the activity:

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- The main content view -->
    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.Toolbar
            android:id="@+id/action_toolbar"
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:minHeight="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            android:elevation="4dp"
            />

        <FrameLayout
            android:id="@+id/note_list_container"
            android:layout_marginTop="?attr/actionBarSize"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <net.rymate.notes.ui.FloatingActionButton
            android:id="@+id/fabbutton"
            android:layout_width="72dp"
            android:layout_height="72dp"
            android:layout_gravity="bottom|right"
            android:layout_marginBottom="16dp"
            android:layout_marginRight="16dp" />
    </FrameLayout>
    <!-- The navigation drawer -->
    <LinearLayout
        android:id="@+id/left_drawer"
        android:layout_width="300dp"
        android:layout_marginTop="?attr/actionBarSize"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:orientation="vertical">

        <ListView
            android:id="@+id/cat_list"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:choiceMode="singleChoice"
            android:divider="@android:color/transparent"
            android:dividerHeight="0dp"
            android:background="?catBackColour" />
    </LinearLayout>

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

And here is the onCreate code that initialises the drawer and the toolbar.

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    ROBOTO_LIGHT = Typeface.createFromAsset(this.getAssets(), "Roboto-Light.ttf");
    ROBOTO_LIGHT_ITALICS = Typeface.createFromAsset(this.getAssets(), "Roboto-LightItalic.ttf");

    setContentView(R.layout.activity_notes);

    if (findViewById(R.id.note_container) != null) {
        // The detail container view will be present only in the
        // large-screen layouts (res/values-large and
        // res/values-sw600dp). If this view is present, then the
        // activity should be in two-pane mode.
        mTwoPane = true;

        // In two-pane mode, list items should be given the
        // 'activated' state when touched.
        FragmentManager fm = getSupportFragmentManager();
        //list.setActivateOnItemClick(true);
    }


    if (!mTwoPane) {
        final FloatingActionButton mFab = (FloatingActionButton) findViewById(R.id.fabbutton);
        mFab.init(Color.parseColor("#1e90ff"));
        mFab.setFabDrawable(getResources().getDrawable(R.drawable.ic_action_new));
        mFab.showFab();

        mFab.setOnClickListener(this);

        list = new NotesListFragment(mFab);
    } else {
        list = new NotesListFragment();
    }


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

    getSupportFragmentManager().beginTransaction()
            .replace(R.id.note_list_container, list)
            .commit();

    mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout); // the layout
    mDrawerLinear = (LinearLayout) findViewById(R.id.left_drawer);

    mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow, GravityCompat.START);

    getSupportActionBar().setDisplayHomeAsUpEnabled(true);

    getSupportActionBar().setHomeButtonEnabled(true);

    mDrawerLayout.setScrimColor(getResources().getColor(android.R.color.transparent));

    mDrawerToggle = new ActionBarDrawerToggle(
            this,                  /* host Activity */
            mDrawerLayout,         /* DrawerLayout object */
            toolbar,  /* toolbar */
            R.string.drawer_open,  /* "open drawer" description */
            R.string.drawer_close  /* "close drawer" description */
    ) {

        /** Called when a drawer has settled in a completely closed state. */
        public void onDrawerClosed(View view) {
            getSupportActionBar().setTitle("Rymate Notes");
            supportInvalidateOptionsMenu();
        }

        /** Called when a drawer has settled in a completely open state. */
        public void onDrawerOpened(View drawerView) {
            getSupportActionBar().setTitle("Categories");
            supportInvalidateOptionsMenu();
        }
    };

    // Set the drawer toggle as the DrawerListener
    mDrawerLayout.setDrawerListener(mDrawerToggle);

    pref = getSharedPreferences("rymatenotesprefs", MODE_PRIVATE);

    mDrawerList = (ListView) findViewById(R.id.cat_list);

    mDrawerList.setOnItemClickListener(new DrawerItemClickListener());

    mDbHelper = new NotesDbAdapter(this);
    mDbHelper.open();

    if (mDbHelper.fetchAllNotes().getCount() == 0) {
        IntroFragment fragment = new IntroFragment();
        getSupportFragmentManager().beginTransaction()
                .replace(R.id.note_list_container, fragment)
                .commit();

    }

    getCategories(); // calls a function which populates the listview

}

Is there a way to possibly fix this?

Answer 1

Seems that touch event is stolen by the shadow of the drawer, ie DrawerLayout keeps intercepting the touch events, because Toolbar is part of the content view, unlike the ActionBar being on top of the decor view.

Possible work around is intercepting the touch event:

If it s between 0 (top) and Toolbar height (bottom), dispatch the event directly to the Toolbar object. Otherwise keep the normal behaviour.

Is same case for drawer toggle clicks?

Answer 2

Turns out Nikola Despotoski had the right idea - the touch event was stolen by the DrawerLayout. However instead of intercepting the touch event I just adjusted the activity layout like so:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <android.support.v7.widget.Toolbar
        android:id="@+id/action_toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:elevation="4dp"
        android:minHeight="?attr/actionBarSize"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="?attr/actionBarSize" >

        <!-- The main content view -->
        <FrameLayout
            android:id="@+id/container"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <FrameLayout
                android:id="@+id/note_list_container"
                android:layout_width="match_parent"
                android:layout_height="match_parent"/>

            <net.rymate.notes.ui.FloatingActionButton
                android:id="@+id/fabbutton"
                android:layout_width="72dp"
                android:layout_height="72dp"
                android:layout_gravity="bottom|right"
                android:layout_marginBottom="16dp"
                android:layout_marginRight="16dp" />
        </FrameLayout>
        <!-- The navigation drawer -->
        <LinearLayout
            android:id="@+id/left_drawer"
            android:layout_width="300dp"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:orientation="vertical">

            <ListView
                android:id="@+id/cat_list"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="?catBackColour"
                android:choiceMode="singleChoice"
                android:divider="@android:color/transparent"
                android:dividerHeight="0dp" />
        </LinearLayout>

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

This has the intended effect of allowing touch events to be registered by the Toolbar rather than the DrawerLayout.