How to display image when click on it picasso

Question

Currently I am using Picasso library to load images from URL in my Gridview. I want when the user clicks on the image display the image, how can I do that? , I searched for a long time for a solution to this problem but I have not found things.

that is my codes

PicassoImagesAdapter.java

public class PicassoImagesAdapter extends ArrayAdapter {
private Context context;
private LayoutInflater inflater;

private String[] imageUrls;
private ImageView ImageBanner;

public PicassoImagesAdapter(Context context, String[] imageUrls) {
    super(context, R.layout.list_images, imageUrls);

    this.context = context;
    this.imageUrls = imageUrls;

    inflater = LayoutInflater.from(context);
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    if (null == convertView) {
        convertView = inflater.inflate(R.layout.list_images, parent, false);
    }

    Picasso
            .with(context)
            .load(imageUrls[position])
            .fit() // to resize the image to imageView
            .transform(new PicassoRoundedTransformation(20, 0)) // Add radius to the images
            .noFade()
            .into((ImageView) convertView.findViewById(R.id.list_image));

    return convertView;
}
}

ImagesRamadanActivity.java

public class ImagesRamadanActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_ramadan_images);

    // ArrayList for RamadanImages
    String[] RamadanImages = {
            "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg",
            "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg",
            "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg",
            "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg",
            "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg",
            "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg",
            "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg",
            "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg",
            "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg",
    };
    // Find that view to display all the photos in Array on it
    GridView gridView2 = findViewById(R.id.gridview_image_ramadan);
    gridView2.setAdapter(new PicassoImagesAdapter(ImagesRamadanActivity.this, RamadanImages));

activity_ramadan_images.xml

<?xml version="1.0" encoding="utf-8"?>
<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"
android:background="#fff"
tools:context=".ImagesRamadanActivity">

<!--Toolbar-->
<include
    android:id="@+id/toolbar_ramadan_images"
    layout="@layout/toolbar"/>

<!-- Loading indicator for user feedback between queries to Guardian -->
<ProgressBar
    android:id="@+id/loading_indicator5"
    style="@style/Widget.AppCompat.ProgressBar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"/>

<GridView
    android:id="@+id/gridview_image_ramadan"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="0dp"
    android:layout_below="@id/toolbar_ramadan_images"
    android:numColumns="3"
    android:background="#FFFFFF"
    android:fastScrollEnabled="false"
    android:scrollbars="none" />
    </RelativeLayout>

This activity to display images as a list to display them in gridView list_images.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<ImageView
    android:id="@+id/list_image"
    android:scaleType="fitXY"
    tools:src="@drawable/button_kabba_image"
    android:padding="1dp"
    android:layout_width="125dp"
    android:layout_height="250dp"/>
</RelativeLayout>

activity to display the photo when clicking on it activity_image_display.xml

<?xml version="1.0" encoding="utf-8"?>
<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/display_image"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>
</RelativeLayout>

Answer 1

You need to set ItemClickListener on your GridView and then get the imageURL that the user has clicked on. Then you need to launch DisplayImageActivity with it.

you can try the following code inside ImagesRamadanActivity:

 gridView2.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
            // get the image
            String image = RamadanImages[position];
            Intent intent = new Intent(this,ImageActivity.class);
            intent.putExtra("imageUrl",image);
            startActivity(intent);
        }
    });

Once you have the data inside DisplayImageActivity you can display it in your ImageView with Picasso.

Your activity code could be similar to the following code:

 public class DisplayImageActivity extends AppCompatActivity {

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

            ImageView imageView = findViewById(R.id.display_image);
            Intent intent = getIntent();
            if (intent.hasExtra("imageUrl")){
                String url = intent.getStringExtra("imageUrl");
                Picasso.with(this)
                        .load(url)
                        .into(imageView);
            }

        }
}