RelativeLayout alignment rules don't work in DialogFragment

Question

I have an about dialog with RelativeLayout. It works correctly in ordinary activity, but when I decided to move it into DialogFragment, most of alignment rules stopped working. Here is the layout:

<?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"
    android:minHeight="250dp" >

    <TextView
        android:id="@+id/label_copyright"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_marginTop="20dp"
        android:text="Copyright (c) 2013 Copyright"
        android:textSize="8dp" />

    <TextView
        android:id="@+id/label_version"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_above="@+id/label_copyright"
        android:layout_marginTop="2dp"
        android:text="@null" />

    <TextView
        android:id="@+id/label_app_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/label_version"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="2dp"
        android:text="Application Name"
        android:textSize="25dp" />


    <ImageView
        android:id="@+id/image_app_logo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/label_app_name"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="16dp"
        android:src="@drawable/field_public_required" />


    <TextView
        android:id="@+id/label_description"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_below="@+id/label_copyright"
        android:layout_marginTop="30dp"
        android:gravity="center"
        android:autoLink="web"
        android:text="application description with more details" />


</RelativeLayout>

Here is how it should work, and it does actually work so when in an activity (Eclipse graphical layout screenshot):

And here is how it looks in running application with fragments:

Apparently, only the first view is centered as expected, while all the others are just pushed to the top. No matter which minHeight I specify in the layout, the behaviour is always the same.

The code to instantiate the dialog is very simple:

@Override
public Dialog onCreateDialog(Bundle savedInstanceState)
{
    LayoutInflater inflater = getActivity().getLayoutInflater();
    View view = inflater.inflate(R.layout.about, null);

    try
    {
      TextView t = (TextView)view.findViewById(R.id.label_version);
      t.setText(getActivity().getPackageManager().getPackageInfo(getActivity().getPackageName(), 0).versionName);
    }
    catch(NameNotFoundException e)
    {
    }

    return new AlertDialog.Builder(getActivity())
    .setView(view)
    .setTitle(R.string.about)
    .setPositiveButton(R.string.ok,
    new DialogInterface.OnClickListener()
    {
      public void onClick(DialogInterface dialog, int whichButton)
      {
      }
    }
    )
    .create();
}

What is wrong with it and how to fix it?

Answer 1

We had the same bug. We ended up doing something REALLY hacky to get it to work:

<LinearLayout android:layout_width="fill_parent"
              android:layout_height="fill_parent">
  <RelativeLayout android:layout_width="fill_parent"
                  android:layout_height="fill_parent">
    <EditText android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_centerVertical="true"
              android:layout_centerHorizontal="true"
              android:id="@+id/layout_form_field">
    <Button android:layout_below="@id/layout_form_field"/>
  </RelativeLayout>
</LinearLayout>

Basically, just nest your RelativeLayout inside a LinearLayout... #silly

Answer 2

Change your XML layout to :

 <?xml version="1.0" encoding="utf-8" ?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:orientation="vertical"
     android:layout_height="match_parent"
     android:layout_width="match_parent"
     android:gravity="center">
     <ImageView
          android:id="@+id/imageViewApplicationImage"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"/>
     <TextView
          android:id="@+id/textViewApplicationName"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"/>
     <TextView
          android:id="@+id/textViewApplicationDescription"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"/>
     <TextView
          android:id="@+id/textViewApplicationCopyright"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"/>

</LinearLayout>

What the important part here is setting the gravity attribute so all your Widgets will be centered in the view. The gravity attribute sets the positioning of the child views for the linear layout.