styling items of a ListView

[Ulf Dittmer]

I'm trying to apply styles (bold, specifically) to selected items in a ListView. To that end, I've assigned the android:bufferType="spannable" attribute to its individual TextView elements, so that the code can obtain a Spannable like this:

ArrayAdapter adapter = new ArrayAdapter<String>(this, ..., ...));

ListView resultList = (ListView) findViewById(R.id.resultList);
resultList.setAdapter(adapter);

TextView text = (TextView) adapter.getView(0, null, null); // as an example, use the first element in the list
Spannable str = (Spannable) text.getText();
str.setSpan(new StyleSpan(Typeface.BOLD), 0, str.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

I was under the impression that this should be sufficient to style the elements; at least that's how I read http://developer.android.com/guide/appendix/faq/commontasks.html#selectingtext. But neither the emulator nor an actual device show any styles; is there something else that needs to be done?

[Monu Tripathi]

Since, you are using ArrayAdapter class directly I am not sure of how you would control the formatting of the individual TextView; have not tried anything like this before.

Usually, I would extend an appropriate Adapter class(e.g.: BaseAdapter) and override all its methods to cater to my needs. I would've put the following code inside getView() method of my adapter, which is called by the framework once for every row to be drawn, and applied these styles conditionally there.

TextView text = (TextView) adapter.getView(0, null, null); // as an example, use the first element in the list
Spannable str = (Spannable) text.getText();
str.setSpan(new StyleSpan(Typeface.BOLD), 0, str.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

[Monu Tripathi]

Something like:

ListView list = (ListView) findViewById(R.id.list);
adapter = new MyAdapter(this,R.layout.main,
				R.id.row_text,
				new String[]{"Uno", "Dos", "Tres"}	);
list.setAdapter(adapter);

//Custom Adapter class

private class MyAdapter extends ArrayAdapter<String>{

		String[] mStrings;
		LayoutInflater mInflater; 
		
		public MyAdapter(Context context, int resource, int textViewResourceId,
				String[] strings) {
			super(context, resource, textViewResourceId, strings);
			mStrings = strings;
			mInflater = (LayoutInflater) FirstAct.this.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

		}

		@Override
		public View getView(int position, View convertView, ViewGroup parent) {

			View view = mInflater.inflate(R.layout.main,null, false);

			TextView text = (TextView) view.findViewById(R.id.row_text);
			text.setText(mStrings[position]);

			Spannable str = (Spannable) text.getText();
			str.setSpan(new StyleSpan(Typeface.BOLD), 0, str.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
			
			return view;
		}

	}

Note: getView() code is not optimized but it conveys what I am trying to say

[Ulf Dittmer]

That worked like a charm with just a few minor tweaks. Kinda cool that it's possible to style each row of the list individually. Not that one would (or should) do that, but it's nice to know that it's possible :-)

Thanks very much!

[Monu Tripathi]

Ulf Dittmer wrote:That worked like a charm with just a few minor tweaks. Kinda cool that it's possible to style each row of the list individually. Not that one would (or should) do that, but it's nice to know that it's possible :-)

Thanks very much!

Glad to know that I could be of any help.

If you are working with ListView, I would suggest going through the video of Romain Guy's "Turbo Charge your UI" talk he delivered during Google I/O conference in May2009.
It is available on YouTube and is about an hour long but worth the time.

[Ulf Dittmer]

That's an interesting and useful talk. So I guess instead of

View view = mInflater.inflate(R.layout.main, null, false);  

TextView text = (TextView) view.findViewById(R.id.row_text);

one should really use this for performance reasons, since inflating a View from the XML file is a comparatively costly operation:

if (convertView == null) {
    convertView = mInflater.inflate(R.layout.main, null, false);  
}

TextView text = (TextView) convertView.findViewById(R.id.row_text);

[Monu Tripathi]

Yes, that way, recycled views are used for newer rows instead a new View Object, for every row to be drawn.(Total number of View objects created would be number of rows visible on the screen at a time)

There is still one more optimization you can apply here using the ViewHolder pattern. This would reduce the findViewById(..) calls which are considered expensive too.(Note that this would affect the performance had the layout of your row been a little more "dense" or complex and also if the number of rows in the list were high).

Here is the pattern:

static class ViewHolder {
   TextView text;
 
}

public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder;

if (convertView == null) {
convertView = mInflater.inflate(R.layout.main, null,false);

 holder = new ViewHolder();
 holder.text = (TextView) convertView.findViewById(R.id.row_text);

 convertView.setTag(holder);
 } else {
 holder = (ViewHolder) convertView.getTag();
 }

 holder.text.setText(mStrings[position]);

 return convertView;
 }

[chetan deol]

[ UD: Removed hijack. Continue that discussion in one of the various other threads that you have started for this subject. ]