Display a list of data with Icons

To have a scrollable set of data, you can use the List component. This is what I have done below. 

In this example I first created a data set to hold my products and images. This Array is then bound to the List as the dataProvider. To do this I simply needed to make the products Array [Bindable] and then cast it to an ArrayCollection right within the dataProvider declaration.

Next, I used FlashBuilder to create an IconItemRenderer for me. While editing the List component, I typed in itemRenderer and the tool asked me if I wanted to create a new Item Renderer. I clicked on this link (see screen shot below) which opened the new Item Renderer wizard. I used the wizard to name my ItemRenderer Product and then assigned the Label Field as name and the Icon Filed as image. The results can be seen in the 2nd code example below.

That is all you need to do. You can see the final results running on an Android phone below.

Main Application:

<?xml version="1.0" encoding="utf-8"?>
<s:Application   xmlns:fx="http://ns.adobe.com/mxml/2009  " 
  xmlns:s="library://ns.adobe.com/flex/spark  "  >

<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable  ]
private   var productsArray:Array = [
{"name"  :"Acrobat Reader"  ,"image"  :"icons/reader.png"  },
{"name"  :"Adobe AIR"  ,"image"  :"icons/adobeair.png"  },
{"name"  :"Captivate"  ,"image"  :"icons/captivate.png"  },
{"name"  :"Catalyst"  ,"image"  :"icons/catalyst.png"  },
{"name"  :"ColdFusion Builder"  ,"image"  :"icons/cfbuilder.png"  },
{"name"  :"Flash Builder"  ,"image"  :"icons/flashbuilder.png"  },
{"name"  :"Flash Player"  ,"image"  :"icons/flashplayer.png"  },
{"name"  :"Illustrator"  ,"image"  :"icons/illustrator.png"  },
{"name"  :"inDesign"  ,"image"  :"icons/indesign.png"  },
{"name"  :"PhotoShop"  ,"image"  :"icons/photoshop.png"  }]
]]>
</fx:Script>


<s:List id="  products" dataProvider="  {  new ArrayCollection(productsArray)  }" 

height="  100%" width="  95%" itemRenderer="  Product"  >

</s:List>


</s:Application>

Product IconItemRenderer:

<?xml version="1.0" encoding="utf-8"?>

<s:IconItemRenderer  xmlns:fx="http://ns.adobe.com/mxml/2009  " 

xmlns:s="library://ns.adobe.com/flex/spark  "  

labelField="  name" iconField="  image" iconWidth="  64" iconHeight="  64"  >

</s:IconItemRenderer>

Please consider purchasing Developing Android Applications with Flex 4.5.