Add image to location where user click on Layout

Question

I am trying to add image to the point (X,Y) on Layout i have created dynamicaly.

I want to add the imageview on exact user clicked location. But the image is not placed on correct location when clicked.

here is my code

 final LinearLayout layoutColumnBoxes = new LinearLayout(getParent());
                    layoutColumnBoxes.setBackgroundColor(Color.GREEN);
                    layoutColumnBoxes.setId(counterIdForBoxes);
                    layoutColumnBoxes.setLayoutParams(layoutParamsColumns);

 layoutColumnBoxes.setOnTouchListener(new View.OnTouchListener() {
                    @Override
                    public boolean onTouch(View v, MotionEvent event) {
                        Toast.makeText(getParent(),"Event="+event.getX()+"Event Y = "+event.getY(),Toast.LENGTH_SHORT).show();

                        return false;
                    }
                });
            layoutColumnBoxes.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    ImageView imageView = new ImageView(getParent());
                    imageView.setImageResource(R.drawable.crack);
                    LinearLayout lay = (LinearLayout) view.findViewById(v.getId());
                    lay.addView(imageView);
        //            Toast.makeText(getParent(),"Clicked View Id is="+v.getId(),Toast.LENGTH_SHORT).show();
                }
            });

Please help.

Possible Solution: [Click here for question][1] [1]: http://stackoverflow.com/questions/9050996/android-drawing-bitmap-in-specific-location-refusal-to-draw — Mohit, Dec 22 '14 at 14:38
I am able to see the imageview . I want to add image on clicked location. Every time user click on layout new image will be added and the old will remain at that location — Android worker, Dec 23 '14 at 07:05

score 2 · Answer 1 · edited May 05 '19 at 12:40

2

See I know what you're trying to say cause I too had this problem a few months back when developing an application. When you click a point on the screen the position of the imageview is not close to the way you clicked it right?

the things I did were
1) remove the excess space around your image.

enter image description here

This is optional. The only reason I stated this was because it depends on the type of image in your image view cause later you will be placing the image based on the top left corner of the imageview.

2) if your loading the images from the drawable folder make sure that you have the right size image in the right folder. This is IMPORTANT. if you screw up the sizes, android is going to alter the size and location of your images based on when your touch is based on the screen.

3) you need to set the margins of your image view properly. After hours of googling I came up with the following
first you'll need to get half the height and width of your imageview, use imageview.getMeasuredHeight() / 2 and imageview.getMeasuredWidth() / 2 (Call these imgH and imgW respectively for explanation purposes)
the later in your OnTouchListener you'll have to set the top left margin of your imageview (the methods vary on the type of layout you use). This is done by setting the top margin at "event.getY - imgH" and the left margin at "event.getX - imgW"

I have an app in the playstore which uses this feature, you can check it here .

I hope this has solved your problem :) if it hasn't then don't hesitate to speak your doubts.

edited May 05 '19 at 12:40

recnac

3,744
6
24
46

answered Dec 22 '14 at 18:22

Clinton Dsouza

330
4
20

I understood your logic . Can you please share some piece of code? – Android worker Dec 23 '14 at 06:33
@AndroidWorker what layout are you using?? – Clinton Dsouza Dec 23 '14 at 10:44
Linear Layout on as parent . than relative layouts as its child with equal height and width. When user clicks on relative layout it adds the imageview in it. Everything is working fine now. Just one thing left On corner of layout the image gets small . – Android worker Dec 23 '14 at 10:53
only at the corners? if that is so then im pretty sure android is messing up the sizing of the images. Did u put the right size drawables in the right folders? – Clinton Dsouza Dec 23 '14 at 10:57
Let me try it with different slices. – Android worker Dec 23 '14 at 10:58
Added slices. Here what i am doing here. newparams = new RelativeLayout.LayoutParams(60, 60); newparams.setMargins((int) x-rl.getPaddingLeft(), (int) y-rl.getPaddingTop(), 0, 0); – Android worker Dec 23 '14 at 11:08
try this and tell me what happenes `newparams.setMargins((int) x-30, (int) y-30, 0, 0);` – Clinton Dsouza Dec 23 '14 at 11:11
Perfect now. I have two layouts (as square) side by side attached together, When i click at corner the image breaks. Is there any way to solve it? – Android worker Dec 23 '14 at 11:21
@androidworker i didnt get your issue could u please elaborate – Clinton Dsouza Dec 23 '14 at 11:37
i think its cause there's no space for the image at the corner. one way around this is so set a padding for your main layout so that you bring the content of your main layout a bit inwards from your actual screen corners – Clinton Dsouza Dec 23 '14 at 11:46
What should i do to make the image small if clicked on corner of layout instead of breaking the image? – Android worker Dec 23 '14 at 13:07
you could compare the touch locations to see if they are at the corners of the screen but then you would have to set a tolerance value cause clicking a particular pixel is impossible. in the sense if you click (0,0) it should react the same way if you lick (1,1) or (2,1).i hope u get what im saying.. btw did u try the padding solution? – Clinton Dsouza Dec 23 '14 at 13:56

mk72 · Accepted Answer · 2014-12-23T10:54:19.587

0

this code work for me:

public class MainActivity extends ActionBarActivity {
float x, y;
RelativeLayout rl;

@Override
protected void onCreate(Bundle savedInstanceState) {


    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    getActionBar().hide();
    rl = (RelativeLayout) findViewById(R.id.root_view);
    rl.setOnTouchListener(new View.OnTouchListener() {
        @Override
        public boolean onTouch(View view, MotionEvent motionEvent) {
            if (motionEvent.getAction() == MotionEvent.ACTION_DOWN) {
                // rl.removeView(iv);
                x = motionEvent.getX();
                y = motionEvent.getY();
                setImageLocation(x, y);
                //rl.addView(iv);
            }
            return false;
        }
    });


}

public void setImageLocation(float x, float y) {
    ImageView newImage;
    RelativeLayout.LayoutParams newparams;
    newparams = new RelativeLayout.LayoutParams(20, 20);
    newparams.setMargins((int) (x-rl.getPaddingLeft()), (int) (y-rl.getPaddingTop()), 0, 0);
    newImage = new ImageView(this);
    newImage.setLayoutParams(newparams);
    newImage.setImageResource(R.drawable.clock);
    rl.addView(newImage);


}

}

activity_main.xml layout only has one relativeLayout that has full screen size(match parent)

edited Dec 23 '14 at 10:54

answered Dec 22 '14 at 15:15

mk72

1,307
2
8
15

Your code works. But there is a problem that when i click again on the same layout it removes the old image and creates the new one. I also need my old images with new image. – Android worker Dec 23 '14 at 07:50
if (event.getAction() == MotionEvent.ACTION_DOWN) { ImageView imageView = new ImageView(getParent()); imageView.setImageResource(R.drawable.crack); RelativeLayout lay = (RelativeLayout) view.findViewById(v.getId()); paramsss.setMargins((int) event.getX(), (int) event.getY(), 0, 0); imageView.setLayoutParams(paramsss); lay.addView(imageView); } return false; } }); – Android worker Dec 23 '14 at 07:55
Still the same issue. Might be due to margins we are setting on imageview. – Android worker Dec 23 '14 at 09:49
Checked it again on seperate layout. Working perfect there. Finding problem in my code now – Android worker Dec 23 '14 at 10:31
please post your xml layout – mk72 Dec 23 '14 at 10:32
change the setMargin method with this:newparams.setMargins((int) (x-rl.getPaddingLeft()), (int) (y-rl.getPaddingTop()), 0, 0); – mk72 Dec 23 '14 at 10:52
It is working fine now on my own layout. Just a small problem i have layouts as square . When i click at corners the image sometimes not appears or gets small. Can you help me in this please? – Android worker Dec 23 '14 at 10:55
which corners? every 4 corners have this problem? – mk72 Dec 23 '14 at 10:59
it because of your image size. android scale down image size for show image in that small space. – mk72 Dec 23 '14 at 11:04
Cool. I am doing it like this you said newparams = new RelativeLayout.LayoutParams(60, 60); newparams.setMargins((int) x-rl.getPaddingLeft(), (int) y-rl.getPaddingTop(), 0, 0); The position is not that much accurate on fingure touch. Can i make it more accurate? – Android worker Dec 23 '14 at 11:09
do you want position of touch event be center of the image? (now it is left and top corner of image) – mk72 Dec 23 '14 at 11:12
Yes i want to center the image of image touch – Android worker Dec 23 '14 at 11:14
so change set margin method according to your image size for example if your image size is (40,40) your set margin will be : newparams.setMargins((int) (x-rl.getPaddingLeft()-20), (int) (y-rl.getPaddingTop()-20), 0, 0); – mk72 Dec 23 '14 at 11:18
This worked perfect newparams.setMargins((int) x-30, (int) y-30, 0, 0);. I have two layouts (as square) side by side attached together, When i click at corner the image breaks. Is there any way to solve it? – Android worker Dec 23 '14 at 11:25
at corners there is no enough space to show image correctly. do u want show image smaller? or show image in other spaces like below of position of touch event for top corners ? – mk72 Dec 23 '14 at 11:30
i want to avoid breaking of image at corners, It should be places on both layouts if click on corner – Android worker Dec 23 '14 at 11:51

Add image to location where user click on Layout

2 Answers2