Dialog Layout not correct displayed

Question

I implemented my own dialog.This is the xml- code:

 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.MainActivity"
    android:gravity="center_vertical|center_horizontal"
    android:background="#00ffffff">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:background="#ad1457"
        android:gravity="center"
        android:layout_above="@+id/gameOptions_difficulty"
        android:layout_alignLeft="@+id/gameOptions_difficulty"
        android:layout_alignStart="@+id/gameOptions_difficulty"
        android:id="@+id/gameOptions_title"
        android:weightSum="1">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/gamemode_title"
            android:layout_gravity="center_horizontal"
            android:textColor="#efebe9"
            android:textSize="10pt"
            android:padding="10dp"
            android:layout_marginBottom="8dp" />
    </LinearLayout>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:background="#ad1457"
        android:id="@+id/gameOptions_difficulty"
        android:layout_above="@+id/gameOptions_gameMode"
        android:layout_alignLeft="@+id/gameOptions_gameMode"
        android:layout_alignStart="@+id/gameOptions_gameMode"
        android:baselineAligned="false"
        android:minHeight="50dp"
        android:padding="5dp"
        android:gravity="center_horizontal"
        android:weightSum="1">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:text="Easy"
            android:id="@+id/easy_button"
            android:layout_marginLeft="8dp"
            android:onClick="setDifficulty" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:text="Medium"
            android:id="@+id/medium_button"
            android:onClick="setDifficulty" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:text="Hard"
            android:id="@+id/hard_button"
            android:onClick="setDifficulty" />
    </LinearLayout>

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="300dp"
        android:layout_height="169dp"
        android:orientation="vertical"
        android:gravity="center"
        android:background="#ad1457"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:id="@+id/gameOptions_gameMode"
        android:weightSum="3">

        <Button
            android:id="@+id/roundbased_button"
            android:layout_width="200dp"
            android:layout_height="50dp"
            android:onClick="setGameMode"
            android:text="@string/roundbased_game_text" />

        <Button
            android:layout_width="200dp"
            android:layout_height="50dp"
            android:text="@string/to_the_end_text"
            android:onClick="setGameMode"
            android:id="@+id/toTheEnd_button"
            android:layout_gravity="center_horizontal" />

    </LinearLayout>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:background="#ad1457"
        android:layout_below="@+id/gameOptions_gameMode"
        android:layout_alignLeft="@+id/gameOptions_gameMode"
        android:layout_alignStart="@+id/gameOptions_gameMode"
        android:id="@+id/gameOptions_footer">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/back_button_text"
            android:id="@+id/back_button"
            android:layout_weight="1"
            android:onClick="clickExitButton" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/ok_button_text"
            android:id="@+id/ok_button"
            android:layout_weight="1"
            android:onClick="clickOkButton" />
    </LinearLayout>

</RelativeLayout>

Here is how i create the dialog :

        gameOptions = new Dialog(MainActivity.this);
        gameOptions.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
        gameOptions.setContentView(R.layout.dialog_gameoptions);
        gameOptions.show();

In the gui builder from android studio , my layout looks like this :

But when i launch my app on my phone(htc one m9) , the layout looks like this :

How do i have to change my layout, that it looks like the one in the gui builder?What am i missing?Thanks!.

Answer 1

If you use the Relativelayout you can avoid all of this Linearlayout.

For example this is one of the my Dialog

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context="com.ddz.diarioscolastico.Dialog_add_voto">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="Inserire il voto"
        android:id="@+id/textView4"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:inputType="numberDecimal"
        android:ems="10"
        android:id="@+id/voto_inserito"
        android:layout_below="@+id/textView4"
        android:layout_centerHorizontal="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text=""
        android:id="@+id/data_voto"
        android:layout_below="@+id/voto_inserito"
        android:layout_centerHorizontal="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="Tipo di voto"
        android:id="@+id/textView6"
        android:layout_below="@+id/data_voto"
        android:layout_centerHorizontal="true" />

    <Spinner
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/spinner_tipo_voto"
        android:layout_below="@+id/textView6"
        android:layout_centerHorizontal="true" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Aggiungi"
        android:id="@+id/button_aggiungi"
        android:layout_below="@+id/spinner_tipo_voto"
        android:layout_centerHorizontal="true" />

</RelativeLayout>

It's good in the phone and in the tablet too! This is a simple activity that in the Manifest have this setting:

   <activity
        android:name=".Dialog_add_voto"
        android:label="@string/title_activity_dialog_add_voto"
        android:theme="@android:style/Theme.Holo.Light.Dialog" >
    </activity>

But for your layout i suggest something like that after try to use only the Relativelayout:

 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.MainActivity"
    android:gravity="center_vertical|center_horizontal"
    android:background="#00ffffff">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ad1457"
        android:gravity="center"
        android:layout_above="@+id/gameOptions_difficulty"
        android:layout_alignLeft="@+id/gameOptions_difficulty"
        android:layout_alignStart="@+id/gameOptions_difficulty"
        android:id="@+id/gameOptions_title"
        android:weightSum="1">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/gamemode_title"
            android:layout_gravity="center_horizontal"
            android:textColor="#efebe9"
            android:textSize="10pt"
            android:padding="10dp"
            android:layout_marginBottom="8dp" />
    </LinearLayout>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ad1457"
        android:id="@+id/gameOptions_difficulty"
        android:layout_above="@+id/gameOptions_gameMode"
        android:layout_alignLeft="@+id/gameOptions_gameMode"
        android:layout_alignStart="@+id/gameOptions_gameMode"
        android:baselineAligned="false"
        android:minHeight="50dp"
        android:padding="5dp"
        android:gravity="center_horizontal"
        android:weightSum="1">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:text="Easy"
            android:id="@+id/easy_button"
            android:layout_marginLeft="8dp"
            android:onClick="setDifficulty" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:text="Medium"
            android:id="@+id/medium_button"
            android:onClick="setDifficulty" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:text="Hard"
            android:id="@+id/hard_button"
            android:onClick="setDifficulty" />
    </LinearLayout>

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_contentt"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gravity="center"
        android:background="#ad1457"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:id="@+id/gameOptions_gameMode"
        android:weightSum="3">

        <Button
            android:id="@+id/roundbased_button"
            android:layout_width="200dp"
            android:layout_height="50dp"
            android:onClick="setGameMode"
            android:text="@string/roundbased_game_text" />

        <Button
            android:layout_width="200dp"
            android:layout_height="50dp"
            android:text="@string/to_the_end_text"
            android:onClick="setGameMode"
            android:id="@+id/toTheEnd_button"
            android:layout_gravity="center_horizontal" />

    </LinearLayout>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ad1457"
        android:layout_below="@+id/gameOptions_gameMode"
        android:layout_alignLeft="@+id/gameOptions_gameMode"
        android:layout_alignStart="@+id/gameOptions_gameMode"
        android:id="@+id/gameOptions_footer">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/back_button_text"
            android:id="@+id/back_button"
            android:layout_weight="1"
            android:onClick="clickExitButton" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/ok_button_text"
            android:id="@+id/ok_button"
            android:layout_weight="1"
            android:onClick="clickOkButton" />
    </LinearLayout>

</RelativeLayout>

Answer 2

That could be due to your Dialog size, which means, you have created a lot of LinearLayouts - RelativeLayouts with eachother.

Of course, that should not work!

Use ScrollView if these items are big or you may want to take a look at this tutorial:

http://developer.android.com/guide/practices/screens_support.html

and of course, do not trust Android Studio Preview all the time :)