Crear un diseño chatView en android

Estoy creando una aplicación de chat y estoy pensando en las maneras de crear la vista de chat real.

Ya tengo el diseño de la ventana de chat en sí, pero estaba pensando en cómo implementar los mensajes de chat.

Yo estaba pensando en crear un TableLayout y cada fila será la imagen de los usuarios y el mensaje de chat (o burbuja o qué no).

¿Alguien tiene una idea sobre cómo diseñar y crear estas filas?

Esto es lo que hice hasta ahora:

 <?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:background="@android:color/background_light" android:orientation="vertical" android:weightSum="10" > <ScrollView android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_weight="1" > <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:stretchColumns="1" > <TableRow android:id="@+id/tableRow1" android:layout_width="wrap_content" android:layout_height="wrap_content" > <!-- insert chat message here !--> </TableRow> <View android:layout_height="2dip" android:background="#000" /> <TableRow android:id="@+id/tableRow2" android:layout_width="wrap_content" android:layout_height="wrap_content" > <!-- next chat message --!> </TableRow> </TableLayout> </ScrollView> <LinearLayout android:layout_width="match_parent" android:layout_height="fill_parent" android:layout_weight="9" android:orientation="horizontal" > <EditText android:id="@+id/chatLine" android:layout_width="fill_parent" android:layout_height="wrap_content" android:hint="Say:" android:imeOptions="actionSend" android:singleLine="true" /> </LinearLayout> </LinearLayout> 


Y estoy tratando de lograr este aspecto La vista de chat deseada

¿Qué tal debajo del código –

Main.xml

 <LinearLayout android:id="@+id/list_layout" android:layout_height="fill_parent" android:layout_width="fill_parent" android:background="@drawable/background" xmlns:android="http://schemas.android.com/apk/res/android"> <ListView android:id="@+id/myList" android:layout_height="fill_parent" android:layout_width="wrap_content"/> </LinearLayout> 

List_row_layout_even.xml

 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/even_container" android:layout_width="fill_parent" android:layout_height="wrap_content"> <ImageView android:id="@+id/user_img" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_marginTop="80dip" android:src="@drawable/sample_image"/> <ImageView android:id="@+id/even_bubble" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_alignParentRight="true" android:layout_margin="5dip" android:src="@drawable/even"/> <TextView android:id="@+id/text" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_alignParentRight="true" android:textColor="#000000" android:textSize="16dip" android:layout_marginRight="8dip" android:layout_marginLeft="120dip" android:layout_marginTop="10dip" /> </RelativeLayout> 

List_row_layout_odd.xml

 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/even_container" android:layout_width="fill_parent" android:layout_height="wrap_content"> <ImageView android:id="@+id/user_img" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_marginTop="80dip" android:layout_alignParentRight="true" android:src="@drawable/sample_image"/> <ImageView android:id="@+id/odd_bubble" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_alignParentLeft="true" android:layout_margin="5dip" android:src="@drawable/odd"/> <TextView android:id="@+id/text" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_alignParentLeft="true" android:textColor="#ffffff" android:textSize="16dip" android:layout_marginRight="120dip" android:layout_marginLeft="8dip" android:layout_marginTop="10dip" /> </RelativeLayout> 

Esta es mi salida –

Captura de pantalla

Apenas modifica este ejemplo para requisitos particulares con sus necesidades.

En lugar de TableLayout, le sugiero que cree Adaptador personalizado para ListView . Sólo tiene que comprobar la condición para cambiar el fondo de diseño / vistas dentro del método getViews() .

Algún hilo puede ser útil para usted:

  1. Android: estilo ListView como conversaciones de mensajes de texto
  2. Aplicación de la burbuja de chat de Android en ListView

List_item_message_left.xml

 <?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:gravity="left" android:orientation="vertical" android:paddingBottom="5dp" android:paddingRight="10dp" android:paddingTop="5dp" > <TextView android:id="@+id/lblMsgFrom" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="5dp" android:textColor="#777777" android:textSize="12dp" android:textStyle="italic" /> <RelativeLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content"> <TextView android:id="@+id/txtMsg" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/bg_msg_from" android:paddingBottom="5dp" android:paddingLeft="10dp" android:paddingRight="10dp" android:paddingTop="5dp" android:textColor="#ff717171" android:textSize="16dp" android:layout_toRightOf="@+id/textView27" android:layout_marginRight="50dp" /> <TextView android:id="@+id/textView27" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/triangle_msg_from" android:paddingRight="10dp" android:textColor="#ffffff" android:textSize="16dp" android:paddingLeft="10dp" android:paddingTop="2dp" android:layout_alignParentLeft="true" android:layout_marginTop="3dp" /> </RelativeLayout> </LinearLayout> 

List_item_message_right.xml

 <?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:gravity="right" android:orientation="vertical" android:paddingBottom="5dp" android:paddingRight="10dp" android:paddingTop="5dp" > <TextView android:id="@+id/lblMsgFrom" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="5dp" android:textColor="#777777" android:textSize="12dp" android:textStyle="italic" /> <RelativeLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content"> <TextView android:id="@+id/txtMsg" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/bg_msg_you" android:paddingBottom="5dp" android:paddingLeft="10dp" android:paddingRight="10dp" android:paddingTop="5dp" android:textColor="#ffffff" android:textSize="16dp" android:layout_toLeftOf="@+id/textView27" android:layout_marginLeft="50dp" /> <TextView android:id="@+id/textView27" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/triangle_msg_you" android:paddingRight="10dp" android:textColor="#ffffff" android:textSize="16dp" android:paddingLeft="10dp" android:paddingTop="2dp" android:layout_alignParentRight="true" android:layout_alignParentEnd="true" android:layout_marginTop="3dp" /> </RelativeLayout> </LinearLayout> 

Bg_msg_from.xml

 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true" > <shape android:shape="rectangle" > <solid android:color="#C0C0C0" > </solid> <corners android:radius="5dp" > </corners> </shape> </item> <item> <shape android:shape="rectangle" > <solid android:color="#D8D8D8"> </solid> <corners android:radius="5dp" > </corners> </shape> </item> </selector> 

Bg_msg_you.xml

 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true" > <shape android:shape="rectangle" > <solid android:color="#007AE5" > </solid> <corners android:radius="5dp" > </corners> </shape> </item> <item> <shape android:shape="rectangle" > <solid android:color="#0084FF" > </solid> <corners android:radius="5dp" > </corners> </shape> </item> </selector> 

Triangle_msg_from.xml

  <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item android:state_pressed="true" > <rotate android:fromDegrees="45" android:toDegrees="45" android:pivotX="87%" android:pivotY="140%" > <shape android:shape="rectangle" > <stroke android:color="#C0C0C0" android:width="10dp"/> </shape> </rotate> </item> <item> <rotate android:fromDegrees="45" android:toDegrees="45" android:pivotX="87%" android:pivotY="140%" > <shape android:shape="rectangle" > <stroke android:color="#D8D8D8" android:width="10dp"/> </shape> </rotate> </item> </layer-list> 

Triangle_msg_you.xml

  <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item android:state_pressed="true" > <rotate android:fromDegrees="45" android:toDegrees="45" android:pivotX="13%" android:pivotY="-40%" > <shape android:shape="rectangle" > <stroke android:color="#007AE5" android:width="10dp"/> </shape> </rotate> </item> <item> <rotate android:fromDegrees="45" android:toDegrees="45" android:pivotX="13%" android:pivotY="-40%" > <shape android:shape="rectangle" > <stroke android:color="#0084FF" android:width="10dp"/> </shape> </rotate> </item> </layer-list> 

MessageListAdapter.java

  package eddine.charef.mechalikh....; import java.util.List; import android.annotation.SuppressLint; import android.app.Activity; import android.content.Context; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; import android.widget.TextView; public class MessagesListAdapter extends BaseAdapter { private Context context; private List<Msg> messagesItems; public MessagesListAdapter(Context context, List<Msg> navDrawerItems) { this.context = context; this.messagesItems = navDrawerItems; } @Override public int getCount() { return messagesItems.size(); } @Override public Msg getItem(int position) { return messagesItems.get(position); } @Override public long getItemId(int position) { return position; } @SuppressLint("InflateParams") @Override public View getView(int position, View convertView, ViewGroup parent) { Msg m = messagesItems.get(position); LayoutInflater mInflater = (LayoutInflater) context .getSystemService(Activity.LAYOUT_INFLATER_SERVICE); if (messagesItems.get(position).getleMien()) { convertView = mInflater.inflate(R.layout.list_item_message_right, null); } else { convertView = mInflater.inflate(R.layout.list_item_message_left, null); } TextView lblFrom = (TextView) convertView.findViewById(R.id.lblMsgFrom); TextView txtMsg = (TextView) convertView.findViewById(R.id.txtMsg); txtMsg.setText(m.getMessage()+"\n"+m.getAttach()); lblFrom.setText(m.getDate()+" - "+m.getHeure()); return convertView; } } 

Msg.java

 package eddine.charef.mechalikh....; public class Msg { private String email, message; private boolean leMien; private String attach; private String cle; private String teleAttach; private String heure; private String date; public Msg(String cle,String email, String message,String attach,boolean leMien,String teleAttach,String heure,String date) { this.email = email; this.message = message; this.leMien = leMien; this.attach = attach; this.cle=cle; this.teleAttach = teleAttach; this.heure = heure; this.date=date; } public String getEmail() { return email; } public void setEmail(String email) { this.email = email; } public String getMessage() { return message; } public void setMessage(String message) { this.message = message; } public boolean getleMien() { return leMien; } public void setleMien(boolean leMien) { this.leMien = leMien; } public String getAttach() { return attach ; } public void setAttach(String attach) { this.attach = attach; } public String getCle() { return cle ; } public void setCle(String cle) { this.cle = cle; } public void setTeleAttach(String teleAttach) { this.teleAttach = teleAttach; } public String getTeleAttach() { return teleAttach ; } public void setHeure(String heure) { this.heure = heure; } public String getHeure() { return heure ; } public String getDate() { return date ; } public void setDate(String date) { this.date = date; } } 

Úsalo así, en tu actividad

  ListView listMsg; ArrayList<Msg> listMessages; MessagesListAdapter adapter; listMessages = new ArrayList<Msg>(); listMessages.add(new Msg(cle,email,message,attach....)); adapter = new MessagesListAdapter(this, listMessages); listMsg.setAdapter(adapter); 

Basado en este http://www.androidhive.info/2014/10/android-building-group-chat-app-using-sockets-part-1/

Captura de pantalla http://s10.postimg.org/4f24pmp6h/Screenshot_2015_04_01_20_34_56.png

He creado una biblioteca para crear la lista de chat, esto podría ayudar

https://github.com/himanshu-soni/ChatMessageView

  • Android - Tabla de estilos TableLayout
  • Android TableLayout con el ancho de la columna diferente en una fila
  • ¿Cuál es la mejor manera de crear una tabla de datos en android?
  • (TableLayout) findViewById (excepción de puntero nulo
  • ¿Cómo obtener el evento de clic de la fila de la tabla / elemento de la tabla?
  • Cómo dar frontera para tablerow en tablelayout en android?
  • ¿Cuál es el equivalente de "colspan" en un Android TableLayout?
  • TableRow llenar el espacio restante
  • Cómo combinar fila en una celda en la disposición de la tabla en android, dinámicamente?
  • Cómo configurar la columna de tabla en android
  • Cómo ampliar Android TableLayout
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.