title: Implementing custom ListView for chat app
body: <p>I'm developing a kinda chat app and want to use a <code>ListView</code> for displaying messages. Currently I'm trying to get user's input and display it as an "outgoing message". My <code>row</code> layout is following: <code>TextView</code>(timestamp), <code>TextView</code>(message), <code>ImageView</code>(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.</p>
  
  <p>my Adapter:</p>
  
  <pre><code>public class ChatAdapter extends BaseAdapter {
  private Context context;
  
  private List&lt;String&gt; chat;
  
  public ChatAdapter(Context context, List&lt;String&gt; 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;
  }
  </code></pre>
  
  <p>my Activity:</p>
  
  <pre><code> public class ChatActivity extends ListActivity {
  
  private EditText input;
  private String tmpMessage;
  ListView lv;
  ChatAdapter adapter;
  List&lt;String&gt; 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&lt;String&gt;();
      adapter = new ChatAdapter(this, messages);
      lv.setOnItemClickListener(new OnItemClickListener() {
  
          @Override
          public void onItemClick(AdapterView&lt;?&gt; 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;
  }
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I added a holder and set the text using the following code:</p>
  
  <pre><code> String message = (String) getItem(position);
          holder.message.setText(message);
  </code></pre>
  
  <p>it works but the inflated layouts now get positioned randomly, see a screenshot below. It should look like</p>
  
  <p>test</p>
  
  <p>test1</p>
  
  <p>test2</p>
  
  <p>....</p>
  
  <p><img src="https://i.stack.imgur.com/lRxwf.png" alt="enter image description here"></p>
  
  <p>What is the reason?</p>