adding elements to listview using templates in appcelerator

Question

This is my .xml file for creating a listview and adding elements in it using a template in appcelerator. How to style the contents in the list item in .tss file. for eg. I want the image to be on the extreme left and the title to be in the middle below which will be the date and the url.

    <Alloy>
        <Window id="win2" class="container">
            <View id = "v1" class ="view1"  layout ="horizontal" >
                <Button class="btnBack" ></Button>
                <Label  class = "label1">List</Label>
            </View>
            <View class="view2">
                <TextField id = "txtSearch"></TextField>
            </View>
            <ListView id = "lView" class = "list1" >
                <Templates>
                    <ItemTemplate name="template">
                        <ImageView bindId="pic" id="iconId" />
                        <Label bindId="info" id="titleId" />
                        <Label bindId="date" id="dateId" />
                        <Label bindId="url" id ="urlId" /> 
                    </ItemTemplate>
                </Templates>
<ListSection>
                        <ListItem pic:image="/Images/abstract-logo-with-colorful-leaves_1025-695.jpg" info:text ="This is the title" date:text= "6/30/2017" url:tex ="https://youtu.be/zkOSR0ZRb9k"></ListItem>
                    </ListSection>
            </ListView>

        </Window>
    </Alloy>

Answer 1

See the Alloy XML Markup section in the ListView documentation. and note how the sample index.tss references each control within the ItemTemplate by its id. The example there is pretty close to what you are trying to accomplish:

"#icon" : {
  width: '50dp', height: '50dp', left: 0
},
"#title" : {
  color: 'black',
  font: { fontFamily:'Arial', fontSize: '20dp', fontWeight:'bold' },
  left: '60dp', top: 0
},
"#subtitle" : {
  color: 'gray',
  font: { fontFamily:'Arial', fontSize: '14dp' },
  left: '60dp', top: '25dp'
}