Q:

Mimick whatsapp messages layout in android

I'm doing trying to recreate whatsapp's layout using android and this is what i have so far
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <FrameLayout
        android:id="@+id/message_pane"
        android:layout_height="wrap_content"
        android:minHeight="300dp"
        android:layout_width="match_parent"
        android:foregroundGravity="fill">

    </FrameLayout>

    <LinearLayout
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:gravity="bottom"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:id="@+id/linearLayout">

        <EditText
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:hint="@string/edit_text"
            android:id="@+id/edit_text" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/send_text"
            android:onClick="sendMessage"/>

    </LinearLayout>

</RelativeLayout>

And this is what my java file looks like
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.widget.EditText;
import android.widget.FrameLayout;
import android.widget.TextView;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    public void sendMessage(View view) {
        EditText message = (EditText) findViewById(R.id.edit_text);

        TextView text = new TextView(this);
        text.setText(message.getText());

        FrameLayout msgs = (FrameLayout) findViewById(R.id.message_pane);
        msgs.addView(text);
    }

}

When i click on send, the message does appear on the FrameLayout, but the next one's all go to the same location.
I would like to know how to make them go below previous messages and if there are any better layouts i can use to implement Whatsapp's layout.
Thanks.

A:

Haha, got it working at last, i was able to use uiautomatorviewer (suggested by CommonsWare) to view their structure.
It turns out i has to implement a custom adapter in addition to a Listview to get it working, here's the code in case anyone is interested.
MessageAdapter.java
package com.example.mestchat.Adapter;

/**
 * Created by elimence on 6/1/13.
 */
import java.util.List;

import android.app.Activity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.TextView;
import com.example.mestchat.MessageData;
import com.example.mestchat.R;

public class MessageAdapter extends ArrayAdapter {
    private final Activity activity;
    private final List messages;

    public MessageAdapter(Activity activity, List objs) {
        super(activity, R.layout.message_list , objs);
        this.activity = activity;
        this.messages = objs;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        View rowView = convertView;
        MessageView msgView = null;

        if(rowView == null)
        {
            // Get a new instance of the row layout view
            LayoutInflater inflater = activity.getLayoutInflater();
            rowView = inflater.inflate(R.layout.message_list, null);

            // Hold the view objects in an object,
            // so they don't need to be re-fetched
            msgView = new MessageView();
            msgView.msg = (TextView) rowView.findViewById(R.id.message_text);

            // Cache the view objects in the tag,
            // so they can be re-accessed later
            rowView.setTag(msgView);
        } else {
            msgView = (MessageView) rowView.getTag();
        }

        // Transfer the stock data from the data object
        // to the view objects
        MessageData currentMsg =  (MessageData)messages.get(position);
        msgView.msg.setText(currentMsg.getMessage());

        return rowView;
    }

    protected static class MessageView {
        protected TextView msg;
    }
}

MessageData.java
package com.example.mestchat;

/**
 * Created by elimence on 6/1/13.
 */

public class MessageData {
    private String message;

    public MessageData(String message) {
        this.message = message;
    }
    public void setMessage(String message) {
        this.message = message;
    }
    public String getMessage() {
        return message;
    }
}

package com.example.mestchat;

import android.app.ListActivity;
import android.os.AsyncTask;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.widget.*;
import com.example.mestchat.Adapter.MessageAdapter;
import com.example.mestchat.REST.RestWebServices;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends ListActivity {

    MessageAdapter adapter;

    List msgs;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        msgs =  new ArrayList();
        adapter = new MessageAdapter(this, msgs);
        setListAdapter(adapter);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    public void sendMessage(View view) {    
        EditText message = (EditText) findViewById(R.id.enter_message);
        String mText = message.getText().toString();

        msgs.add(new MessageData(mText));
        adapter.notifyDataSetChanged();
        message.setText("");
    }

}

message_list.xml
<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:gravity="fill_horizontal"
    android:layout_height="wrap_content">

    <RelativeLayout
        android:layout_height="wrap_content"
        android:layout_width="match_parent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="right"
            android:layout_marginTop="@dimen/activity_horizontal_margin"
            android:textColor="@color/black"
            android:background="@color/white"
            android:id="@+id/message_text" />

    </RelativeLayout>

</LinearLayout>

activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical">

    <!--<FrameLayout-->
        <!--android:background="@color/header_color"-->
        <!--android:layout_width="match_parent"-->
        <!--android:layout_height="0dp"-->
        <!--android:layout_weight="1">-->

    <!--</FrameLayout>-->

    <LinearLayout
        android:layout_width="match_parent"
        android:orientation="vertical"
        android:layout_height="0dp"
        android:layout_weight="10">

        <FrameLayout
            android:layout_height="0dp"
            android:layout_width="match_parent"
            android:layout_weight="11">

            <ListView
                android:id="@android:id/list"
                android:background="@drawable/background"
                android:drawSelectorOnTop="false"
                android:layout_height="match_parent"
                android:layout_width="match_parent"
                android:footerDividersEnabled="true">

            </ListView>

        </FrameLayout>

        <FrameLayout
            android:layout_height="0dp"
            android:layout_width="match_parent"
            android:layout_weight="1">

            <LinearLayout
                android:layout_height="match_parent"
                android:layout_width="match_parent"
                android:background="@color/send_box_color"
                android:id="@+id/linearLayout">

                <EditText
                    android:id="@+id/enter_message"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:hint="@string/edit_text" />

                <Button
                    android:id="@+id/send_button"
                    android:layout_width="45dp"
                    android:layout_height="30dp"
                    android:background="@drawable/send_btn"
                    android:onClick="sendMessage"/>

            </LinearLayout>

        </FrameLayout>

    </LinearLayout>

</LinearLayout>

