Android - Rotating an ImageView with finger moves

Question

I've been learning Android for about two weeks now (expert in as2/3).

I have created a simple LinearLayout1, which contains anImageView`, containing a png of a vinyl record (just a circular disc basically)

I have set up this ImageView to be rotated when the user drags a finger on it, like scratching a record.

My code seems to be working (not sure if its the best way but it works). The problem is when the ImageView is rotated it pushes other views around. I have determined this is because my round image is really a square with transparent corners. It is these corners that are pushing other views around, and causing the record to push away from the left side of the screen if I have the ImageView left justified.

There are a few attempts to solve this online, but none of them seem to be quite what I need and some are wrapped in examples so robust I can't discern what to take from it at my beginning level.

If anyone could shed some light on what I can do so solve this that would be great. I realize a simple answer may not exist, but keep in mind I am a Java noob and keep it as simple as you can! Many thanks in advance for any help!

also if anyone can tell me why I need to subtract 50 from the rotation to make the record move under the exact spot the user touches, that would be helpful as well! see this in the method updateRotation().

Here is my xml markup:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
   xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/baseView"
    android:background="#FFFFFFFF"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <ImageView
        android:id="@+id/turntable"
        android:src="@drawable/turntable"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_weight="1"/>

</LinearLayout>

and here is my java code:

package com.codingfiend.android.turntable;

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.Window;
import android.widget.ImageView;
import android.widget.TextView;

public class Turntable extends Activity
{
    View baseView;
    ImageView turntable;
    TextView bottomText;

    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.main);

        baseView = (View)findViewById(R.id.baseView);
        turntable = (ImageView)findViewById(R.id.turntable);

        turntable.setOnTouchListener(onTableTouched);
    }

    public android.view.View.OnTouchListener onTableTouched = new android.view.View.OnTouchListener()
    {
        public boolean onTouch(View v, MotionEvent evt)
        {
            double r = Math.atan2(evt.getX() - turntable.getWidth() / 2, turntable.getHeight() / 2 - evt.getY());
            int rotation = (int) Math.toDegrees(r);


            if (evt.getAction() == MotionEvent.ACTION_DOWN)
            {
                //
            }

            if (evt.getAction() == MotionEvent.ACTION_MOVE)
            {
                updateRotation(rotation);
            }

            if (evt.getAction() == MotionEvent.ACTION_UP)
            {
                //
            }

            return true;
        }
    };

    private void updateRotation(double rot)
    {
        float newRot = new Float(rot);

        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.turntable);

        Matrix matrix = new Matrix();
        matrix.postRotate(newRot - 50);

        Bitmap redrawnBitmap = Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth(), bitmap.getHeight(), matrix, true);
        turntable.setImageBitmap(redrawnBitmap);
    }
}

EDIT

This is turning out to be an irritating problem. There has got to be a way to rotate an image that is as big or bigger than the screen without it getting scaled so the whole image stays on screen. Why can't part of the rotating image go off screen? Very frustrating. I tried wrapping the ImageView into a FrameView, which partially helped. Now I can add other views that won't be affected, but I still can't have my disc big enough because it isn't allowed to pass the screen borders when it rotates. I don't get why. I haven't checked out extending ImageView yet. Any other thoughts would still be appreciated!

Answer 1

Fix your imageview by

imageview.setScaleType(ScaleType.CENTER);

Answer 2

Actually thats because you try to rotate a view in a linear layout. And this will cause its dedicated space to expand or shrink.

Idea 1: try using a frame layout have and your view rotate inside there Idea 2: try a custom view subclass and draw your turntable in the onDraw. In the internet look for a compass drawing example for start.

Answer 3

Simple and clear, just draw a circle canvas and add your image to the canvas.The canvas image will not have corners. Also, use FrameLayout to lay one image on top of the other, this will solve your problem