"parag" wrote:
Look at the video player example's Item.xml which is added to RowList using 'itemComponentName="Item"'. And although the example has only the poster being highlighted, I have the entire component including the text being hi-lighted. If you have the issue figured out, could you post your solution?
When marking up your xml codes, you need to look out for closing tags. One is much more obvious than others. I think the way the examples are written can be confusing in regards to some of the codes not breaking line and others in multiple lines. For example, the interface is one line and renderable nodes are multiple lines.
Anyhow, to stay on track, here is what you need to look out for and this is a way for others to get margins.
In the following code.. ( If you set drawFocusBitmap to true, it will cause the bitmap to wrap both poster and label )
<Poster
uri="path/to/file"> // there is no / closing out > on this Poster tag and so therefore it is left open and Label falls inside of this Posters container.
<Label
text=""/> // this has been closed by />
</Poster> // this is closing the first Poster tag.
In order to get the bitmap to NOT include the label inside of its focus, the code should look more like this.
<Poster
uri="path/to/file"/> // there is a / closing out > on this Poster tag and so therefore the Label falls outside of this Posters container.
<Label
text=""/> // this has been closed.
And to get margins would look something like the following. (you can try the 9 patch image, but unless you are really good, expect a lot of playing around) and 9 patch is not as useful in regards that this code can change the way you present display content.
<Poster
uri="path/to/file"
width="500"
height="500"
translation=[100, 100] > // no need to close (also I recommend any pic that is 100% transparent, to use as an invisible frame.
// If you were to use a Rectangle node and use opacity="0" for the color, then it would make everything 100% transparent in this container.)
<Poster
width="480"
height="200"
translation="[10,0]" // this creates a 10px margin on the left (for the right as well, based on width) and lined up from the top.
// this is contained by Poster and therefore will follow the Poster and only needs to create a translation from the top left of the Poster node above.
<Label
text=""
width="460"
height="180"
translation="[10,210]"/> // 10px margin on the left (for right as well based on width) and 10 from the top. This has been closed.
</Poster> // this is closing the first Poster tag.
I hope this helps.
Cheers!
Note: the editor kept adding extra code snippets and so if it looks a little goofy, my apologizes.
