Why layout appears different in devices?

Question

I am not sure why the views are different but not stable.

<?xml version="1.0" encoding="utf-8"?>

<Button
    android:id="@+id/b"
    style="?android:attr/buttonStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBaseline="@+id/a"
    android:layout_alignBottom="@+id/a"
    android:layout_toRightOf="@+id/a"
    android:gravity="center"
    android:text="B"
    android:textSize="25dp" />

<Button
    android:id="@+id/c"
    style="?android:attr/buttonStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBaseline="@+id/b"
    android:layout_alignBottom="@+id/b"
    android:layout_toRightOf="@+id/b"
    android:gravity="center"
    android:text="C"
    android:textSize="25dp" />

<Button
    android:id="@+id/d"
    style="?android:attr/buttonStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBaseline="@+id/c"
    android:layout_alignBottom="@+id/c"
    android:layout_toRightOf="@+id/c"
    android:gravity="center"
    android:text="D"
    android:textSize="25dp" />

<Button
    android:id="@+id/e"
    style="?android:attr/buttonStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBaseline="@+id/d"
    android:layout_alignBottom="@+id/d"
    android:layout_toRightOf="@+id/d"
    android:gravity="center"
    android:text="E"
    android:textSize="25dp" />

<Button
    android:id="@+id/h"
    style="?android:attr/buttonStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBaseline="@+id/g"
    android:layout_alignBottom="@+id/g"
    android:layout_toLeftOf="@+id/c"
    android:gravity="center"
    android:text="H"
    android:textSize="25dp" />

<Button
    android:id="@+id/i"
    style="?android:attr/buttonStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@+id/m"
    android:layout_toRightOf="@+id/h"
    android:gravity="center"
    android:text="I"
    android:textSize="25dp" />

<Button
    android:id="@+id/j"
    style="?android:attr/buttonStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@+id/n"
    android:layout_toRightOf="@+id/i"
    android:gravity="center"
    android:text="J"
    android:textSize="25dp" />

<Button
    android:id="@+id/m"
    style="?android:attr/buttonStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/g"
    android:layout_below="@+id/g"
    android:gravity="center"
    android:text="M"
    android:textSize="25dp" />

<Button
    android:id="@+id/n"
    style="?android:attr/buttonStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBaseline="@+id/m"
    android:layout_alignBottom="@+id/m"
    android:layout_toRightOf="@+id/m"
    android:gravity="center"
    android:text="N"
    android:textSize="25dp" />

<Button
    android:id="@+id/k"
    style="?android:attr/buttonStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@+id/n"
    android:layout_toLeftOf="@+id/f"
    android:gravity="center"
    android:text="K"
    android:textSize="25dp" />

<Button
    android:id="@+id/l"
    style="?android:attr/buttonStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@+id/n"
    android:layout_toRightOf="@+id/w"
    android:gravity="center"
    android:text="L"
    android:textSize="25dp" />

<Button
    android:id="@+id/o"
    style="?android:attr/buttonStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBaseline="@+id/n"
    android:layout_alignBottom="@+id/n"
    android:layout_toRightOf="@+id/n"
    android:gravity="center"
    android:text="O"
    android:textSize="25dp" />

<Button
    android:id="@+id/s"
    style="?android:attr/buttonStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/m"
    android:layout_below="@+id/m"
    android:gravity="center"
    android:text="S"
    android:textSize="25dp" />

<Button
    android:id="@+id/t"
    style="?android:attr/buttonStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/n"
    android:layout_toLeftOf="@+id/o"
    android:gravity="center"
    android:text="T"
    android:textSize="25dp" />

<Button
    android:id="@+id/p"
    style="?android:attr/buttonStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@+id/t"
    android:layout_toRightOf="@+id/o"
    android:gravity="center"
    android:text="P"
    android:textSize="25dp" />

<Button
    android:id="@+id/r"
    style="?android:attr/buttonStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@+id/t"
    android:layout_alignLeft="@+id/l"
    android:gravity="center"
    android:text="R"
    android:textSize="25dp" />

<Button
    android:id="@+id/u"
    style="?android:attr/buttonStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@+id/z"
    android:layout_alignLeft="@+id/o"
    android:gravity="center"
    android:text="U"
    android:textSize="25dp" />

<Button
    android:id="@+id/v"
    style="?android:attr/buttonStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/p"
    android:layout_toLeftOf="@+id/q"
    android:gravity="center"
    android:text="V"
    android:textSize="25dp" />

<Button
    android:id="@+id/w"
    style="?android:attr/buttonStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/p"
    android:layout_toLeftOf="@+id/f"
    android:gravity="center"
    android:text="W"
    android:textSize="25dp" />

<Button
    android:id="@+id/q"
    style="?android:attr/buttonStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/k"
    android:layout_toRightOf="@+id/p"
    android:gravity="center"
    android:text="Q"
    android:textSize="25dp" />

<Button
    android:id="@+id/x"
    style="?android:attr/buttonStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@+id/z"
    android:layout_toRightOf="@+id/q"
    android:gravity="center"
    android:text="X"
    android:textSize="25dp" />

<Button
    android:id="@+id/z"
    style="?android:attr/buttonStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/v"
    android:layout_toLeftOf="@+id/q"
    android:gravity="center"
    android:text="Z"
    android:textSize="25dp" />

<Button
    android:id="@+id/f"
    style="?android:attr/buttonStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBaseline="@+id/e"
    android:layout_alignBottom="@+id/e"
    android:layout_toRightOf="@+id/e"
    android:gravity="center"
    android:text="F"
    android:textSize="25dp" />

<Button
    android:id="@+id/y"
    style="?android:attr/buttonStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBaseline="@+id/z"
    android:layout_alignBottom="@+id/z"
    android:layout_toLeftOf="@+id/z"
    android:gravity="center"
    android:text="Y"
    android:textSize="25dp" />

<TextView
    android:id="@+id/six"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBaseline="@+id/five"
    android:layout_alignBottom="@+id/five"
    android:layout_alignRight="@+id/d"
    android:text=""
    android:textColor="#B40404"
    android:textSize="30sp" />

<TextView
    android:id="@+id/five"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBaseline="@+id/four"
    android:layout_alignBottom="@+id/four"
    android:layout_toRightOf="@+id/c"
    android:text=""
    android:textColor="#B40404"
    android:textSize="30sp" />

<TextView
    android:id="@+id/four"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBaseline="@+id/three"
    android:layout_alignBottom="@+id/three"
    android:layout_alignLeft="@+id/c"
    android:layout_marginLeft="14dp"
    android:text=""
    android:textColor="#B40404"
    android:textSize="30sp" />

<TextView
    android:id="@+id/three"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBaseline="@+id/two"
    android:layout_alignBottom="@+id/two"
    android:layout_alignRight="@+id/b"
    android:text=""
    android:textColor="#B40404"
    android:textSize="30sp" />

<TextView
    android:id="@+id/two"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBaseline="@+id/one"
    android:layout_alignBottom="@+id/one"
    android:layout_toRightOf="@+id/a"
    android:text=""
    android:textColor="#B40404"
    android:textSize="30sp" />

<TextView
    android:id="@+id/seven"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBaseline="@+id/six"
    android:layout_alignBottom="@+id/six"
    android:layout_alignRight="@+id/e"
    android:layout_marginRight="15dp"
    android:text=""
    android:textColor="#B40404"
    android:textSize="30sp" />

<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@+id/three"
    android:layout_alignParentLeft="true"
    android:text="Chances:"
    android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
    android:id="@+id/one"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@+id/a"
    android:layout_alignParentLeft="true"
    android:layout_marginLeft="14dp"
    android:text=""
    android:textColor="#B40404"
    android:textSize="30sp" />

<TextView
    android:id="@+id/nine"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@+id/f"
    android:layout_alignRight="@+id/f"
    android:text=""
    android:textColor="#B40404"
    android:textSize="30sp" />

<TextView
    android:id="@+id/eight"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBaseline="@+id/seven"
    android:layout_alignBottom="@+id/seven"
    android:layout_toRightOf="@+id/seven"
    android:text=""
    android:textColor="#B40404"
    android:textSize="30sp" />

<Button
    android:id="@+id/a"
    style="?android:attr/buttonStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_centerVertical="true"
    android:gravity="center"
    android:text="A"
    android:textSize="25dp" />

<Button
    android:id="@+id/g"
    style="?android:attr/buttonStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/b"
    android:layout_toLeftOf="@+id/h"
    android:gravity="center"
    android:text="G"
    android:textSize="25dp" />

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentLeft="true"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/imgI"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_alignTop="@+id/imgD"
        android:layout_centerHorizontal="true"
        android:src="@drawable/i" />

    <ImageView
        android:id="@+id/imgL"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_alignTop="@+id/imgI"
        android:layout_toRightOf="@+id/imgI"
        android:src="@drawable/l" />

    <ImageView
        android:id="@+id/imgD"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_alignParentTop="true"
        android:layout_marginTop="115dp"
        android:layout_toLeftOf="@+id/imgI"
        android:src="@drawable/d" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/imgD"
        android:layout_alignRight="@+id/imgL"
        android:layout_below="@+id/imgI"
        android:text=" ___    ___    ___"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <TextView
        android:id="@+id/tCoins"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/ImageView01"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_toRightOf="@+id/imgL"
        android:text="                                "
        android:textColor="#B40404"
        android:textSize="25dp" />

    <ImageView
        android:id="@+id/ImageView01"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_alignParentTop="true"
        android:layout_toLeftOf="@+id/tCoins"
        android:src="@drawable/coins" />

</RelativeLayout>

Answer 1

To set your theme:

setTheme(android.R.style.Theme_Translucent_NoTitleBar); // Example theme; 

Holo - Theme_Holo_NoTitleBar

You must call it before:

setContentView(...);

Or add this to your manifest:

android:theme="@android:style/Theme.Holo.NoActionBar.Fullscreen"

You can remove NoActionBar, and Fullscreen, to get different things. Also you can add stuff. If you do it with code, there is autocomplete and you can see all themes and options.

Hope this helps.

Answer 2

Just use your custom theme, so you can have a "standard" theme across any Android version. http://developer.android.com/guide/topics/ui/themes.html

Answer 3

The first one uses the holo theme. The second devices uses the pre holo theme.