How to vertically align an item in a list using relative layout?

Question

I use list view in Android 1.5 to show a list of images and text next to the image. I'm trying to vertically center the text, but the text is at the top of the line, not the center. Below is my layout:

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/row" android:layout_width="fill_parent" android:layout_height="wrap_content" android:padding="10dip"> <ImageView android:id="@+id/item_image" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingRight="10dip" android:src="@drawable/default_image" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:layout_alignParentBottom="true" android:layout_centerVertical="true" android:gravity="center_vertical"/> <TextView android:id="@+id/item_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@id/item_image" android:layout_alignParentTop="true" android:layout_alignParentBottom="true" android:layout_centerVertical="true" android:gravity="center_vertical" /> </RelativeLayout> 

It seems strange that I need to set alignParentTop = "true" when I try to vertically center the text, but if I do not, the text will not even appear. What am I doing wrong?

Answer 1

EDIT after comments:

It turns out that doing this work with RelativeLayout is not easy. At the bottom of the answer, I turned on RelativeLayout, which gives the desired effect, but only until it is included in the ListView. After that, the same problems arose as in the question. This has been fixed using LinearLayout (s).

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingLeft="10dp" android:orientation="horizontal"> <ImageView android:id="@+id/pickImageImage" android:layout_width="100dp" android:layout_height="80dp" android:background="@drawable/icon" android:scaleType="fitXY" android:layout_marginRight="10dp"/> <TextView android:id="@+id/pickImageText" android:layout_height="fill_parent" android:layout_width="fill_parent" android:gravity="left|center_vertical" android:text="I'm the text"/> </LinearLayout> 

If you want to have two text fields, you can nest the second orientation="vertical" and LinearLayout after the ImageView, and then put the text fields there.

This works, but I must admit that I do not know why RelativeLayouts did not. For example, this blog post by Romain Guy suggests that RelativeLayout should. When I tried this, I never had enough labor; admittedly, I did not do this exactly like him, but my only changes were related to some TextViews attributes that should not have made that much difference.

---

Here's the original answer:

I think you're confusing Android with all of these somewhat conflicting instructions in RelativeLayout. I reformatted your case:

 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/row" android:layout_width="fill_parent" android:layout_height="wrap_content" android:padding="10dip"> <ImageView android:id="@+id/item_image" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingRight="10dip" android:src="@drawable/icon" android:layout_alignParentLeft="true" android:layout_alignParentTop="true"/> <TextView android:id="@+id/item_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@id/item_image" android:layout_centerVertical="true" android:text="Blah!"/> </RelativeLayout> 

And it works great. I removed many of your redundant android:layout_alignParentxxx because they were not needed. This view now displays the image in the upper left corner and the text vertically next to it. If you want the image to be also vertically centered, you cannot have a RelativeLayout on android: layout_height = "wrap_content" because it is trying to make itself no higher than the height of the image. You must indicate the height, for example. 80dp, and then set the ImageView to a fixed height, like 60dp, with android: scaleType = "fitXY" to zoom out to fit.

Answer 2

Stuck in a similar problem for a while, but found this from CommonsWare:

"When you inflate(R.layout.whatever, parent, false) layout, use inflate(R.layout.whatever, parent, false) , where parent is a ListView.

It works, but only when you set the line height to a specific value (i.e. you cannot use wrap_content).

Answer 3

The base directive will do this, but ImageView simply does not support baseline alignment today. You can get around this by creating a subclass of ImageView, override the getBaseline () method and return the height of the image.