Roku Developer Program

Join our online forum to talk to Roku developers and fellow channel creators. Ask questions, share tips with the community, and find helpful resources.
cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
groman00
Visitor

focusBitmapUri on Rowlist vs MarkupGrid

I have a custom 9-patch image that I use for focusBitmapUri on the RowList component. The 9-patch image perfectly fits my RowList item they way I want it to, but if I apply the same image to a MarkupGrid focusBitmapUri, the margins/expandable regions have no effect. I'm using the exact same itemComponent for the grid as I am with the list.

RowList



MarkupGrid



Any thoughts on what I'm doing wrong?
Greg Roman
Senior Software Engineer, AOL Alpha
0 Kudos
6 REPLIES 6
TheEndless
Channel Surfer

Re: focusBitmapUri on Rowlist vs MarkupGrid

I don't think you're doing anything wrong. I think 9-patch handling in SceneGraph is just buggy. I've had the same problems with RowList. The only solution I've found is to create multiple 9-patch images with transparent pixels around the outside for margin adjustments. Be sure to also test in 720p vs 1080p, as I've found in 1080p it adds additional padding to the inside of the 9-patch. Very frustrating. I've reported it as a bug to Roku, but haven't received any confirmation.
My Channels: http://roku.permanence.com - Twitter: @TheEndlessDev
Instant Watch Browser (NetflixIWB), Aquarium Screensaver (AQUARIUM), Clever Clocks Screensaver (CLEVERCLOCKS), iTunes Podcasts (ITPC), My Channels (MYCHANNELS)
0 Kudos
groman00
Visitor

Re: focusBitmapUri on Rowlist vs MarkupGrid

Thanks @TheEndless. Your suggestion is basically how achieved the 9-patch for the RowList. The MarkupGrid just ignores the margins for some reason...
Greg Roman
Senior Software Engineer, AOL Alpha
0 Kudos
Tyler_Smith
Binge Watcher

Re: focusBitmapUri on Rowlist vs MarkupGrid

How did you get the focus ro only highlight the image and allow for text underneath?
I've tried this but the text gets clipped.
Tyler Smith
0 Kudos
parag
Visitor

Re: focusBitmapUri on Rowlist vs MarkupGrid

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?
0 Kudos
norcaljohnny
Roku Guru

Re: focusBitmapUri on Rowlist vs MarkupGrid

"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. 
0 Kudos
parag
Visitor

Re: focusBitmapUri on Rowlist vs MarkupGrid

I had it already setup correctly for an item in RowList. If the set the width/height of the poster equal to the width/height of the item and then translate the Label under the poster, it works, but my label disappears after showing up briefly. Any ideas? Also, if I wanted to change the label font when it is focused, how would I go about doing that?


 <children>[/color]
  <Poster id="poster" />[/color]
  <Label  id="label" font="font:MediumSystemFont" text="" horizAlign="center" />[/color]
 </children>[/color]
0 Kudos