drag and drop images in alinear layout

Question

I am trying a pattern in my app. I have 5 images in a LinearLayout.When i drag and drop an one image at other position then,images positions should be updated. for example:

 1 2 3 4 5 //suppose these are my images

I pick up 5 image and drop inbetween 3,4..

after dropping the sequence should be like:

 1 2 3 5 4

I have written following code:

import android.content.ClipData; import android.graphics.drawable.Drawable; import android.os.Bundle; import android.support.design.widget.FloatingActionButton; import android.support.design.widget.Snackbar; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.Toolbar; import android.view.DragEvent; import android.view.MotionEvent; import android.view.View; import android.view.Menu; import android.view.MenuItem; import android.view.ViewGroup; import android.widget.ImageView; import android.widget.LinearLayout; import android.widget.RelativeLayout; import android.widget.Toast; import java.util.ArrayList; public class MainActivity extends AppCompatActivity { float orix,origy; LinearLayout llcontainer; ImageView iv1,iv2,iv3,iv4; ArrayList<Integer> alim; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); llcontainer=(LinearLayout)findViewById(R.id.llcontainer); iv1=(ImageView)findViewById(R.id.iv1); iv2=(ImageView)findViewById(R.id.iv2); iv3=(ImageView)findViewById(R.id.iv3); alim=new ArrayList<>(); for(int i=0;i<5;i++) { ImageView iv=new ImageView(this); iv.setLayoutParams(new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT)); iv.setId(i); iv.setImageResource(R.mipmap.ic_launcher); alim.add(iv.getId()); iv.setOnDragListener(new MyDragListener()); iv.setOnTouchListener(new MyTouchListener()); llcontainer.addView(iv); } // alim.add(R.id.iv1); // alim.add(R.id.iv2); // alim.add(R.id.iv3); // iv1.setOnTouchListener(new MyTouchListener()); // iv2.setOnTouchListener(new MyTouchListener()); //iv3.setOnTouchListener(new MyTouchListener()); //findViewById(1).setOnDragListener(new MyDragListener()); //iv2.setOnDragListener(new MyDragListener()); //iv3.setOnDragListener(new MyDragListener()); llcontainer.setOnDragListener(new MyDragListener()); /* findViewById(R.id.myimage1).setOnTouchListener(new MyTouchListener()); findViewById(R.id.myimage2).setOnTouchListener(new MyTouchListener()); findViewById(R.id.myimage3).setOnTouchListener(new MyTouchListener()); findViewById(R.id.myimage4).setOnTouchListener(new MyTouchListener()); findViewById(R.id.topleft).setOnDragListener(new MyDragListener()); findViewById(R.id.topright).setOnDragListener(new MyDragListener()); findViewById(R.id.bottomleft).setOnDragListener(new MyDragListener()); findViewById(R.id.bottomright).setOnDragListener(new MyDragListener()); */ } private final class MyTouchListener implements View.OnTouchListener { public boolean onTouch(View view, MotionEvent motionEvent) { if (motionEvent.getAction() == MotionEvent.ACTION_DOWN) { ClipData data = ClipData.newPlainText("", ""); View.DragShadowBuilder shadowBuilder = new View.DragShadowBuilder( view); view.startDrag(data, shadowBuilder, view, 0); view.setVisibility(View.INVISIBLE); origy=view.getY(); orix=view.getX(); return true; } else { return false; } } } class MyDragListener implements View.OnDragListener { /*Drawable enterShape = getResources().getDrawable( R.drawable.shape_droptarget); Drawable normalShape = getResources().getDrawable(R.drawable.shape); */ @Override public boolean onDrag(View v, DragEvent event) { int action = event.getAction(); switch (event.getAction()) { case DragEvent.ACTION_DRAG_STARTED: // do nothing // Toast.makeText(getApplicationContext(),"drag started",Toast.LENGTH_LONG).show(); break; case DragEvent.ACTION_DRAG_ENTERED: // v.setBackgroundDrawable(enterShape); break; case DragEvent.ACTION_DRAG_EXITED: // v.setBackgroundDrawable(normalShape); break; case DragEvent.ACTION_DROP: // Dropped, reassign View to ViewGroup float X = event.getX(); float Y = event.getY(); int id=v.getId(); // for(int i=0;i<alim.size();i++) // { //if(id==alim.get(i)) // { View view = (View) event.getLocalState(); int owner=(int)view.getId(); if(alim.size()==owner+1) { Toast.makeText(getApplicationContext(),"matched",Toast.LENGTH_LONG).show(); ImageView v1=(ImageView) llcontainer.getChildAt(owner); v1.setX(X); v1.setY(Y); v1.setVisibility(View.VISIBLE); ImageView ig=(ImageView)llcontainer.findViewById(owner-1); ig.setX(orix); ig.setY(origy); ig.setVisibility(View.VISIBLE); //ig } // llcontainer.addView(ig); // ig.setX(X); //ig.setY(Y); // } // } /* View view = (View) event.getLocalState(); ViewGroup owner = (ViewGroup) view.getParent(); owner.removeView(view); LinearLayout container = (LinearLayout) v; if(X>container.getX()&&Y>container.getY()) { container.setOrientation(LinearLayout.HORIZONTAL); // int position=owner.indexOfChild(v); // view.setX(X); // view.setY(Y); view.setX(X-(view.getWidth()/2)); view.setY(Y-(view.getHeight()/2)); container.addView(view); view.setVisibility(View.VISIBLE); } else { owner.addView(view); view.setX(orix); view.setY(origy); view.setVisibility(View.VISIBLE); }*/ break; case DragEvent.ACTION_DRAG_ENDED: // v.setBackgroundDrawable(normalShape); default: break; } return true; } } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.menu_main, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { // Handle action bar item clicks here. The action bar will // automatically handle clicks on the Home/Up button, so long // as you specify a parent activity in AndroidManifest.xml. int id = item.getItemId(); //noinspection SimplifiableIfStatement if (id == R.id.action_settings) { return true; } return super.onOptionsItemSelected(item); } }

In my activity_main.xml

 <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/llcontainer" android:orientation="horizontal" >

Please help out friends.Thanks in advance.

i cannot use GridView because i have overlapping of images..2nd image starts from the center of 1st image — Rushi Ayyappa
– Rushi Ayyappa, Commented Nov 21, 2016 at 8:20

Avinash Verma · Accepted Answer · 2016-11-22 12:44:29Z

Try this Example. Add listview or recyclerview and remove the List item from list and again add the item...below or above the item object where you want....I m also working on drag and drop view...http://android-er.blogspot.in/2015/01/drag-and-drop-items-between-listview_13.html

good one..I have got the answer.But this is also helpful.Thanks.

Vadivel · Accepted Answer · 2016-11-21 08:45:02Z

XML file:

<RelativeLayout xmlns:tools="http://schemas.android.com/tools" xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/center" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" > <LinearLayout android:id="@+id/mLinearLayour" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#FF8989" android:orientation="vertical" > <ImageView android:id="@+id/img1" android:layout_width="50dp" android:src="@mipmap/ic_launcher" android:layout_height="50dp" /> <ImageView android:id="@+id/img2" android:layout_width="50dp" android:src="@mipmap/beauty" android:layout_height="50dp" /> <ImageView android:id="@+id/img3" android:layout_width="50dp" android:src="@mipmap/icn_button" android:layout_height="50dp" /> <ImageView android:id="@+id/img4" android:layout_width="50dp" android:src="@mipmap/nbcards" android:layout_height="50dp" /> <ImageView android:id="@+id/img5" android:layout_width="50dp" android:src="@mipmap/ic_lock" android:layout_height="50dp" /> </LinearLayout>

Source code:

import android.os.Bundle; import android.app.Activity; import android.view.*; import android.view.View.OnDragListener; import android.view.View.OnTouchListener; import android.view.View.DragShadowBuilder; import android.widget.LinearLayout; import android.util.Log; public class MainActivity extends Activity implements OnTouchListener,OnDragListener{ private static final String LOGCAT = null; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); findViewById(R.id.img1).setOnTouchListener(this); findViewById(R.id.img2).setOnTouchListener(this); findViewById(R.id.img3).setOnTouchListener(this); findViewById(R.id.img4).setOnTouchListener(this); findViewById(R.id.img5).setOnTouchListener(this); findViewById(R.id.mLinearLayour).setOnDragListener(this); } public boolean onTouch(View view, MotionEvent motionEvent) { if (motionEvent.getAction() == MotionEvent.ACTION_DOWN) { DragShadowBuilder shadowBuilder = new DragShadowBuilder(view); view.startDrag(null, shadowBuilder, view, 0); view.setVisibility(View.INVISIBLE); return true; } else { return false; } } public boolean onDrag(View layoutview, DragEvent dragevent) { int action = dragevent.getAction(); switch (action) { case DragEvent.ACTION_DRAG_STARTED: Log.d(LOGCAT, "Drag event started"); break; case DragEvent.ACTION_DRAG_ENTERED: Log.d(LOGCAT, "Drag event entered into "+layoutview.toString()); break; case DragEvent.ACTION_DRAG_EXITED: Log.d(LOGCAT, "Drag event exited from "+layoutview.toString()); break; case DragEvent.ACTION_DROP: Log.d(LOGCAT, "Dropped"); View view = (View) dragevent.getLocalState(); ViewGroup owner = (ViewGroup) view.getParent(); owner.removeView(view); LinearLayout container = (LinearLayout) layoutview; container.addView(view); view.setVisibility(View.VISIBLE); // view.invalidate(); break; case DragEvent.ACTION_DRAG_ENDED: Log.d(LOGCAT, "Drag ended"); break; default: break; } return true; }

}

the dragged image is getting disappeared.and i got .ClassCastException: android.widget.ImageView cannot be cast to android.widget.LinearLayout

Rushi Ayyappa · Accepted Answer · 2016-11-21 09:45:39Z

In Action_Down case just by adding this it worked for me.

 ImageView target=(ImageView)v; ImageView dragged = (ImageView) event.getLocalState(); Drawable target_draw = target.getDrawable(); Drawable dragged_draw = dragged.getDrawable(); dragged.setImageDrawable(target_draw); target.setImageDrawable(dragged_draw); dragged.setVisibility(View.VISIBLE); target.setVisibility(View.VISIBLE);

Collectives™ on Stack Overflow

drag and drop images in alinear layout

3 Answers 3

1 Comment

2 Comments

Comments

Linked

Hot Network Questions