In android development, using a listview is one of the mostly used formats of data presentation in an app. In this tutorial, we are going to focus on how to create an app with a listview presentation format. Some of the most commonly used apps use this format of data presentation, these include whatsapp, this is evident when displaying contacts and chat threads, Viber, Skype, Twitter when displaying tweets, and even the phonebook uses a listview to display contacts stored in a phone.
Note: The demo app was created using IntelliJ IDEA 13.1.6 development environment but is also compatible with Android Studio and Eclipse development environments. This tutorial assumes that you have a java coding background as most of the work is going to be done in java programming language. And the results displayed in the xml layout file.
In this tutorial we are going to create and app which will show the user a list of Google’s apps and services.
- Create a new project using IntelliJ IDEA and call it Listview.
- Create a new resource file in the layout directory called list_item.xml, this file holds the structure of the listview.
- Open the newly created file and insert the code below
<?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>
- Create a new layout inside the res - > layout directory and call it single_list_item_view.xml, this file will display a single selected item from the listview of items.
- Open the newly created file and insert the code below
<?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>
- Go to the values directory and create a new resource file called list_data.xml, this file will hold all the data that we want to put in our list.
- Open the newly created file and insert the code below.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string-array name="google_products">
<item>Google Search Engine</item>
<item>Google Maps</item>
<item>Google Mail (Gmail0</item>
<item>Google Earth</item>
<item>Google Chrome</item>
<item>Google Drive</item>
<item>Google Wallet</item>
<item>Google play movies and Tv</item>
<item>Google plus</item>
<item>Google play News stand</item>
<item>Google play music</item>
<item>Youtube</item>
<item>Voice Search</item>
<item>Google Goggle</item>
<item>Google Finance</item>
</string-array>
</resources>
- Now that all our data display/ view/layout files are created
- Open the MyActivity.java file and insert the code below
package com.example.ListView;
import android.app.ListActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.TextView;
public class MyActivity extends ListActivity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// storing string resources into Array
String[] google_products = getResources().getStringArray(R.array.google_products);
// Binding Array to ListAdapter
this.setListAdapter(new ArrayAdapter<String>(this, R.layout.list_item, R.id.label, google_products));
ListView lv = getListView();
// listening to single list item on click
lv.setOnItemClickListener(new AdapterView.OnItemClickListener() {
public void onItemClick(AdapterView<?> parent, View view,
int position, long id) {
// selected item
String product = ((TextView) view).getText().toString();
// 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);
}
});
}
}
- Create a new java class file and name it SinlgeListItme.java and insert the code below into it.
package com.example.ListView;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.TextView;
/**
* Created by Shafique on 9/30/2015.
*/
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);
}
}
- Open the manifext.xml file and add the following code.
<activity android:name=".SingleListItem"
android:label="Single Product View"/>
- The complete manifest.xml file will look like the one below
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.ListView"
android:versionCode="1"
android:versionName="1.0">
<uses-sdk android:minSdkVersion="14"/>
<application android:label="@string/app_name" android:icon="@drawable/ic_launcher">
<activity android:name="MyActivity"
android:label="@string/app_name">
<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 Product View"/>
</application>
</manifest>
- Debug and run the app. The screenshots below represent what will be displayed when the app is launched and run onto an actual device. When Google maps is clicked, the screen on the right is displayed.
...
Written by Shafiq
