Quick tips for ListView: build a layout like a chat with TranscriptMode and StackFromBottom
Our purpose is to create a very simple layout with a ListView that looks like a chat.
Something like this:
It is very easy.
Let's take a common ListView in a RelativeLayout.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMQgTQ30JpFiNkXg_reW3F4LliRayS3GQEJfHjM3NrgNJFvA6PtymK3XX_IK49LZt29tDUvNVfMgvYO9_gKe5r1zMFh0AJ5YCBT6aSMLP8NK25lYnxORQlyPzNm71h-zNnCwvTs2JKPA-_/s440/list0.gif)
This is still not what we wuold like to achieve.
Now we'll add an xml attribute to ListView:android:stackFromBottom="true".
In this way the ListView stacks its content from the bottom.
We'll optimize the scroll with another xml attribute:
android:transcriptMode="alwaysScroll"
In this way the list will automatically scroll to the bottom.
Ok, with two simple attributes we obtained the list.
Now we'll add a EditText at the bottom, to complete our layout.
Sure it's a small example, the next step is to add a small animation.
You can get code from GitHub (built with AndroidStudio):
Something like this:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqomSYWwjhC64DpNCET4N9kEkvCkjiCxNP2vSNBL6p4LUvtpkHcbmUzyS60le8wXaEt71_58yXspL8_ZzFK6YcJMAPkcqpGk-pMwcJ27RE4XBT6Md9d4g9LVGnzx_UIPRqSn4EiLp2Xw8w/s800/final_list.gif)
Let's take a common ListView in a RelativeLayout.
Let's populate a simple Adapter, and run it.
public class MainActivity extends ListActivity { private ViewHolderAdapter mAdapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mAdapter = ListHelper.buildViewHolderAdapter(this, R.layout.list_item); setListAdapter(mAdapter); } }
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMQgTQ30JpFiNkXg_reW3F4LliRayS3GQEJfHjM3NrgNJFvA6PtymK3XX_IK49LZt29tDUvNVfMgvYO9_gKe5r1zMFh0AJ5YCBT6aSMLP8NK25lYnxORQlyPzNm71h-zNnCwvTs2JKPA-_/s440/list0.gif)
This is still not what we wuold like to achieve.
Now we'll add an xml attribute to ListView:android:stackFromBottom="true".
In this way the ListView stacks its content from the bottom.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxj1ZTLr8jbbF1ZZdqFkx2dmc-wyhPINtM6kcC3ZbXZZmIUc9hrw-hZhCKnalCTwUKztL9zF71b_Hxdh_IESKLzJo2trctfz1sOBPz3q-a77OOhH9AXNLPXJfnlQt8nto1NK0mN56dduoO/s640/list1.gif)
We'll optimize the scroll with another xml attribute:
android:transcriptMode="alwaysScroll"
In this way the list will automatically scroll to the bottom.
Ok, with two simple attributes we obtained the list.
Now we'll add a EditText at the bottom, to complete our layout.
In our Activity, we'll add a Listener to ImageButton, to add items.
That's it!public class MainActivity extends ListActivity { private EditText mNewMessage; private ImageButton mNewMessageSend; private ViewHolderAdapter mAdapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mAdapter = ListHelper.buildViewHolderAdapter(this, R.layout.list_item); setListAdapter(mAdapter); mNewMessage = (EditText) findViewById(R.id.newmsg); mNewMessageSend = (ImageButton) findViewById(R.id.newmsgsend); if (mNewMessageSend!=null){ mNewMessageSend.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { addItem(); } }); } } private void addItem() { MyObj obj = new MyObj("Gabriele",mNewMessage.getText().toString()); mAdapter.add(obj); mAdapter.notifyDataSetChanged(); } }
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwddHtlDHf0xwYOM5Emc8ndlpOF7B-iEuyd6Mx6A3tsEJPHnp_m1_wwuRaFUhuYC1ZkZTtF4REqztiaqLi2PAXvm9EbSQ-ULhPZqLMvKvgxh9En1jKmCe704sB7m_xYWSY3_Ibxhrvn7E8/s840/list2.gif)
Sure it's a small example, the next step is to add a small animation.
You can get code from GitHub (built with AndroidStudio):
Lovely bllog you have
ReplyDelete