Android Image Dialog/Popup same size as image and no border

Question

At the moment I am working on a file browser. Everything works fine with one exception: If the user clicks on an image (jpg, png, bmp, ..), I want the image to be displayed in a dialog or in a popup which has the same size as the image - so that there are no borders at all. The image files are located on the sdcard.

Here is what I have so far:

BitmapDrawable bitmap = new BitmapDrawable(context.getResources(), TARGET_PATH);

AlertDialog.Builder imageDialog = new AlertDialog.Builder(context);
LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

View layout = inflater.inflate(R.layout.thumbnail, null);
ImageView image = (ImageView) layout.findViewById(R.id.thumbnail_IMAGEVIEW);
image.setImageDrawable(bitmap);
imageDialog.setView(layout);
imageDialog.create();
imageDialog.show();

The XML file:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ImageView
        android:id="@+id/thumbnail_IMAGEVIEW"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:contentDescription="@string/icon_DESCRIPTION" />

</RelativeLayout>

Here is the output:

Fail Output

There are ugly borders at the edges of the images - I don't want them to be shown. I tried lots of stuff and examples listed in google, etc.. - nothing worked yet.

The best option will be to make the dialog/the view behind the image, the same size as the image. Another way could be to set the background behind the image transparent.

How do I achieve any solution? I'd love to make the background the same size as the image is, so there is no "invisible" stuff left, but I will also be okay with the transparent option.

Solution:

// Get screen size
Display display = context.getWindowManager().getDefaultDisplay();
Point size = new Point();
display.getSize(size);
int screenWidth = size.x;
int screenHeight = size.y;

// Get target image size
Bitmap bitmap = BitmapFactory.decodeFile(TARGET);
int bitmapHeight = bitmap.getHeight();
int bitmapWidth = bitmap.getWidth();

// Scale the image down to fit perfectly into the screen
// The value (250 in this case) must be adjusted for phone/tables displays
while(bitmapHeight > (screenHeight - 250) || bitmapWidth > (screenWidth - 250)) {
    bitmapHeight = bitmapHeight / 2;
    bitmapWidth = bitmapWidth / 2;
}

// Create resized bitmap image
BitmapDrawable resizedBitmap = new BitmapDrawable(context.getResources(), Bitmap.createScaledBitmap(bitmap, bitmapWidth, bitmapHeight, false));

// Create dialog
Dialog dialog = new Dialog(context);
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
dialog.setContentView(R.layout.thumbnail);

ImageView image = (ImageView) dialog.findViewById(R.id.imageview);

// !!! Do here setBackground() instead of setImageDrawable() !!! //
image.setBackground(resizedBitmap);

// Without this line there is a very small border around the image (1px)
// In my opinion it looks much better without it, so the choice is up to you.
dialog.getWindow().setBackgroundDrawable(null);

// Show the dialog
dialog.show();

XML file:

<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/imageview"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

</ImageView>

Final Output:

Output

After hours of trial and error I got it finally working. I add the solution to this first post. — rekt0x, Aug 08 '13 at 09:56
Hey, I've liked your solutions so much that I abstracted it in a easy to use component https://github.com/juliomarcos/ImageViewPopUpHelper ImageViewPopUpHelper.enablePopUpOnClick(getActivity(), targetImageView); — Julio Rodrigues, Dec 03 '13 at 16:01

score 2 · Answer 1 · answered Aug 08 '13 at 03:23

Change your ImageView from this:

<ImageView
        android:id="@+id/thumbnail_IMAGEVIEW"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:contentDescription="@string/icon_DESCRIPTION" />

To this:

<ImageView
        android:id="@+id/thumbnail_IMAGEVIEW"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:adjustViewBounds="true" <!-- Here is the thing -->
        android:contentDescription="@string/icon_DESCRIPTION" />

Hope this helps.

OK if it didn't work then I think you should make your own `Dialog` and apply the layout there. Because you are using the `AlertDialog` of Android so you can't change the layout. Cheers. — user2652394, Aug 08 '13 at 10:00
Yeah I did like you suggest it now - check out my first post "Solution". But thanks for your help though ;) — rekt0x, Aug 08 '13 at 10:15

Suchi · Answer 2 · 2015-04-23T11:12:00.280

1

you can make a custom dialog for showing images , make a layout for inflating in dialog's setcontentview , take one linear layout with width and height wrap content and imageview with in it with scale property fitxy .

edited Apr 23 '15 at 11:12

answered Sep 22 '14 at 09:55

Suchi

116
1
11

score 0 · Answer 3 · answered Aug 07 '13 at 21:39

Use FrameLayout as it's parent rather than RelativeLayout and set to wrap_content and 0 margins.

Try:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".MainActivity"
android:background="@color/background">

<FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/frameLayout"
        android:background="#b2ff7c">

    <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/imageView"
            android:src="@drawable/ic_launcher"/>
</FrameLayout>

</RelativeLayout>

The result should be a background the same size as the ImageView.

If this does work. Try modifying this in a custom theme:

    <style name="Widget.ImageWell">
    <item name="android:background">@android:drawable/panel_picture_frame_background</item>
    </style>

Didn't work for me. The result is the same as it is with my pice of code. There are still borders at the edges of the view. — rekt0x, Aug 08 '13 at 08:02

score 0 · Answer 4 · answered Sep 17 '16 at 15:33

0

Have u tried set setType in ImageView?

<ImageView ... android:scaleType="fitXY" ... />

answered Sep 17 '16 at 15:33

Twin Edo

1
1

score 0 · Answer 5 · answered Dec 11 '17 at 09:30

0

Add single line code under your image view initialization into your activity and it will solve your problem..

image.setScaleType(ImageView.ScaleType.FIT_XY);

answered Dec 11 '17 at 09:30

Nazmus Saadat

973
9
22

Android Image Dialog/Popup same size as image and no border

5 Answers5

Linked