How Do I Open An Image By Clicking On A Listview In Android?

So, here is the thing. I wanted to experiment a bit. So, i wrote this program which looks for images with (.jpg) extension in my mnt/shared/Newpictures folder in my GennyMotion Emu

Solution 1:

A simple way to achieve this would be to create a dialog containing an imageview and then set the imageview's image to the file. Something like this should do the job:

publicvoidonItemclick(AdapterView<?> adapterView, View view, int pos, long id){
    StringfilePath= filesInFolder.get(pos);
    AlertDialog.Builderbuilder=newAlertDialog.Builder(this);
    LayoutInflaterinflater= getLayoutInflater();
    Viewview= inflater.inflate(R.layout.dialog_img_preview, null);
    builder.setView(view);
    ImageViewimgView= (ImageView)view.findViewById(R.id.preview_imgview);
    imgView.setImageBitmap(BitmapFactory.decodeFile(filePath));
    AlertDialogdialog= builder.create();
    dialog.show();
}

Solution 2:

Here is simple example, how you can view image by click on gridview but you can change to listview in xml file.

This is gridview display.

GridViewActivity.java

publicclassGridViewActivityextendsActivity {

    @OverrideprotectedvoidonCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.gridview);

        GridViewgridview= (GridView) findViewById(R.id.gridview);
        gridview.setAdapter(newImageAdapter(GridViewActivity.this));

        gridview.setOnItemClickListener(newAdapterView.OnItemClickListener() {
            publicvoidonItemClick(AdapterView<?> parent, View v, int position, long id) {
                // Send intent to SingleViewActivityIntenti=newIntent(getApplicationContext(), SingleViewActivity.class);

                // Pass image index
                i.putExtra("id", position);
                startActivity(i);
            }
        });
    }
}

This class will display image in single page.

SingleViewActivity.java

publicclassSingleViewActivityextendsActivity {

    ImageLoaderimageLoader= ImageLoader.getInstance();
    private DisplayImageOptions options;

    @OverridepublicvoidonCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.single_view);

        options = newDisplayImageOptions.Builder().cacheInMemory(true)
                .cacheOnDisk(true).considerExifParams(true)
                .showImageForEmptyUri(R.mipmap.ic_launcher)
                .imageScaleType(ImageScaleType.IN_SAMPLE_POWER_OF_2)
                .bitmapConfig(Bitmap.Config.RGB_565).build();

        // Get intent dataIntenti= getIntent();

        // Selected image idintposition= i.getExtras().getInt("id");
        ImageAdapterimageAdapter=newImageAdapter(this);

        ImageViewimageView= (ImageView) findViewById(R.id.SingleView);
        //imageView.setImageResource(imageAdapter.mThumbnames[position]);
        imageLoader.displayImage(imageAdapter.mThumbnames[position],imageView,options);
    }
}

i have used some random images from internet. This same concept is used in listview for displaying image.

ImageAdapter.java

publicclassImageAdapterextendsBaseAdapter {

    private Context mContext;
    private LayoutInflater layoutInflater;
    ImageLoaderimageLoader= ImageLoader.getInstance();
    private DisplayImageOptions options;

    // ConstructorpublicImageAdapter(Context c) {
        mContext = c;
        layoutInflater = LayoutInflater.from(mContext);
        options = newDisplayImageOptions.Builder().cacheInMemory(true)
                .cacheOnDisk(true).considerExifParams(true)
                .showImageForEmptyUri(R.mipmap.ic_launcher)
                .imageScaleType(ImageScaleType.IN_SAMPLE_POWER_OF_2)
                .bitmapConfig(Bitmap.Config.RGB_565).build();
    }

    publicintgetCount() {
        return mThumbnames.length;
    }

    public Integer getItem(int position) {
        return position;
    }

    publiclonggetItemId(int position) {
        return position;
    }

    @Overridepublic View getView(int position, View convertView, ViewGroup parent) {

        ViewHolder1 holder;
        if (convertView == null) {
            convertView = layoutInflater.inflate(R.layout.grideview_item, null);
            holder = newViewHolder1();
            holder.image = (ImageView) convertView.findViewById(R.id.imageView);
            convertView.setTag(holder);
        } else {
            holder = (ViewHolder1) convertView.getTag();
        }


        // Load image, decode it to Bitmap and display Bitmap in ImageView (or any other view//  which implements ImageAware interface)//imageLoader.displayImage("drawable://" + mThumbIds[position], holder.image);
        imageLoader.displayImage(mThumbnames[position], holder.image, options);
        //holder.image.setImageDrawable(mContext.getResources().getDrawable(mThumbIds[position]));return convertView;
    }

    publicstaticclassViewHolder1 {
        ImageView image;
    }

    // Keep all Images in array/* public Integer[] mThumbIds = {
            R.drawable.ab, R.drawable.ac,
            R.drawable.ad, R.drawable.ae

    };*/public String[] mThumbnames = {
            "http://cdn2.ubergizmo.com/wp-content/uploads/2012/05/android_lock.jpg",
            "http://cdn2.ubergizmo.com/wp-content/uploads/2012/05/android_lock.jpg",
            "http://cdn2.ubergizmo.com/wp-content/uploads/2012/05/android_lock.jpg",
            "http://cdn2.ubergizmo.com/wp-content/uploads/2012/05/android_lock.jpg",
            "http://cdn2.ubergizmo.com/wp-content/uploads/2012/05/android_lock.jpg",
            "http://cdn2.ubergizmo.com/wp-content/uploads/2012/05/android_lock.jpg",
            "http://cdn2.ubergizmo.com/wp-content/uploads/2012/05/android_lock.jpg",
            "http://cdn2.ubergizmo.com/wp-content/uploads/2012/05/android_lock.jpg"

    };
}

gridview_item.xml

<?xml version="1.0" encoding="utf-8"?><FrameLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"><ImageViewandroid:id="@+id/imageView"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_gravity="left"android:paddingBottom="5dp"android:paddingLeft="5dp"android:paddingRight="5dp"android:paddingTop="10dp"android:scaleType="fitXY" /><TextViewandroid:id="@+id/textView2"android:layout_width="match_parent"android:layout_height="30dp"android:layout_gravity="center|bottom"android:layout_marginBottom="5dip"android:background="#80000000"android:gravity="center"android:text="images"android:textColor="#000000"android:textSize="20dp" /></FrameLayout>