créer une présentation chatView dans android

Question

Je suis en train de créer une application de chat et je réfléchis aux moyens de créer une vue de chat en direct.

J'ai déjà la mise en page pour la fenêtre de discussion elle-même mais je pensais à la façon de mettre en œuvre les messages de discussion.

Je pensais à créer un TableLayout et chaque ligne sera l'image de l'utilisateur et le message de discussion (ou bulle ou autre).

Est-ce que quelqu'un a une idée sur la façon de concevoir et de créer ces lignes?

ce que je l'ai fait jusqu'à présent

<?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> 

---

et je suis en train de réaliser un ce regard

Answer 1

Que diriez-vous ci-dessous le code -

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> 

Ceci est mon sortie -

Just Customize this example with your needs.

Answer 2

Au lieu de TableLayout, je vous suggère de create Custom adapter for ListView. Vous avez juste besoin de vérifier la condition pour changer l'arrière-plan de la mise en page/vues à l'intérieur getViews() méthode.

Certains fil peut vous être utile:

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

} 

utiliser comme ceci, dans votre activité

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

Sur la base de cette http://www.androidhive.info/2014/10/android-building-group-chat-app-using-sockets-part-1/

capture d'écran http://s10.postimg.org/4f24pmp6h/Screenshot_2015_04_01_20_34_56.png

Answer 4

J'ai créé une bibliothèque pour la création de liste de chat, cela pourrait aider

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