android - studio - chatkit chat

crear un diseño de chatView en Android

Question

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

Ya tengo el diseño de la ventana de chat, 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 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 look

Answer 1

¿Qué tal el código abajo?

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 -

Solo personaliza este ejemplo con tus necesidades.

Answer 2

En lugar de TableLayout, le sugiero que cree un adaptador personalizado para ListView . Solo necesita verificar la condición para cambiar el fondo del diseño / vistas dentro del método getViews() .

Algunos hilos pueden ser útiles para usted:

1. Android: estilo ListView como conversaciones de mensajes de texto
2. Implementando Android Chat Bubble en ListView

Answer 3

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

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

Answer 4

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