resizing the imageView makes it change its place

Question

I am having a Relative layout with few images in it like this below.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >


    <ImageView
        android:id="@+id/image_2"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_alignLeft="@+id/increase"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="34dp"
        android:layout_marginTop="34dp"
        android:src="@drawable/ic_launcher" />

    <ImageView
        android:id="@+id/image_1"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_alignBottom="@+id/image_2"
        android:layout_marginBottom="14dp"
        android:layout_toRightOf="@+id/increase"
        android:src="@drawable/ic_launcher" />

    <ImageView
        android:id="@+id/image_8"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:src="@drawable/ic_launcher" />
</RelativeLayout>

and in my java file i need to perform a small task. When i click an image it's size should be increased. I tried this and it was working and this is my code

public class MainActivity extends Activity implements OnClickListener {

View imageView;

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

    ImageView i1 = (ImageView ) findViewById(R.id.image_1);
    ImageView i2 = (ImageView ) findViewById(R.id.image_2);
             ImageView i3 = (ImageView ) findViewById(R.id.image_8);
            i1.setOnClickListener(this);
    i2.setOnClickListener(this);
    i3.setOnClickListener(this);
}

public void onClick(View arg0) {
    Log.v("clicked ", "clicked");
    imageView = arg0;
    Toast.makeText(this, "looking to resize the image ", 1).show();
    Toast.makeText(this, "clicked 2", 1).show();

    height = imageView.getHeight();
        width = imageView.getWidth();
    height += 50;
    width += 50;
    imageView.setLayoutParams(new RelativeLayout.LayoutParams(height, width));

}   

}

But i am facing a problem. when i click the image its position is changing. Consider these screen shots ..

The below is the screen shot when the application is launched

and below is the screen shot when an image view is clicked.

Can anyone suggest me so that the image doesnt change its position I can use something like using a grid view (if possible. but even i am trying to put some drag option to it. So can anyone suggest me please)

UPDATED CODE :

the onclick method is updated as below :

public void onClick(View arg0) {
    Log.v("clicked ", "clicked");
    imageView = arg0;
    Toast.makeText(this, "looking to resize the image ", 1).show();
    Toast.makeText(this, "clicked 2", 1).show();

    height = imageView.getHeight();
width = imageView.getWidth();
    height += 50;
    width += 50;
    RelativeLayout.LayoutParams params = new
          RelativeLayout.LayoutParams(height, width);

    params.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, RelativeLayout.TRUE);
    params.setMargins( 
                imageView.getLeft()-30,imageView.getTop()-30,imageView.getRight()+30,
               imageView.getBottom()+30);
    imageView.setLayoutParams(params);



}

Answer 1

You create new layoutparams for a relative layout and only set the height and width. Therefore, the image view will default to top left of the parent relative layout. You also need to set the alignment and margin as you need.

Since you are using a relative layout, you need to create new RelativeLayout layoutParams:

http://developer.android.com/reference/android/widget/RelativeLayout.LayoutParams.html

Something like this:

RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
params.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, RelativeLayout.TRUE);
params.setMargins(left, top, right, bottom);

Good luck...