How to dynamically add a TextView/ImageView to a ListView item in Android

Question

I am creating a chatting app in Android. I was able to create the normal text chat list view with the following as the list item layout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content" >

<TextView
    android:id="@+id/chat_msg_view"
    android:layout_width="250dp"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"/>

<TextView
    android:id="@+id/msg_send_time"
    android:layout_width="250dp"
    android:layout_height="20dp"
    android:layout_below="@+id/chat_msg_view"
    android:layout_margin="2dp"
    android:paddingTop="2dp"
    android:textColor="@android:color/holo_blue_dark" />
<TextView
    android:id="@+id/msg_status"
    android:layout_width="250dp"
    android:layout_height="wrap_content"
    android:layout_below="@+id/msg_send_time"
    android:layout_margin="2dp"
    android:paddingTop="2dp"
    android:textColor="@android:color/holo_blue_dark" />
</RelativeLayout>

But now i am trying to send images as well via chat. So now i need to replace the first TextView in the above layout to ImageView if content being sent is IMAGE.

What is a good approach to do this.

Answer 1

There are lots of approaches you can use. If you are using a list view adapter you can use itemType to change the entire list item layout (good if you are changing the entire layout, but can be a bit complicated) or you can place an image view at the same location in your layout as the text view and show or hide which ever one you are using. IE If showing image, show the image view and hide the text view, if you are showing the text view, show the text and hide the image. Then you don't need to insert/remove views at run time, which is a little more complicated.

Your layout might look a bit like this...

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content" >

<TextView
    android:id="@+id/chat_msg_view"
    android:layout_width="250dp"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"/>

<ImageView
    android:id="@+id/chat_image_view"
    android:layout_width="250dp"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:visibility="gone"/>

<TextView
    android:id="@+id/msg_send_time"
    android:layout_width="250dp"
    android:layout_height="20dp"
    android:layout_below="@+id/chat_msg_view"
    android:layout_margin="2dp"
    android:paddingTop="2dp"
    android:textColor="@android:color/holo_blue_dark" />
<TextView
    android:id="@+id/msg_status"
    android:layout_width="250dp"
    android:layout_height="wrap_content"
    android:layout_below="@+id/msg_send_time"
    android:layout_margin="2dp"
    android:paddingTop="2dp"
    android:textColor="@android:color/holo_blue_dark" />
</RelativeLayout>

Notice how chat_image_view is also aligned to parent left.. it will be on top of the text view, but it has visibility "gone" so you wont see it.

Hope this helps, good luck.