How to move a view in circle with onTouch in android

Question

I am facing a problem in an project. I have a activity in which i had create a Round shape layout with Framelayout. My problem is that i don;t know how to implement items in layout in round shape. and move the items with ontouch event and when the items come on the specific postion a toast display or alert dialog show. I am attach the image for demo.

Answer 1

What you are looking for is a View that implements the onTouch event with a Drag feature .

1) In order to give your view the round shape, you need to create a file that contains those specifications in the drawable folder.

Create your drawable/your_circle.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" >
    <gradient android:startColor="#FFFF0000" android:endColor="#80FF00FF"
        android:angle="270"/>
</shape>

2) In your View that you want to make round, set the background to that same drawable like

<YourView 
    android:id="@+id/your_id"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:background="@drawable/your_circle"/>

And then, apply the following procedure to the Activity

public class DraggableActivity extends Activity {

    float dX;
    float dY;
    int lastAction;
    View.OnTouchListener touchListener;

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

        // 1 - Create the touch listener
        touchListener = new View.OnTouchListener() {
            @Override
            public boolean onTouch(View view, MotionEvent event) {
                switch (event.getActionMasked()) {
                    case MotionEvent.ACTION_DOWN:
                        dX = view.getX() - event.getRawX();
                        dY = view.getY() - event.getRawY();
                        lastAction = MotionEvent.ACTION_DOWN;
                        break;
                    case MotionEvent.ACTION_MOVE:
                        view.setY(event.getRawY() + dY);
                        view.setX(event.getRawX() + dX);
                        lastAction = MotionEvent.ACTION_MOVE;
                        break;
                    case MotionEvent.ACTION_UP:
                        if (lastAction == MotionEvent.ACTION_DOWN) {
                            Toast.makeText(DraggableView.this, "Clicked!", Toast.LENGTH_SHORT).show();
                        }
                        break;

                    default:
                        return false;
                }
                return true;
            }
        };

        // 2 - Add a reference to your view that already is stated on the layout
        final View dragView = findViewById(R.id.your_id);

        // 3 - Attac the the TouchListener to your view
        dragView.setOnTouchListener(this);
    }
}

Let me know if it works.

Regards,