Android Basic Layout Sizing

Question

I am creating a Final Score screen for a game of mine.

I've been having trouble with lining up the text in the layout that with the text "Raw Score" "bonus points" and "Final Score".

For whatever reason, if I line up the text in the layout editor as shown, it turns out fine on the phone. If I make the text lined up as it ought to be in the layout editor, then it will be offset on the phone.

• Is there a reliable way to make the Eclipse layout editor and my phone agree?
• Is there a reliable way to make this layout align itself properly on phones of different sizes and pixel densities?

If it matters, I am using a full screen theme. I can also post the rest of the xml if so desired.

Here is the relevant xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="fill_parent">

        <LinearLayout android:orientation="vertical" android:id="@+id/FinalTally_Layout" android:background="@drawable/layoutbackgroundlarge" android:layout_weight="1" android:visibility="visible" android:layout_width="wrap_content" android:layout_height="95dp">

            <LinearLayout android:id="@+id/linearLayout2" android:layout_width="fill_parent" android:layout_height="wrap_content">
                <TextView android:textColor="#FF000000" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="  Raw Score" android:id="@+id/RawScoreLabel" android:gravity="left|center_vertical" android:textSize="22dp" android:layout_weight="1"></TextView>
                <TextView android:textColor="#FF000000" android:layout_height="wrap_content" android:layout_width="fill_parent" android:text="3200  " android:id="@+id/RawScore" android:gravity="right|center_vertical" android:textSize="22dp" android:layout_weight="1"></TextView>
            </LinearLayout>

            <LinearLayout android:id="@+id/linearLayout3" android:layout_width="fill_parent" android:layout_height="wrap_content">
                <TextView android:textColor="#FF000000" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1" android:text="  Bonus Points" android:id="@+id/BonusPointsLabel" android:gravity="left|center_vertical" android:textSize="22dp"></TextView>
                <TextView android:textColor="#FF000000" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="1900  " android:layout_weight="1" android:id="@+id/BonusPoints" android:gravity="right|center_vertical" android:textSize="22dp"></TextView>
            </LinearLayout>

            <LinearLayout android:id="@+id/linearLayout6" android:layout_width="fill_parent" android:layout_height="wrap_content">
                <TextView android:textColor="#FF000000" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="  Final Score" android:layout_weight="1" android:id="@+id/FinalScoreReportLabel" android:gravity="left|center_vertical" android:textSize="22dp" android:textStyle="bold"></TextView>
                <TextView android:textColor="#FF000000" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="5100  " android:layout_weight="1" android:id="@string/FinalScoreReport" android:gravity="right|center_vertical" android:textSize="22dp" android:textStyle="bold"></TextView>
            </LinearLayout>

        </LinearLayout>


</LinearLayout>

Answer 1

Allen,

Instead of making that divider part of the background image for that section, you can dynamically produce a thin line like that by inserting a View with the background color you want.

Try...

    <LinearLayout android:orientation="vertical" android:id="@+id/FinalTally_Layout" android:background="@drawable/layoutbackgroundlarge" android:layout_weight="1" android:visibility="visible" android:layout_width="wrap_content" android:layout_height="95dp">

        <LinearLayout android:id="@+id/linearLayout2" android:layout_width="fill_parent" android:layout_height="wrap_content">
            <TextView android:textColor="#FF000000" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="  Raw Score" android:id="@+id/RawScoreLabel" android:gravity="left|center_vertical" android:textSize="22dp" android:layout_weight="1"></TextView>
            <TextView android:textColor="#FF000000" android:layout_height="wrap_content" android:layout_width="fill_parent" android:text="3200  " android:id="@+id/RawScore" android:gravity="right|center_vertical" android:textSize="22dp" android:layout_weight="1"></TextView>
        </LinearLayout>

        <LinearLayout android:id="@+id/linearLayout3" android:layout_width="fill_parent" android:layout_height="wrap_content">
            <TextView android:textColor="#FF000000" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1" android:text="  Bonus Points" android:id="@+id/BonusPointsLabel" android:gravity="left|center_vertical" android:textSize="22dp"></TextView>
            <TextView android:textColor="#FF000000" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="1900  " android:layout_weight="1" android:id="@+id/BonusPoints" android:gravity="right|center_vertical" android:textSize="22dp"></TextView>
        </LinearLayout>

        <View android:layout_height="1px" android:layout_width="fill_parent"android:background="#90909090"/>

        <LinearLayout android:id="@+id/linearLayout6" android:layout_width="fill_parent" android:layout_height="wrap_content">
            <TextView android:textColor="#FF000000" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="  Final Score" android:layout_weight="1" android:id="@+id/FinalScoreReportLabel" android:gravity="left|center_vertical" android:textSize="22dp" android:textStyle="bold"></TextView>
            <TextView android:textColor="#FF000000" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="5100  " android:layout_weight="1" android:id="@string/FinalScoreReport" android:gravity="right|center_vertical" android:textSize="22dp" android:textStyle="bold"></TextView>
        </LinearLayout>

    </LinearLayout>

Answer 2

The layout editor is wonky. In short, no there is no way to make them agree. Go with what you see is on the phone.

If I might offer a little advice, use a RelativeLayout instead of nesting LinearLayouts whenever possible.