Android display messages in textview like normal sms

Question

I am building an android application which will send and recieve messages from a server (using JSON and HTTP sender).

Now i thought that it could be cool if the messages were displayed just like when you send or recieve an SMS.

for example: Picture

I have been trying to google around for some hours now, but all i find is how to send an sms from your android application.

Does anyone know if this is possible?

Answer 1

Listview + 2 different layouts for list items (received and sent). Also check this to help you implement a listview with two item types.

Answer 2

To create this layout you will need an activity with two fragments. The first fragment will just contain the view of your editor. The second fragment will be a ListFragment that displays the message results. The list fragment will inflate a custom view, that consists of a background image (which is the little speech bubble) and 2 TextView widgets that contain the date and message respectivley, and an ImageView with an onClick listener (or a ImageButton ) for the star.

Here is a sample of the overall activity layout

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:orientation="vertical"
          android:layout_width="match_parent"
          android:layout_height="match_parent">
<fragment
    android:name="com.your.package.MessageListFragment"
    android:id="@+id/message_list"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    />
<fragment
    android:name="com.your.package.EditorFragment"
    android:id="@+id/editor"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    />

And here is a sample of the fragment that is the message entry interface

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#252525"
>
<Button
    android:id="@+id/attach_photo"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="8dp"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:background="@drawable/picture_attach_button"
    android:onClick="onAttachPicture"
    />
<Button
    android:id="@+id/send_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_below="@id/attach_photo"
    android:padding="8dp"
    android:text="Send"
    android:onClick="onSendClick"
    />

<EditText
    android:id="@+id/message"
    android:layout_alignParentLeft="true"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_toLeftOf="@id/send_buton"
    android:layout_centerVertical="true"
    android:hint="Enter messaage.."
    />
<ImageView
    android:id="@+id/attached_image"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_above="@id/message"
    />

And for your ListView fragment make a slight modification to the default list view to add some margins (there are other ways to do this)

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#252525"
>
<ListView android:id="@+id/android:list"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:marginLeft="8dp"
          android:marginRight="8dp"
          />
<TextView android:id="@+id/android:empty"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:text="this is an empty list"
    />

And the adapter you attach to your ListView will have to return a custom UI element that looks like this see here how to implement a custom ListView :

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/speech_bubble"
>
<ImageButton
    android:id="@+id/favorite_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:onClick="onFavoriteClick"
    android:src="@drawable/star"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    />
<TextView android:id="@+id/response_message"
          android:layout_width="0dp"
          android:layout_height="wrap_content"
          android:layout_alignParentLeft="true"
          android:layout_toLeftOf="@id/favorite_button"
          android:text="this is an empty list"
    />

The speech_bubble drawable should be a 9patch image that does not scale the corners or the indent of the bubble.

You do all of the applications back end work in the onClickListeners (ie onSendClick, onAttachPicture, onFavoriteClick). You can populate your custom ListView in any number of ways, but one way is to use a BroadCastReceiver that listens for incoming SMS messages, or define your own receiver in your backend code.