Image zoom in upon click

Question

I have an activity that populates images in a horizontal scrollview, where I have around 4 pictures that user can navigate through. Because the individual images sizes are small, I would want that when an image is click it an aesthetically pleasing popup appears displaying the image taking almost the entire activity with the title of image displayed on top of the popup, and a button to close the popup at the bottom of the image.

If possible, It would also be nice that when the image is zoom in a user is able to navigate left and right among the zoom in images, as oppose to closing it and then clicking another one just to see it in a larger view.

I have conducted a bit of research, but is still experiencing difficulties.

Below is the code for the activity that displays images:

public class CasualEventsSingleItemActivity extends Activity {

    // Declare Variables
    String list_item_name;
    String list_item_description;
    String list_item_price;
    String list_item_location;

    String single_list_item_description;




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


        ImageLoader mImageLoader = new ImageLoader(Volley.newRequestQueue(this),
                new ImageLoader.ImageCache() {
            private final LruCache<String, Bitmap>
                    cache = new LruCache<String, Bitmap>(20);

            @Override
            public Bitmap getBitmap(String url) {
                return cache.get(url);
            }

            @Override
            public void putBitmap(String url, Bitmap bitmap) {
                cache.put(url, bitmap);
            }
        });


        Intent i = getIntent();
        list_item_name = i.getStringExtra("list_item_name");
        list_item_location = i.getStringExtra("list_item_location");



        single_list_item_description = i.getStringExtra("single_list_item_description");

        TextView txtname = (TextView) findViewById(R.id.name);
        TextView txtlocation = (TextView) findViewById(R.id.location);
        TextView txtsdescription = (TextView) findViewById(R.id.sdescription);


        NetworkImageView hsvimage1 = (NetworkImageView) findViewById(R.id.hsvimage1);
        NetworkImageView hsvimage2 = (NetworkImageView) findViewById(R.id.hsvimage2);
        NetworkImageView hsvimage3 = (NetworkImageView) findViewById(R.id.hsvimage3);

        // Get image URLs from your previous network request...
        // I could not determine where this is stored from code in your question.
        String url1 = "list_item_bac";   // e.g. http://example.com/images/image1.png
        String url2 = "list_item_bac";
        String url3 = "list_item_bac ";

        // Set the URL of the image that should be loaded into this view, and
        // specify the ImageLoader that will be used to make the request.
        hsvimage1.setImageUrl(url1, mImageLoader);
        hsvimage2.setImageUrl(url2, mImageLoader);
        hsvimage3.setImageUrl(url3, mImageLoader);

        // Set results to the TextViews
        txtname.setText(list_item_name);
        txtlocation.setText(list_item_location);
        txtsdescription.setText(single_list_item_description);


        Button mConfirm2 = (Button)findViewById(R.id.bConfirm2);
        mConfirm2.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                ParseUser currentUser = ParseUser.getCurrentUser();

               // Create the class and the columns
                currentUser.saveInBackground();

                currentUser.put("ActivityName", list_item_name); 
                currentUser.saveInBackground(new SaveCallback() {
                    @Override
                    public void done(ParseException e) {
                        setProgressBarIndeterminateVisibility(false);

                        if (e == null) {
                            // Success!
                            Intent intent = new Intent(CasualEventsSingleItemActivity.this, usermatch.class);
                            intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
                            intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TASK);
                            startActivity(intent);
                        }
                        else {
                            AlertDialog.Builder builder = new AlertDialog.Builder(CasualEventsSingleItemActivity.this);
                            builder.setMessage(e.getMessage())
                                .setTitle(R.string.signup_error_title)
                                .setPositiveButton(android.R.string.ok, null);
                            AlertDialog dialog = builder.create();
                            dialog.show();
                        }
                   }
               });
                //CasualEventsSingleItemActivity.this.startActivity(new Intent(CasualEventsSingleItemActivity.this, MatchingActivity.class));
            }
        });


    }
}

Below is the layout code

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
        android:background="@drawable/blue_bac3"
    android:gravity="center"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginLeft="15dp"
         android:layout_marginTop="10dp"

        android:layout_marginRight="15dp"
        android:alpha="0.9"
        android:paddingBottom="3dp"
        android:shadowColor="#000000"
        android:shadowDx="3"
        android:shadowDy="3"
        android:shadowRadius="0.01"
        android:textColor="#82CAFF"
        android:textSize="24sp" />

    <TextView
        android:id="@+id/location"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/name"
        android:layout_centerHorizontal="true"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:alpha="0.8"
        android:paddingBottom="5dp"
        android:shadowColor="#000000"
        android:shadowDx="3"
        android:shadowDy="3"
        android:shadowRadius="0.01"
        android:textAlignment="center"
        android:textColor="#f2f2f2"
        android:textSize="16sp" />

    <ImageView
        android:id="@+id/dividertop"
        android:layout_width="370dp"
        android:layout_centerHorizontal="true"
        android:layout_height="wrap_content"
        android:layout_below="@+id/location"
        android:alpha="0.6"
        android:background="@drawable/divider11"
        android:paddingBottom="3dp" />

    <ImageView
        android:id="@+id/dividerbottom"
        android:layout_width="370dp"
                android:layout_centerHorizontal="true"

        android:layout_height="wrap_content"
        android:layout_below="@+id/vsvdescription"
       android:alpha="0.6"
        android:background="@drawable/divider11"
        android:paddingBottom="3dp" />

    <ImageView
        android:id="@+id/image_head"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:background="#000000"
        android:padding="1dp" />

    <HorizontalScrollView
        android:id="@+id/isgallery"
        android:layout_width="370dp"
        android:layout_height="90dp"
        android:layout_centerHorizontal="true"
        android:layout_below="@+id/dividerbottom"
        android:layout_marginTop="8dp"
         >

            <LinearLayout
                android:orientation="horizontal"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" >

               <com.android.volley.toolbox.NetworkImageView
                android:id="@+id/hsvimage1"
                android:layout_width="148dp"
                android:layout_height="90dp"
                android:layout_marginRight="6dp"
                android:layout_alignParentRight="true"
                android:background="#fff"
                android:padding="1dp" />
               <com.android.volley.toolbox.NetworkImageView
                android:id="@+id/hsvimage2"
                android:layout_width="148dp"
                android:layout_height="90dp"
                android:layout_marginRight="6dp"
                android:layout_alignParentRight="true"
                android:background="#000000"
                android:padding="1dp" />
               <com.android.volley.toolbox.NetworkImageView
                android:id="@+id/hsvimage3"
                android:layout_width="148dp"
                android:layout_height="90dp"
                android:layout_marginRight="6dp"
                android:layout_alignParentRight="true"
                android:background="#CCC"
                android:padding="1dp" />
               <com.android.volley.toolbox.NetworkImageView
                android:id="@+id/hsvimage4"
                android:layout_width="148dp"
                android:layout_height="90dp"
                android:layout_alignParentRight="true"
                android:background="#000000"
                android:padding="1dp" />
                        </LinearLayout>

                  </HorizontalScrollView>

    <Button
        android:id="@+id/bConfirm2"
        android:layout_width="90dp"
        android:layout_height="50dp"
        android:layout_below="@+id/isgallery"
        android:layout_centerHorizontal="true"
        android:alpha="0.7"
        android:layout_marginTop="10dp"
        android:background="@drawable/gray_bac"
        android:text="Confirm"
        android:textColor="#2B3856"
        android:textStyle="bold" />

     <ScrollView
        android:id="@+id/vsvdescription"
        android:layout_width="370dp"
        android:layout_height="250dp"
        android:layout_marginTop="7dp"
        android:layout_marginBottom="7dp" 
        android:padding="5dp"       

        android:layout_centerHorizontal="true"
        android:layout_below="@+id/dividertop"
         >

            <RelativeLayout
                android:orientation="vertical"
                android:gravity="center"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" >

    <TextView
        android:id="@+id/sdescription"
        android:layout_width="370dp"
        android:layout_height="250dp"
        android:gravity="center"
        android:alpha="0.65"
        android:textColor="#ffffff"
        android:textSize="18sp" />

    </RelativeLayout>
    </ScrollView>

</RelativeLayout>

Thanks in advance, and if you require any clarification, let me know.

Answer 1

Use the GestureImageView as described here

https://github.com/jasonpolites/gesture-imageview/blob/master/main/src/com/polites/android/GestureImageView.java

This will provides zoom functionalities. Although I am not sure about your other requirement wherein you want to scroll in zoomed state

Answer 2

Volley's original NetworkImageView is not zoomable.

You need to put extensions on volley for zooming feature.

Take a look at https://github.com/naver/volley-extensions/tree/master/volley-views