Scaling custom relative layout?

Question

I am trying to make a Custom RelativeLayout that can scale and scroll. Right now I was trying to achieve scale. Now I have created a custom Relative layout as the parent layout of another relative layout that contains the touch Imageview as its child. Now, when I enlarge the parent custom relative layout, the child also gets the zoom, but the area that you can click on the image is translated, I don’t know why? When the image or layout is in its normal position, the clickable area is in the image viewer, but as soon as the layout expands, do the shifted areas shift? I don’t know why I am faced with moving the shifted position of the clicked

here is the code

my usual relative layourt

public class scaleLayout extends RelativeLayout { private float mScaleFactor=1.0f; private long lastTouchTime = -1; public scaleLayout(Context context) { super(context); // setWillNotDraw(false); } public scaleLayout(Context context, AttributeSet attrs) { super(context, attrs); //setWillNotDraw(false); // TODO Auto-generated constructor stub } /* @Override public boolean dispatchTouchEvent(MotionEvent event) { return super.dispatchTouchEvent(event); } */ @Override public boolean onTouchEvent(MotionEvent event) { // TODO Auto-generated method stub return super.onTouchEvent(event); } @Override public boolean onInterceptTouchEvent(MotionEvent ev) { if (ev.getAction() == MotionEvent.ACTION_DOWN) { long thisTime = System.currentTimeMillis(); if (thisTime - lastTouchTime < 250) { // Double tap mScaleFactor=1.5f; invalidate(); lastTouchTime = -1; } else { // Too slow :) /* mScaleFactor=1.0f; invalidate();*/ lastTouchTime = thisTime; } } return super.onInterceptTouchEvent(ev); } @Override protected void dispatchDraw(Canvas canvas) { // TODO Auto-generated method stub canvas.save(Canvas.MATRIX_SAVE_FLAG); canvas.scale(mScaleFactor, mScaleFactor); super.dispatchDraw(canvas); canvas.restore(); } @Override public ViewParent invalidateChildInParent(int[] location, Rect dirty) { // TODO Auto-generated method stub return super.invalidateChildInParent(location, dirty); } protected void onLayout(boolean changed, int l, int t, int r, int b) { int count = getChildCount(); for(int i=0;i<count;i++){ View child = getChildAt(i); if(child.getVisibility()!=GONE){ RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams)child.getLayoutParams(); child.layout( (int)(params.leftMargin * mScaleFactor), (int)(params.topMargin * mScaleFactor), (int)((params.leftMargin + child.getMeasuredWidth()) * mScaleFactor), (int)((params.topMargin + child.getMeasuredHeight()) * mScaleFactor) ); } } } 

here is the action

 public class LayoutZoomingActivity extends Activity implements OnTouchListener { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); ImageView img1 = (ImageView) findViewById(R.id.imageView1); img1.setOnTouchListener(this); ImageView img2 = (ImageView) findViewById(R.id.imageView2); img2.setOnTouchListener(this); } @Override public boolean onTouch(View v, MotionEvent event) { // TODO Auto-generated method stub ImageView iv= (ImageView) v; v.setVisibility(View.INVISIBLE); return false; } 

this is xml

 <com.layoutzooming.scaleLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" > <RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/gm01" > <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="jhkibnkij" android:layout_centerInParent="true" android:textColor="#FFFFFF" android:textSize="25dp" /> <ImageView android:id="@+id/imageView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/textView1" android:layout_marginLeft="500dp" android:layout_marginTop="250dp" android:background="#000" android:src="@drawable/dih01" /> <ImageView android:id="@+id/imageView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/textView1" android:layout_marginLeft="350dp" android:layout_marginTop="250dp" android:background="#000" android:src="@drawable/dih02" /> </RelativeLayout> </com.layoutzooming.scaleLayout> 

Answer 1

How did I fix this problem by adding the code below in LayoutZoomingActivity .

  public class LayoutZoomingActivity extends Activity implements OnTouchListener { ImageView img1; ImageView img2; /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); img1 = (ImageView) findViewById(R.id.imageView1); img1.setOnTouchListener(this); img2 = (ImageView) findViewById(R.id.imageView2); img2.setOnTouchListener(this); } @Override public boolean onTouch(View v, MotionEvent event) { // TODO Auto-generated method stub Log.d("b","b"); if(isViewContains(img1, (int)event.getX(), (int)event.getY())) { img1.setVisibility(View.GONE); } if(isViewContains(img2, (int)event.getX(), (int)event.getY())) { img2.setVisibility(View.GONE); } return false; } @Override public boolean onTouchEvent(MotionEvent event) { // TODO Auto-generated method stub Log.d("onTouchEvent c","c"+(int)event.getX()+","+(int)event.getY()); if(isViewContains(img1, (int)event.getX(), (int)event.getY())) { img1.setVisibility(View.GONE); img1.invalidate(); } if(isViewContains(img2, (int)(event.getX()/scaleLayout.mScaleFactor), (int)(event.getY()/scaleLayout.mScaleFactor))) { img2.setVisibility(View.GONE); img2.invalidate(); } return super.onTouchEvent(event); } private boolean isViewContains(View view, int rx, int ry) { int[] l = new int[2]; view.getLocationOnScreen(l); int x = l[0]; int y = l[1]; int w = view.getWidth(); int h = view.getHeight(); Log.d("isViewContains::"+x+"::"+y+"::"+w+"::"+h,rx+"::"+ry); if (rx < x || rx > x + w || ry < y || ry > y + h) { return false; } return true; } } 

Can you try it and customize according to your requirements.

Answer 2

The actual dimensions of the parent layout (Scalable Relative Layout) are increased, so this relative layout and image representation is trying to adjust itself to the same position as before, before enlarging. Before scaling, they had some position relative to the screen and now after scalling they are trying to adapt to the same position. Try using Linear layout for scalling