Titanium Allow - Creating a FaceBook-like UI

index.js

function doClick(e) {  
    alert($.label.text);
}

function showmenu(e){
	$.main.animate({left:200,duration:100});
}

function hidemenu(e){
	$.main.animate({left:0,duration:100});
}

$.index.open();

index.tss

".container": {
	backgroundColor:"white",
	orientationModes: [Ti.UI.PORTRAIT,Ti.UI.LANDSCAPE_LEFT,Ti.UI.LANDSCAPE_RIGHT,Ti.UI.UPSIDE_PORTRAIT]
},
"Label": {
	width: Ti.UI.SIZE,
	height: Ti.UI.SIZE,
	color: "#000"
},
"#main":{
	height: Ti.UI.FILL,
	width: Ti.UI.FILL,
	backgroundColor: "#c4cde0",
	left: 0,
	layout: "vertical"
},
"#menu":{
	height: Ti.UI.FILL,
	width: Ti.UI.FILL,
	backgroundColor: "#2c323f",
	left: 0	
},
"#iconBar":{
	backgroundColor: "#4f6ba6",
	width: Ti.UI.FILL,
	height: "50dp"
},
"#menuBar":{
	backgroundColor: "#f3f5f8",
	width: Ti.UI.FILL,
	height: "50dp"
},
"#blackLine":{
	backgroundColor: "#000",
	width: Ti.UI.FILL,
	height: "1dp"	
},
"#grayLine":{
	backgroundColor: "#9b9d9f",
	width: Ti.UI.FILL,
	height: "1dp"	
},
"#mainList":{
	backgroundColor: "#c4cde0",
	separatorStyle: "NONE"
},
"#listRow":{
	height: "200dp",
	selectionStyle: "NONE"
},
"#rowContainer":{
	borderColor: "#cacdd8",
	borderRadius: 5,
	borderWidth: 1,
	left: "5dp",
	right: "5dp",
	top: "5dp",
	bottom: "5dp",
	height: Ti.UI.FILL,
	width: Ti.UI.FILL,
	backgroundColor: "#fff"
},
"#profilePic":{
	 width:"66",
	 height:"66",
	 image:"profilepic.png",
	 top:"5",
	 left:"5"
},
"#profileName":{
	top: "5dp",
	left: "80dp",
	color: "#576b95",
	font: {
		fontSize : "16dp",
		fontWeight: "bold"
	}
},
"#timeAgo":{
	top: "25dp",
	left: "80dp",
	color: "#bbbbbb",
	font: {
		fontSize : "16dp"
	}
},
"#status":{
	width: Ti.UI.SIZE,
	left: 5,
	right: 5,
	font: {
		fontSize : "16dp"
	}
},
"#bottomActions":{
	bottom: 0,
	height: "45dp",
	width: Ti.UI.FILL,
	backgroundColor: "#eff2f5"
}

index.xml

<Alloy>
	<Window class="container">
		<View id="menu" onClick="hidemenu"></View>
		<View id="main">
			<View id="iconBar"></View>
			<View id="blackLine"></View>
			<View id="menuBar" onClick="showmenu"></View>
			<View id="grayLine"></View>
			<TableView id="mainList">
				<TableViewRow id="listRow">
					<View id="rowContainer">
						<ImageView id="profilePic"></ImageView>
						<Label id="profileName">Ricardo Alcocer</Label>
						<Label id="timeAgo">10 minutes ago</Label>
						<Label id="status">I'm writing some XML markup to be used on a Mobile App.</Label>
						<View id="grayLine" bottom="51"></View>
						<View id="bottomActions"></View>
					</View>
				</TableViewRow>
				<TableViewRow id="listRow">
					<View id="rowContainer">
						<ImageView id="profilePic"></ImageView>
						<Label id="profileName">Ricardo Alcocer</Label>
						<Label id="timeAgo">10 minutes ago</Label>
						<Label id="status">I'm writing some XML markup to be used on a Mobile App.</Label>
						<View id="grayLine" bottom="51"></View>
						<View id="bottomActions"></View>
					</View>
				</TableViewRow>
			</TableView>
		</View>
	</Window>
</Alloy>

You'll need to add profilepic.png to your assets folder.