Roku Developer Program

[spradhan7656]

i design to crate a sing in button in corner are rounded but i have face this kind of issue how to fixing.

[TerzeaBogdan · Accepted solution]

You'll have to use a mask group and then put the poster inside. Here is the documentation -> https://developer.roku.com/en-gb/docs/references/scenegraph/control-nodes/maskgroup.md

[TwitchBronBron · Accepted solution]

You can do this by using 9patch images. Here's a sample project showing how to do it.

https://github.com/rokucommunity/sample-projects/tree/master/rounded-corners

A few things to consider:

- Roku supports both 720p and 1080p UI display sizings, so you need to produce both HD and FHD versions of these 9patch files, and pick the correct version depending on UI resolution (otherwise one of them will scale too large or small on the opposite resolution). I've handled this in my example by defining uri_resolution_autosub=$$RES$$,SD,HD,FHD in my manifest and then using $$RES$$ in my image uri.

-  try to make your 9patch images pixel-perfect when possible. If the images are too large for your size, they'll do weird things (like cropping or inverting the image). If the images smaller than your button size, you'll end up with flat edges where the repeating zones are.  

[renojim]

You should be able to set ui_resolutions=fhd in the manifest and only have one size for your 9-patches and rely on Roku to resize your images for the different devices, but I've found that you better check them because strange things can happen.

[Chris-DP]

When it comes to 9 patch’s you do have to have one per actual resolution. 9 patch images are pixel perfect to the ui resolution. If you only have one designed for FHD it will look broken when the device renders in HD. 

[renojim]

@Chris-DP, that's not my experience, but I have had to play with the dimensions to get them to look right on both FHD and HD devices.

[Rav1987]

I just wanted to say your sample project was incredibly helpful, thank you. I also wanted to ask how to go about creating my own 9patch images like the ones in your sample; I'm looking online and seeing stuff like Android Studio and IntelliJ, is there a simpler tool? Otherwise, is there an easy to way to just edit the color of the images in your example? That's all I need really.

[TwitchBronBron]

We have a fairly robust internal 9patch generator tool built using chromium that I can't share the details about, but you could try something similar. I believe we use the canvas element to draw shapes, and then export them? 

I had started a 9patch generator cli a few years back, but ran out of bandwidth. The goal was to generate 9patch images without needing to spin up a full version of chromium, which is quite heavy. It's still a work in progress,  but feel free to take a look, see if it accomplishes what you're looking for (or suggest fixes for things that don't work right). 

https://github.dev/rokucommunity/ninepatcher

You can view the structure of the `.9pg` file here: https://github.com/rokucommunity/ninepatcher/blob/62965c16164212483ef981621ce4a372e6f66ebe/src/NineP...

[Rav1987]

I will check it out, thanks!