Thursday, June 25, 2009

Fighting with Android Layouts - lack of row spanning

So I've been trying to layout a couple of icons, two pieces of text and an image in an Android GUI, and have so far been thwarted from achieving the effect that I desire.

I've tried various arrangements and I still can't get what I want. My initial layout was just to use a simple table layout like the one on the left, which with android:shrinkColumns="1" means that the sentences get wrapped which looks good.

Results from emulator in image on left(translation sound icon is hidden when not available). My only complaint is that the image doesn't span two rows leaving a lot of blank space between sentences. Unfortunately it seems that Android tables don't support row spanning according to this Google groups post.

Next I tried a table within table layout as shown on the left, but try as i might with different combinations of stretch and shrink columns, either the image would get knocked onto the next row (as shown), or when it wasn't the bottom of the text would be cut off.

After that I tried experimenting with RelativeLayouts, where you can specify that one item should be positioned relative to another using syntax like android:layout_toRightOf = "@id/sentence_sound".

My first attempt - shown further down on the left, used a single RelativeLayout inside a table (tables seeming to be the only way to get the text to wrap), and that was probably the best result, given that the translation sound was absent.

You can see from the black image the way the translation sound doesn't line up with the translation from the eclipse GUI. Given the translation sound is usually absent in the content I am dealing with I will go with that for the moment.

The reason for giving up there is that what I thought was my clever final approach - to nest relative layouts, so we had one for the sentence and sound, and a second for the translation and sound, and place one above the other - leads to the complete disappearance of the translation, even though the hierarchy viewer claims that it's there.

I guess what I am attempting to do is a bit of a corner case, but it has been frustrating not to get the layout just as I wanted - almost as frustrating as trying to get all these images lined up in this blog post :-)

Even with these images I would be surprised if anyone can really understand what I'm doing. For replication, I really need an easy way to associate the XML layout files with each imsge. I'll happily provide those if anyone thinks they know a solution.

No comments: