How to put view over an image?

Question

I'm trying to make a clickable image, however there are many clickable spots over the image. I thought the best was to create a group of view's that would stay above the image and be clickable.

But I'm having trouble to place them on the right spot.

Does anyone have an idea in how to make this?

Post your layout xml code if possible – FoamyGuy May 12 '11 at 15:52 — FoamyGuy, May 12 '11 at 15:52

score 0 · Answer 1 · edited Apr 09 '18 at 16:31

0

Apply implement OnClickListener interface to it

ImageView imageView = (ImageView)findViewById(R.id.imageView);

imageView.setOnClickListener(new OnClickListener() {
    public void onClick(View arg0){     
        //YOUR CODE HERE
    }   
})

edited Apr 09 '18 at 16:31

Patrick

1,717
7
21
28

answered May 30 '13 at 05:29

Gaganpreet Singh

886
1
9
20

score 0 · Answer 2 · edited May 23 '17 at 10:34

0

you need to look into FrameLayout and Z order like the answer to this question here

hope this is what you're looking for!

edited May 23 '17 at 10:34

Community

1
1

answered May 12 '11 at 15:45

chris

1,172
12
15

I'm trying to use FrameLayout, but I can only see one view. I guess I need to pad it away so it doesn't undercover the following ones, I'm tryong this: `pc1.setPadding(100, 100, 0, 0); t.addView(pc2, new TableLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)); t.addView(pc1, new TableLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));` Not working so far :) – Gust May 12 '11 at 16:01

Ben Williams · Accepted Answer · 2011-05-12T16:42:53.390

Could you instead do something like

imageView.setOnTouchListener(new View.OnTouchListener()
{
  @Override
  public boolean onTouch(View v, MotionEvent event)
  {
    if (event.getAction() == MotionEvent.ACTION_DOWN)
    {
       // event.getX() and event.getY() give you the co-ordinate
       // of the touch, and from that you can work out which thing
       // has been touched and so what to do?
    }
  }
});

?

A stupid relativelayout example, positions three imageviews containing an icon over a TextView with lots of text in it:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent">
    <TextView android:id="@+id/textView1" android:text="TextView TextView TextView TextView TextView TextView TextView TextView TextView TextView TextView TextView TextView TextView TextView TextView TextView TextView TextView TextView TextView TextView TextView TextView TextView TextView TextView TextView " android:layout_alignParentTop="true" android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView>
    <ImageView android:id="@+id/imageView1" android:src="@drawable/icon" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true"></ImageView>
    <ImageView android:id="@+id/imageView2" android:src="@drawable/icon" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_marginLeft="10dp"></ImageView>
    <ImageView android:id="@+id/imageView3" android:src="@drawable/icon" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_marginLeft="25dp" android:layout_marginTop="35dp"></ImageView>    
</RelativeLayout>

Note that z-order is defined by order in the xml so the further down in the file something is, the higher it is in the display.

Indeed I can, I was trying to avoid that because I don't have only on image and this way will result in a much more code, but well, if there is no way it will have to do. I asked because there was a AbsoluteLayout before and something like that was what I'm looking for. — Gust, May 12 '11 at 16:14
Try using a RelativeLayout, set your things to align to the same top/left as the image, and then use padding/margins to move them into the right place? — Ben Williams, May 12 '11 at 16:31
(Added xml example to original answer in case that comment wasn't clear.) — Ben Williams, May 12 '11 at 16:43

How to put view over an image?

3 Answers3