Custom View Touch Events

Question

I'm trying to implement a custom view in which the user can draw with his finger. Basically, I'm following this tutorial .

Everything seems to be working nice, but, given the fact that I also have 2 buttons underneath the custom view like so:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/background_color"
    tools:context=".MainActivity" 
    android:id="@+id/mainScreen" >

    <Button
        android:id="@+id/buttonSave"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true"
        android:text="@string/save" />

    <Button
        android:id="@+id/buttonQuery"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:text="@string/query" />

    <com.example.myapp.DrawView
        android:id="@+id/drawView"
        android:background="@color/red"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_above="@id/buttonSave" />

</RelativeLayout>

it actually draws even underneath the buttons and I'm having a hard time understanding why it doesn't capture only the touch events that occur on the DrawView and not outside it. Basically, I can't start the line from above the buttons, but once I start drawing on my view, I can even extend the line outside of it.

As far as I can tell, the DrawView doesn't overflow beneath the buttons, as discussed here so I want to figure out what's going on. Do I really have to check if the events are out of bounds? Does it actually delegate all of the touch events to the currently focused view? Is there any way to change this behavior?

This simple tutorial doesn't have the described issue, but it draws point by point.

---

Update: Debugging the application, I determined that drawView has size 480x728, while mainScreen has 480x800, so they do not overlap. It continues to register touch events even if they are triggered outside of the drawView, once it has focus. This is what I'm trying to avoid and it would be nice to do it without passing the event coordinates through a big if statement...

Answer 1

If you don't want the buttons to overlap the DrawView then use a LinearLayout to keep all of the View s separate. At the moment, judging from the XML layout (and assuming there isn't anything funky going on with the layout programmatically in code), your buttons are overlapping the DrawView .

I'm under the impression you're after having the two buttons placed at the top side by side, with the DrawView filling the remaining screen area underneath. To do this, use an outer container LinearLayout with vertical orientation. The first child of it is another LinearLayout with horizontal orientation, containing the two buttons. The second child of the inner LinearLayout is the DrawView . Use width, height, and weight attributes to get desired dimensions. (Or, another way is to keep the XML layout structure you have, but set some top margin on the DrawView to equal the buttons' height, which could be fixed in the XML layout, or done programmatically.)

EDIT Sorry, I totally missed the layout_above attribute, which invalidates my second sentence. In that case, without being able to fire up Eclipse at the moment I'm not sure. Try the LinearLayout approach as suggested anyway.

Answer 2

This turned out to be some weird bug in the way the Android emulator displays the interface. It may do something similar on real devices (throwing touch events even outside of the listener view), but since it limits the display to the drawView , I can safely ignore them for my application, since I just need to extract the drawn shape from the drawView . It may cause big headaches in other applications, though...