crear un diseño de chatView en android

Question

Estoy creando una aplicación de chat y estoy pensando en 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.

Estaba pensando en crear un TableLayout y cada fila será la imagen de los usuarios y el mensaje de chat (o burbuja o lo que no).

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

esto es lo que he hecho 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 yo estoy tratando de lograr un aspecto esta

Answer 1

¿Qué hay debajo de 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 -

Just Customize this example with your needs.

Answer 2

En lugar de TableLayout, me gustaría que sugeriría create Custom adapter for ListView. Solo necesita verificar la condición para cambiar el fondo de diseño/vistas dentro del método getViews().

Algunos hilo puede ser útil para usted:

1. Android: ListView style like text messages conversations
2. Android Implementing Chat Bubble in ListView

Answer 3

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; 
} 

} 

utilizar de esta manera, en su 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); 

En base a esta http://www.androidhive.info/2014/10/android-building-group-chat-app-using-sockets-part-1/

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

Answer 4

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

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