Dialog size does not match the background image

Question

I am using the Android SDK to make a game. Along the way, I need to display popup/dialog like any other game there user can upgrade or whatever. The problem I have is with the size of the dialog. I am using RelativeLayout and I am setting the background to the image I have with "wrap_content".

The problem that the dialog is taking the size of the views inside (or the default dialog min size set by Android, whichever is bigger) NOT the background image. If I use fill_parent then it stretches it. I spent hours and hours spinning my while and I can't seem to find an efficient way in which the size of the window matches the size of the background image

Any suggestions? This is a very common use case and there must be way! Thanks

Here is some of the layout content

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="@drawable/popup"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >
    <ImageButton
        android:id="@+id/ibCloseDialog"
        android:background="@null"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/close" />

 <Button
        android:id="@+id/b1"
        android:background="@drawable/blue_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@+id/b2"
        android:text="b1" />
    <Button
        android:id="@+id/b2"
        android:background="@drawable/blue_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:text="b2" />
    <Button
        android:id="@+id/b3"
        android:background="@drawable/blue_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/b2"
        android:text="b2" />
</RelativeLayout>

Have a look at this asnwer, it might help you. http://stackoverflow.com/a/6631310/2071847 — alexandreferris, Jun 23 '15 at 17:39
@holpducki match_parent and fill_parent is the same. same same, new name — , Jun 23 '15 at 17:41
@amitfarag Oh! been so long I haven't touched an `Android` app — alexandreferris, Jun 23 '15 at 17:42
@Snake Strongly consider reading top answer to [this question](https://stackoverflow.com/questions/14907104). Window layout parameters aren't sole reason, why dialog may become too wide. You may have to dig deeply into your theme to get rid of minimal width as well as modify decor elements, that cause widening. Use hierarchyviewer to pinpoint multiple causes within dialog layout/theme. — user1643723, Jun 30 '15 at 03:25

score 3 · Answer 1 · answered Jun 30 '15 at 09:31

3

I once faced a problem to display a Dialog in fullscreen. I used a custom style to remove the dialogs default styling (size / margin / padding). So maybe you could use this to wrap your content while ignoring the defaults. So please try the following:

1) Add a custom Dialog theme in your styles.xml:

<style name="YourDialogTheme" parent="android:Theme.Dialog">

    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">wrap_content</item>

    <item name="android:windowBackground">@null</item>
    <item name="android:windowNoTitle">false</item>

</style>

I think that height, width and background are the important aspects here. Maybe you have to play with the values.

2) Create your Dialog by using this snippet:

Dialog dialog = new Dialog(context, R.style.YourDialogTheme)

answered Jun 30 '15 at 09:31

W3hri

1,563
2
18
31

I will try this and report back. But are not the sizes set in the code of base dialog class Not the xml? – Snake Jun 30 '15 at 18:59
Yes and no. Dialog has two constructors, Dialog(Context ctx) and Dialog(Context ctx, int style). If you use the first one, the default style.xml will be used. You can set the styling attributes on code level, but by doing this you are changing/altering the ones that were set upon creation of the Dialog (first xml, then your code). By using a custom xml, your attributes are set from the beginning on. – W3hri Jul 01 '15 at 07:30
Still. Same behaviour. I think actually it is not related to the fact the alignParentRight for the image is forcing the layout to be stretched full width EVEN though the parent relative layout is set to wrap content. It seems I am having the exact same issue as http://stackoverflow.com/questions/17446229/android-relative-layout-align-parent-right but no solution yet :( – Snake Jul 02 '15 at 05:03

score 0 · Answer 2 · answered Jun 23 '15 at 17:57

Are you using the atribute "android:background" in your RelativeLayout? If this is the case you can try to do this:

 <RelativeLayout
        .
        .
        .
        >
        <ImageView
            android:layout_width="MATCH_PARENT"
            android:layout_height="MATCH_PARENT"
            android:scaleType="fitXY"
            android:adjustViewBounds="true" 
            android:src="@drawable/yourDrawable" />    
    </RelativeLayout>

Put an ImageView inside your Relative Layout.
Remove the background image of your RelativeLayout
Set the src of the ImageView to your background image

Also:

make correctly sized images of your background and keep them in different drawable folders.
Specify the size of view not using constants, but in dp

The problem that this won't work. Because I am placing contents in the relative layout using attributes like alignParentLeft and alignParentBottom . When you do that then then dialog go beyond the image size and place the components on the outside — Snake, Jun 25 '15 at 05:07

score 0 · Answer 3 · answered Jun 23 '15 at 18:28

0

put a single large image in folder and use following framelayout. add to imgView

android:scaleType = "centerCrop"

answered Jun 23 '15 at 18:28

ASP

437
4
11

score 0 · Answer 4 · answered Jun 30 '15 at 05:17

I am not sure if this is an efficient solution but since the dialog background is a resource file, you could get the height and width of the background and set the same height and width to Dialog dynamically. Something like this

//get the dialog background drawable
Drawable popUpDrawable = getResources().getDrawable(R.drawable.popup);
//get height and width of drawable
int drawableWidth = popUpDrawable.getIntrinsicWidth();
int drawableHeight = popUpDrawable.getIntrinsicHeight();

//creating dialog
Dialog dialog = new Dialog (context);
...
WindowManager.LayoutParams lp = new WindowManager.LayoutParams();
lp.copyFrom(dialogWindow.getAttributes());
//set the height and width of drawable as height and width of dialog
lp.width = drawableWidth;
lp.height = drawableHeight;
dialog.show();
//set the attributes to dialog
dialog.getWindow().setAttributes(lp);

score 0 · Answer 5 · edited Jun 30 '15 at 14:17

0

You set the image by using the src attribute. I would suggest you to set is as a background.

     <ImageButton
            android:id="@+id/ibCloseDialog"
            android:background="@null"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            scaltype:centerInside
            android:background="@drawable/close" />

edited Jun 30 '15 at 14:17

W3hri

1,563
2
18
31

answered Jun 30 '15 at 07:33

parik dhakan

787
4
19

Nope, does not make a difference . Infact setting as a background stretch the image even more – Snake Jun 30 '15 at 18:58

score 0 · Answer 6 · answered Jun 30 '15 at 17:04

I ran into a similar problem. Android doesn't like RelativeLayout to size based on its children when its children align to its right or bottom. This is considered a "circular reference", though I agree that there would be valid use cases for laying out this way. I have worked around this using a FrameLayout:

<FrameLayout
  android:layout_width="wrap_content"
  android:layout_height="wrap_content">
    <ImageView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="..." />
    <RelativeLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent">
        [ other views with their relative layout parameters]
    </RelativeLayout>
</FrameLayout>

in this layout, the FrameLayout should get its size from the image view, then the RelativeLayout would match that.

I am almost sure I tried that before but I will try it again and report back — Snake, Jun 30 '15 at 18:58

Dialog size does not match the background image

6 Answers6

Linked