57

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" />
Abhijit
  • 4,853
  • 3
  • 30
  • 33
  • why using a Dialog styled activity and not a dialog itself to do the above functionality. Any specific reason for it, or just a design choice? – Avijeet May 12 '16 at 09:00
  • @Avijeet that's a valid question, the goal was to show a floating image - this was a few years ago though, when view customization wasn't as prevalent. So, it made sense to have an activity styled as a Dialog. In hindsight, I could have used a `PopupWindow` or rolled my own custom view – Abhijit May 13 '16 at 01:36
  • Without using Dialog you can use this library to make image popup very easily. https://github.com/chathuralakmal/AndroidImagePopup – Im Batman Jan 11 '17 at 02:54

7 Answers7

69

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();
}
Oded Breiner
  • 28,523
  • 10
  • 105
  • 71
46

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>
Vijay C
  • 4,739
  • 4
  • 41
  • 46
blessanm86
  • 31,439
  • 14
  • 68
  • 79
  • 1
    Thanks for the response - this does work but only partially. The dialog would still consist of the gray background and white stroke ala the style of an Android AlertDialog. My intention is to have an image replace the conventional alert dialog. – Abhijit Oct 08 '11 at 21:47
  • 1
    To remove all default styles, you should add your own style and overide the default values. This might help. http://www.anddev.org/custom_theme_dialog___transparent_background-t7300.html – blessanm86 Oct 09 '11 at 00:50
  • 2
    @Abhijit You dont have to create a custom style, there is already one without title or background,you can use DialogFragment.STYLE_NO_FRAME. – Aldo Reyes Jul 06 '12 at 04:20
  • @AldoReyes - I haven't looked closely at DialogFragment yet, since its only available from api level 11. But, thanks for the tip. – Abhijit Jul 06 '12 at 15:49
  • 1
    @Abhijit Well it's available backwards with the support library, if you are not using fragments then you can get the same style from the normal Dialog Class. – Aldo Reyes Jul 07 '12 at 04:11
  • how can we change the source of image so when ever we press a custom list item we can see the image of that item. Please help – Uzumaki Naruto Apr 22 '16 at 18:18
  • @UzumakiNaruto Im not in a position to answer as I haven't been active in android native development for more than 3 yrs. Try asking by making a new post. – blessanm86 Apr 24 '16 at 04:14
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);
    }
});
Vakas
  • 6,291
  • 3
  • 35
  • 47
3

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

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.

SBerg413
  • 14,515
  • 6
  • 62
  • 88
  • Thanks a lot! My idea is to have an image replace the AlertDialog but disappear as the user taps/clicks on it. So, in essence the entire image space is working as an "OK" button. I will try to work with your first suggestion and get back to you. Also, when you say customize a dialog, do you mean that I subclass a dialog and override the methods? – Abhijit Oct 08 '11 at 21:55
1

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

jperera
  • 94
  • 1
  • 3
0

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

  1. open your click event where you need to open the Image on click of Pic or icon.

  2. make "Dialog" to show the dynamic image in Imageview.

  3. 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(); 
        });
    

enter image description here

☻♥ Done Keep Code.