Rotate image 90 degrees ontouch left or right

Question

So I'm in a bit of a crysis. I'm creating a game and I have a square with 4 different colors on each side. Can't seem to make the square rotate 90deg on right screen touch and -90deg on left screen tap. I can get it to rotate on tap but not stay at the position. Like it to be as smooth as possible.

The Activity:

public class GameActivity extends Activity implements OnTouchListener {

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

        // Reference to the left and right linear screens
        LinearLayout leftTap = (LinearLayout) findViewById(R.id.leftTap);
        leftTap.setOnTouchListener(this);
        LinearLayout rightTap = (LinearLayout) findViewById(R.id.rightTap);
        rightTap.setOnTouchListener(this);
    }


    @Override
    public boolean onTouch(View v, MotionEvent event) {

        // Square itself
        ImageView square = (ImageView) findViewById(R.id.square);

        // Left and Right Animations
        Animation leftAnimation = AnimationUtils.loadAnimation(this, R.anim.rotate_left_animation);
        Animation rightAnimation = AnimationUtils.loadAnimation(this, R.anim.rotate_right_animation);

        switch (v.getId()) {
            case R.id.leftTap:
                // Do left Rotate animation
                square.startAnimation(leftAnimation);

                break;

            case R.id.rightTap:
                // Do right Rotate animation
                square.startAnimation(rightAnimation);

                break;

            default:
                break;
        }
        return false;
    }

}

The Layout:

<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"
    tools:context=".GameActivity"
    android:weightSum="1"
    android:theme="@android:style/Theme.NoTitleBar.Fullscreen">

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/leftTap"
        android:visibility="visible"
        android:layout_alignParentTop="true"
        android:layout_toLeftOf="@+id/square"></LinearLayout>


    <ImageView
        android:contentDescription="The Square"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:id="@+id/square"
        android:src="@drawable/photo"
        android:scaleType="fitCenter" />

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/rightTap"
        android:visibility="visible"
        android:layout_alignParentTop="true"
        android:layout_toRightOf="@+id/square"></LinearLayout>


</RelativeLayout>

Left Tap Animation XML:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <rotate
        android:duration="500"
        android:interpolator="@android:anim/linear_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="-90"/>
</set>

Right Tap Animation XML:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <rotate
        android:duration="500"
        android:interpolator="@android:anim/linear_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="90"/>

I could:

switch (v.getId()) {

            case R.id.leftClick:
                square.setRotation(square.getRotation() - 90);

                break;

            case R.id.rightClick:
                square.setRotation(square.getRotation() + 90);

                break;

            default:

                break;
        }

But it won't have the animation (basically linear interpolation) affect. I want to know how can that be done?

http://stackoverflow.com/questions/7437732/android-rotatable-imageview — IntelliJ Amiya, Sep 18 '15 at 06:03

score 3 · Answer 1 · answered Sep 18 '15 at 10:21

Just use ViewPropertyAnimator.

Your OnTouchListener could look like this (although I'm not really sure why you've decided you wanna use OnTouchListener instead of for example OnClickListener):

@Override
public boolean onTouch(View v, MotionEvent event) {
    if (event.getAction() == MotionEvent.ACTION_DOWN) {
        switch (v.getId()) {
            case R.id.leftTap:
                // Do left Rotate animation
                square.animate().rotation(-90).setInterpolator(new LinearInterpolator()).setDuration(500);
                break;

            case R.id.rightTap:
                // Do right Rotate animation
                square.animate().rotation(90).setInterpolator(new LinearInterpolator()).setDuration(500);
                break;

            default:
                break;
        }
    }
    return v.onTouchEvent(event);
}

Or you could use rotationBy instead of rotation if that fits your needs better.

I did so because I want to be able to touch left and right to rotate the square either side. I didn't want a button. Or would onclick do the job ontouch would? — cookiemonster, Sep 18 '15 at 17:20

Rotate image 90 degrees ontouch left or right

1 Answers1