How to set ImageView in the AlterDialog Box

Question

I am fetching the text and imageUrl from Firebase Realtime Database. I want to show the image and then display the text in the AlertDialogBox.
I am able to fetch the text and imageUrl. Able to set the text using setTitle() but when trying to display the image, not able to implement so.
Referred this but there in they are using drawable or static images.
Code

ImageView imageView = new ImageView(context);
        imageView.setImageResource(R.mipmap.ic_launcher);

        AlertDialog dialog = new AlertDialog.Builder(context)
                .setView(imageView)
                .setPositiveButton("ok", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        dialog.dismiss();
                    }
                }).create();

        dialog.show();

Or just the Text using below code

        AlertDialog.Builder builder = new AlertDialog.Builder(context,R.style.CustomDialogTheme);
        builder.setTitle("Explanation");
        builder.setMessage(list.get(position).getExplaination());
        url = list.get(position).getImageUrl();
        Log.i("URL", url);

        builder.setNegativeButton("Close", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialogInterface, int i) {
                // dismiss dialog
                dialogInterface.dismiss();
            }
        });
        builder.show();

I have also created a CustomDialogBox view but not able to understand how should I pass the text and imageUrl value to that particular AlertDialogBox.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".CustomDialog">

    <ImageView
        android:id="@+id/eImageView"
        android:layout_width="300dp"
        android:layout_height="200dp"
        android:layout_gravity="center"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="30dp"
        android:layout_marginRight="10dp"/>

    <TextView
        android:id="@+id/eTextView"
        android:layout_width="150dp"
        android:layout_height="300dp"
        android:layout_margin="8dp"
        android:gravity="center"
        android:padding="20dp"
        android:text=""
        android:textColor="#000000"
        android:translationX="120dp"
        android:translationY="10dp"
        android:textSize="20sp"
        android:textStyle="bold" />

</LinearLayout>

score 1 · Accepted Answer · answered Sep 02 '21 at 05:20

To, set the image you need to get ImageView id from CustomDialog XML file and then you can set particular image into ImageView.

So, first of all, get your custom view using getLayoutInflater().

Note: use one of the following as per your requirement.

View view = getLayoutInflater().inflate(R.layout.CustomDialog, null); // for activity
View view = ((ViewHolder) holder).mainActivity.getLayoutInflater().inflate(R.layout.CustomDialog, null); // for adapter class
View view = getActivity().getLayoutInflater().inflate(R.layout.CustomDialog, null); // for fragment

Then, add view into builder.setView();

builder.setView(view);

However, you also need to get ID of the all views which is located into your CustomDialog XML file.

TextView textview = view.findViewById(R.id.eTextView);
ImageView imageview = view.findViewById(R.id.eImageView);

Now, you can set your Image into ImageView Using Glide dependency.

Glide.with(context).load(url).into(imageview);

Full example:

    View view = getLayoutInflater().inflate(R.layout.CustomDialog, null);
    ImageView imageview = view.findViewById(R.id.eImageView);

    AlertDialog.Builder builder = new AlertDialog.Builder(context);
    builder.setTitle("Explanation");
    builder.setView(view);
    builder.setMessage(list.get(position).getExplaination());
    url = list.get(position).getImageUrl();
    Glide.with(context).load(url).into(imageview);
    Log.i("URL", url);

    builder.setNegativeButton("Close", new DialogInterface.OnClickListener() {
        @Override
        public void onClick(DialogInterface dialogInterface, int i) {
            // dismiss dialog
            dialogInterface.dismiss();
        }
    });
    builder.show();

score 0 · Answer 2 · answered Sep 02 '21 at 05:13

0

you can't set URL directly into Imageview for that you have to use these library

Glide

Picasso

Glide Example :

Glide.with(context).load(your_url).into(imageview);

Picass Example :

Picasso.get().load(your_url).into(imageview);

answered Sep 02 '21 at 05:13

Milan Tejani

372
5
21

score 0 · Answer 3 · answered Sep 02 '21 at 05:18

You can user Dialog class. I'm writing the code below

Dialog dialog = new Dialog(context);
dialog.setCancelable(true);
ImageView imageView = dialog.findViewById(imageView); 
TextView textView = dialog.findViewById(textView); 
dialog.show();
dialog.getWindow().setBackgroundDrawable(new 
ColorDrawable(context.getResources().getColor(android.R.color.transparent)));

score 0 · Answer 4 · edited Sep 03 '21 at 04:20

I have also created a CustomDialogBox view but am not able to understand how should I pass the text and imageUrl value to that particular AlertDialogBox.

When you create a custom dialog class set a contractor with parameters for the text and image url. Use this text and imgUrl on your view. Use Picasso or Glide to load images from the online URL.

/*** On Activity class when you show your custom Dialog Box ****/

//Pass the text and img URL to your Custome Dialog constructor while create an instance
    DialogFragment dialogBox= new CustomDialogBox(text, ImgUrl); 
    dialogBox.show(getSupportFragmentManager(), "custom_dialog_tag");

 // Custom DialogBox Class
 public class CustomDialogBox extends DialogFragment{
    private String text;
    private String imgUrl;
            
    //Constructor to receive argument from Activity    
    public CustomDialogBox (String text, String imgUrl) {
       this.text = text;
       this.imgUrl= imgUrl;
    }

    @NonNull
    @Override
    public Dialog onCreateDialog(@Nullable Bundle savedInstanceState) {
                
      AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());
      // Get the layout inflater
      View view = getLayoutInflater().inflate(R.layout.custom_dialog, null); // for activity
    
       // Inflate and set the layout for the dialog
       builder.setView(view)
       TextView textView = view.findViewById(R.id.yourTextView);
       ImageView imgView= view.findViewById(R.id.yourImgView);

       // View online img with glide library
        Glide.with(context).load(imgUrl).into(imgView); 

        return builder.create();
       }
    }

To learn more about custom dialog - Official Documentation

How to set ImageView in the AlterDialog Box

4 Answers4