Show AlertDialog with ImageView without any padding

Question

EDIT - SOLUTION:

I ended up figuring out a way to solve this issue. Because manually changing the height of the ImageView removes the extra padding, I ended up finding the dimensions of the original image, and apply them to the ImageView once the ImageView dimensions can be calculated. Here is the final result:

This is the final working code:

AlertDialog.Builder builder = new AlertDialog.Builder(this);
        builder.setPositiveButton("Get Pro", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
            }
        }).setNegativeButton("No thanks", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
            }
        });
        final AlertDialog dialog = builder.create();
        LayoutInflater inflater = getLayoutInflater();
        View dialogLayout = inflater.inflate(R.layout.go_pro_dialog_layout, null);
        dialog.setView(dialogLayout);
        dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);

        dialog.show();

        dialog.setOnShowListener(new DialogInterface.OnShowListener() {
            @Override
            public void onShow(DialogInterface d) {
                ImageView image = (ImageView) dialog.findViewById(R.id.goProDialogImage);
                Bitmap icon = BitmapFactory.decodeResource(context.getResources(),
                        R.drawable.whygoprodialogimage);
                float imageWidthInPX = (float)image.getWidth();

                LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(Math.round(imageWidthInPX),
                        Math.round(imageWidthInPX * (float)icon.getHeight() / (float)icon.getWidth()));
                image.setLayoutParams(layoutParams);


            }
        });

And the XML:

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

    <ImageView
        android:id="@+id/goProDialogImage"
        android:layout_width="wrap_content"
        android:layout_height="350dp"
        android:src="@drawable/whygoprodialogimage"/>

</LinearLayout>

ORIGINAL QUESTION:

My goal is to have an AlertDialog that has an ImageView that takes up the whole dialog, retaining it's dimensions, plus two buttons. By implementing it through standard methods, it looks like the following:

I am trying to eliminate that padding above and below it. Here's the code for how it's set up:

Layout:

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

    <ImageView
        android:id="@+id/goProDialogImage"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/whygoprodialogimage"/>

</LinearLayout>

Code:

AlertDialog.Builder builder = new AlertDialog.Builder(this);
        builder.setPositiveButton("Get Pro", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
            }
        }).setNegativeButton("No thanks", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
            }
        });
        AlertDialog dialog = builder.create();
        LayoutInflater inflater = getLayoutInflater();
        View dialogLayout = inflater.inflate(R.layout.go_pro_dialog_layout, null);
        dialog.setView(dialogLayout);
        dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);

        dialog.show();

After looking at this StackOverflow answer, I tried implementing that solution because their problem seemed similar, but even though it is closer to what I want now the result looks like this:

So it eliminated the padding but the image looks squished. Here's the code for this potential fix implementation:

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

        // Get target image size
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.whygoprodialogimage);
        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 resizedDialogImage = new BitmapDrawable(context.getResources(), Bitmap.createScaledBitmap(bitmap, bitmapWidth, bitmapHeight, false));

        AlertDialog.Builder builder = new AlertDialog.Builder(this);
        builder.setPositiveButton("Get Pro", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {

            }
        }).setNegativeButton("No thanks", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
            }
        });
        AlertDialog dialog = builder.create();
        LayoutInflater inflater = getLayoutInflater();
        View dialogLayout = inflater.inflate(R.layout.go_pro_dialog_layout, null);
        dialog.setView(dialogLayout);
        dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);

        // Without this line there is a very small border around the image (1px)
        dialog.getWindow().setBackgroundDrawable(null);

        dialog.show();
        ImageView image = (ImageView) dialog.findViewById(R.id.goProDialogImage);
        image.setBackground(resizedDialogImage);

What is it that is causing the image to now look squished? You can tell it got rid of the extra padding but the image dimensions are changed.

Answer 1

I ended up figuring out a way to solve this issue. Because manually changing the height of the ImageView removes the extra padding, I ended up finding the dimensions of the original image, and apply them to the ImageView once the ImageView dimensions can be calculated. Here is the final result:

This is the final working code:

AlertDialog.Builder builder = new AlertDialog.Builder(this);
        builder.setPositiveButton("Get Pro", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
            }
        }).setNegativeButton("No thanks", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
            }
        });
        final AlertDialog dialog = builder.create();
        LayoutInflater inflater = getLayoutInflater();
        View dialogLayout = inflater.inflate(R.layout.go_pro_dialog_layout, null);
        dialog.setView(dialogLayout);
        dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);

        dialog.show();

        dialog.setOnShowListener(new DialogInterface.OnShowListener() {
            @Override
            public void onShow(DialogInterface d) {
                ImageView image = (ImageView) dialog.findViewById(R.id.goProDialogImage);
                Bitmap icon = BitmapFactory.decodeResource(context.getResources(),
                        R.drawable.whygoprodialogimage);
                float imageWidthInPX = (float)image.getWidth();

                LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(Math.round(imageWidthInPX),
                        Math.round(imageWidthInPX * (float)icon.getHeight() / (float)icon.getWidth()));
                image.setLayoutParams(layoutParams);


            }
        });

And the XML:

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

    <ImageView
        android:id="@+id/goProDialogImage"
        android:layout_width="wrap_content"
        android:layout_height="350dp"
        android:src="@drawable/whygoprodialogimage"/>

</LinearLayout>

Answer 2

It might be late, but I think that setting android:adjustViewBounds = "true" in the ImageView could help. Also, I usually set android:scaleType = "centerInside" or android:scaleType = "centerCrop"

Answer 3

The CustomPanel of an AlertDialog has a 5dp top and bottom padding. You can override these using:

replace this line

dialog.setView(dialogLayout);

into

dialog.setView(dialogLayout, 0, 0, 0, 0);

For more information refer these links,

Unable to get proper custom AlertDialog

Answer 4

Please set your view's LinearLayout attribute i.e.android:layout_height="match_parent". Hope it will work.

Answer 5

Both your layout and image view have layout_width="match_parent". This tells the view (either the layout or the image view) to stretch itself so that it fills the parent container. Try changing this property to wrap_content. You can find detailed explanation of the property in the official documentation - here

Setting it to wrap_content should have the same effect as on the height - it should be just wide enough to draw the content (the image in this case) instead of fixing its size (to that of the parent/container)

Answer 6

Here are a few things you can try. You try variations of this to see if it fixes the view ratio. Description

imageView.setScaleType(ScaleType.FIT_CENTER);

or possibly manually setting the ImageView size manually will help.

LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(bitmapWidth, bitmapHeight);
image.setLayoutParams(layoutParams);

If not, there are a few other ways, these were just the first that came to mind.

Answer 7

Im not quite sure, but I think its the type of dialog you are showing that adds the padding. This type of dialog does not hide the entire activity. What I use to hide the entire activity is:

/**
 * Show the overlay using the WindowManager class.
 * @param overlay The overlay that needs to be shown.
 */
public void showOverlay(View overlay) {
    WindowManager.LayoutParams params = new WindowManager.LayoutParams(
            WindowManager.LayoutParams.MATCH_PARENT,
            WindowManager.LayoutParams.MATCH_PARENT,
            WindowManager.LayoutParams.TYPE_SYSTEM_ALERT,
            WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE |
                    WindowManager.LayoutParams.FLAG_FULLSCREEN,
            PixelFormat.TRANSLUCENT);

    getWindowManager().addView(overlay, params);
}

You could probably find an option that does what you need. However you will need to create a layout containing the buttons and image should you want to use the above method.

Check the options out: http://developer.android.com/reference/android/view/WindowManager.LayoutParams.html

Answer 8

I add this attributes to my ImageView.

<ImageView
  (...)
  android:adjustViewBounds="true" />

It worked!