Android: Solution for Custom Navigation Drawer not responding to Click

This post is about to solve and share the issue of navigation drawer when there is no action of the items of the list view.

Why the navigation drawer is not responding to the click's ? 

First we should know few information of navigation drawer.

What is Navigation Drawer? How to customize it? and lot more…

What is Navigation Drawer?

The navigation drawer is a panel that displays the app’s main navigation options on the left edge of the screen. It is hidden most of the time, but is revealed when the user swipes a finger from the left edge of the screen or, while at the top level of the app, the user touches the app icon in the action bar.

To add a navigation drawer, declare your user interface with a DrawerLayout object as the root view of your layout. Inside the DrawerLayout, add one view that contains the main content for the screen (your primary layout when the drawer is hidden) and another view that contains the contents of the navigation drawer.

What is DrawerLayout?

DrawerLayout acts as a top-level container for window content that allows for interactive "drawer" views to be pulled out from the edge of the window.

How to customize the navigation drawer?

Since the drawer layout adds only two views, and one view contains content of the screen and other view contains the navigation drawer content. So, we can use only two views in customization also.

Foe Eg: android example looks like this.

    xmlns:android="http://schemas.android.com/apk/res/android"

    android:id="@+id/drawer_layout"

    android:layout_width="match_parent"

    android:layout_height="match_parent">

   

   

        android:id="@+id/content_frame"

        android:layout_width="match_parent"

        android:layout_height="match_parent" />

   

    android:id="@+id/left_drawer"

        android:layout_width="240dp"

        android:layout_height="match_parent"

        android:layout_gravity="start"

        android:choiceMode="singleChoice"

        android:divider="@android:color/transparent"

        android:dividerHeight="0dp"

        android:background="#111"/>

Customization example follows as:

    xmlns:android="http://schemas.android.com/apk/res/android"

    android:id="@+id/drawer_layout"

    android:layout_width="match_parent"

    android:layout_height="match_parent">

   

   

        android:id="@+id/content_frame"

        android:layout_width="match_parent"

        android:layout_height="match_parent" />

    <!-- The navigation drawer →

<LinearLayout android:id="@+id/drawer_view"

              android:layout_width="match_parent"

              android:layout_height="match_parent"

              android:layout_gravity="start"

              android:background="@android:color/white"

              android:orientation="vertical" >

                android:id="@+id/left_drawer"

                    android:layout_width="240dp"

                    android:layout_height="match_parent"

                    android:layout_gravity="start"

                    android:choiceMode="singleChoice"

                    android:divider="@android:color/transparent"

                    android:dividerHeight="0dp"

                    android:background="#111"/>

</LinearLayout>

When we try to use the custom navigation drawer, there is scope where your navigation drawer linear layout change the view not being front, even the view is shown as front, we can call as Z ordering.

What is Z order?

The views are added in the group, should be order in the tree.

This scenario we can face in android 2.3 versions (gingerbread) when we scroll navigation drawer, then we won’t have action on list view of the navigation drawer. 

Finally we came to the issue what we are discussing about while start of the post, let’s look how to solve the issue below.

Issue is regarding the Z order of the view.

Then How to solve this Z order 

We should know about the bringToFront() method of View Class. Which solves our problem.

Know, we will use the above method in the scroll listener of list view, by calling the bringToFront() of the list and then requestLayout() of the drawer when the scroll states  is idle as shows

mDrawerList.setOnScrollListener(new OnScrollListener() {

           

            @Override

           public void onScrollStateChanged(AbsListView view, int scrollState) {

                       if (scrollState == SCROLL_STATE_IDLE) {

                                 mDrawerList.bringToFront();

                                    mDrawerLayout.requestLayout();

                        }               

            }

           

            @Override

            public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {

      }

});

Issue is fixed...

Hope you have enjoyed by reading post... 

Improvements

If you want to see an example of customizing navigation drawer then, see Custom Navigation Drawer This example supports from API levels.

Whether this post is helpful?

Have something to add to this post? If you have any other quick thoughts/hints that you think people will find useful? Share it in the comments.