Custom Drawer Layout - Click transparency

Question

I use the Drawer Layout in my project. I want to customize the Drawer like the Google+ Android App. Over the "main" ListView I've added a ImageView. That's work fine. The code is:

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

<FrameLayout
    android:id="@+id/content_frame"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

<RelativeLayout
    android:id="@+id/drawer_layout_relative"
    android:layout_width="240dp"
    android:layout_height="wrap_content"
    android:layout_gravity="start" >

    <ImageView
        android:id="@+id/drawer_header_image"
        android:layout_width="wrap_content"
        android:layout_height="85dp"
        android:src="@drawable/ic_logo_blue" />

    <ProgressBar
        android:id="@+id/drawer_progress"
        style="?android:attr/progressBarStyleLarge"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/drawer_header_image"
        android:background="#ffffffff" />

    <ListView
        android:id="@+id/drawer_listview"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_below="@id/drawer_progress"
        android:background="#ffffffff"
        android:choiceMode="singleChoice" />
</RelativeLayout>

When you click on one of the ListView-Items a fragment load into the FrameLayout. Thats work perfectly, too. But there is one problem. The ImageView is "clickable" too. So that, when the Drawer is open, an one will click on the ImageView the ListView (on the fragment) behind is clicked!! I don't want that. So I have try it with clickable:false on ImageView. Don't work...

For a little demo here is a video: http://www.vidup.de/v/Ao71r/

How can i make the imageview don't clickable?!

score 7 · Answer 1 · edited May 23 '17 at 12:07

In order to keep clicks from being passed through the drawer to the view behind it, you have to setClickable to true for the view in the drawer, specifically the parent view of all the other views you have in your drawer, so that it consumes all the touch events if none of its children consume them.

Change your RelativeLayout code for drawer_layout_relative to the following (NOTE: I added android:clickable="true" to the relative layout):

<RelativeLayout
    android:id="@+id/drawer_layout_relative"
    android:layout_width="240dp"
    android:clickable="true"
    android:layout_height="wrap_content"
    android:layout_gravity="start" >

By default, if a view does not handle any clicks, it lets the clicks go to the view behind it. You have an ImageView, a ProgressBar, and a ListView: The ListView handles click events, so it consumes any touches on it. The ProgressBar and ImageViews by default just display stuff and don't handle clicks to them, so the system just passes the click to the list that you have behind the drawer. Those three views are all inside a RelativeLayout. If we set that RelativeLayout to be clickable, it collects the click events that aren't handled by the ImageView and ProgressBar and it doesn't let the click events go to the view underneath it.

Think of android:clickable="true" as a way to block interaction with any view underneath the view you set this on.

For further explanation, please see this question

thank you. works perfect. But little curois that make a view clickable when we want "don't clickable" :) — StefMa, Mar 24 '14 at 18:01
If we make the whole drawer clickable, it keeps the views underneath the drawer from seeing any of the clicks. I updated my answer with more of an explanation, hopefully it helps make things a little clearer :) — anthonycr, Mar 24 '14 at 18:08

Custom Drawer Layout - Click transparency

1 Answers1