Moving an image inside a view using accelerometer

Question

The requirement is to tilt an image inside a view using an accelerometer sensor. I am not getting any idea how to achieve this. I am able to move the image using an accelerometer throughout the screen but how can I set abound for the image to move within a particular view. Any suggestions and ideas or example links will be appreciated.

public class MainActivity extends AppCompatActivity implements SensorEventListener {

    private SensorManager sensorManager;
    private Sensor accelerometer;

    ImageView mDrawable, ivImg;
    public static int x = 0;
    public static int y = 0;
    TextView textView;

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

        mDrawable = (ImageView) findViewById(R.id.ivImage);
        ivImg = (ImageView) findViewById(R.id.ivImg);
        sensorManager = (SensorManager) getSystemService(SENSOR_SERVICE);
        accelerometer = sensorManager.getDefaultSensor(Sensor.TYPE_ACCELEROMETER);
        textView = findViewById(R.id.textView);

       /* float centreX = (float) mDrawable.getX() + mDrawable.getWidth() / 2;
        float centreY = (float) mDrawable.getY() + mDrawable.getHeight() / 2;*/
        int mWidth = this.getResources().getDisplayMetrics().widthPixels;
        int mHeight = this.getResources().getDisplayMetrics().heightPixels;

        Log.e("centreX", "" + mWidth);
        Log.e("centreY", "" + mHeight);
        ivImg.setPivotX(100);
        ivImg.setPivotY(100);
    }


    @Override
    public void onAccuracyChanged(Sensor sensor, int accuracy) {

    }

    @Override
    protected void onResume() {
        super.onResume();
        sensorManager.registerListener(this, accelerometer,
                SensorManager.SENSOR_DELAY_GAME);
    }

    @Override
    protected void onPause() {
        super.onPause();
        sensorManager.unregisterListener(this);
    }


    @Override
    public void onSensorChanged(SensorEvent event) {


        if (event.sensor.getType() == Sensor.TYPE_ACCELEROMETER) {

            x -= (int) event.values[0];
            y += (int) event.values[1];

           /* mDrawable.setY(y);
            mDrawable.setX(x);
            Log.e("X", "" + x);
            Log.e("y", "" + y);*/

            float x = event.values[0];
            float y = event.values[1];
            if (Math.abs(x) > Math.abs(y)) {
                if (x < 0) {
                    //image.setImageResource(R.drawable.right);
                    textView.setText("You tilt the device right");
                }
                if (x > 0) {
                    //image.setImageResource(R.drawable.left);
                    textView.setText("You tilt the device left");
                }
            } else {
                if (y < 0) {
                    //image.setImageResource(R.drawable.up);
                    textView.setText("You tilt the device up");
                }
                if (y > 0) {
                    //image.setImageResource(R.drawable.down);
                    textView.setText("You tilt the device down");
                }
            }
            if (x > (-2) && x < (2) && y > (-2) && y < (2)) {
                //image.setImageResource(R.drawable.center);
                textView.setText("Not tilt device");
            }

            Log.e("X", "" + x);
            Log.e("y", "" + y);
        }
    }
}

COde Link: https://github.com/avik1990/SensorImpl

user_15543922 · Answer

I would suggest using Canvas.drawBitmap and bitmapFactory and creating sprite this will give you the access to control the coordinates of those images and you can change the coordinates

//Create bitmap
Bitmap  mDrawable;
int mDrawable_x ,mDrawable_y;

//initiate the position of mDrawable
mDrawable_x = 320;
mDrawable_y = 500;


// initiate the bitmap  R.drawable.mDrawable is where your mDrawable image reside 
mDrawable = BitmapFactory.decodeResource(getResources(),R.drawable.mDrawable)


// mDrawable is ready for use and draw it on canvas

Canvas.drawBitmap(mDrawable,mDrawable_x,mDrawable_y,null);


// animate now you can add the accelerometer readings ( please reduce them with limits )
// create two fields for x and y directions these will happen in onDraw method.

int move_x , move_y ;
move_x=1 ; move_y=1;

// update the position  include the invalidate at the end to ensure it redraw 


mDrawable_x = mDrawable_x + move_x ;
mDrawable_y = mDrawable_y + move_y;

Canvas.drawBitmap(mDrawable,mDrawable_x,mDrawable_y,null);

invalidate();

HOpe this is clarify , in case of any issues please let me know. Also see this code to animate the objects on canvas . you can blend your accelerometer readings to balls move x, y class / object / values

https://github.com/pintspin/ball_animation

Moving an image inside a view using accelerometer

1 Answers