Most effecient way to create proportional views

Question

I want to create a full-screen page that looks like this:

 ---------------------------------------  
| --------  --------------------------- |  
||        ||          TextView         ||  
||        | --------------------------- |  
|| Image  | -----------------  -------- |  
|| View   ||                 ||        ||  
||        ||    TextView     ||        ||  
||        ||                 || Image  ||  
||        ||                 || View   ||  
| --------  ----------------- |        ||  
| --------------------------- |        ||  
||          TextView         ||        ||  
| ---------------------------  -------- |  
 ---------------------------------------  

where each ImageView takes up at most 20% of the parent layout's width.

Primary question: Really...what is the best way to do this? After hours of searching, the best idea I can come up with is to get the screen's width and simply set the views' widths to be a max of 20% of that. However, this intuitively does not seem like a best-practice solution. (Eg. if the application wasn't running in full screen, this solution wouldn't work.) A LinearLayout won't work with the way the page is laid out (appears I have to use a RelativeLayout). And I think it would be preferable to set the views' widths based on the parent view's width (as opposed to the screen's width), but I'm not clear on how to do that either, because at the time that I'm trying to set up the widths of my children views, parentView.getWidth() returns 0. Does anyone have any good, clean solutions for how to create a page as shown above?

Secondary question: Does anyone know how to wrap text around images as shown above? After still more hours of searching, I couldn't find a solution for this; seems like you need to stitch together a couple of TextViews. Is there a better way that I'm missing?

Thanks for any info anyone can provide.

Answer 1

I'm not sure if that's possible. Even if it is are you sure it's the best layout for a screen that's less than 4" big? Maybe instead of trying to figure out how to do this layout come up with ones that's more suited to a small screen.

If the android sdk makes it hard to do then it's likely not something you should be doing.

Answer 2

On the second question, you can position an Image to the top, bottom, right or left of a TextView using

android:drawableTop 
android:drawableBottom 
android:drawableLeft
android:drawableRight

You can also set the padding with

android:drawablePadding

check the API

I'll try to answer to the first question when you specify more details of the design. Anyway, I suggest using a RelativeLayout.

Answer 3

Hi,

You can use android:layout_weight property inside XML layout to achieve this.

Answer 4

Hey thanks for the responses. Some further clarification:

a) layout_weight doesn't appear to work with RelativeLayouts; looks like it's a LinearLayout only tag. As matto pointed out above, I can't see any way to create my particular setup with LinearLayouts since the right image is not aligned with the left. (If there's a way to do it though, can you let me know..)

b) Ah, thanks. Somehow I missed the drawableLeft etc. tags. I'll try those out and see if that does it.

c) As for screen size, I'm doing this with android tablets in mind. None out yet by any big names, but likely some will be coming down the line. I agree though, on a small 4" screen this layout probably wouldn't make sense.

I'm not sure what other design details are needed for my question here; I thought the layout I drew above would be enough. Was there anything else specific that I could say to clarify the question?