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

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.
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...)
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)

The full source:

Icons (res/drawable/*.png) used in Demo App

'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; } }