Added proper chat layout.

app/src/main/res/drawable/message_background.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+
+    <solid android:color="#ffffff"/>
+
+    <stroke android:width="1dip" android:color="@color/chat_seperator"/>
+
+</shape>

app/src/main/res/layout/activity_add_contacts.xml

@@ -1,3 +1,5 @@
+<?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="match_parent" >

app/src/main/res/layout/activity_main.xml

@@ -1,3 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+
 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@android:id/primary"
     android:layout_width="fill_parent"

app/src/main/res/layout/dialog_add_contact.xml

@@ -1,3 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+
 <RelativeLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"

app/src/main/res/layout/fragment_chat.xml

@@ -1,58 +1,57 @@
+<?xml version="1.0" encoding="utf-8"?>
+
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
+    android:layout_weight="10"
     android:orientation="vertical">
 
-    <LinearLayout
+    <FrameLayout
-        android:layout_width="match_parent"
-        android:orientation="vertical"
         android:layout_height="0dp"
-        android:layout_weight="10">
+        android:layout_width="match_parent"
+        android:layout_weight="11"
+        android:layout_marginLeft="10dip"
+        android:layout_marginRight="10dip"
+        android:layout_marginBottom="2dip"
+        android:background="@color/chat_background">
 
-        <FrameLayout
+        <ListView
-            android:layout_height="0dp"
+            android:id="@android:id/list"
+            android:layout_height="match_parent"
             android:layout_width="match_parent"
-            android:layout_weight="11"
+            android:stackFromBottom="true"
-            android:background="@android:color/background_light">
+            android:transcriptMode="normal"
+            android:divider="@android:color/transparent"
+            android:dividerHeight="5dp"/>
 
-            <ListView
+    </FrameLayout>
-                android:id="@android:id/list"
-                android:drawSelectorOnTop="false"
-                android:layout_height="match_parent"
-                android:layout_width="match_parent"
-                android:footerDividersEnabled="true" />
 
-        </FrameLayout>
+    <View
+        android:layout_width="match_parent"
+        android:layout_height="1dip"
+        android:background="@color/chat_seperator"/>
 
+    <LinearLayout
+        android:layout_height="wrap_content"
+        android:layout_width="match_parent"
+        android:background="@android:color/background_light"
+        android:id="@+id/linearLayout"
+        android:orientation="horizontal">
 
-        <FrameLayout
+        <EditText
-            android:layout_height="0dp"
+            android:id="@+id/message"
-            android:layout_width="match_parent"
+            android:layout_width="0dp"
-            android:layout_weight="1">
+            android:layout_height="wrap_content"
+            android:layout_weight="1"
+            android:imeOptions="actionDone"
+            android:inputType="textMultiLine|textCapSentences|textAutoCorrect"/>
 
-            <LinearLayout
+        <Button
-                android:layout_height="match_parent"
+            android:id="@+id/send"
-                android:layout_width="match_parent"
+            android:layout_width="45dp"
-                android:background="@android:color/darker_gray"
+            android:layout_height="45dp"
-                android:id="@+id/linearLayout">
+            android:background="@drawable/ic_action_send_now"
-
+            android:onClick="sendMessage"/>
-                <EditText
-                    android:id="@+id/message"
-                    android:layout_width="0dp"
-                    android:layout_height="match_parent"
-                    android:layout_weight="1"
-                    android:imeOptions="actionDone" />
-
-                <Button
-                    android:id="@+id/send"
-                    android:layout_width="45dp"
-                    android:layout_height="45dp"
-                    android:background="@drawable/ic_action_send_now"
-                    android:onClick="sendMessage"/>
-
-            </LinearLayout>
-
-        </FrameLayout>
 
     </LinearLayout>
 

app/src/main/res/layout/fragment_contacts.xml

@@ -1,3 +1,5 @@
+<?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="match_parent" >

app/src/main/res/layout/item_message.xml

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<RelativeLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:layout_height="wrap_content"
+    android:layout_width="match_parent"
+    android:orientation="horizontal">
+
+    <TextView
+        android:id="@android:id/text1"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:padding="5dip"
+        android:background="@drawable/message_background"
+        android:textAppearance="?android:attr/textAppearanceMedium"/>
+
+</RelativeLayout>

app/src/main/res/values-v21/style.xml

@@ -1,4 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
+
 <resources>
     <style name="AppTheme" parent="@android:style/Theme.Material.Light.DarkActionBar" />
 </resources>

app/src/main/res/values/colors.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<resources>
+
+    <!-- Background color for ChatFragment -->
+    <color name="chat_background">#E6FFE6</color>
+
+    <!-- Color for message border and compose/message layout seperator in ChatFragment -->
+    <color name="chat_seperator">#AAAAAA</color>
+
+</resources>

app/src/main/res/values/strings.xml

@@ -1,4 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
+
 <resources>
 
     <!-- Global -->

app/src/main/res/values/style.xml

@@ -1,4 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
+
 <resources>
     <style name="AppTheme" parent="@android:style/Theme.Holo.Light.DarkActionBar" />
 </resources>

app/src/main/res/xml/settings.xml

@@ -1,4 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
+
 <PreferenceScreen xmlns:android="http://schemas.android.com/apk/res/android">
 
     <EditTextPreference

app/src/main/scala/com/nutomic/ensichat/fragments/ChatFragment.scala

@@ -51,7 +51,7 @@ class ChatFragment extends ListFragment with OnClickListener
       // Read local device ID from service,
       adapter = new MessagesAdapter(getActivity, chatService.localDeviceId)
       chatService.registerMessageListener(ChatFragment.this)
-      onMessageReceived(chatService.database.getMessages(device, 10))
+      onMessageReceived(chatService.database.getMessages(device, 15))
 
       if (listView != null) {
         listView.setAdapter(adapter)
@@ -97,7 +97,7 @@ class ChatFragment extends ListFragment with OnClickListener
    */
   override def onClick(view: View): Unit = view.getId match {
     case R.id.send =>
-      val text: String = messageText.getText.toString
+      val text: String = messageText.getText.toString.trim
       if (!text.isEmpty) {
         if (!chatService.isConnected(device)) {
           Toast.makeText(getActivity, R.string.contact_offline_toast, Toast.LENGTH_SHORT).show()

app/src/main/scala/com/nutomic/ensichat/util/MessagesAdapter.scala

@@ -1,8 +1,9 @@
 package com.nutomic.ensichat.util
 
 import android.content.Context
-import android.view.{View, ViewGroup}
+import android.view.{Gravity, View, ViewGroup}
-import android.widget.{ArrayAdapter, TextView}
+import android.widget.{ArrayAdapter, RelativeLayout, TextView}
+import com.nutomic.ensichat.R
 import com.nutomic.ensichat.bluetooth.Device
 import com.nutomic.ensichat.messages.TextMessage
 
@@ -10,15 +11,30 @@ import com.nutomic.ensichat.messages.TextMessage
  * Displays [[TextMessage]]s in ListView.
  */
 class MessagesAdapter(context: Context, localDevice: Device.ID) extends
-  ArrayAdapter[TextMessage](context, android.R.layout.simple_list_item_1) {
+  ArrayAdapter[TextMessage](context, R.layout.item_message, android.R.id.text1) {
+
+  /**
+   * Free space to the right/left to a message depending on who sent it, in dip.
+   */
+  private val MessageMargin = 50
 
   override def getView(position: Int, convertView: View, parent: ViewGroup): View = {
-    val view: View = super.getView(position, convertView, parent)
+    val view = super.getView(position, convertView, parent).asInstanceOf[RelativeLayout]
-    val tv: TextView = view.findViewById(android.R.id.text1).asInstanceOf[TextView]
+    val tv = view.findViewById(android.R.id.text1).asInstanceOf[TextView]
-    view.setBackgroundColor(context.getResources.getColor(
+
-      if (getItem(position).sender == localDevice) android.R.color.holo_blue_light
-      else android.R.color.holo_green_light))
     tv.setText(getItem(position).text)
+
+    val lp = new RelativeLayout.LayoutParams(tv.getLayoutParams)
+    val margin = (MessageMargin * context.getResources.getDisplayMetrics.density).toInt
+    if (getItem(position).sender == localDevice) {
+      view.setGravity(Gravity.RIGHT)
+      lp.setMargins(margin, 0, 0, 0)
+    } else {
+      view.setGravity(Gravity.LEFT)
+      lp.setMargins(0, 0, margin, 0)
+    }
+    tv.setLayoutParams(lp)
+
     view
   }