I'm trying to create something like the unlock activity of the android, where you drag the lock image outside of the circle to unlock the phone. I want to drag an image and to start an activity when it reaches a certain position. I tried doing it with a canvas but it turned out to paint other parts of my screen. So I tried using the following snippet where I found in another post here:
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_touch_ball);
windowwidth = getWindowManager().getDefaultDisplay().getWidth();
windowheight = getWindowManager().getDefaultDisplay().getHeight();
final ImageView balls = (ImageView)findViewById(R.id.ball);
balls.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
LayoutParams layoutParams = (LayoutParams) balls.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();
if(x_cord>windowwidth){x_cord=windowwidth;}
if(y_cord>windowheight){y_cord=windowheight;}
layoutParams.leftMargin = x_cord;
layoutParams.topMargin = y_cord;
balls.setLayoutParams(layoutParams);
break;
default:
break;
}
return true;
}
});
}
But this also doesn't work so well, since when I touch the image it changes its size and also doesn't move smoothly on the screen.
Do you know how can I start an activity, lets say when I drag an image from the bottom of the screen to the top?
This is because of following line
layoutParams.leftMargin = x_cord;
layoutParams.topMargin = y_cord;
balls.setLayoutParams(layoutParams);
If you are setting margins, according to that balls will move.
Related
So I'm messing around with interacting with touch events/gestures in Android. One of the first things I did was make a textview in a relativelayout that I can drag around.
Java code is:
public class draggystuff extends ActionBarActivity implements View.OnTouchListener {
private TextView mTextView;
private ViewGroup mRootLayout;
private int _xDelta;
private int _yDelta;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_draggystuff);
mRootLayout = (ViewGroup) findViewById(R.id.root);
mTextView = (TextView) mRootLayout.findViewById(R.id.textView);
RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) mTextView.getLayoutParams();
mTextView.setOnTouchListener(this);
}
#Override
public boolean onTouch(View v, MotionEvent event) {
final int X = (int) event.getRawX();
final int Y = (int) event.getRawY();
switch (event.getAction() & MotionEvent.ACTION_MASK) {
case MotionEvent.ACTION_DOWN:
RelativeLayout.LayoutParams lParams = (RelativeLayout.LayoutParams) mTextView.getLayoutParams();
_xDelta = X - lParams.leftMargin;
_yDelta = Y - lParams.topMargin;
Log.d("x is", String.valueOf(_xDelta));
Log.d("y is", String.valueOf(_yDelta));
break;
case MotionEvent.ACTION_UP:
break;
case MotionEvent.ACTION_POINTER_DOWN:
break;
case MotionEvent.ACTION_POINTER_UP:
break;
case MotionEvent.ACTION_MOVE:
RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) mTextView
.getLayoutParams();
layoutParams.leftMargin = X - _xDelta;
layoutParams.topMargin = Y - _yDelta;
layoutParams.rightMargin = -250;
layoutParams.bottomMargin = -250;
mTextView.setLayoutParams(layoutParams);
break;
}
mRootLayout.invalidate();
return true;
}
}
This works just fine. It sets up the textview in the upper left corner, and I can drag it around the screen. When I stop dragging, it stays put where I left it.
Next I decided that I should start with the textview in the center of the screen. To do this, I modified my OnCreate method as follows:
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_draggystuff);
mRootLayout = (ViewGroup) findViewById(R.id.root);
mTextView = (TextView) mRootLayout.findViewById(R.id.textView);
RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) mTextView.getLayoutParams();
layoutParams.addRule(RelativeLayout.CENTER_IN_PARENT, RelativeLayout.TRUE);
mTextView.setOnTouchListener(this);
}
This accomplished the goal of centering my TextView, but now it would not move when I dragged it. I figured this might be because the centering attribute was locking it in place. I thought that if I removed the centering attribute before I changed its coordinates, that might work. So I added a line to my ontouch method as follows:
public boolean onTouch(View v, MotionEvent event) {
final int X = (int) event.getRawX();
final int Y = (int) event.getRawY();
switch (event.getAction() & MotionEvent.ACTION_MASK) {
case MotionEvent.ACTION_DOWN:
RelativeLayout.LayoutParams lParams = (RelativeLayout.LayoutParams) mTextView.getLayoutParams();
_xDelta = X - lParams.leftMargin;
_yDelta = Y - lParams.topMargin;
Log.d("x is", String.valueOf(_xDelta));
Log.d("y is", String.valueOf(_yDelta));
break;
case MotionEvent.ACTION_UP:
break;
case MotionEvent.ACTION_POINTER_DOWN:
break;
case MotionEvent.ACTION_POINTER_UP:
break;
case MotionEvent.ACTION_MOVE:
RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) mTextView
.getLayoutParams();
layoutParams.addRule(RelativeLayout.CENTER_IN_PARENT, 0);
layoutParams.leftMargin = X - _xDelta;
layoutParams.topMargin = Y - _yDelta;
layoutParams.rightMargin = -250;
layoutParams.bottomMargin = -250;
mTextView.setLayoutParams(layoutParams);
break;
}
mRootLayout.invalidate();
return true;
}
Now however, the textview starts out in the middle of the screen, but as soon as a drag even begins, it instantly moves back to the upper left before following the relative movements of my finger!
How can I center the textview in the relativelayout in such a way that it neither locks in place nor moves back to the corner before dragging?
Instead of using a relative layout, try a linear layout and use setGravity(Gravity.CENTER) on your textview to see whether it is indeed the addrule method that causes the textview to ignore any touch events.
Also, have you tried applying the layout params using XML, and seeing whether the problem is reproduced over there?
Last, does the textview move to the upper-left on the down action event or the move action event?
So to fix this issue I changed the way I Was moving the view.
My xdelta and ydelta variables became the following:
_xDelta = X - mTextView.getX();
_yDelta = Y - mTextView.getY();
Then in my action_move event, instead of setting the left and top margins, I simply used the setX and setY methods like so:
mTextView.setX(X-_xDelta);
mTextView.setY(Y-_yDelta);
I am trying to implement a drag and drop function in Android.I have choosed to implement it using motion event because I think it is easy to understand.I want to make that image I move to remain in the same position and move a duplication. I don't really know how to explain, I want an image on the corner and when I move it the image still remain there but I move another one that is the same, and If I want to move another one from the same position again I move another position.It's like I am trying to get 10 balls from a basket but in this case the basket and the balls are the same image.
My code so far is this:
public class MainActivity extends ActionBarActivity {
private View selected_item = null;
private int offset_x = 0;
private int offset_y = 0;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ViewGroup vg = (ViewGroup)findViewById(R.id.container);
vg.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
switch(event.getActionMasked())
{
case MotionEvent.ACTION_MOVE:
int x = (int)event.getX() - offset_x;
int y = (int)event.getY() - offset_y;
int w = getWindowManager().getDefaultDisplay().getWidth() - 100;
int h = getWindowManager().getDefaultDisplay().getHeight() - 100;
if(x > w)
x = w;
if(y > h)
y = h;
LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(
new ViewGroup.MarginLayoutParams(
LinearLayout.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.WRAP_CONTENT));
lp.setMargins(x, y, 0, 0);
selected_item.setLayoutParams(lp);
break;
default:
break;
}
return true;
}
});
ImageView img = (ImageView)findViewById(R.id.newwall);
img.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
switch(event.getActionMasked())
{
case MotionEvent.ACTION_DOWN:
offset_x = (int)event.getX();
offset_y = (int)event.getY();
selected_item = v;
break;
default:
break;
}
return false;
}
});
Also, I am using a ViewGroup and I have a touchListener attached on it.When I am pressing the Layout I am getting the image where I press, I would like when I drop the image to remain there if I touch somewhere else on the screen.I have tried to set selected_item back to null when I end the drag but I didn't make it good I guess because I was getting error and app crashes.
Please help me solve these 2 problems.
Here is what I have used for similar purpose
ImageView snapshot = (ImageView)findViewById(R.id.nonFullScreenSnapshot);
vg.buildDrawingCache();
cache = Bitmap.createBitmap(vg.getDrawingCache());
Drawable drawableShot = new BitmapDrawable(getResources(), cache);
snapshot.setImageDrawable(drawableShot);
snapshot.setVisibility(View.VISIBLE);
In this case I have an ImageView already available from my xml layout, which should be at least as big as the image you want to duplicate.
So when the user touches your ViewGroup you should make a duplicate of it and then position it on the new location.
But be careful with the number of duplicates, because you can easily run out of memory and you will get OutOfMemory exception.
I've created an OnTouchListener that will allow me to drag views around the screen. This works well, except for one problem:
My views resize instead of leaving the parent. They are in a RelativeLayout, which I suspect is contributing to the problem. They only resize when touching the right or bottom boundaries of my RelativeLayout.
I'm hoping there is a simple solution to this problem, (ideally not involving resizing the RelativeLayout), but I haven't found a solution yet.
Ideally, this solution would be applicable for all views, as I use this OnTouchListener for TextViews as well as ImageViews. I was hoping to find an XML solution. I'm assuming others have dealt with this issue??
PS: Before I post this..I've just remembered I believe there is a flag for hitting a RelativeLayout's border, so maybe I can apply negative margin to the TextView when that happens. Thoughts?
EDIT
Here is my OnTouchListener:
// Dragging functionality for all views and double tap to remove
// functionality for ImageViews
final OnTouchListener onTouchListener = new OnTouchListener()
{
#Override
public boolean onTouch(View v, MotionEvent event)
{
v.bringToFront();
//if(v instanceof android.widget.ImageView)
//mScaleDetector.onTouchEvent(event);
layoutParams = (LayoutParams) v.getLayoutParams();
switch (event.getActionMasked())
{
case MotionEvent.ACTION_DOWN:
// Where the user started the drag
pressed_x = (int) event.getRawX();
pressed_y = (int) event.getRawY();
if (v instanceof android.widget.ImageView)
{
curTime = System.currentTimeMillis();
if(curTime - prevTime <= DOUBLE_TAP_INTERVAL)
{
v.setVisibility(View.GONE);
}
prevTime = curTime;
}
case MotionEvent.ACTION_MOVE:
// Where the user's finger is during the drag
final int x = (int) event.getRawX();
final int y = (int) event.getRawY();
// Calculate change in x and change in y
dx = x - pressed_x;
dy = y - pressed_y;
// Update the margins
layoutParams.leftMargin += dx;
layoutParams.topMargin += dy;
v.setLayoutParams(layoutParams);
// Save where the user's finger was for the next ACTION_MOVE
pressed_x = x;
pressed_y = y;
break;
default:
break;
}
return true;
}
}
When I try to apply a translate animation on an ImageView, the image just completely disappears. I am not sure why this would happen because I ran this code through the eclipse debugger and the value for the x_start and x_final seem to be correct.
Any ideas on why this would be happening or how I can end up getting my TranslateAnimation to work?
chargeButton.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
int x_cord = (int) event.getRawX();
int y_cord = (int) event.getRawY();
switch (event.getActionMasked()){
case MotionEvent.ACTION_DOWN:
break;
case MotionEvent.ACTION_MOVE:
chargeButton.setLayoutParams(setPosition(x_cord, false));
break;
case MotionEvent.ACTION_UP:
int x_start = x_cord;
x_cord = 0;
slowMove(x_start, x_cord, false);
chargeButton.setLayoutParams(setPosition(x_cord, false));
break;
default:
break;
}
return true;
}
});
}
public void slowMove(int x_start, int x_final, boolean pay)
{
Animation transAnimation = new TranslateAnimation(x_start, x_final, 0, 0);
transAnimation.setFillAfter(true);
transAnimation.setDuration(1000);
if (pay)
payButton.startAnimation(transAnimation);
else
{
chargeButton.clearAnimation();
chargeButton.startAnimation(transAnimation);
}
}
A little more background, this function is being called from an onTouchListener under the MotionEvent.ACTION_UP case.
I feel as though I need to use Animation.Relative_TO_SELF or something like that for the positioning. However, I am not sure how to do that when I only have the absoute positioning of the ImageViews.
Any and all ideas will be greatly appreciated.
Do not use the layout parameters to move your views - it is really not a good idea. I have been down that road and nothing good came out of it.
Consider extending View and setup your own custom view where you can have full control of what goes on.
can any one help me how to drag and drop the text view on entire image view. i found from this drag n drop textview in android here the text view is static, in my app textview and image view's are dynamically change. `#Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
// Remember our initial down event location.
startX = event.getRawX();
startY = event.getRawY();
break;
case MotionEvent.ACTION_MOVE:
float x = event.getRawX();
float y = event.getRawY();
// Calculate move update. This will happen many times
// during the course of a single movement gesture.
scrollByX = x - startX; //move update x increment
scrollByY = y - startY; //move update y increment
startX = x; //reset initial values to latest
startY = y;
invalidate(); //force a redraw
break;
}
return true; //done with this event so consume it
}
i wright this code, but it's not working properly.
You can always change the image and text of existing view programatically using setText sort of methods.
There are many drag and drop tutrials if you google it. strongly suggest you try them out.
Basically what you do is implement a OnTouchListener on the TextView like
textview.setOntouchListener(listen);
OnTouchListener onThumbTouch = new OnTouchListener()
{
#Override
public boolean onTouch(View v, MotionEvent event)
{
switch(v.getId())
{
case R.id.slider_thumb_id:
{
switch(event.getAction())
{
case MotionEvent.ACTION_MOVE:
{
}
case MotionEvent.ACTION_UP:
{
}
}
break;
}
}
return true;
}
};
Here from the event attribute you get the value of x and y and the touch event and
use that to alter the position of the textview. I did it by add add/subtracting the margin values.
EDIT:
This is what I did to update the position of my view
Look event.getRawY(); is going to give you the distance from the parent view. So if I get event.getRawY() = 50. I know I need the text view to be 50 pixels from the top.
LinearLayout.LayoutParams iconParams = (LinearLayout.LayoutParams)
v.getLayoutParams();
iconParams.topMargin = 50;
v.setLayoutParams(iconParams);
So now the view that i selected is 50 px from the top of the parent view.