Question

I have three text blocks and an image which I would like to to fit in a layout as indicated in the sketch. (Ignore the red lines for a second.)

(I know the quality is awful. If anyone can recommend me a decent (open) graphic editor for os x/linux I’d appreciate it! (nope, not gimp!))

My idea was to tackle the problem like this:

• Relative Layout.
• position the second text block relative to the first one.

e.g.:

android:layout_below=text1  
android:layout_ (make it "float" to screen's right edge - not sure how to do that, yet.

• The third text block relative to the 1st and 2nd block.

e.g.:

android:layout_below=text2
android:layout_alignLeft = text1

Ok. No let’s get to the image. It’s arbitrary size so I thought with some aligns I could fit it in. If you know look at the red lines from the sketch I though about aligning the image accordingly.

android:layout_alignTop = text2
android:layout_alignBottom = text2
android:layout_alignLeft = text1

However I’m not very good in doing layouts and when I tried to implement it like this the 4 pieces of content more or less knocked around on the screen but I never got them all into position.

The closest I could achieve was this but I don’t like the usage of hard coded limits in there. I’m afraid it is not super flexible then.
though I have to limit the display size of the image somewhat I was hoping with the surrounded text blocks the droids would be smart enough to figure out the size by their own.

<TextView
    android:id="@+id/text1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dip"
    android:text="text1" />

<ImageView
    android:id="image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="text1"
    android:layout_marginRight="7dip"
    android:layout_marginTop="5dip"
    android:adjustViewBounds="true"
    android:maxHeight="150sp"
    android:maxWidth="150sp"
    android:src="srcFile" />

<TextView
    android:layout_marginTop="5dip"
    android:id="text2"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignTop="image"
    android:layout_below="text1"
    android:layout_toRightOf="image"
    android:text="text2" />

<TextView
    android:id="text3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="image"
    android:layout_marginTop="10dip"
    android:text="text3" />

So I’d like to hear what you think about my approach and if there’s something I could improve as well as how to actually implement it.

edit:
So I’d like to find a solution where I could drop this part of the code because I’m afraid it’s not flexible enough:

android:maxHeight="150sp"
android:maxWidth="150sp"

Answer 1

It is possible to keep the proportions of the image and adjust its size without code. Simply use linear layouts and weight the views accordingly

<TextView
       android:id="@+id/text1"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="text1" />

   <LinearLayout
       android:id="@+id/ll"
       android:layout_below="@+id/text1"
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"
       android:weightSum="2"
       android:orientation="horizontal" >

       <ImageView
           android:id="@+id/image"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_weight="11"
           android:adjustViewBounds="true"
           android:src="srcFile" />

       <TextView
           android:id="@+id/text2"
           android:layout_weight="1"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="text2" />
   </LinearLayout>

   <TextView
       android:id="@+id/text3"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_below="@+id/ll"
       android:text="text3" />