CODEWITHSUNDEEP
javaandroidimageview
user3079872
user3079872

Reputation: 191

Changing the size of an ImageView when image clicked

I am trying to get a picture, within an ImageView, to increase in size when clicked. I have searched for a number of days, but have not found exactly what I need. At the moment I am using the TouchImageView from MikeOrtiz, and it works in that, when the image is clicked, it zooms in. But I want the image to increase in size, not just to zoom in, and while leaving the rest of the page opaque, the image needs to increase to the size of the screen while retaining its aspect ratio, i.e. it is a square image, so it should not become a rectangular image.

I have the following XML code:

<LinearLayout
<com.example.TouchImageView
    android:id="@+id/imageView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="10dp"
    android:layout_marginTop="14dp"
    android:contentDescription="@string/CompanyHeader" 
    android:src="@drawable/entrancex250"/>

</LinearLayout>

I am using the TouchImageView from:

https://github.com/MikeOrtiz/TouchImageView/blob/master/src/com/ortiz/touch/TouchImageView.java

As explained, what this does is to zoom in, but what I need is to make the image itself bigger when clicked, and then back to its normal size when clicked again.

Thanks very much.

Upvotes: 2

Views: 10885

Answers (5)

user3079872
user3079872

Reputation: 191

I wanted to put down what I actually ended up doing thanks to @micnubinub. I put his answer as the correct one as they helped me get to where I needed to be. But the actual code is not in the answer, so I thought to put it here, in case it helps anyone else.

First of all @micnubinub suggested I used dialog to show the image when it gets clicked. So I created a dialog.xml under res/layout as follows:

<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
android:minHeight="910dp"
android:minWidth="910dp"
android:scaleType="fitCenter"
android:id="@+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"/>

Then the Java class that would show the image when clicked is as follows:

    final ImageView imageView = (ImageView) findViewById(R.id.imageView2);
    imageView.setOnClickListener(new View.OnClickListener() {

    @Override
    public void onClick(View view) {

    final Dialog dialog = new Dialog(TheCompany.this, R.style.CustomDialog);
    if ((getResources().getConfiguration().screenLayout & 
            Configuration.SCREENLAYOUT_SIZE_MASK) == 
                Configuration.SCREENLAYOUT_SIZE_XLARGE) {
            // on a large screen device ...
        dialog.setContentView(R.layout.dialog_xlarge);}

        else dialog.setContentView(R.layout.dialog);


    ImageView im = (ImageView) dialog.findViewById(R.id.imageView);
    im.setImageResource(R.drawable.entrancex250);
    im.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
    dialog.dismiss();
    }
    });
    dialog.show();
    Window window = dialog.getWindow();
    window.setLayout(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
    }
    }); 
}

I also created a customdialog in Styles as follows:

<style name="CustomDialog" parent="@android:style/Theme.Translucent.NoTitleBar">
<item name="android:windowIsFloating">true</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowEnterAnimation">@anim/zoom_in</item>
<item name="android:windowExitAnimation">@anim/zoom_out</item>
</style>

This worked really well, thanks again @micnubinub.

The dialog_xlarge is the same as dialog, except with larger height and width.

Upvotes: 0

micnubinub
micnubinub

Reputation: 126

   public class TheCompany extends Activity implements OnMenuItemClickListener{

        public static final float screen_width;

        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.the_company);
            DisplayMetrics metrics = new DisplayMetrics();
            getWindowManager().getDefaultDisplay().getMetrics(metrics);
            screen_width = metrics.widthPixels;

        }

    }

Then in your page do this :

        ImageView imageView = (ImageView) findViewById(R.id.imageView2);
        imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                float scale =  TheCompany.screen_width / view.getWidth();
                if(view.getScaleX() == 1) {
                    view.setScaleY(scale);
                    view.setScaleX(scale);
                }else{
                    view.setScaleY(1);
                    view.setScaleX(1);
                }
            }


        });

Upvotes: 3

Nitesh Kumar
Nitesh Kumar

Reputation: 5440

If all you need is to increase the size of the ImageView, then you should not use TouchImageView at all, but ImageView instead.

<ImageView
    android:id="@+id/image_id"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/picture" 
    android:clickable="true" />

and in your java class setonclicklistener on this imageview and inside onclick change the size of the imageview by setting layout params.

LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(newWidth, newHeight);
imageView.setLayoutParams(params);

Here newWidth and newHeight are the dimensions to which to which you want set the imageview on click.

Upvotes: 2

Rijul Gupta
Rijul Gupta

Reputation: 1171

an alternative can be to use the following code

TouchImageView v = (TouchImageView) getActivity().findViewById("imageView2");
v.setHeight(fill_parent);
v.setWidth(fill_parent);

Upvotes: 0

Plumillon Forge
Plumillon Forge

Reputation: 1643

Have a look at this great library : PhotoView

It supports zooming and have a tap listener, so you just have to zoom on tap

Upvotes: 0

Related Questions