Xamarin ChatBubble layout for android

Question

I found BubbleCell an xamarin application for ios but I need the same layout for an android application. I couldn't find any good tutorial or example on google. Can anyone please provide me a tutorial or link for an example of this.

Answer 1

I hava also searched for a Xamarin Sample project that displays how to make a chat application, but coundn't find one. Maybe you could get help from an android java sample project like AndroidChatBubbles

Here is some layouts of my own project

The xml view of the activity:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
<!-- Displays the text chat -->
    <ListView
        android:id="@+id/forms_centralfragments_chat_chat_listView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:layout_above="@+id/forms_centralfragments_chat_chat_editLayout"
        android:background="@color/list_line_seperate"
        android:clipToPadding="false"
        android:listSelector="#00000000"
        android:divider="@null"
        android:paddingBottom="@dimen/controlcenter_layout_height" />
    <LinearLayout
        android:id="@+id/forms_centralfragments_chat_chat_editLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:layout_alignParentBottom="true"
        android:stackFromBottom="true"
        android:transcriptMode="alwaysScroll"
        android:orientation="horizontal">
        <EditText
            android:id="@+id/forms_centralfragments_chat_chat_editText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:inputType="textMultiLine"
            android:layout_marginRight="10dp"
            android:paddingBottom="10dp"
            android:paddingTop="12dp"
            android:layout_weight="1"
            android:background="#FFFFFF" />
        <Button
            android:id="@+id/forms_centralfragments_chat_chat_sendButton"
            android:layout_width="70dp"
            android:layout_height="40dp"
            android:background="@drawable/button_style"
            android:text="Senden"
            android:textColor="#FFFFFF" />
    </LinearLayout>
</RelativeLayout>

the bubble xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
 <TextView
        android:id="@+id/list_bubble_userName"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_margin="10dp"
        android:maxLines="1"
        android:singleLine="true"
        android:textColor="@color/text_color_black" />
    <TextView
        android:id="@+id/list_bubble_message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:maxWidth="230dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:background="@drawable/bubble_green"
        android:paddingLeft="10dp"
        android:textColor="@color/text_color_black" />
</LinearLayout>

and the adapter:

public class BubbleAdapter : ArrayAdapter<BubbleEntity>
    {

        /// <summary>
        /// The context of the activity
        /// </summary>
        private Activity _context;

        /// <summary>
        /// The list that holds the bubble strings
        /// </summary>
        private List<BubbleEntity> _bubbleList;

        /// <summary>
        /// Creates a new Instance of the <see cref="FloatStringAdapter"/> - Class
        /// </summary>
        /// <param name="context"></param>
        /// <param name="floatStringList"></param>
        public BubbleAdapter(Activity context, List<BubbleEntity> bubbleList)
            : base(context, Resource.Layout.list_bubble, bubbleList)
        {
              this._context = context;
              this._bubbleList = bubbleList;
        }

     public override View GetView(int position, View convertView, ViewGroup parent)
            {

                // Get our object for this position
                var item = this._bubbleList[position];
                var view = (convertView ??
                       this._context.LayoutInflater.Inflate(
                       Resource.Layout.list_bubble,
                       parent,
                       false)) as LinearLayout;

                TextView username = view.FindViewById<TextView>(Resource.Id.list_bubble_userName);
                TextView message = view.FindViewById<TextView>(Resource.Id.list_bubble_message);
                username.TextFormatted = Html.FromHtml(item.UserNameText);
                message.Text = item.Text;
                if(item.IsTheDeviceUser == false)
                {
                    view.SetGravity(GravityFlags.Left);
                    message.SetBackgroundResource(Resource.Drawable.bubble_other);     
                }
                else
                {
                    view.SetGravity(GravityFlags.Right);
                    message.SetBackgroundResource(Resource.Drawable.bubble_user);
                }

                 return view;
            }
}

Notice that BubbleEntity (the entity that transfers the data of a message) contains a bool field IsDeviceUser that indicates where the message comes from (the device user or the other chatter), accordingly it changes the alignment of the image and the drawable of the bubble. Do not forget that you should use 9 patch images for the bubbles, otherwise you will have problems with the scaling.