A lot of Android application these days make use of a List View (or ListView) to display the contents to the users on their mobile devices. These lists vary from the most simple one, with just a text to the ones with a lot of elements like an image and various text fields. Today, I decided to teach you all how to create a simple List View in Android. In this small tutorial, I will tell you how to create a simple List View, which will look something like the image below and then when any list item is clicked, we will generate a toast at this moment, saying that so-and-so list item was selected.
Before we begin, I assume that you know the basics of Android Application Development using Eclipse. However, if you are not very much aware of these basics, feel free to read these other tutorials that I’ve posted on Slash Coding before that will help you to understand Android Application using Eclipse.
Simple List View in Android
Let’s get started.
1. Create a new Android application project in Eclipse with whatever settings you want, though it is preferred that you use the highest available version of Android for your application.
2. Now, simply open the Java file (MainActivity.java) and in there, change the “extends Activity” words to “extends ListActivity“. Then press Ctrl + Shift + O on your keyboard to import all the required classes into your project.
3. Next, at the beginning of the class, create a new string array and name it “listitems“. In here, add all the text that you want to display as a list item in our list view.
String listitems[]={"Hello","World","List Item 3","Slash Coding","Tutorials"};
4. Now, in the onCreate function, replace the entire code with the following code. This will set the view to be our list view instead of the default view.
super.onCreate(savedInstanceState); setListAdapter(new ArrayAdapter<String>(MainActivity.this, android.R.layout.simple_list_item_1, listitems));
5. Copy and paste the following piece of code below the onCreate function, but inside the class. This function will note the position of the clicked item and then access the listitems string array and then fetch the string for that position for us. We will then display this string in the Toast that we have generated in here. (Learn how to create custom toasts!)
@Override
protected void onListItemClick(ListView l, View v, int position, long id) {
// TODO Auto-generated method stub
super.onListItemClick(l, v, position, id);
String string = listitems[position];
Toast.makeText(getApplicationContext(), "You have selected " + string, Toast.LENGTH_LONG).show();
}
6. At the last step, just press Ctrl + Shift + O on your keyboard to import all the required classes. Here is the entire code for your reference.
package com.slashcoding.listviewtutorial;
import android.app.ListActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;
public class MainActivity extends ListActivity {
String listitems[]={"Hello","World","List Item 3","Slash Coding","Tutorials"};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setListAdapter(new ArrayAdapter<String>(MainActivity.this,
android.R.layout.simple_list_item_1, listitems));
}
@Override
protected void onListItemClick(ListView l, View v, int position, long id) {
// TODO Auto-generated method stub
super.onListItemClick(l, v, position, id);
String string = listitems[position];
Toast.makeText(getApplicationContext(), "You have selected " + string, Toast.LENGTH_LONG).show();
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
}
7. Well, that’s all. Now just run this application in the emulator or on your physical device and see this code in action.
I hope you learned something new from this tutorial today. Stay tuned to Slash Coding to be updated with a lot more tutorials in various fields. Also, don’t forget to subscribe to Slash Coding for latest post updates via RSS Feeds, Facebook, Google+ or Twitter. See you around!
