Help with my first Android UI

I'm having trouble developing the UI for my first lame "game".

Here is a screenshot.

I'm using a LinearLayout that contains a TableLayout with TableRows. It seems so tedious and hard to control the position of elements.

For example, to get things to line up, I've inserted empty TextViews to "push" other elements into place.

I've also added padding to the buttons to get them to be the size I w开发者_JAVA百科ant.

Is there a better way of doing this?

Thanks!

You definitely want to be using a Relative Layout for this.

You would be able to specify where each button is in relation to other buttons.

Absolutely AVOID developing your UIs the way you are currently trying. The TextViews will be different sizes for different distributions of Android, and will likely only look right on the device you tested them for.

EDIT:

If you need empty space, use the XML attribute android:weightSum="x" in the parent view and android:layout_weight="y" in the child. This will make the child take up (y/x) of the space allotted to it in the layout_height and layout_width.

EDIT:

I think another good bit of advice for this would be to use individual layouts for things like your "direction" buttons. You'll be able to handle where they are on the screen as a group, instead of having to move each individually.

You should use RelativeLayout to solve this problem. I've gone through a similar problem once...

I didn't use the the Android's default buttons, for I had my own images for the pressed and unpressed behaviors...

Let suppose you want to place the east "button". You could use a function like:

public void addEastImageView(RelativeLayout myBackgroundLayout, ImageView center, ImageView east, int leftPadding, int topPadding, int rightPadding, int bottomPadding){
        RelativeLayout.LayoutParams rightSide = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        rightSide.addRule(RelativeLayout.RIGHT_OF, center.getId());

        east.setPadding(leftPadding, topPadding, rightPadding, bottomPadding);
        myBackgroundLayout.addView(east, rightSide);
}

The ImageView called "center" would be the one you called "i" in your image. The padding parameters would allow you to control the distance between the ImageViews. You can create functions like this one to add the "west", "south" and "north" buttons also: you just have to change the parameter "RelativeLayout.RIGHT_OF" to "RelativeLayout.LEFT_OF", "RelativeLayout.BELLOW" and "RelativeLayout.ABOVE" accordingly.

If you want some behavior for your ImageViews, you just have to set it in the setOnClickListener. You can then change your ImageView's "image" with setBackgroundResource, for example, and set the others logic behaviors you want.

Hope it helps :D

Use an AbsoluteLayout - it lets you state exactly where to put every element

http://mobiforge.com/designing/story/understanding-user-interface-android-part-1-layouts

<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
>
<Button
    android:layout_width="188px"
    android:layout_height="wrap_content"
    android:text="Button"
    android:layout_x="126px"
    android:layout_y="361px"
    />
<Button
    android:layout_width="113px"
    android:layout_height="wrap_content"
    android:text="Button"
    android:layout_x="12px"
    android:layout_y="361px"
    />