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.

score 2 · Answer 1 · answered Feb 22 '11 at 17:44

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.

answered Feb 22 '11 at 17:44

Romain Guy

97,993
18
219
200

Thank you for your answer but I don't understand it. What's the point of having a Translation animation if the user can't interact with it while running? The user needs to be able to tap on the imageview while it animates, not when it's over.Hmm... this means I need to implement my own animation system with View parameter changing on a timer? For such a basic thing ? What other solution there is for my situation ? – Alin Feb 22 '11 at 17:52
It seems worth noting that if you go with that approach (moving the View after the animation is done,) the bunny ImageView would not be clickable while it's animating. If the bunny ImageView is slowly creeping out from under the bush ImageView and the user should be able to click on it at any time, this won't suit your needs. – spaaarky21 May 02 '13 at 17:22

score 1 · Accepted Answer · edited May 23 '17 at 12:20

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?

edited May 23 '17 at 12:20

Community

1
1

answered Feb 22 '11 at 20:28

Lumis

21,517
8
63
67

Your example is very good. Thank you for that. I need to have more animations in different places of my layout, so I'll have more active custom views. In order to create them and show them properly I need to take care of their width/height. This is starting to get way too complicate. I will try to test your example and try to see if I can adapt it. – Alin Feb 23 '11 at 06:50
Also, I have posted a new question regarding what I need to do and probably both questions will have the same type of solution. Here it is http://stackoverflow.com/questions/5087926/animating-a-imageview-on-a-random-path-in-android But I've started to study SurfaceView as you said in your previous link and seems to fit my needs better. – Alin Feb 23 '11 at 10:30

FrameLayout onClick for overlapping images on Android

2 Answers2