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>

Answer 1

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>

1. Put an ImageView inside your Relative Layout.
2. Remove the background image of your RelativeLayout
3. 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

Answer 2

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

android:scaleType = "centerCrop"

Answer 3

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);

Answer 4

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.

Answer 5

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)

Answer 6

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" />