Android Layout On Top of an Image

Question

I am struggling with a Layout Problem on Android. This is very simple to do on the iPhone, but with the various screen sizes and the Layout classes available. I am having a hard time doing this.

One thing that I have noticed is that setting backgrounds on objects in the xml really messes up the layout on the device. I generally have to put in a FrameLayout and an ImageView to get a background.

So Am trying to get to this. http://www.calidadsystems.com/images/AndroidListItem.png (Sorry I don't have enough pts to post the image)

his is a status view and is an item in a List View. There are 8 TextViews that need to be set. Each of the 222 fields will change. The current background has the colors in there at specific locations and I am trying to line up the Labels and TextViews to get the picture below. I built this one with AbsoluteLayout which is deprecated, but it also does not work very well on the device.

I have constantly struggled with the layouts on Android. Does someone have some good sample code that could do this?

Answer 1

You're probably going to want to use a RelativeLayout. You can use the android:layout_alignTop="id" attribute to make the rows be in line correctly. And android:layout_alignLeft="id" for the columns. Other than that its just a matter of playing with the android:layout_marginLeft="XXdip" attribute to get the space between them how you want it. Check out this page for an overview and examples of all of the Layout types. Here is some more sample RelativeLayout code. And one more page with another example. RelativeLayout is a bit tricky to get used to but once you've used it a few times its pretty easy to understand and get the Layout that you want. The benefit of it is that your UIs look nice on several different screen sizes when you define them this way.

Answer 2

Why not just composed the layout in a table layout and set the table layout's background to a custom made graphic you make? This should work well with you. Specifically the design of your design would be like 4 columns with x rows. Then using the strechcolumn property, you should be able to accomplish what you are trying to do!

If you scale the graphic properly, then you shouldn't have this problem overall.