Android: ImageView rotation animation - keep scale type fit center

Question

I have an ImageView that has android:scaleType="fitCenter"

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    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="at.lukle.picturerotation.MainActivity">

    <ImageView
        android:id="@+id/iv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitCenter"
        android:src="@drawable/android"/>

    <Button
        android:id="@+id/btn_rotate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="rotate"/>

</RelativeLayout>

It looks like this:

When the Button gets clicked, I apply a rotation animation:

public class MainActivity extends AppCompatActivity {

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

        Button btnRotate = (Button) findViewById(R.id.btn_rotate);
        final ImageView iv = (ImageView) findViewById(R.id.iv);

        btnRotate.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                iv.animate().rotationBy(90f).start();
            }
        });
    }
}

Now it looks like this:

The image gets cut on the side. I want that the scaleType is also applied on the rotated image, so that the ImageView not just gets rotated, but also scaled to fit the width. I guess I need a scaling animation too, but I have no idea how to do that.

I also tried to just use iv.setRotation(90), but I have the same problem here...

when you are setting the image on imageview for first time, at that time just scale it according to device width, so that when you rotate the image your image will not crop. — Rahul Sharma, Sep 13 '16 at 09:33
I need the image to fill the whole width in every rotation / orientation. — Lukas Lechner, Sep 13 '16 at 09:40
I think you will need to play with the graphics.Matrix;. example. after setting ImageView for first time get matrix from that ImageView , rotate it and then set it again. — Sachin Rao, Sep 13 '16 at 09:56
@lukle did you find any solution i am having same problem when i rotate `ImageView` its image is cropping i am using `fitXY` — Mateen Chaudhry, Feb 06 '19 at 11:38

Arjun saini · Answer 1 · 2016-09-13T11:45:02.210

Used this

iv.setRotation(iv.getRotation() + 90);

Instead of

 iv.animate().rotationBy(90f).start();

two more update take android:configChanges like that

 <activity
        android:name=".youactivity"
        android:label="@string/app_name"

        android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|uiMode|screenSize|smallestScreenSize"
        >

android:adjustViewBounds true to imageview

  <ImageView
    android:id="@+id/iv"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="fitCenter"
    android:layout_centerInParent="true"
    android:adjustViewBounds="true"
    android:src="@mipmap/android"/>

Gaurav Chaudhari · Answer 2 · 2017-12-25T18:30:47.487

My Solution is not elegant (i am a noob in developing) I hope someone can provide a better solution ....

    int h,w;
    Boolean safe=true;

Getting the parameters of imageView is not possible at initialisation of activity To do so please refer to this solution OR set the dimensions at onClick of a Button Like this

    rotateButton.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            if(imageView.getRotation()/90%2==0){
                h=imageView.getHeight();
                w=imageView.getWidth();

            }
        .
        .//Insert the code Snippet below here 
       }

And the code to be run when we want to rotate ImageView

if(safe)     
imageView.animate().rotationBy(90).scaleX(imageView.getRotation()/90%2==0?(w*1.0f/h):1).scaleY(imageView.getRotation()/90%2==0?(w*1.0f/h):1).setDuration(2000).setInterpolator(new LinearInterpolator()).setListener(new Animator.AnimatorListener() {
                @Override
                public void onAnimationStart(Animator animation) {
                      safe=false;
                }

                @Override
                public void onAnimationEnd(Animator animation) {
                      safe=true;

                }

                @Override
                public void onAnimationCancel(Animator animation) {

                }

                @Override
                public void onAnimationRepeat(Animator animation) {

                }
            }).start();
        }
    });

This solution is sufficient for the Problem above.Although it will shrink the imageView even if it is not necessary(when height is smaller than Width).If it bothers you,you can add another ternary operator inside scaleX/scaleY.

score 0 · Answer 3 · answered May 11 '20 at 14:21

To do this follow these steps:

set scaleType to matrix:

 <ImageView ...
    android:scaleType="matrix"/>

In onCreate, load image into imageview and set rotate button onClick listener:

imageView.post(new Runnable() {
            @Override
            public void run() {
                Bitmap bitmap= BitmapFactory.decodeResource(getResources(),R.drawable.dummy);


           imageView.setImageBitmap(bitmap);

            if (bitmap.getWidth() > 0) {

                float scale = ((float)imageView.getMeasuredWidth())/((float)imageView.getDrawable().getIntrinsicWidth());

                imageView.getLayoutParams().height = (int)(scale * imageView.getDrawable().getIntrinsicHeight());
                imageView.setImageMatrix(scaleMatrix(scale, scale));
            }
        }
    });

And

btnRotate.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
              animateImageHeight(imageView,btnRotate);
            }
        });

Add the animateImageHeight method in the activity:

void animateImageHeight(final ImageView imageView, final Button btnRotate){

    final float drawableWidth = imageView.getDrawable().getIntrinsicWidth();
    final float drawableHeight = imageView.getDrawable().getIntrinsicHeight();
    float viewWidth = imageView.getMeasuredWidth();
    final float viewHeight = imageView.getMeasuredHeight();
    final int rotation = imageRotation % 360;
    final int newRotation = (rotation + 90);

    final int newViewHeight;
    final float imageScale;
    final float newImageScale;

    if (rotation==0 || rotation==180)
    {
        imageScale = viewWidth / drawableWidth;
        newImageScale = viewWidth / drawableHeight;
        newViewHeight = (int)(drawableWidth * newImageScale);
    }
    else if (rotation==90 || rotation==270){
        imageScale = viewWidth / drawableHeight;
        newImageScale = viewWidth / drawableWidth;
        newViewHeight = (int)(drawableHeight * newImageScale);
    }
    else{
        throw new UnsupportedOperationException("rotation can 0, 90, 180 or 270. ${rotation} is unsupported");
    }


    ValueAnimator animator= ValueAnimator.ofFloat(0f,1f) .setDuration(1000L);



    animator.setInterpolator(new AccelerateDecelerateInterpolator());

    animator.addListener(new Animator.AnimatorListener() {
        @Override
        public void onAnimationStart(Animator animator) {
            btnRotate.setEnabled(false);
        }

        @Override
        public void onAnimationEnd(Animator animator) {
            imageRotation = newRotation % 360;
            btnRotate.setEnabled(true);
        }

        @Override
        public void onAnimationCancel(Animator animator) {

        }

        @Override
        public void onAnimationRepeat(Animator animator) {

        }
    });

    animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            float animVal = (float)animation.getAnimatedValue();
            float complementaryAnimVal = 1 - animVal;

            int animatedHeight =
                    (int)(complementaryAnimVal * viewHeight + animVal * newViewHeight);
            float animatedScale =
                    (complementaryAnimVal * imageScale + animVal * newImageScale);
            float animatedRotation =
                    (complementaryAnimVal * rotation + animVal * newRotation);


            imageView.getLayoutParams().height=animatedHeight;

            Matrix matrix=
                    rotationMatrix(
                    animatedRotation,
                    drawableWidth / 2,
                    drawableHeight / 2
            );

            matrix.postScale(
                    animatedScale,
                    animatedScale,
                    drawableWidth / 2,
                    drawableHeight / 2);
            matrix.postTranslate(-(drawableWidth - imageView.getMeasuredWidth())/2, -(drawableHeight - imageView.getMeasuredHeight())/2);

            imageView.setImageMatrix(matrix);

            imageView.requestLayout();
        }
    });

    animator.start();
}

You can find the kotlin version and the complete demonstration here.

score 0 · Answer 4 · answered Jun 03 '21 at 09:33

try:

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

    <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

        <ImageView
            android:id="@+id/image"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/pic"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

    private lateinit var binding: ActivityMainBinding
    private var scale = 1F
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)
        //Change to your own calculation logic to calculate the zoom factor
        val outMetrics = DisplayMetrics()
        windowManager.getDefaultDisplay().getRealMetrics(outMetrics)
        val w = outMetrics.widthPixels
        val h = outMetrics.heightPixels
        scale = if (w > h) w.toFloat() / h.toFloat() else h.toFloat() / w.toFloat()
        binding.image.scaleX = scale
        binding.image.scaleY = scale
    }

    fun set() {
        sfRotation = (sfRotation + 90) % 360
        Log.d(">>>sfRotation", sfRotation.toString())
        Log.d(">>>hwrotation", hwRotation.toString())
        binding.image.rotation = sfRotation.toFloat()
        binding.image.scaleX = scale
        binding.image.scaleY = scale
    }

Android: ImageView rotation animation - keep scale type fit center

4 Answers4

try:

Linked