Android Image Dialog/Popup same size as image and no border
Solution 1
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.
Solution 2
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 .
Related videos on Youtube
rekt0x
Updated on December 11, 2020Comments
-
rekt0x over 3 years
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:
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:
-
rekt0x over 10 yearsAfter hours of trial and error I got it finally working. I add the solution to this first post.
-
Julio Rodrigues over 10 yearsHey, I've liked your solutions so much that I abstracted it in a easy to use component github.com/juliomarcos/ImageViewPopUpHelper ImageViewPopUpHelper.enablePopUpOnClick(getActivity(), targetImageView);
-
rekt0x over 10 yearsThat's awesome - thanks mate ;)
-
-
rekt0x over 10 yearsDidn'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.
-
user2652394 over 10 yearsOK if it didn't work then I think you should make your own
Dialog
and apply the layout there. Because you are using theAlertDialog
of Android so you can't change the layout. Cheers. -
rekt0x over 10 yearsYeah I did like you suggest it now - check out my first post "Solution". But thanks for your help though ;)