Relative layout in ListView android

Question

I am trying to fetch data from RSS in my android app. I need the data in a specific format. I am able to do everything but get my ListView to look as I want. It currently looks like

We can see that the eye symbol and the number are not aligned. And that the eye symbol is below the left thumbnail. I want it to look like

Refer to the 1st list item, left oval. The eye view image and number are aligned with each other and to the bottom of left thumbnail. And at the place of 2nd empty oval I want another TextView where I would show the source of news as text.

My current code for 1 iteam in ListView goes like this :-

<!-- postitem.xml -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingBottom="5dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="5dp"
android:background="@drawable/bg" >

<ImageView
    android:id="@+id/postThumb"
    android:layout_width="90dp"
    android:layout_height="80dp"
    android:layout_marginRight="5dp"
    android:scaleType="centerCrop"
    android:src="@drawable/logo" />

<TextView
    android:id="@+id/postTitleLabel"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_alignTop="@id/postThumb"
    android:layout_toRightOf="@id/postThumb"
    android:ellipsize="end"
    android:maxLines="2"
    android:text="Place for title"
    android:textIsSelectable="false"
    android:textSize="16sp" />

<TextView
    android:id="@+id/postDateLabel"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@id/postThumb"
    android:layout_alignParentRight="true"
    android:layout_toRightOf="@id/postThumb"
    android:maxLines="1"
    android:text="April 12, 2013"
    android:textSize="12sp" />

<TextView
    android:id="@+id/postViews"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginLeft="20sp"
    android:layout_alignLeft="@+id/postDateLabel"
    android:layout_alignParentRight="true"
    android:layout_toRightOf="@+id/eye"
    android:layout_below="@id/postDateLabel"
    android:maxLines="1"
    android:text="1212"
    android:textSize="12sp" />

<ImageView
    android:id="@+id/eye"
    android:layout_width="13dp"
    android:layout_height="7dp"
    android:layout_alignLeft="@+id/postDateLabel"
    android:layout_below="@id/postDateLabel"
    android:scaleType="centerCrop"
    android:src="@drawable/eye" />

</RelativeLayout>

Any help would be greatly appreciated. I would be thankful if someone could share a good resource where I could learn this UI designing easily.

Thanks

Answer 1

The problem is basicaly this line:

android:layout_alignBottom="@id/postThumb"

in your postDateLabel.

You said, okay, align this label to the thumbnail bottom, and when you say that you want the eye and the text below the postDateLabel, that's where it ends up. You're gonna buy me a beer for this:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingBottom="5dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="5dp" >

<ImageView
    android:id="@+id/postThumb"
    android:layout_width="90dp"
    android:layout_height="80dp"
    android:layout_marginRight="5dp"
    android:scaleType="centerCrop"
    android:src="@drawable/abc_ic_go" />

<TextView
    android:id="@+id/postTitleLabel"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_alignTop="@id/postThumb"
    android:layout_toRightOf="@id/postThumb"
    android:ellipsize="end"
    android:maxLines="2"
    android:text="Place for title"
    android:textIsSelectable="false"
    android:textSize="16sp" />

<TextView
    android:id="@+id/postDateLabel"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_above="@+id/postViews"
    android:layout_alignParentRight="true"
    android:layout_toRightOf="@id/postThumb"
    android:maxLines="1"
    android:text="April 12, 2013"
    android:textSize="12sp" />

<TextView
    android:id="@+id/postViews"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@id/postThumb"
    android:layout_alignLeft="@+id/postDateLabel"
    android:layout_alignParentRight="true"
    android:layout_marginLeft="20sp"
    android:layout_toRightOf="@+id/eye"
    android:maxLines="1"
    android:text="1212"
    android:textSize="12sp" />

<ImageView
    android:id="@+id/eye"
    android:layout_width="13dp"
    android:layout_height="7dp"
    android:layout_alignBottom="@id/postThumb"
    android:layout_alignLeft="@+id/postDateLabel"
    android:scaleType="centerCrop"
    android:src="@drawable/abc_spinner_ab_pressed_holo_dark" />

PS You have a lot of unnecessary atributes set in xml.. I just did this in a few sec to help you. You should read how RelativeLayout and LinearLayout work.

Answer 2

The best way to align is to use Linear layout and put imageview and textview within that layout

For example :-

     <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:orientation="Horizontal" >

      <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
         />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
              />