When click a button rotate image clockwise in android

Question

I have a requirement where I have an ImageView and a button.

http://i1289.photobucket.com/albums/b509/salikclub/Rotate-Last-Start_zps0d2fced8.png

I want to rotate the image when I click the button. I need the image with full screen. but when I click the button image will be rotate, but not shown in the full screen. Please see the below link.

http://i1289.photobucket.com/albums/b509/salikclub/Rotate-Last1_zps2ccb1326.png

After that also when I clicked the button image will rotate. but positions is changed and not shown in full screen.

My requrement is, when I click the button image will be roatate clockwise and will show in full screen. Again I click the button image must be rotate clock wise and show in full screen. Likewise when I click the button image must be rotate.

Therefore can someone help me? If you can give me a sample code or a link that will be very much appriciated.

Here is the code which I'm trying,

main.xml

<merge xmlns:android="http://schemas.android.com/apk/res/android" >

    <ImageView
        android:id="@+id/imgView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:scaleType="fitXY"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:adjustViewBounds="true"
        android:src="@drawable/matterhorn"
        />

    <Button
        android:id="@+id/btnRotate"
        android:layout_width="65dp"
        android:layout_height="35dp"
        android:layout_gravity="bottom|left"
        android:layout_marginLeft="190dp"
        android:layout_marginBottom="15dp"
        android:layout_weight="1"
        android:background="@android:color/transparent"
        android:drawableLeft="@drawable/btn_icon_rotate"
        >
    </Button>

</merge>

This is my main activity "MainActivity.java"

package com.imageview.rotate;

import android.os.Bundle;
import android.app.Activity;
import android.graphics.Matrix;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.ImageView.ScaleType;

public class MainActivity extends Activity implements OnClickListener{

    private Button btnRotate;
    private ImageView imgview;

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

        imgview = (ImageView) findViewById(R.id.imgView);

        btnRotate = (Button) findViewById(R.id.btnRotate);
        btnRotate.setOnClickListener(this);

    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {

        case R.id.btnRotate:
            Matrix matrix=new Matrix();
            imgview.setScaleType(ScaleType.MATRIX);   //required
            matrix.postRotate((float) 180f, imgview.getDrawable().getBounds().width()/2, imgview.getDrawable().getBounds().height()/2);
            imgview.setImageMatrix(matrix);


            break;

        }
    }


}

Thanks in advance.

score 23 · Accepted Answer · edited Jun 20 '18 at 02:38

23

Create button_rotate.xml in anim folder:

<?xml version="1.0" encoding="utf-8"?>

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fromDegrees="0"
    android:interpolator="@android:anim/linear_interpolator"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="360" />

Now create animation in Java file:

/* Get ImageView Object */
ImageView iv = (ImageView) view.findViewById(R.id.refresh_action_view);

/* Create Animation */
Animation rotation = AnimationUtils.loadAnimation(context, R.anim.refresh_button_anim);
rotation.setRepeatCount(Animation.INFINITE);

/* start Animation */
iv.startAnimation(rotation);

For stop animation:

iv.clearAnimation();

edited Jun 20 '18 at 02:38

Pang

9,564
146
81
122

answered Aug 02 '13 at 11:57

Pratik Butani

60,504
58
273
437

Hi Pratik, Thanks for the reply. The animation works perfectly, but my requirement is slightly different. When I click the button I need to rotate the image to 90 angles. Can you help me to this. Thanks. – Ahamed Salik Aug 05 '13 at 05:33
You can start animation `onClick()` of `Button` – Pratik Butani Aug 05 '13 at 05:36
You can also change `android:toDegrees="90"` as per your Requirement. Thanks. :) Accept if useful and Do Vote up ;) – Pratik Butani Aug 05 '13 at 05:39
Hi Pratik. Thanks for the reply. Now orientation change from landscape to portrait. But I can't stop the animation. iv.stopAnimation(rotation); is not working. So how can I stop this – Ahamed Salik Aug 05 '13 at 05:58
Can this be used on a button? I am trying to make the button rotate 180 and then back to 0. Although i used the same code OnClick() , it still doesnot reflect. – Milee Nov 10 '15 at 05:04
i have a imageview rotate 360 degree when click on button and stop after one time animated and after click repeat animated can u help me? – Kevan Aghera Oct 13 '17 at 11:28

score 0 · Answer 2 · answered Nov 15 '21 at 18:30

If I understood correctly — you want to rotate the ImageView 90 degrees clockwise, on a button click.

If you look at the possible rotation angles for an ImageView to be in, there are actually 5 states:

0 -- 90 -- 180 -- 270 -- 360 and back to 0

The trick here is to take modulo with 450 and reset 'from' angle to 0 when finishing one cycle (IE, reached 360)

I created this extension function in Kotlin on an ImageView that could be used to perform clockwise / anti-clockwise rotation using RotateAnimation

var currentRotation = 0f

...

fun ImageView.animatedRotate(currentRotation: Float, clockwise: Boolean = true): Float {
    // 0f here is configurable, you can restart the rotation cycle
    // with your choice of initial angle
    val fromRotation = if (currentRotation.absoluteValue == 360f) 0f else currentRotation
    val rotateDegrees = if (clockwise) 90f else -90f
    val toRotation = (fromRotation + rotateDegrees) % 450f
    Timber.d("Rotating from $fromRotation to $toRotation")
    val rotateAnimation = RotateAnimation(
        fromRotation,
        toRotation,
        width / 2f,
        height / 2f
    ).apply {
        duration = 400 // configurable
        fillAfter = true
    }
    startAnimation(rotateAnimation)
    return toRotation
}

Call this method in button's onClickListener as follows:

button.setOnClickListener {
    currentRotation = imageView.animatedRotate(currentRotation)
}

Note how toRotation is returned in the end which becomes the new value for currentRotation

When click a button rotate image clockwise in android

2 Answers2

Linked