Android Image Dialog/Popup

Question

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" />

Answer 1

If you just want to use a notmal 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>

Answer 2

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.

Answer 3

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);
    }
});

Answer 4

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

Answer 5

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,"") }

Answer 6

Without using Dialog you can use this library to make image popup very easily.

https://github.com/chathuralakmal/AndroidImagePopup