androiddialogandroid-imageviewandroid-alertdialog

Reputation: 5093

Android Image Dialog/Popup

Is it possible to have just an image popup/come-up in an Android application? It's similar to an overriding the normal view of an AlertDialog so that it contains just an image and nothing else.

SOLUTION: I was able to find an answer thanks to @blessenm's help. Masking an activity as a dialog seems to be the ideal way. The following is the code that I have used. This dialog styled activity can be invoked as needed by the application the same way a new activity would be started

ImageDialog.java

public class ImageDialog extends Activity {

    private ImageView mDialog;


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



        mDialog = (ImageView)findViewById(R.id.your_image);
        mDialog.setClickable(true);


        //finish the activity (dismiss the image dialog) if the user clicks 
        //anywhere on the image
        mDialog.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View v) {
            finish();
        }
        });

    }
}

your_dialog_layout.xml

<?xml version="1.0" encoding="UTF-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/image_dialog_root" 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@android:color/transparent"
    android:gravity = "center">

    <ImageView
        android:id="@+id/your_image"  
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src = "@drawable/your_image_drawable"/>

</FrameLayout>

It is crucial that you set the following style for the activity to accomplish this:

styles.xml

  <style name="myDialogTheme" parent="@android:style/Theme.Dialog">
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowFrame">@null</item>
    <item name="android:background">@android:color/transparent</item>
    <item name="android:windowBackground">@android:color/transparent</item>
    <item name="android:windowIsFloating">true</item>
    <item name="android:backgroundDimEnabled">false</item>
    <item name="android:windowContentOverlay">@null</item>
   </style>

The final step is to declare this style for the activity in the manifest as follows:

 <activity android:name=".ImageDialog" android:theme="@style/myDialogTheme" />

Upvotes: 57

Answers (7)

Nikhil S Marathe

Reputation: 781

Here's I found the solution after help of 3 hours struggle.

open your click event where you need to open the Image on click of Pic or icon.
make "Dialog" to show the dynamic image in Imageview.

Add below code only in the click event.

   holder.ivJobPhoto.setOnClickListener(view -> {              // THIS IS THE CLICK EVENT

        Dialog builder = new Dialog(mAcitvity);
        builder.requestWindowFeature(Window.FEATURE_NO_TITLE);
        builder.getWindow().setBackgroundDrawable(
                new ColorDrawable(Color.TRANSPARENT));
        builder.setOnDismissListener(new DialogInterface.OnDismissListener() {
            @Override
            public void onDismiss(DialogInterface dialogInterface) {
                //nothing;
            }
        });
        ImageView imageView = new ImageView(mAcitvity);
        PicassoTrustAll.getInstance(mAcitvity)
                .load(imageUrls.get(position))
                .placeholder(R.drawable.vector_app_logo_profile)
                .into(imageView);
        builder.addContentView(imageView, new RelativeLayout.LayoutParams(550,550));
        builder.show(); 
    });

Upvotes: 1

blessanm86

Reputation: 31789

If you just want to use a normal dialog something like this should work

Dialog settingsDialog = new Dialog(this);
settingsDialog.getWindow().requestFeature(Window.FEATURE_NO_TITLE);
settingsDialog.setContentView(getLayoutInflater().inflate(R.layout.image_layout
        , null));
settingsDialog.show();

image_layout.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content" android:layout_height="wrap_content"
    android:orientation="vertical">
    <ImageView android:layout_width="wrap_content" 
        android:layout_height="wrap_content" android:src="YOUR IMAGE"/>
    <Button android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:text="OK" android:onClick="dismissListener"/>
</LinearLayout>

Upvotes: 47

Bayar Şahintekin

Reputation: 447

You can do it easily by create a Dialog Fragment in Kotlin:

BigImageDialog.kt

    class BigImageDialog():DialogFragment() {
    private var imageUrl = ""
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        arguments?.let {
            imageUrl = arguments.getString("url")
        }
    }
    override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?, savedInstanceState: Bundle?): View {
        val v = inflater!!.inflate(R.layout.dialog_big_image, container, false)
        this.dialog.window.requestFeature(Window.FEATURE_NO_TITLE)
        Picasso.get().load(imageUrl).into(v.bigImageView)
        return v
    }

    override fun onStart() {
        super.onStart()

        val dialog = dialog
        if (dialog != null) {
            dialog.window.setLayout(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT)
        }
    }

    companion object {
        @JvmStatic
        fun newInstance(imageUrl: String) =
                BigImageDialog().apply {
                    arguments = Bundle().apply {
                        putString("url", imageUrl)
                    }
                }
    }
}

dialog_big_image.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/bigImageView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="centerCrop"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

Opening Dialog:

"smallImageView".setOnClickListener { BigImageDialog.newInstance("image url").show(fragmentManager,"") }

Upvotes: 3

Vakas

Reputation: 6472

Try the following:
It has image zoom_in/zoom_out as well.

Step 1:
Add compile 'com.github.chrisbanes.photoview:library:1.2.4' to your build.gradle
Step 2:
Add the following xml

custom_fullimage_dialoge.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:id="@+id/layout_root" android:orientation="horizontal"
              android:layout_width="fill_parent" android:layout_height="fill_parent"
              android:padding="10dp">
    <ImageView android:id="@+id/fullimage" android:layout_width="fill_parent"
               android:layout_height="fill_parent">
    </ImageView>

    <TextView android:id="@+id/custom_fullimage_placename"
              android:layout_width="wrap_content" android:layout_height="fill_parent"
              android:textColor="#FFF">
    </TextView>
</LinearLayout>

Step 3:

private void loadPhoto(ImageView imageView, int width, int height) {

    final Dialog dialog = new Dialog(this);
    dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
    dialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
    //dialog.setContentView(R.layout.custom_fullimage_dialog);
    LayoutInflater inflater = (LayoutInflater) this.getSystemService(LAYOUT_INFLATER_SERVICE);
    View layout = inflater.inflate(R.layout.custom_fullimage_dialog,
            (ViewGroup) findViewById(R.id.layout_root));
    ImageView image = (ImageView) layout.findViewById(R.id.fullimage);
    image.setImageDrawable(imageView.getDrawable());
    image.getLayoutParams().height = height;
    image.getLayoutParams().width = width;
    mAttacher = new PhotoViewAttacher(image);
    image.requestLayout();
    dialog.setContentView(layout);
    dialog.show();

}

Step 4:

user_Image.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Display display = getWindowManager().getDefaultDisplay();
        int width = display.getWidth();
        int height = display.getHeight();
        loadPhoto(user_Image,width,height);
    }
});

Upvotes: 3

Oded Breiner

Reputation: 29749

No xml:

public void showImage() {
    Dialog builder = new Dialog(this);
    builder.requestWindowFeature(Window.FEATURE_NO_TITLE);
    builder.getWindow().setBackgroundDrawable(
        new ColorDrawable(android.graphics.Color.TRANSPARENT));
    builder.setOnDismissListener(new DialogInterface.OnDismissListener() {
        @Override
        public void onDismiss(DialogInterface dialogInterface) {
            //nothing;
        }
    });

    ImageView imageView = new ImageView(this);
    imageView.setImageURI(imageUri);
    builder.addContentView(imageView, new RelativeLayout.LayoutParams(
            ViewGroup.LayoutParams.MATCH_PARENT, 
            ViewGroup.LayoutParams.MATCH_PARENT));
    builder.show();
}

Upvotes: 69

jperera

Reputation: 94

The more flexible and recommended way is use DialogFragment. If you want to support versions before 3.0 you can use compatibility library

Upvotes: 1

Steve Bergamini

Reputation: 14600

There is a couple ways you can do this. But, if you're looking to have your image appear to be floating above your existing activity, you may want to use an activity with android:theme="@style/Theme.Transparent" defined in the manifest. Then, design your layout to just have a single ImageView positioned in the center of the screen. The user will have to push the back button to get out of this, but it sounds like that's what you want.

If you want it to look like an actual dialog, you can always use a dialog styled activity as well using Theme.Dialog. OR, you could just use a dialog and customize it.

Upvotes: 1

Android Image Dialog/Popup

Answers (7)

Related Questions