"Android Notes" bubble ListView

Implementation results:

To achieve this effect, we need to find a 9.png picture of the bubble background, you can extract from the QQ and other APK packages.
implementation steps:
1. Write the layout file.
Layout of each entry Activity_chat_singlemessage.xml

<?xml version= "1.0" encoding= "Utf-8"? ><linearlayout xmlns:android= "http://schemas.android.com/apk/res/ Android "    android:layout_width=" fill_parent "    android:layout_height=" wrap_content ">    < LinearLayout        android:id= "@+id/singlemessagecontainer"        android:layout_width= "Fill_parent"        android: layout_height= "Wrap_content" >        <textview            android:id= "@+id/singlemessage"            android:layout_width = "Wrap_content"            android:layout_height= "wrap_content"            android:layout_gravity= "center"            android: Layout_margin= "5dip"            android:background= "@drawable/bubble_b"            android:paddingleft= "10dip            " Android:textsize= "18SP"            android:text= "Hello bubbles!"            Android:textcolor= "@android: Color/primary_text_light"/>    </LinearLayout></LinearLayout>

Interface layout:Activity_main.xml

<?xml version= "1.0" encoding= "Utf-8"? ><relativelayout xmlns:android= "http://schemas.android.com/apk/res/ Android "Android:layout_width=" Fill_parent "android:layout_height=" fill_parent "android:orientation=" vertical "&G    T <listview android:id= "@+id/listview1" android:divider= "@null" android:listselector= "@android: Color /transparent "android:layout_width=" match_parent "android:layout_height=" Wrap_content "android:layout _marginbottom= "80DP" > </ListView> <relativelayout android:id= "@+id/form" Android:layout_w Idth= "Fill_parent" android:layout_height= "Wrap_content" android:layout_alignparentbottom= "true" Andro Id:layout_alignparentleft= "true" android:orientation= "vertical" > <edittext android:id= "@+i D/chattext "android:layout_width=" wrap_content "android:layout_height=" Wrap_content "Android Oid:layout_alignparentbottoM= "true" android:layout_alignparentleft= "true" android:layout_alignparentstart= "true" and        roid:layout_toleftof= "@+id/buttonsend" android:ems= "android:inputtype=" Textmultiline "/>" <button android:id= "@+id/buttonsend" android:layout_width= "Wrap_content" Android:la yout_height= "Wrap_content" android:layout_alignbottom= "@+id/chattext" android:layout_alignparentend= "True" android:layout_alignparentright= "true" android:text= "Send"/> &LT;/RELATIVELAYOUT&GT;&L T;/relativelayout>

2. Write the Business data class:

Package Com.example.chatbubble;public class Chatmessage {//Indicates whether the public boolean left;//for each message is on the left public String message; Public Chatmessage (Boolean left, String message) {super (); this.left = Left;this.message = message;}}

3. Writing the adapter class

Package Com.example.chatbubble;import Java.util.arraylist;import Java.util.list;import android.content.Context; Import Android.view.gravity;import Android.view.layoutinflater;import Android.view.view;import Android.view.viewgroup;import Android.widget.arrayadapter;import Android.widget.linearlayout;import Android.widget.textview;public class Chatarrayadapter extends Arrayadapter<chatmessage>{private TextView Chattext;private linearlayout container;private list<chatmessage> chatdata = new ArrayList<> (); @ overridepublic void Add (Chatmessage object) {Chatdata.add (object); Super.add (object);} @Overridepublic int GetCount () {return chatdata.size ();} @Overridepublic chatmessage getItem (int position) {return chatdata.get (position);} @Overridepublic view GetView (int position, view Convertview, ViewGroup parent) {if (Convertview = = null) {Layoutinflater Inflater = (layoutinflater) this.getcontext (). Getsystemservice (context.layout_inflater_service); ConvertView = Inflater.inflate (r.layout.aCtivity_chat_singlemessage,parent, false);} Chattext = (TextView) Convertview.findviewbyid (r.id.singlemessage); container = (linearlayout) Convertview.findviewbyid (R.id.singlemessagecontainer); Chatmessage msg = GetItem (position), Chattext.settext (msg.message);/* Determines what background, and position (left/right) should be selected, based on the internal Ieft identifier of the MSG */ Chattext.setbackgroundresource (msg.left? R.DRAWABLE.BUBBLE_B:R.DRAWABLE.BUBBLE_A); Container.setgravity (Msg.left? Gravity.LEFT:Gravity.RIGHT); return convertview;} Public Chatarrayadapter (context context, int resource) {Super (context, Resource);}}

4. Write the code for the main interface:

Package Com.example.chatbubble;import Android.app.activity;import Android.database.datasetobserver;import Android.os.bundle;import Android.view.view;import Android.view.view.onclicklistener;import Android.widget.abslistview;import Android.widget.button;import Android.widget.edittext;import Android.widget.listview;public class Mainactivity extends Activity{private ListView lv;private Button but;private EditText et;private chatarrayadapter Adapter;private Boolean side = false; @Overrideprotected void OnCreate (Bundle Savedinstancestate) {super.oncreate (savedinstancestate); Setcontentview (r.layout.activity_main); LV = (ListView) Findviewbyid (r.id.listview1); but = (Button) Findviewbyid (r.id.buttonsend); et = (EditText) Findviewbyid (r.id.chattext ); adapter = new Chatarrayadapter (this,r.layout.activity_chat_singlemessage); Lv.setadapter (adapter); But.setonclicklistener (New Onclicklistener () {@Overridepublic void OnClick (View v) {sendchatmessage ();//Send Message}}); Lv.settranscriptmode (Abslistview.transcript_moDe_always_scroll);//Registered observer, the data changes when the end of the Adapter.registerdatasetobserver (new Datasetobserver () {@Overridepublic void OnChanged () {super.onchanged (); Lv.setselection (Adapter.getcount ()-1);}}); The private Boolean sendchatmessage () {/*add method calls the Notifydatasetchanged method internally, so we do not need to call!*/adapter.add manually (the new Chatmessage ( Side, Et.gettext (). toString ());/* Clears the data */et.settext (""); side =!side;return true;}}

The effect is complete!
Source Address: Https://github.com/Rowandjj/BubbleStyleListViewDemo

"Android Notes" bubble ListView