Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Show AlertDialog with ImageView without any padding

Tags:

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:

enter image description here

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:

enter image description here

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:

enter image description here

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.

like image 770
AggieDev Avatar asked Jan 14 '15 23:01

AggieDev


1 Answers

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:

enter image description here

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> 
like image 193
AggieDev Avatar answered Oct 09 '22 15:10

AggieDev