Search code examples
javaandroideclipsemotionevent

How to display a message based on where an image is dropped on screen


I am trying to display a different message depending on where an image is dragged.

So far, I have been able to drag and drop an image with motion event. And I have created 3 textviews that are invisible when the app starts (Too High, Perfect, and Too Low).

After the user moves the image, I want to display a different message depending on if it falls within certain y coordinates.

So how do I figure out if the image is within the desired y coordinates and then set the text to be visible if it is within those coordinates?

Here is my code so far:

Main Activity:

package com.example.touchanddragimage;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.widget.ImageView;
import android.widget.TextView;



public class MainActivity extends ActionBarActivity implements OnTouchListener {


ImageView arrow;
TextView hightext;
TextView lowtext;
TextView perfecttext;
TextView guide;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    arrow = (ImageView)findViewById(R.id.arrow);
    arrow.setOnTouchListener(this);

    hightext = (TextView) findViewById(R.id.high) ;
    lowtext = (TextView) findViewById(R.id.low);
    perfecttext = (TextView) findViewById(R.id.perfect);
    guide = (TextView) findViewById(R.id.textView2);

    hightext.setVisibility(View.INVISIBLE);
    lowtext.setVisibility(View.INVISIBLE);
    perfecttext.setVisibility(View.INVISIBLE);

}

  float x,y=0.0f;
boolean moving = false;


@Override
public boolean onTouch(View arg0, MotionEvent arg1) {
    // TODO Auto-generated method stub
    switch(arg1.getAction()){
    case MotionEvent.ACTION_DOWN:
        moving=true;
        break;

    case MotionEvent.ACTION_MOVE:
        if(moving){
            x=arg1.getRawX()-arrow.getWidth()/2;
            y=arg1.getRawY()-arrow.getHeight()*3/2;
            arrow.setX(x);
            arrow.setY(y);

        }

        break;

    case MotionEvent.ACTION_UP:
        moving=false;

        break;
    }
    return true;
}

XML:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.touchanddragimage.MainActivity" >

<ImageView
    android:id="@+id/arrow"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/textView1"
    android:layout_alignParentRight="true"
    android:layout_below="@+id/textView1"
    android:layout_marginTop="351dp"
    android:src="@drawable/greenarrow" />

<TextView
    android:id="@+id/high"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignRight="@+id/arrow"
    android:layout_below="@+id/textView1"
    android:layout_marginRight="99dp"
    android:layout_marginTop="56dp"
    android:text="@string/high" 
    android:textSize="24sp"
    />

     <TextView
         android:id="@+id/perfect"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_below="@+id/high"
         android:layout_marginTop="131dp"
         android:layout_toLeftOf="@+id/low"
         android:text="@string/perfect"
         android:textSize="24sp" />

     <TextView
         android:id="@+id/low"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_alignLeft="@+id/high"
         android:layout_below="@+id/arrow"
         android:layout_marginLeft="46dp"
         android:layout_marginTop="182dp"
         android:text="@string/low"
         android:textSize="24sp" />


</RelativeLayout>

Solution

  • In your MotionEvent.ACTION_UP check the value of the y coordinate and if it lies within a desired range then set the visibility of textview e.g

     case MotionEvent.ACTION_UP:
        moving=false;
    
        if(y < 100){
           high.setVisibility(View.Visible);
        }else if(y < 200){
           perfect.setVisibility(View.Visible);
        }else{
           low.setVisibility(View.Visible);
        }
    
        break;
    }