[Android Notes] Bubble ListView, Android bubble listview

[Android Notes] Bubble ListView, Android bubble listview

Effect:

To realize this effect, you can find the 9.png image of the bubble background, which can be extracted from the apk packages such as qq.
Steps:
1. Write the layout file.
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" >    <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_width="fill_parent"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:layout_alignParentLeft="true"        android:orientation="vertical" >        <EditText            android:id="@+id/chatText"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentBottom="true"            android:layout_alignParentLeft="true"            android:layout_alignParentStart="true"            android:layout_toLeftOf="@+id/buttonSend"            android:ems="10"            android:inputType="textMultiLine" />        <Button            android:id="@+id/buttonSend"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignBottom="@+id/chatText"            android:layout_alignParentEnd="true"            android:layout_alignParentRight="true"            android:text="Send" />    </RelativeLayout></RelativeLayout>

2. Compile the business data class:

Package com. example. chatbubble; public class ChatMessage {// public boolean left for each message; // public String message on the left; public ChatMessage (boolean left, String message) {super (); this. left = left; this. message = message ;}}

3. Compile 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 par Ent) {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 (po Sition); chatText. setText (msg. message);/* determine the background and position (left/right) based on the internal left identifier of 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. Compile the code on 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; priv Ate 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);. setOnClickListener (new OnClickListener () {@ Overridepublic void onClick (View v) {sendChatMessage (); // send message}); lv. setTranscriptMode (AbsListView. TRANSCRIPT_MODE_ALWAYS_SCROLL); // registers the observer and slides to the bottom adapter when the data changes. registerDataSetObserver (new DataSetObserver () {@ Overridepublic void onChanged () {super. onChanged (); lv. setSelection (adapter. getCount ()-1) ;}});} private boolean The sendChatMessage () {/* add method calls the notifyDataSetChanged method internally, so we do not need to call it manually! */Adapter. add (new ChatMessage (side, et. getText (). toString ();/* clear data */et. setText (""); side =! Side; return true ;}}

Effect complete!
Source Code address: https://github.com/Rowandjj/BubbleStyleListViewDemo