Question

I’m developing a kinda chat app and want to use a ListView for displaying messages. Currently I’m trying to get user’s input and display it as an “outgoing message”. My row layout is following: TextView(timestamp), TextView(message), ImageView(message state indicator). My problem: the text and timestamp are not getting set, just a “dummy” layout is inflated. I guess I have to set the text inside the adapter somehow.. Can someone tell me what I’m doing wrong? The code is below.

my Adapter:

public class ChatAdapter extends BaseAdapter {
private Context context;

private List<String> chat;

public ChatAdapter(Context context, List<String> listchat) {
    this.context = context;
    this.chat = listchat;
}

public int getCount() {
    return chat.size();
}

public Object getItem(int position) {
    return chat.get(position);
}

public long getItemId(int position) {
    return position;
}

public View getView(int position, View convertView, ViewGroup viewGroup) {

    if (convertView == null) {
        LayoutInflater inflater = (LayoutInflater) context
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        convertView = inflater.inflate(R.layout.row, null);
    }
    TextView tvTS = (TextView) convertView.findViewById(R.id.tvTS);
    // TODO set timestamp

    TextView tvMessage = (TextView) convertView
            .findViewById(R.id.tvMessage);
    // TODO set the text to the actual message text from etInput

    ImageView indicator = (ImageView) convertView.findViewById(R.id.imgInd);

    // TODO set the image Resource according to message state
    return convertView;
}

my Activity:

 public class ChatActivity extends ListActivity {

private EditText input;
private String tmpMessage;
ListView lv;
ChatAdapter adapter;
List<String> messages;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.lis);
    Button send = (Button) findViewById(R.id.btnSend);
    input = (EditText) findViewById(R.id.etInput);
    lv = getListView();

    messages = new ArrayList<String>();
    adapter = new ChatAdapter(this, messages);
    lv.setOnItemClickListener(new OnItemClickListener() {

        @Override
        public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
                long arg3) {
            // TODO
        }
    });

    lv.setAdapter(adapter);

    send.setOnClickListener(new View.OnClickListener() {

        @Override
        public void onClick(View v) {
            sendMessage();
        }
    });
}

public void sendMessage() {

    tmpMessage = input.getText().toString();
    input.setText("");
    messages.add(tmpMessage);
    adapter.notifyDataSetChanged();

}

@SuppressLint("SimpleDateFormat")
public String generateTimestamp() {
    SimpleDateFormat sdf = new SimpleDateFormat("HH:mm");
    String ts = sdf.format(new Date());

    return ts;
}

UPDATE

I added a holder and set the text using the following code:

 String message = (String) getItem(position);
        holder.message.setText(message);

it works but the inflated layouts now get positioned randomly, see a screenshot below. It should look like

test

test1

test2

….

What is the reason?

Answer 1

You don’t seem to be setting the data to the TextViews/ImageView. You need to do this in the getView() method of your ChatAdapter, as follows:

public View getView(int position, View convertView, ViewGroup viewGroup) {

    if (convertView == null) {
        LayoutInflater inflater = (LayoutInflater) context
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        convertView = inflater.inflate(R.layout.row, null);
    }
    String chatMessage = getItem(position);
    TextView tvTS = (TextView) convertView.findViewById(R.id.tvTS);
    // TODO set timestamp

    TextView tvMessage = (TextView) convertView
            .findViewById(R.id.tvMessage);
    //Set the message to the TextView
    tvMessage.setText(chatMessage);

    ImageView indicator = (ImageView) convertView.findViewById(R.id.imgInd);

    // TODO set the image Resource according to message state
    return convertView;
}

Consider using a custom Object (instead of a list of Strings) to hold the message, timestamp and the type of message state indicator to be displayed. In that case, you could do this

ChatMessage msgObj = getItem(position);
...
tvMessage.setText(msgObj.getMessage());
tvTS.setText(msgObj.getTimestamp());
if ( msgObj.getStatus() == ChatMessage.DELIVERED )
{
  indicator.setBackgroundResource(R.drawable.delivered);
}
else if (....)