Android ListView Tutorial 1

Android ListView Tutorial

In this tutorial i will be demonstrating how to build simple android ListView. This article is about creating listview and launching new activity on selecting single list item. Below is screenshot of final output

Lets get start by creating a project in Eclipse IDE. 1. Create a new project by going to File New Android Project. Fill all the details and name your activity as AndroidListViewActivity. 2. Once the project is created open your main activity java file (in this case AndroidListViewActivity.java) and extend the class from ListActivity.
public class AndroidListViewActivity extends ListActivity {

3. Now we need a string resources file to store all list item labels. So create an XML file under values folder and name it as list_data.xml and paste the following code. ( Right Click on res/values New Android XML File) list_data.xml
<?xml version="1.0" encoding="utf-8"?> <resources> <string-array name="adobe_products">

Android ListView Tutorial 2

<item>Adobe <item>Adobe <item>Adobe <item>Adobe <item>Adobe <item>Adobe <item>Adobe <item>Adobe <item>Adobe <item>Adobe </string-array> </resources> After Effects</item> Bridge</item> Dreamweaver</item> Edge</item> Fireworks</item> Flash</item> Photoshop</item> Premiere</item> Reader</item> Illustrator</item>

4. In ListView each list item will be an xml layout, so we can customize each list item. Create an XML file under res/layout folder and name it as list_item.xml and type the following code. This xml layout will be single list item row. ( Right Click on res/layout New Android XML File)
<?xml version="1.0" encoding="utf-8"?> <!-- Single List Item Design --> <TextView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/label" android:layout_width="fill_parent" android:layout_height="fill_parent" android:padding="10dip" android:textSize="16dip" android:textStyle="bold" > </TextView>

5. Now open your main activity java file (AndroidListViewActivity.java) and type the following code. In the following code i am importing all xml resources data and storing them in an Array. On the next step i am binding array to ListAdapter. AndroidListViewActivity.java
package com.androidhive.androidlistview; import import import import import import import import import android.app.ListActivity; android.content.Intent; android.os.Bundle; android.view.View; android.widget.AdapterView; android.widget.AdapterView.OnItemClickListener; android.widget.ArrayAdapter; android.widget.ListView; android.widget.TextView;

public class AndroidListViewActivity extends ListActivity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // storing string resources into Array String[] adobe_products = getResources().getStringArray(R.array.adobe_products); // Binding resources Array to ListAdapter this.setListAdapter(new ArrayAdapter<String>(this, R.layout.list_item, R.id.label, adobe_products));

Android ListView Tutorial 3

} }

6. Now run your project you can see listview with list of array items. But on clicking single list item you can see no action. So we need to start new activity on selecting single list item.

Launching new Activity on selecting single list item In my previous article i had explained how to switch between screens. Here i am going to show single list item details in new screen. 7. Now create new activity class under src folder. Right Click on src/package folder New Class and name it as SingleListItem. (SingleListItem.java) 8. Open your AndroidListViewActivity.java and modify the code to following. In the following code i am getting the selected list item string(product name) and sending it to new Activity. AndroidListViewActivity.java
package com.androidhive.androidlistview; import import import import import import import import import android.app.ListActivity; android.content.Intent; android.os.Bundle; android.view.View; android.widget.AdapterView; android.widget.AdapterView.OnItemClickListener; android.widget.ArrayAdapter; android.widget.ListView; android.widget.TextView;

public class AndroidListViewActivity extends ListActivity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // storing string resources into Array String[] adobe_products = getResources().getStringArray(R.array.adobe_products); // Binding resources Array to ListAdapter this.setListAdapter(new ArrayAdapter<String>(this, R.layout.list_item, R.id.label, adobe_products)); ListView lv = getListView(); // listening to single list item on click lv.setOnItemClickListener(new OnItemClickListener() { public void onItemClick(AdapterView<?> parent, View view, int position, long id) { // selected item String product = ((TextView) view).getText().toString();

Android ListView Tutorial 4

// Launching new Activity on selecting single List Item Intent i = new Intent(getApplicationContext(), SingleListItem.class); // sending data to new activity i.putExtra("product", product); startActivity(i); } }); } }

Now in new activity we need to display the received from listview activity. 9. Create a new xml file under res/layout and name it as single_list_item_view.xml and type the following code. This XML file will be layout for SingleListItem.java single_list_item_view.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/product_label" android:layout_width="fill_parent" android:layout_height="wrap_content" android:textSize="25dip" android:textStyle="bold" android:padding="10dip" android:textColor="#ffffff"/> </LinearLayout>

10. Now open your second activity file i.e SingleListItem.java and paste the following code. SingleListItem.java
package com.androidhive.androidlistview; import import import import android.app.Activity; android.content.Intent; android.os.Bundle; android.widget.TextView;

public class SingleListItem extends Activity{ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); this.setContentView(R.layout.single_list_item_view); TextView txtProduct = (TextView) findViewById(R.id.product_label); Intent i = getIntent(); // getting attached intent data String product = i.getStringExtra("product"); // displaying selected product name txtProduct.setText(product);

Android ListView Tutorial 5

} }

11. The final step is to add an entry of new activity name in AndroidManifest.xml file. Open you AndroidManifest.xml file and modify the code as below AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.androidhive.androidlistview" android:versionCode="1" android:versionName="1.0"> <uses-sdk android:minSdkVersion="8" /> <application android:icon="@drawable/icon" android:label="@string/app_name"> <activity android:name=".AndroidListViewActivity" android:label="Android List View"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <activity android:name=".SingleListItem" android:label="Single Item Selected"></activity> </application> </manifest>

12. Finally run your project by right clicking on your project folder Run As 1 Android Application.