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>

Solution 1

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>

Solution 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.

Comments

[Dipak Keshariya]

Please see my edited answer and use imageview instead of textview.

[banzai86]

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?

[NagarjunaReddy]

YES three images in layout move them separately over the screen

[banzai86]

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?

[NagarjunaReddy]

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...

[Dipak Keshariya]

Above Code is Move Both Images Independent.

[NagarjunaReddy]

let us continue this discussion in chat

[NagarjunaReddy]

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

[Dipak Keshariya]

but this code is working for me, and please first clean your project and then run your project.

[Dipak Keshariya]

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]

then problem is not in my code and if answer is helpful to you then accept it, so it may helpful to others.

[NagarjunaReddy]

hi finally got it but image moving right and bottom edges image size will by decrease how to solve this

[Dipak Keshariya]

sorry @NagarjunaReddy i don't know about this.

[Paresh Mayani]

Dear this kind posting answer again is not allowed. I mean you are posting same answer with same content which is not allowed.

[Juned]

@NagarjunaReddy how did you solve your problem? i am facing the same problem

[nilesh prajapati]

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.