Android ListView Part III

Hi everyone! Welcome again to roadtodroid for another fun Android tutorial. In this post I am gonna tech you how to create your own customized list views. Along the way some new things such the vibrator class and the action bar methods are also introduced. So let's start building this fun app.

 1. Create a new Android Application Project

• Go to File > New > Android Application Project.
• Give a suitable name and proceed as before.

New app dialog

 2. Add a ListView to activity_main.xml

• From the palette, go to the composite tab and select a ListView from there. Place it inside the graphical layout in activty_main.xml.
• Remember to make the android:id="@android:id./list". 

activity_main.xml

	<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:tools="http://schemas.android.com/tools"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:background="#000000"
	tools:context="${relativePackage}.${activityClass}" >
	<ListView
	android:id="@android:id/list"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:layout_alignParentLeft="true"
	android:requiresFadingEdge="vertical" >
	</ListView>
	</RelativeLayout>

view raw activity_main.xml hosted with ❤ by GitHub

 3. Create a rowlayout.xml file 

• In the Package Explorer, under you app folder, add a new rowlayout.xml to res/ layout folder (where activity_main.xml is present).
• To do this right-click on layout folder and go to new and select Android XML File.
• In the rowlayout.xml file add the following code, to add an image and text to our list adapter.

	<?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" >
	<TextView
	android:id="@+id/title"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_toRightOf="@+id/icon"
	android:paddingBottom="10dp"
	android:textColor="#CC0033"
	android:textSize="50dp" />
	<ImageView
	android:id="@+id/icon"
	android:layout_width="80dp"
	android:layout_height="80dp"
	android:layout_alignParentLeft="true"
	android:layout_alignParentTop="true"
	android:paddingLeft="10dp"
	android:paddingRight="10dp" />
	</RelativeLayout>

view raw rowlayout.xml hosted with ❤ by GitHub

4. Create the Custom Adapter MyCustomAdapter.java

• Now its' time to define the view of the list according to our needs. So go to the src folder under our project name in the package present right-click and add a new Class to it.
• For now just copy the code below and change the package name to your's package name. For more explanation check the bottom of the post.

Adding new Custom Adapter Class

  

	package com.roadtodroid.blogspot.listview_customadapter;
	import android.annotation.SuppressLint;
	import android.app.Activity;
	import android.view.LayoutInflater;
	import android.view.View;
	import android.view.ViewGroup;
	import android.widget.ArrayAdapter;
	import android.widget.ImageView;
	import android.widget.TextView;
	public class MyCustomAdapter extends ArrayAdapter<String> {
	private Activity context;
	private String[] sites;
	static class ViewHolder{
	public ImageView image;
	public TextView text;
	}
	public MyCustomAdapter(Activity context, String[] names) {
	super(context, R.layout.rowlayout, names);
	this.context = context;
	this.sites = names;
	}
	@SuppressLint("InflateParams")
	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
	// TODO Auto-generated method stub
	View myview = convertView;
	if(myview == null){
	LayoutInflater inflator = context.getLayoutInflater();
	myview = inflator.inflate(R.layout.rowlayout, null); //configure view holder
	ViewHolder v = new ViewHolder();
	v.text=(TextView)myview.findViewById(R.id.title);
	v.image=(ImageView)myview.findViewById(R.id.icon);
	myview.setTag(v);
	}
	//Entering data in the list
	ViewHolder h = (ViewHolder) myview.getTag();
	String s = sites[position];
	h.text.setText(s);
	load_images(h,s);
	return myview;
	}
	private void load_images(ViewHolder h, String s) {
	// TODO Auto-generated method stub
	if(s.startsWith("Facebook"))
	h.image.setImageResource(R.drawable.facebook);
	else if(s.startsWith("Xbox"))
	h.image.setImageResource(R.drawable.xbox);
	else if(s.startsWith("Windows"))
	h.image.setImageResource(R.drawable.windows);
	else if (s.startsWith("Blogger"))
	h.image.setImageResource(R.drawable.blogger);
	else if(s.startsWith("500px"))
	h.image.setImageResource(R.drawable.px500px);
	else if(s.startsWith("Apple"))
	h.image.setImageResource(R.drawable.apple);
	else if (s.startsWith("Steam"))
	h.image.setImageResource(R.drawable.steam);
	else if (s.startsWith("YouTube"))
	h.image.setImageResource(R.drawable.youtube);
	}
	}

view raw MyCustomAdapter.java hosted with ❤ by GitHub

 5. Code the MainActivity.java

• In our main java file we first make our main class extend ListActivity to get all list handling functionality.
• Then we made an object of our Custom Adapter and sent the values to it.
• Finally we set the Custom Adapter to our list.
• Also onListItemClick  is also used to do some processing when the list item is clicked. 

	package com.roadtodroid.blogspot.listview_customadapter;
	import java.util.Arrays;
	import java.util.List;
	import android.app.Activity;
	import android.app.ListActivity;
	import android.app.SearchManager;
	import android.content.Context;
	import android.content.Intent;
	import android.os.Bundle;
	import android.os.Vibrator;
	import android.view.Menu;
	import android.view.MenuItem;
	import android.view.View;
	import android.widget.ArrayAdapter;
	import android.widget.ListView;
	import android.widget.Toast;
	import android.os.Vibrator;
	public class MainActivity extends ListActivity {
	private ArrayAdapter<String> arrayadapter;
	String[] values= new String[]{"Facebook","Xbox","Windows","Blogger","500px","Apple",
	"Steam","YouTube"};
	@Override
	protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.activity_main);
	getActionBar().hide();
	MyCustomAdapter adapter= new MyCustomAdapter(this, values); //creating object of custom adapter
	setListAdapter(adapter);
	}
	@Override
	protected void onListItemClick(ListView l, View v, int position, long id) {
	// TODO Auto-generated method stub
	super.onListItemClick(l, v, position, id);
	Toast.makeText(getApplicationContext(), "Searching for: "+values[position], Toast.LENGTH_LONG).show();
	Vibrator vib = (Vibrator) this.getSystemService(Context.VIBRATOR_SERVICE); //declaring vibrator
	vib.vibrate(200); // setting vibrate time to 200ms
	String searchquery=values[position];
	Intent my_intent = new Intent(Intent.ACTION_WEB_SEARCH); //Intent for launching the browser
	my_intent.putExtra(SearchManager.QUERY, searchquery); //adding searchquery to intent
	startActivity(my_intent);
	}
	}

view raw main.java hosted with ❤ by GitHub

 6. Run the app

• Launch the app by pressing CTRL+F11. 
• A physical device can be connected through USB or an AVD can be configured as shown in  http://roadtodroid.blogspot.in/2014/09/lets-start-with-setting-up-with.html.

Launch page

Search for list item

 Code Explained:

1. Our main goal in this activity is to group an image and text in the same list area. To do this our normal ArrayAdapter will not do as it only contains only in type of object . So in our Custom Adapter (which basically extends ArrayAdapter to get the text data) we create a new class ViewHolder to encapsulate image & text. MyCustomAdapter class has a constructor which receives the list of sites in our case, and store it in a local variable.
2. If the getView() method is not there in your class add it by -> Right-click > Source > Override/implement Methods.
3. Now in the getView() method we first create a View object 'myview' and set it to convertView. This is basically an optimization step using which we save the inflating of the view on very redraw (or scroll ) of the list. If initially convertView is null (which it will be), a new layout inflator is inflated and attached to our view using the setTag() method.
4. After this the string from the local variable is added to our viewHolder using <Holder name>.<Text Object>.setText(String).
5. Then the corresponding images are loaded from the res/drawable-hdpi folder.
6. Now in the main activity we create an object of MyCustomAdapter , sending it the String[], and setting it to our ListView.
7. getActionBar().hide() is used in onCreate() to hide the action bar at the top so as to get more screen space (Requires  android:minSdkVersion="11" in AndroidManifest.xml).
8. Also a Vibrator object is created in onListItemClick() to make the device vibrate on item click.To be able to use this service do the following:
1. import android.os.Vibrator; 
2. In the AndroidManifest.xml file add 
<uses-permission android:name="android.permission.VIBRATE"/>

Download Code:

SHARE

Shobhit Chittora

Hi there, I am Shobhit Chittora. I am a college student and like to develop apps for Android platform.I started this blog to share my experiences with Android development and may be help you guys on the “roadtodroid”.

• 
•