Search code examples
androidandroid-imageview

Restrict image inside FrameLayout so it can't be dragged outside of it in Android


I'm using FrameLayout having shadow inside layout. On Top of FrameLayout, I've added ImageView which is draggable around the screen & Resizable.

I've given FrameLayout : android:layout_width & android:layout_heightto fill_parent to consume the area of screen. It was necessary to fulfil the app requirement.

Question

How can I restrict Image not to be draggable outside theFrameLayout?

Pic 1 and Pic 2:

Image 1 Image 3

Pic 3:

Image 2


Solution

  • Adding limitation to draggable views with reference to its size and touch points had fix my problem.

    So What i need to do is just get the touch points compare it with framelayout boundraies, depends upon the scenario sets the limitation to draggable view.

    Code is something like these worked perferctly for me ::

    public boolean onTouch(View paramView, MotionEvent event)
        {
          ImageView view = (ImageView)paramView;
          switch (event.getAction() & MotionEvent.ACTION_MASK)
    
    
    case MotionEvent.ACTION_MOVE:
    
              if (mode == DRAG) {
    /*
    * Restricting Image not to be draggable outside of FrameLayout
    */
                  matrix.set(savedMatrix); //Top
                  if(event.getY()==0)
                  {
                      matrix.postTranslate(event.getX()+15-start.x, 0+15);
                      Log.d("Top", "Top...");
                  }
                  else if(event.getX()==0) //Left
                  {
                      matrix.postTranslate(0+15, event.getY()-start.y+15);
                      Log.d("LEFT", "Left...");
                  }
                  else if((event.getY()-ImageHeight)>fm.getHeight()) //Bottom
                  {
                      matrix.postTranslate(event.getX()-start.x+15, fm.getHeight()-ImageHeight+15);
                      Log.d("BOTTOM", "Bottom...");
                  }
                  else if((event.getX()-ImageWidth)>fm.getWidth()) //Right
                  {
                      matrix.postTranslate(fm.getWidth()-ImageWidth+15, event.getY()-start.y+15);
                      Log.d("RIGHT", "Right....");
                  }
                  else if(event.getY()==0 && (event.getX()-ImageWidth)>fm.getWidth()) //Top -Right
                  {
                      matrix.postTranslate(fm.getWidth()-ImageWidth-15, 15);
                  }
                  else if(event.getY()==0 &&event.getX()==0) //Top-Left
                  {
                      matrix.postTranslate(15, 15);
                  }
                  else if((event.getY()-ImageHeight)>fm.getHeight() && event.getX()==0) //Bottom-Left
                  {
                      matrix.postTranslate(15, fm.getHeight()-ImageHeight-15);
                  }
                  else if((event.getX()-ImageWidth)>fm.getWidth() && (event.getY()-ImageHeight)>fm.getHeight())
                  {
                      matrix.postTranslate(fm.getWidth()-ImageWidth-15, fm.getHeight()-ImageHeight-15);
                  }
                  else
                  {
                      matrix.postTranslate(event.getX() - start.x, event.getY() - start.y);  
                      Log.d("ACTION_MOVE", "Starting Point::"+start.x+","+start.y+" Ending Point::"+event.getX()+","+event.getY());
                      Log.d("ACTION_DOWN", "FrameLayout::"+fm.getWidth()+" ,"+fm.getHeight()+" ImageView:: "+view.getWidth()+", "+view.getHeight());
    
                  }
              }
              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;
               }  
          view.setImageMatrix(matrix);
          return true;       
        }