Kevin Prichard wrote:

chonada wrote:I am doing a photoeditor application and we have a button to rotate the image in the canvas (which is actually an image switcher), now while i did the rotation using the Matrix, i found that the image is shrinking when rotating (noticeable when rotating continuously), code snippet given below, any suggestions will be appreciated.

Syntax: [ Download ] [ Hide ]

Syntax: [ Download ] [ Show ]

Using java Syntax Highlighting

1. mSwitcher.setDrawingCacheEnabled(true);         // mSwitcher is the ImageSwitcher
2. bmp = mSwitcher.getDrawingCache();
3. aMatrix = new Matrix();
4. aMatrix.setRotate(90.0f);
5. <span style="font-weight: bold">flippedBmp = Bitmap.createBitmap(bmp, 0, 0, bmp.width(), bmp.height(), aMatrix, false)</span>
6. mSwitcher.setImageDrawable(new BitmapDrawable(flippedBmp));
7. mSwitcher.setDrawingCacheEnabled(false);
8.  

Parsed in 0.012 seconds, using GeSHi 1.0.8.4

Thanx in advance.

chonada,

Assuming you are running the above code for each step of a rotation, you are first grabbing bmp from mSwitcher, then rotating it, then putting it back into mSwitcher, right? Once the bmp is rotated into flippedBmp, its dimensions are changed, and are greater. But I think that the classes used will fit the rotated image within the target drawing area, which means shrinking.

Think of the diagonal distances, from corner to corner: if you rotate bmp 45 deg, the width and height of flippedBmp are now greater than the original bmp.

You need to have a bmp that is at least as large as the maximum line distance found in the original bmp, in each dimension. Remember the Pythagorean theorem. With the original image spec of w * h, the image resulting from the rotation will need to be sqrt(w^2 + h^2) in both dimensions, to prevent shrinkage, to give it the maximum room needed to arbitrarily rotate without shrinking.

Try changing

Syntax: [ Download ] [ Hide ]

Syntax: [ Download ] [ Show ]

Using java Syntax Highlighting

1. flippedBmp = Bitmap.createBitmap(bmp, 0, 0, bmp.width(), bmp.height(), aMatrix, false)
2.  

Parsed in 0.010 seconds, using GeSHi 1.0.8.4

to

Syntax: [ Download ] [ Hide ]

Syntax: [ Download ] [ Show ]

Using java Syntax Highlighting

1. flippedBmp = Bitmap.createBitmap(bmp, 0, 0, Math.hypot(bmp.width(), bmp.height()), Math.hypot(bmp.width(), bmp.height()), aMatrix, false)
2.  

Parsed in 0.010 seconds, using GeSHi 1.0.8.4

This is just a wild guess, haven't run your code, but I have encountered this in the past.

I'm also trying to do this but with the same problem. The think is that if it doesn't shrink, it doesn't get aligned with a textview that i have before the imageview.

Anyone found an answer to this problem? The hypot doesn't help 'cause it FC with "java.lang.IllegalArgumentException: x + width must be <= bitmap.width()"

Yiihaaa, boys and girls! Got it working. The shrinking problem.

So as you know, we rotate the matrix and create new bitmap with it:
aMatrix.setRotate(90.0f);
flippedBmp = Bitmap.createBitmap(bmp, 0, 0, bmp.width(), bmp.height(), aMatrix, false)

When doing so, the new bitmap will be created so that the rotated image would fit within the rectangle parameters (0, 0, bmp.width(), bmp.height()). Now what happens? Yes, you know - the image shrinks, so that it would fit to into the bounds, but what causes it, that is the key.

I assume you are using <ImageView> component for displaying the image. That is the clever bastard that is doing all the shrinking and guess what - it can be configured. For example like so: android:scaleType="centerInside". Next you run the code, it should go out of bounds when rotating. To fix that, just make it smaller:
aMatrix.postScale(0.5f, 0.5f);

Hi,
I am not getting any output when I integrated this ImageView Example code in my program.
main.xml
=========<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/layout"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>

<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="MainMenu"
android:background="#FF0000"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>

<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>

<Button
android:background="@android:color/transparent"
android:id="@+id/button1"
android:text="Mobile Banking"
android:textColor="#0000FF"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>

<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>

<Button
android:background="@android:color/transparent"
android:id="@+id/button2"
android:text="Locations"
android:textColor="#0000FF"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>

</LinearLayout>


.java
=====
package com.andr.sai.DemoBoa;


import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Matrix;
import android.graphics.drawable.BitmapDrawable;
import android.os.Bundle;
import android.view.ViewGroup.LayoutParams;
import android.widget.Button;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.ImageView.ScaleType;

public class mybankapp extends Activity {
/** Called when the activity is first created. */

LinearLayout ll;
FrameLayout fl;
Button b1,b2,b3;
TextView t1,t2,t3;

public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
ll=(LinearLayout)findViewById(R.id.layout);
//back ground
Bitmap bitmapOrg = BitmapFactory.decodeResource(getResources(),
R.drawable.android);

int width = bitmapOrg.getWidth();
int height = bitmapOrg.getHeight();
int newWidth = 200;
int newHeight = 200;

// calculate the scale - in this case = 0.4f
float scaleWidth = ((float) newWidth) / width;
float scaleHeight = ((float) newHeight) / height;

// createa matrix for the manipulation
Matrix matrix = new Matrix();
// resize the bit map
matrix.postScale(scaleWidth, scaleHeight);
// rotate the Bitmap
matrix.postRotate(45);

// recreate the new Bitmap
Bitmap resizedBitmap = Bitmap.createBitmap(bitmapOrg, 0, 0,
width, height, matrix, true);

// make a Drawable from Bitmap to allow to set the BitMap
// to the ImageView, ImageButton or what ever
BitmapDrawable bmd = new BitmapDrawable(resizedBitmap);

ImageView imageView = new ImageView(this);

// set the Drawable on the ImageView
imageView.setImageDrawable(bmd);

// center the Image
imageView.setScaleType(ScaleType.CENTER);

// add ImageView to the Layout
ll.addView(imageView,
new LinearLayout.LayoutParams(
LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT
)
);




//end
setContentView(R.layout.main);
}

I used setContentview(R.layout.main). I copied android image in my res folder, but not getting any output .can u give me solution to this problem?
}

Some of you guys might want to check out createScaledBitmap() if you don't want to rotate.

http://developer.android.com/reference/android/graphics/Bitmap.html#createScaledBitmap(android.graphics.Bitmap,%20int,%20int,%20boolean)

Code: Select all

mBitmap = Bitmap.createScaledBitmap(BitmapFactory.decodeResource(res, sprite), newWidth, newHeight, true);

Hey I saw your post and I find it quite useful and I want to ask you if u now how to take a image from a imageView and resizeIt with this method .

I tried to figure it out my self but I can't find the way to do it?
Can u help? PLS:)

Sanqu!

Hey Mauri, were you able to solve the issue with Rotating using matrix continuously shrinks the image? Well i had the same issue, i wanted to rotate an image while touching and for some reason the rotation wasn't smooth, kept shrinking the image. The image was supposed to remain in the center of the screen and it had to retain the original dimensions, so i fixed it and it worked by setting the scale type to CENTER after the rotation, as follows:

INSIDE THE MotionEvent.ACTION_MOVE:

ImageView view = (ImageView) v;
double r1 = Math.atan2(event.getX() - view.getWidth() / 2,view.getHeight() / 2 - event.getY());
int rotation = (int) Math.toDegrees(r1);

float newRot = new Float(rotation);
Bitmap bitmap = BitmapFactory.decodeResource(getResources(),R.drawable.id_of_image_view);

int w = bitmap.getWidth();
int h = bitmap.getHeight();

Matrix matrix = new Matrix();
matrix.postRotate(rotation);
Bitmap redrawnBitmap = Bitmap.createBitmap(bitmap, 0, 0, w, h, matrix, true);
view.setImageBitmap(redrawnBitmap);
view.setScaleType(ScaleType.CENTER); ///THIS WAS THE KEY LINE

For some reason we had to restore the scaling and since mine was centered i just recentered it.
Let me know if it works for you.

Thanks
DRCoderz

Why did you made a BitmapDrawable out of a Bitmap?

// make a Drawable from Bitmap to allow to set the BitMap
// to the ImageView, ImageButton or what ever
BitmapDrawable bmd = new BitmapDrawable(resizedBitmap);
ImageView imageView = new ImageView(this);

// set the Drawable on the ImageView
imageView.setImageDrawable(bmd);

I usually do something like:

imageView.setImageBitmap(resizedBitmap);

without conversions. Is a way preferable to the other?

I think I've found a different solution which is easier: applying a rotation animation to an ImageView:

Code: Select all

        // Locate view
       ImageView diskView = (ImageView) findViewById(R.id.imageView3);
       
        // Create an animation instance
        Animation an = new RotateAnimation(0.0f, 360.0f, pivotX, pivotY);
       
        // Set the animation's parameters
        an.setDuration(10000);               // duration in ms
        an.setRepeatCount(0);               // -1 = infinite repeated
        an.setRepeatMode(Animation.REVERSE);    // reverses each repeat
        an.setFillAfter(true);               // keep rotation after animation
       
        // Aply animation to image view
        diskView.setAnimation(an);


Now you don't have the resize problem, but you still have to find the right pivot coordinates, which can be tricky if you're using scaling...

Thanks a lot buddy.
I am searching something like this to rotate image on surfaceview from last 1 week but unable to resolve the problem.
But your solution work in single shot.
Thanks again.

Thanks for the detailed explanation on how to resize and rotate the images. I think nowadays government requires each application along with their specific size of the image. This application was much helpful for me on the same. Windows Vista help and support for hp, vaio computers"

Jux wrote:Yiihaaa, boys and girls! Got it working. The shrinking problem.

So as you know, we rotate the matrix and create new bitmap with it:
aMatrix.setRotate(90.0f);
flippedBmp = Bitmap.createBitmap(bmp, 0, 0, bmp.width(), bmp.height(), aMatrix, false)

When doing so, the new bitmap will be created so that the rotated image would fit within the rectangle parameters (0, 0, bmp.width(), bmp.height()). Now what happens? Yes, you know - the image shrinks, so that it would fit to into the bounds, but what causes it, that is the key.

I assume you are using <ImageView> component for displaying the image. That is the clever bastard that is doing all the shrinking and guess what - it can be configured. For example like so: android:scaleType="centerInside". Next you run the code, it should go out of bounds when rotating. To fix that, just make it smaller:
aMatrix.postScale(0.5f, 0.5f);

It seems simple enough when you put it that way, I suppose.

Iam a newbie here and I have never tried to resize and rotate images using android phones. But what I wonder is that whether there are some professional SDKs which can help rorate images and customize the size of images just like on PC. Using code to deal with that is too complicated for me. Any good suggestion? Thanks in advance.



Best regards,
Arron