FrameLayout onClick for overlapping images on Android

Question

First I thought that the problem will be very easy to solve, but it proved to be a challenge.

Scenario One FrameLayout and two ImageViews, one over the other. The first images has a Translate animation and a onClick event. Let's translate this in something practical: the Framelayout has one Rabbit image and a Bush image. The Rabbit has a translate animation so it moves out of the bush. As soon as the rabbit becomes visible, the user can tap on it. Unfortunately this does not work as intended. Even if the rabbit is not visible (being behind the bush) if the user taps on the bush, the click event of the rabbit fires. I tried to add onClick event (that doesn't do anything) for the bush image, but now only this one fires, and the rabbit ones doesn't.

Code

Animation

<?xml version="1.0" encoding="utf-8"?>
<translate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="0%"
    android:toXDelta="100%"
    android:fromYDelta="0%"
    android:toYDelta="0%"
    android:duration="25000"
    android:zAdjustment="top" />

Layout

 <?xml version="1.0" encoding="utf-8"?>
<FrameLayout  xmlns:android="http://schemas.android.com/apk/res/android"
              android:id="@+id/layBackground"
              android:orientation="horizontal"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"
              android:layout_weight="1"
              android:background="@drawable/someimage">

                       <ImageView android:id="@+id/imgAfterBush"
                                 android:layout_width="wrap_content"
                                 android:layout_height="wrap_content"
                                 android:layout_gravity="bottom|left"
                                 android:layout_marginLeft="50dip"
                                 android:onClick="imgAfterBushOnClick"/>

                      <ImageView android:id="@+id/imgBush"
                                 android:layout_width="wrap_content"
                                 android:layout_height="wrap_content"
                                 android:src="@drawable/bush"
                                 android:layout_gravity="bottom|left"
                                />
</FrameLayout>

I want the onClick event of the Rabbit image to fire only when it is visible. Any solutions ? Thank you.

Answer 1

It is not too difficult, however you need first to learn:

• creating custom views

• drawing on canvas

• animating images on canvas

• detecting on touch events

Here is a simple one for the start, which I did for a similar question: How can I use the animation framework inside the canvas?

Answer 2

Animations on Android < 3.0 only affect the rendering of a View: the view you animate is still at its original position. You need to move the View (by changing its layout parameters for instance) yourself when the animation is over.