Rounded Corners For Flex Mobile Application’s List/ListForm

• Tweet

• Tweet

This technique is applicable to probably any component that is on the Mobile phones screen inside a group. Lets take a look how to do this

I am using Flash Builder 4.5.1 for this exercise.

First create a project called roundedcorners,

In your Mobile settings check either Android, Apple iOS or BlackBerry > Select View Based application > Click Finish

In the roundedcornersHomeView.mxml file you will see code similar to this

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
		xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
</s:View>

Now add a rectangle to the above code shown below

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
		xmlns:s="library://ns.adobe.com/flex/spark" title="Rounded Corners">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:Rect left="10" right="10" top="10" bottom="10"
			id="borderRect"
			 topLeftRadiusX="10"
                         topLeftRadiusY="10"
                         bottomLeftRadiusX="10"
                         bottomLeftRadiusY="10"
                         topRightRadiusX="10"
                         topRightRadiusY="10"
                         bottomRightRadiusX="10"
                         bottomRightRadiusY="10"
			>
		<s:stroke>
			<s:SolidColorStroke id="borderStroke" color="0x333333" weight="2"/>
		</s:stroke>
		<s:fill>
			<s:SolidColor id="bgFill" color="0xf1f1f1" alpha="1"  />
		</s:fill>
	</s:Rect>
</s:View>

Lets add a List Control to our little app now as shown below

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
		xmlns:s="library://ns.adobe.com/flex/spark" title="Rounded Corners" initialize="init()">
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.events.FlexEvent;
			[Bindable]
			public var someDataProvider:ArrayCollection;
			protected function init():void
			{
				var someArr:Array = new Array();
				var i:int = 0;
				for(i=1;i< 20;i++) {
					someArr.push("List Label "+i);
				}
				someDataProvider = new ArrayCollection(someArr);
			}
 
		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:Rect left="10" right="10" top="10" bottom="10"
			id="borderRect"
			topLeftRadiusX="10" topLeftRadiusY="10"
			topRightRadiusX="10" topRightRadiusY="10"
			bottomLeftRadiusX="10" bottomLeftRadiusY="10"
			bottomRightRadiusX="10" bottomRightRadiusY="10"
			>
		<s:stroke>
			<s:SolidColorStroke id="borderStroke" color="0x333333" weight="2"/>
		</s:stroke>
		<s:fill>
			<s:SolidColor id="bgFill" color="0xf1f1f1" alpha="1"  />
		</s:fill>
	</s:Rect>
	<s:Scroller width="100%" height="100%">
		<s:VGroup
				  horizontalCenter="0" verticalCenter="0"
				  paddingLeft="15" paddingTop="15" paddingBottom="15" paddingRight="15">
			<s:List id="list"
						 width="100%" height="100%"
						  dataProvider="{someDataProvider}" alternatingItemColors="[#f1f1f1,#AAAAAA]"
						 >
			</s:List>
		</s:VGroup>
	</s:Scroller>
</s:View>

Above code just had one problem with padding and margins, when you scroll your list the the List item are visible in the Gap between ActionBar and Rect border. To fix that try these margin and padding settings

<s:Rect left="10" right="10" top="10" bottom="10" id="border"
			topLeftRadiusX="10" topLeftRadiusY="10"
			topRightRadiusX="10" topRightRadiusY="10"
			bottomLeftRadiusX="10" bottomLeftRadiusY="10"
			bottomRightRadiusX="10" bottomRightRadiusY="10"
			>
		<s:fill>
			<s:SolidColor id="bgFill" color="0xf1f1f1" alpha="1"  />
		</s:fill>
		<s:stroke>
			<s:SolidColorStroke id="borderStroke" color="0x666666" weight="3"/>
		</s:stroke>
	</s:Rect>
	<s:Scroller width="100%" height="99%" top="15" bottom="15">
		<s:VGroup width="100%" height="100%"
				  horizontalCenter="0"
				  verticalCenter="0"
				  paddingLeft="15" paddingTop="15" paddingBottom="15" paddingRight="15"
				   >
			<sp:ListForm id="list"
					width="100%" height="100%"
					creationComplete="list_creationCompleteHandler(event)"
					itemRenderer="itemrenderers.TransactionsIR"
					styleName="listForm">
				<s:AsyncListView list="{TransactionsResult.lastResult}"/>
			</sp:ListForm>
		</s:VGroup>
	</s:Scroller>

Run this application now and you will get lovely rounded corners for your Mobile View. Adjust padding as per liking.

This final result is shown below

Hope this helps

Download project files by clicking this link roundedcorners Flash Builder project