Iconified TextList - The making of

Iconified TextList - The making of

What you will learn: You will learn how to create your own ListAdapter: IconifiedListAdapter

Problems/Questions: Write it right below...

Difficulty: 1.5 of 5 Iconified TextList - The making of

What it will look like:

Description:
The app (screenshot above) is created with the following simple code. So that is what we finally want to reach:

Java:

 IconifiedTextListAdapter itla = new IconifiedTextListAdapter(this); 

// Add four items 
 itla.addItem(new IconifiedText( 
"Surf Web", getResources().getDrawable(R.drawable.favicon))); 
 itla.addItem(new IconifiedText( 
"Report Bug", getResources().getDrawable(R.drawable.bug))); 
 itla.addItem(new IconifiedText( 
"Speak Spanish", getResources().getDrawable(R.drawable.locale))); 
 itla.addItem(new IconifiedText( 
"Vidoop", getResources().getDrawable(R.drawable.vidoop))); 
// Display it 
 setListAdapter(itla);

We simply create an: IconifiedTextListAdapter, throw some String+Drawable into and 'display it. To use such awesome simple code, we need to do some work.

1. Lets start with the very Base: The IconifiedText.java which is a pretty small class, which only contains a simply constructor and some getters & setters. It is only a class that combines a String and a Drawable(Icon), nothing special!

Java:

public class IconifiedText{ 

private String mText = ""; 
private Drawable mIcon; 
private boolean mSelectable = true; 

public IconifiedText(String text, Drawable bullet) { 
 mIcon = bullet; 
 mText = text; 
} 
// ... 
}

2. Now we take a look at the IconifiedTextListAdapter.java which consists of about 50 Lines of Code, but does not much. It basically is a storage for a list of IconifiedTexts, to which you can "add(IconifiedText);", and that passes through some functions to the elements of the IconifiedText-List, like 'getItem(int position)' or 'isSelectable(int position)'.
Being an (specialized) Adapter , the second thing to provide a function through which one can access the views (all the things) it contains:

Java:

 /** @param convertView The old view to overwrite, if one is passed 
 * @returns a IconifiedTextView that holds wraps around an IconifiedText */ 
public View getView(int position, View convertView, ViewGroup parent) { 
 IconifiedTextView btv; 
if (convertView == null) { 
 btv = new IconifiedTextView(mContext, mItems.get(position)); 
} else { // Reuse/Overwrite the View passed 
// We are assuming(!) that it is castable! 
 btv = (IconifiedTextView) convertView; 
 btv.setText(mItems.get(position).getText()); 
 btv.setIcon(mItems.get(position).getIcon()); 
} 
return btv; 
}

That was probably also not too hard to understand (if so, ask for explanation below).

3.The IconifiedTextView is also not too hard to understand.
It extends LinearLayout. Iconified TextList - The making of

Lets remember, that GUIs in Android are nested. ( A view, can contain a View, can contain a View, can contain a View, can contain a View, can contain a View...)
Iconified TextList - The making of

So it will be no problem, that our IconifiedTextView itself consists of two more Views, aIconView and a TextView.
The IconifiedTextView does it own setup in the Constructor:

Java:

 public IconifiedTextView(Context context, IconifiedText aIconifiedText) { 
super(context); 

/* First Icon and the Text to the right (horizontal), 
 * not above and below (vertical) */ 
this.setOrientation(HORIZONTAL); 

 mIcon = new ImageView(context); 
 mIcon.setImageDrawable(aIconifiedText.getIcon()); 
// left, top, right, bottom 
 mIcon.setPadding(0, 2, 5, 0); // 2px up, 5px to the right 

/* At first, add the Icon to ourself 
 * (! we are extending LinearLayout) */ 
 addView(mIcon, new LinearLayout.LayoutParams( 
 LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)); 

 mText = new TextView(context); 
 mText.setText(aIconifiedText.getText()); 
/* Now the text (after the icon) */ 
 addView(mText, new LinearLayout.LayoutParams( 
 LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)); 
}

So thats it =). You successfully created an IconifiedTextList(Adapter) Iconified TextList - The making of

The full source:

Iconified TextList - The making of

Icons (res/drawable/*.png) used in Demo App Iconified TextList - The making of

'src/your_package_structure/TestLayout.java'

Java:

/* $Id: TestLayout.java 57 2007-11-21 18:31:52Z steven $ 
* 
* Copyright 2007 Steven Osborn 
* 
* Licensed under the Apache License, Version 2.0 (the "License"); 
* you may not use this file except in compliance with the License. 
* You may obtain a copy of the License at 
* 
* http://www.apache.org/licenses/LICENSE-2.0 
* 
* Unless required by applicable law or agreed to in writing, software 
* distributed under the License is distributed on an "AS IS" BASIS, 
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 
* See the License for the specific language governing permissions and 
* limitations under the License. 
*/ 
package org.anddev.android.testproject; 

import android.app.ListActivity; 
import android.os.Bundle; 

public class TestLayout extends ListActivity { 

 @Override 
public void onCreate(Bundle icicle) { 
super.onCreate(icicle); 
 IconifiedTextListAdapter itla = new IconifiedTextListAdapter(this); 

// Add four items 
 itla.addItem(new IconifiedText( 
"Surf Web", getResources().getDrawable(R.drawable.favicon))); 
 itla.addItem(new IconifiedText( 
"Report Bug", getResources().getDrawable(R.drawable.bug))); 
 itla.addItem(new IconifiedText( 
"Speak Spanish", getResources().getDrawable(R.drawable.locale))); 
 itla.addItem(new IconifiedText( 
"Vidoop", getResources().getDrawable(R.drawable.vidoop))); 
// Display it 
 setListAdapter(itla); 
} 
}

'src/your_package_structure/IconifiedText.java'

Java:

/* 
* Copyright 2007 Steven Osborn 
* 
* Licensed under the Apache License, Version 2.0 (the "License"); 
* you may not use this file except in compliance with the License. 
* You may obtain a copy of the License at 
* 
* http://www.apache.org/licenses/LICENSE-2.0 
* 
* Unless required by applicable law or agreed to in writing, software 
* distributed under the License is distributed on an "AS IS" BASIS, 
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 
* See the License for the specific language governing permissions and 
* limitations under the License. 
*/ 
package org.anddev.android.testproject; 

import android.graphics.drawable.Drawable; 

/** @author Steven Osborn - http://steven.bitsetters.com */ 
public class IconifiedText implements Comparable<IconifiedText>{ 

private String mText = ""; 
private Drawable mIcon; 
private boolean mSelectable = true; 

public IconifiedText(String text, Drawable bullet) { 
 mIcon = bullet; 
 mText = text; 
} 

public boolean isSelectable() { 
return mSelectable; 
} 

public void setSelectable(boolean selectable) { 
 mSelectable = selectable; 
} 

public String getText() { 
return mText; 
} 

public void setText(String text) { 
 mText = text; 
} 

public void setIcon(Drawable icon) { 
 mIcon = icon; 
} 

public Drawable getIcon() { 
return mIcon; 
} 

/** Make IconifiedText comparable by its name */ 
 @Override 
public int compareTo(IconifiedText other) { 
if(this.mText != null) 
return this.mText.compareTo(other.getText()); 
else 
throw new IllegalArgumentException(); 
} 
} 

'src/your_package_structure/IconifiedTextView.java'

Java:

/* $Id: BulletedTextView.java 57 2007-11-21 18:31:52Z steven $ 
* 
* Copyright 2007 Steven Osborn 
* 
* Licensed under the Apache License, Version 2.0 (the "License"); 
* you may not use this file except in compliance with the License. 
* You may obtain a copy of the License at 
* 
* http://www.apache.org/licenses/LICENSE-2.0 
* 
* Unless required by applicable law or agreed to in writing, software 
* distributed under the License is distributed on an "AS IS" BASIS, 
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 
* See the License for the specific language governing permissions and 
* limitations under the License. 
*/ 
package org.anddev.android.testproject; 

import android.content.Context; 
import android.graphics.drawable.Drawable; 
import android.widget.ImageView; 
import android.widget.LinearLayout; 
import android.widget.TextView; 

public class IconifiedTextView extends LinearLayout { 

private TextView mText; 
private ImageView mIcon; 

public IconifiedTextView(Context context, IconifiedText aIconifiedText) { 
super(context); 

/* First Icon and the Text to the right (horizontal), 
 * not above and below (vertical) */ 
this.setOrientation(HORIZONTAL); 

 mIcon = new ImageView(context); 
 mIcon.setImageDrawable(aIconifiedText.getIcon()); 
// left, top, right, bottom 
 mIcon.setPadding(0, 2, 5, 0); // 5px to the right 

/* At first, add the Icon to ourself 
 * (! we are extending LinearLayout) */ 
 addView(mIcon, new LinearLayout.LayoutParams( 
 LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)); 

 mText = new TextView(context); 
 mText.setText(aIconifiedText.getText()); 
/* Now the text (after the icon) */ 
 addView(mText, new LinearLayout.LayoutParams( 
 LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)); 
} 

public void setText(String words) { 
 mText.setText(words); 
} 

public void setIcon(Drawable bullet) { 
 mIcon.setImageDrawable(bullet); 
} 
}

'src/your_package_structure/IconifiedTextListAdapter.java'

Java:

/* $Id: BulletedTextListAdapter.java 57 2007-11-21 18:31:52Z steven $ 
* 
* Copyright 2007 Steven Osborn 
* 
* Licensed under the Apache License, Version 2.0 (the "License"); 
* you may not use this file except in compliance with the License. 
* You may obtain a copy of the License at 
* 
* http://www.apache.org/licenses/LICENSE-2.0 
* 
* Unless required by applicable law or agreed to in writing, software 
* distributed under the License is distributed on an "AS IS" BASIS, 
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 
* See the License for the specific language governing permissions and 
* limitations under the License. 
*/ 
package org.anddev.android.testproject; 

import java.util.ArrayList; 
import java.util.List; 

import android.content.Context; 
import android.view.View; 
import android.view.ViewGroup; 
import android.widget.BaseAdapter; 

/** @author Steven Osborn - http://steven.bitsetters.com */ 
public class IconifiedTextListAdapter extends BaseAdapter { 

/** Remember our context so we can use it when constructing views. */ 
private Context mContext; 

private List<IconifiedText> mItems = new ArrayList<IconifiedText>(); 

public IconifiedTextListAdapter(Context context) { 
 mContext = context; 
} 

public void addItem(IconifiedText it) { mItems.add(it); } 

public void setListItems(List<IconifiedText> lit) { mItems = lit; } 

/** @return The number of items in the */ 
public int getCount() { return mItems.size(); } 

public Object getItem(int position) { return mItems.get(position); } 

public boolean areAllItemsSelectable() { return false; } 

public boolean isSelectable(int position) { 
try{ 
return mItems.get(position).isSelectable(); 
}catch (IndexOutOfBoundsException aioobe){ 
return super.isSelectable(position); 
} 
} 

/** Use the array index as a unique id. */ 
public long getItemId(int position) { 
return position; 
} 

/** @param convertView The old view to overwrite, if one is passed 
 * @returns a IconifiedTextView that holds wraps around an IconifiedText */ 
public View getView(int position, View convertView, ViewGroup parent) { 
 IconifiedTextView btv; 
if (convertView == null) { 
 btv = new IconifiedTextView(mContext, mItems.get(position)); 
} else { // Reuse/Overwrite the View passed 
// We are assuming(!) that it is castable! 
 btv = (IconifiedTextView) convertView; 
 btv.setText(mItems.get(position).getText()); 
 btv.setIcon(mItems.get(position).getIcon()); 
} 
return btv; 
} 
}