Search code examples
androidandroid-imageimage-editing

Putting some indicator around the image in image move/resize/rotate operations


I would like to Scale, Move, Resize Image. I would like to surround the image with Indicators which guide user what operation these indicators perform i.e. Moving, Rotating, Scaling.

enter image description here

I've tried

  • Scaling - but it only crops down. No chance to increase length and height of image.
  • Rotate - achieved but via inserting manual degrees. That's not a good option in here.
  • Moving - as I'm achieving drag on Api < 11. So little bit of difficult. Still no hope in here.

Is there any library which can do me simple image edit [Move, Scale, Rotate]?


Solution

  • Using Library : StickerView

    Its a 3rd Party Library which gives exactly what i was looking for.

    WorkAround :

    Still these answer is half of what I've asked for in OP. Means It ain't surronded by some specific Indicator. I'm still searching how to wrap ImageView with indicators and use them for Translate & Resize.

    Initilization of Variables inside Activity important for Translate & Resize ImageView

    public static final int DRAG = 1;
    public static final int NONE = 0;
    private static final String TAG = "Touch";
    public static final int ZOOM = 2;
    public static PointF mid = new PointF();
    public static int mode = 0;
    float d = 0.0F;
    Matrix savedMatrix = new Matrix();
    Matrix matrix = new Matrix();
    PointF start = new PointF();
    

    Setting ImageView to scaleType - Matrix

    iv = new ImageView(this);
    iv.setPadding(10, 10, 25, 25);
    iv.setScaleType(ImageView.ScaleType.MATRIX);
    
    iv.setOnTouchListener(t);
    

    Adding onTouch Listener to ImageView which uses

    • 1 Finger for Translate - Drag
    • 2 Finger for Zoom - Resize {Pinch To Zoom}

      View.OnTouchListener t = new View.OnTouchListener()
      {
      public boolean onTouch(View paramView, MotionEvent event)
      {
        ImageView view = (ImageView)paramView;
        switch (event.getAction() & MotionEvent.ACTION_MASK)
        {
        case MotionEvent.ACTION_DOWN:
      
            savedMatrix.set(matrix);
            start.set(event.getX(), event.getY());
            Log.d(TAG, "mode=DRAG" );
            mode = DRAG;
            break;
        case MotionEvent.ACTION_POINTER_DOWN:
      
            oldDist = spacing(event);
            Log.d(TAG, "oldDist=" + oldDist);
            if (oldDist > 10f) {
      
                savedMatrix.set(matrix);
                midPoint(mid, event);
                mode = ZOOM;
                Log.d(TAG, "mode=ZOOM" );
            }
            break;
      
        case MotionEvent.ACTION_MOVE:
      
            if (mode == DRAG) {
      
                matrix.set(savedMatrix);
                matrix.postTranslate(event.getX() - start.x, event.getY() - start.y);
            }
            else if (mode == ZOOM) {
      
                float newDist = spacing(event);
                Log.d(TAG, "newDist=" + newDist);
                if (newDist > 10f) {
      
                    matrix.set(savedMatrix);
                    float scale = newDist / oldDist;
                    matrix.postScale(scale, scale, mid.x, mid.y);
                }
            }
            break;
      
        case MotionEvent.ACTION_UP:
        case MotionEvent.ACTION_POINTER_UP:
      
            mode = NONE;
            Log.d(TAG, "mode=NONE" );
            break;
        }  
        view.setImageMatrix(matrix);
        return true;
      
      }
      
       private void midPoint(PointF point, MotionEvent event) {
      
          float x = event.getX(0) + event.getX(1);
          float y = event.getY(0) + event.getY(1);
          point.set(x / 2, y / 2);
      }
      
            private float spacing(MotionEvent event) {
            float x = event.getX(0) - event.getX(1);
            float y = event.getY(0) - event.getY(1);
            return FloatMath.sqrt(x * x + y * y);
            }
           };