Search code examples
androiddialogandroid-arrayadapterandroid-imageviewandroid-adapter

Changing Dialog Image from Within Adapter?


So I have a ListView with list-items that each have different images in them. I have my code setup so that when the user clicks an image, it will show an expanded version of that particular image by using the Dialog class.

However, no matter what code I've tried, it doesn't seem like I can make the Dialog image change! Am I not able to modify layout elements from within an adapter? I could only figure out how to reference my individual list-item images by putting the relevant code within my adapter.

What needs to change, and what am I doing wrong?

Here's the applicable code in my adapter for reference:

viewHolder.image.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                Log.i(LOG_TAG, "Calling ImageView OnClickListener");

                int imageId = currentWord.getImageResourceId();

                Dialog aD = new Dialog(mContext);

                LayoutInflater layoutInflater = LayoutInflater.from(mContext);
                View popupLayout = layoutInflater.inflate(R.layout.popup_image_layout, null);
                ImageView popupImageView = (ImageView) popupLayout.findViewById(R.id.popup_imageView);

                Glide
                        .with(mContext)
                        .load(imageId)
                        .apply(new RequestOptions().circleCrop())
                        .into(popupImageView);

                aD.setContentView(R.layout.popup_image_layout);
                aD.show();

            }
        });

Thanks for any of your help!


Solution

  • So I ended up figuring the answer out on my own.

    Under aD.setContentView(), I should have had popupLayout as the target, which had already had R.layout.popup_image_layout assigned and inflated in the same line... By referencing the layout anew, the code wasn't actually inflating the layout, so there was nothing able to be shown.

    So all that needed to be changed was: modifying aD.setContentView(R.layout.popup_image_layout) to aD.setContentView(popupLayout) and now when I click on the individual images in my ListView items, the proper image for each pops up in an expanded ImageView, which is shown by way of the Dialog class.

    UPDATE:

    Added some extra code in order to make sure that the Dialog is completely removed after being closed. Otherwise, it is kept in memory and the memory use continues to stack and increase indefinitely upon each subsequent Dialog being opened.

    Updated code below:

    Dialog aD = null;
    
    final int imageId = currentWord.getImageResourceId();
    
            final LayoutInflater layoutInflater = LayoutInflater.from(mContext);
    
            viewHolder.image.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
    
                    View popupLayout = layoutInflater.inflate(R.layout.popup_image_layout, null);
                    final ImageView popupImageView = (ImageView) popupLayout.findViewById(R.id.popup_imageView);
    
                    if (aD == null) {
                        aD = new Dialog(mContext);
                        aD.getWindow().setBackgroundDrawableResource(R.color.transparent);
                    }
    
                    Log.i(LOG_TAG, "Calling ImageView OnClickListener");
    
                    Glide
                            .with(mContext)
                            .load(imageId)
                            .apply(new RequestOptions().circleCrop())
                            .into(popupImageView);
    
                    aD.setContentView(popupLayout);
                    aD.show();
    
                    popupLayout.setOnClickListener(new View.OnClickListener() {
                        @Override
                        public void onClick(View v) {
                            aD.dismiss();
                            aD = null;
                        }
                    });
                }
            });