tags:

views:

255

answers:

2

My app shows a list of items, where each line is an item title with its image asides, the line reserves 70% of space for text and 30% for image. Imagine what iphone app store looks like. Which view/layout combo is recommended for this purpose?

I googled and find this article:

http://www.curious-creature.org/2009/02/22/android-layout-tricks-1/

Does this view sound good?

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="?android:attr/listPreferredItemHeight"

android:padding="6dip">

<ImageView
    android:id="@+id/icon"

    android:layout_width="wrap_content"
    android:layout_height="fill_parent"

    android:layout_alignParentTop="true"
    android:layout_alignParentBottom="true"
    android:layout_marginRight="6dip"

    android:src="@drawable/icon" />

<TextView
    android:id="@+id/secondLine"

    android:layout_width="fill_parent"
    android:layout_height="26dip" 

    android:layout_toRightOf="@id/icon"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"

    android:singleLine="true"
    android:ellipsize="marquee"
    android:text="Simple application that shows how to use RelativeLayout" />

<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"

    android:layout_toRightOf="@id/icon"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:layout_above="@id/secondLine"
    android:layout_alignWithParentIfMissing="true"

    android:gravity="center_vertical"
    android:text="My Application" />

+1  A: 

ListView with a custom layout for the row. When you create the ListAdapter(SimpleAdapter/ArrayAdapter) you can pass in a layout in the constructor. Its real easy if the image will always be the same, but if the image will vary you will need to override the getView method to create the view for the row.

BrennaSoft
+1  A: 

If by the "what the iPhone app store looks like", you mean "pretty much every single list out there" (well, at least as far as I can judge by the description, having never actually seen the iPhone app store), there seems to be only one way which works. The 'ideal' solution would be to use a RelativeLayout as that allows you to have two lines of text next to the image without needing to a complex layout structure. However, as you can see in this question and this other question, there seems to be some issue with that. So, the fallback is to use a horizontal LinearLayout, and nest a second vertical LinearLayout in it if you need multiple lines of text. See those posts for more details about what your LinearLayout should look like.

Note: I'm assuming you know how to use a ListView. If you don't know how ListViews work, then I recommend this article as a good starting place. It's a bit old, but still good. Just make sure you read its sequels as well, which explain how to use the convertView optimisation.

Edit: For anyone else reading this, here is a tutorial on Lists with much better formatting, making it easier to read.

Steve H
Thanks I edited original post. Could you please take a look?
Yang
That's exactly the post I discussed in the two questions I linked. (Well ok, I linked to it on the official Android blog rather than his personal one). However, a few of us tried to get it to work and didn't manage to do so. It looks great until you put it in a ListView, and then for some inexplicable reason it doesn't load properly. If you can get it to look right, let us know!
Steve H
I had encounted new errors, can you take a look at my new post: http://stackoverflow.com/questions/2549585/android-failed-to-setcontentview-when-switching-to-listactivity
Yang
and btw: the tutorial in http://www.androidguys.com/2008/07/14/fancy-listviews-part-one/ doesn't really work any more.
Yang
I think you simple misunderstood what it was saying - I'll answer your other post to explain what I mean.
Steve H