Android Drag and drop images on the Screen?

Question

I m working on project user to move the image in one position to Another position on the screen. I have written a sample code to move the image but the problem here is if I move one image the neighbouring image also starts moving.. Here is the sample code.any one Idea of this.

Main.java

public class MainActivity extends Activity  {
   int windowwidth;
   int windowheight;    
   ImageView ima1,ima2;

   private android.widget.RelativeLayout.LayoutParams layoutParams ;
   // private android.widget.RelativeLayout.LayoutParams layoutParams ;
   //private android.widget.RelativeLayout.LayoutParams layoutParams ;           

     @Override
     public void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.main);

         windowwidth = getWindowManager().getDefaultDisplay().getWidth();
         windowheight = getWindowManager().getDefaultDisplay().getHeight();

         System.out.println("width" +windowwidth);
         System.out.println("height" +windowheight);             

         ima1 = (ImageView)findViewById(R.id.imageview1);
         ima1.setOnTouchListener(new View.OnTouchListener() {  

public boolean onTouch(View v, MotionEvent event) {
       layoutParams = (RelativeLayout.LayoutParams) ima1.getLayoutParams();

         switch(event.getAction())                   
            {
              case MotionEvent.ACTION_DOWN:                          
                    break;     

              case MotionEvent.ACTION_MOVE:
                    int x_cord = (int) event.getRawX();
                    int y_cord = (int) event.getRawY();

              System.out.println("value of x" +x_cord);
              System.out.println("value of y" +y_cord);           

                    if (x_cord > windowwidth) {
                        x_cord = windowwidth;
                       }
                    if (y_cord > windowheight) {
                        y_cord = windowheight;
                       }
             layoutParams.leftMargin = x_cord-25;
             layoutParams.topMargin = y_cord-25;
             //   layoutParams.rightMargin = x_cord-25;
             //   layoutParams.bottomMargin = y_cord-25;
             ima1.setLayoutParams(layoutParams);
                     break;
               default: break;
              }  
               return true;
            }
         });

         ima2 = (ImageView)findViewById(R.id.imageview2);
         ima2.setOnTouchListener(new View.OnTouchListener() {         

     public boolean onTouch(View v, MotionEvent event) {
         layoutParams = (RelativeLayout.LayoutParams) ima2.getLayoutParams();
              switch(event.getActionMasked())
                 {
                   case MotionEvent.ACTION_DOWN:
                       break;
                   case MotionEvent.ACTION_MOVE:
                       int x_cord = (int) event.getRawX();
                       int y_cord = (int) event.getRawY();

                       System.out.println("value of x1" +x_cord);
                   System.out.println("value of y1" +y_cord);                            

                        if (x_cord > windowwidth) {
                            x_cord = windowwidth;
                        }
                        if (y_cord > windowheight) {
                            y_cord = windowheight;
                        }
                        layoutParams.leftMargin = x_cord - 25;
                        layoutParams.topMargin = y_cord - 75;
                        ima2.setLayoutParams(layoutParams);
                        break;
                    default: break;
                }
                return true;
            }
        });
       }
   }

main.xml

  <?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">
  <ImageView 
    android:layout_width="100dp" 
    android:layout_height="100dp"
    android:id="@+id/imageview1" 
    android:src="@drawable/image1"  />    
<ImageView
    android:layout_width="100sp" 
    android:layout_height="100sp" 
    android:id="@+id/imageview2"
    android:src="@drawable/image2"   />             
 </RelativeLayout>

here is example http://polamreddyn.blogspot.in/2013/02/android-drag-and-drop-images-in-one.html — NagarjunaReddy, Feb 14 '13 at 09:20

Dipak Keshariya · Accepted Answer · 2012-06-14T08:46:29.397

Write Below Code into your Activity File.

windowwidth = getWindowManager().getDefaultDisplay().getWidth();
windowheight = getWindowManager().getDefaultDisplay().getHeight();


tv1 = (ImageView)findViewById(R.id.image);
tv1.setOnTouchListener(new View.OnTouchListener() {         

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        layoutParams1 = (RelativeLayout.LayoutParams) tv1.getLayoutParams();
        switch(event.getActionMasked())
        {
            case MotionEvent.ACTION_DOWN:
                break;
            case MotionEvent.ACTION_MOVE:
                int x_cord = (int) event.getRawX();
                int y_cord = (int) event.getRawY();
                if (x_cord > windowwidth) {
                    x_cord = windowwidth;
                }
                if (y_cord > windowheight) {
                    y_cord = windowheight;
                }
                layoutParams1.leftMargin = x_cord - 25;
                layoutParams1.topMargin = y_cord - 75;
                tv1.setLayoutParams(layoutParams1);
                break;
            default:
                break;
        }
        return true;
    }
});

tv2 = (ImageView)findViewById(R.id.image1);
tv2.setOnTouchListener(new View.OnTouchListener() {         

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        layoutParams2 = (RelativeLayout.LayoutParams) tv2.getLayoutParams();
        switch(event.getActionMasked())
        {
            case MotionEvent.ACTION_DOWN:
                break;
            case MotionEvent.ACTION_MOVE:
                int x_cord = (int) event.getRawX();
                int y_cord = (int) event.getRawY();
                if (x_cord > windowwidth) {
                    x_cord = windowwidth;
                }
                if (y_cord > windowheight) {
                    y_cord = windowheight;
                }
                layoutParams2.leftMargin = x_cord - 25;
                layoutParams2.topMargin = y_cord - 75;
                tv2.setLayoutParams(layoutParams2);
                break;
            default:
                break;
        }
        return true;
    }
});

XML File:-

<?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">
    <ImageView android:layout_width="50sp" android:layout_height="50sp"
        android:id="@+id/image" android:src="@drawable/image">
    </ImageView>
    <ImageView android:layout_y="30dip" android:layout_x="118dip"
        android:layout_width="50sp" android:layout_height="50sp" android:id="@+id/image1"
        android:src="@drawable/image1">
    </ImageView>
</RelativeLayout>

Please see my edited answer and use imageview instead of textview. — Dipak Keshariya, Jun 14 '12 at 08:46
use that one move only one image and move to some corners the size of the image is decrease and the second image is not possible to moving... — NagarjunaReddy, Jun 14 '12 at 09:03
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/12532/discussion-between-nagarjunareddy-and-dipak-keshariya) — NagarjunaReddy, Jun 14 '12 at 09:31
java.lang.RuntimeException: Unable to instantiate activity ComponentInfo{com.touchin/com.touchin.Main}: java.lang.InstantiationException: com.touchin.Main and Caused by: java.lang.InstantiationException: com.touchin.Main — NagarjunaReddy, Jun 14 '12 at 09:33
but this code is working for me, and please first clean your project and then run your project. — Dipak Keshariya, Jun 14 '12 at 09:35
but before some minutes you tell me, "use that one move only one image and move to some corners the size of the image is decrease and the second image is not possible to moving", so is it working that time? — Dipak Keshariya, Jun 14 '12 at 09:48
then problem is not in my code and if answer is helpful to you then accept it, so it may helpful to others. — Dipak Keshariya, Jun 14 '12 at 09:57
hi finally got it but image moving right and bottom edges image size will by decrease how to solve this — NagarjunaReddy, Jun 14 '12 at 11:33
@NagarjunaReddy how did you solve your problem? i am facing the same problem — Juned, Apr 24 '13 at 07:48
hello any one get solution!!!!!!! i m facing same problem on image move proper but another on move on one direction and also the size of image cange when i move it. — nilesh prajapati, Oct 13 '17 at 11:20

score 2 · Answer 2 · answered Jun 14 '12 at 06:59

2

That's because you have put everything in a LinearLayout, which means you can't place the items where you want them, they are always one after the other. You can try to use a RelativeLayout instead. If that is not flexible enough, you should look at Canvas.

answered Jun 14 '12 at 06:59

banzai86

727
1
5
13

Just to clarify, you have 3 images on a 'RelativeLayout' and you want to move them separately over the screen, and they should be able to overlap each other, right? – banzai86 Jun 14 '12 at 08:49
YES three images in layout move them separately over the screen – NagarjunaReddy Jun 14 '12 at 08:52
You kept your onTouch code and just replaced the LinearLayout with a RelativeLayout and still more then one image is moving or what is the problem at the moment? – banzai86 Jun 14 '12 at 08:58

score 0 · Answer 3 · answered Mar 19 '13 at 11:23

0

the reason is that: your screen upload action_move too lazily.

in normal case , action move is uploading very frequently even if your finger don't move on the screen. but some phone screens are not so sensitive.

you can modify the threshold of your phone. It needs kernel support.

answered Mar 19 '13 at 11:23

dragonfly

1,151
14
35

Dear this kind posting answer again is not allowed. I mean you are posting same answer with same content which is not allowed. – Paresh Mayani Mar 19 '13 at 11:43

score 0 · Answer 4 · answered Apr 08 '13 at 23:08

I took the liberty of alternating your code to manage multiple imageviews in a RelativeLayout and random places. Also I added a better way of getting the window size, since Display.getHeight() is deprecated.

    if(Build.VERSION.SDK_INT >= 13){
        android.graphics.Point p = new android.graphics.Point();
        this.getWindowManager().getDefaultDisplay().getSize(p); 
        width = p.x;
        height = p.y;
    }
    else{
        Display display = getWindowManager().getDefaultDisplay();
        width = display.getWidth();
        height = display.getHeight();
    }

    RelativeLayout rel = new RelativeLayout(this);
    rel.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)); 
    rel.setBackgroundResource(R.drawable.bg);

    pic = new ImageView[10];
    layoutParams1 = new LayoutParams[10];

    for(int i = 0; i < 10; i++){
        pic[i] = new ImageView(this);
        pic[i].setImageResource(R.drawable.img);  
        pic[i].setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));  
        pic[i].setAdjustViewBounds(true);  
        pic[i].setScaleType(ScaleType.FIT_XY);  
        pic[i].setMaxHeight(88);  
        pic[i].setMaxWidth(100);
        pic[i].setMinimumHeight(88);
        pic[i].setMinimumWidth(100);
        pic[i].setTag(i);
        int x = rand.nextInt(width);
        while(x > width - 88){
            x = rand.nextInt(width);
        }
        int y = rand.nextInt(height);
        while(y > height - 100){
            y = rand.nextInt(height);
        }
        layoutParams1[i] = (RelativeLayout.LayoutParams) pic[i].getLayoutParams();
        layoutParams1[i].leftMargin = x;
        layoutParams1[i].topMargin = y;
        pic[i].setLayoutParams(layoutParams1[i]);
        pic[i].setOnTouchListener(new View.OnTouchListener() {         

            @Override
            public boolean onTouch(View v, MotionEvent event) {
                int index = Integer.valueOf(v.getTag().toString());
                layoutParams1[index] = (RelativeLayout.LayoutParams) v.getLayoutParams();
                switch(event.getActionMasked())
                {
                    case MotionEvent.ACTION_DOWN:
                        break;
                    case MotionEvent.ACTION_MOVE:
                        int x_cord = (int) event.getRawX();
                        int y_cord = (int) event.getRawY();
                        if (x_cord > width) {
                            x_cord = width;
                        }
                        if (y_cord > height) {
                            y_cord = height;
                        }
                        layoutParams1[index].leftMargin = x_cord - 44;
                        layoutParams1[index].topMargin = y_cord - 50;
                        pic[index].setLayoutParams(layoutParams1[index]);
                        break;
                    default:
                        break;
                }
                return true;
            }
        });

        rel.addView(pic[i]);
    }


    setContentView(rel);

score 0 · Answer 5 · answered Aug 04 '14 at 06:37

Actually you can avoid this problem by declaring the images programmatically .

int id = getResources().getIdentifier("image1", "drawable", getPackageName());
ImageView imageView1 = new ImageView(this);
LinearLayout.LayoutParams vp = 
new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, 
                LayoutParams.WRAP_CONTENT);
imageView1.setLayoutParams(vp);        
imageView1.setImageResource(id);        
someLinearLayout.addView(imageView1); 

 int id = getResources().getIdentifier("image2", "drawable", getPackageName());
ImageView imageView2 = new ImageView(this);
LinearLayout.LayoutParams vp1 = 
new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, 
                LayoutParams.WRAP_CONTENT);
imageView2.setLayoutParams(vp1);        
imageView2.setImageResource(id);        
someLinearLayout.addView(imageView2);

and add touch events to the added imageviews

Android Drag and drop images on the Screen?

5 Answers5

Linked

Related