Roku Developer Program

Developers and content creators—a complete solution for growing an audience directly.
cancel
Showing results for 
Search instead for 
Did you mean: 
anilk1797
Level 7

How to set rounded corner on rectangle node

Hello,

I am using rectangle node of scene graph. I want to set rounded corners on rectangle so please suggest me.

Xml code is:

<Rectangle
id="showHide"
color="#451bc1"
visible="false"
width="500"
height="100"
translation="[150,600]" />
0 Kudos
8 Replies
Techie
Level 7

Re: How to set rounded corner on rectangle node

Were you able to get it working?
0 Kudos
destruk
Level 10

Re: How to set rounded corner on rectangle node

Maybe overlay a png graphic as the background of the rectangle?
0 Kudos
vjani
Level 7

Re: How to set rounded corner on rectangle node

Was anyone able to do this? Need this feature as well.
0 Kudos
rovidx_media
Level 7

Re: How to set rounded corner on rectangle node

I was able to achieve this by using the poster node instead with a transparent PNG that had rounded corners, but it was a bit clunky with 24bit PNG's.   Worked great with 8bit, but the edges where jagged.
Use Wordpress to power your Roku Direct Publisher (& other platforms) -> https://rovidx.com
0 Kudos
joetesta
Level 10

Re: How to set rounded corner on rectangle node

far as i know the best way to do this is with a "9 patch" image on a poster node instead of trying to do some kind of radius on a rectangle
aspiring
0 Kudos
vjani
Level 7

Re: How to set rounded corner on rectangle node

Thanks @joetesta, actually the requirement is to have the RowList items with rounded corners. So, do you mean I should create a 9patch image with transparent cutout area with rounded corners[where the cell content will fill] and background color(for negative space) matching the background of the screen(say black)? something like this? https://stackoverflow.com/questions/11224464/rounded-inner-corners-with-transparent-inside-frame 
0 Kudos
joetesta
Level 10

Re: How to set rounded corner on rectangle node

"vjani" wrote:
Thanks @joetesta, actually the requirement is to have the RowList items with rounded corners. So, do you mean I should create a 9patch image with transparent cutout area with rounded corners[where the cell content will fill] and background color(for negative space) matching the background of the screen(say black)? something like this? https://stackoverflow.com/questions/11224464/rounded-inner-corners-with-transparent-inside-frame 

I believe that is correct. Unfortunately the Roku documentation mentions 9-patch only in passing https://sdkdocs.roku.com/display/sdkdoc/Poster
And I'm no expert but know that 9-patch images do work on roku, you'll probably have to experiment a little.
aspiring
0 Kudos
norcaljohnny
Level 7

Re: How to set rounded corner on rectangle node

"joetesta" wrote:
"vjani" wrote:
Thanks @joetesta, actually the requirement is to have the RowList items with rounded corners. So, do you mean I should create a 9patch image with transparent cutout area with rounded corners[where the cell content will fill] and background color(for negative space) matching the background of the screen(say black)? something like this? https://stackoverflow.com/questions/11224464/rounded-inner-corners-with-transparent-inside-frame 

I believe that is correct. Unfortunately the Roku documentation mentions 9-patch only in passing https://sdkdocs.roku.com/display/sdkdoc/Poster
And I'm no expert but know that 9-patch images do work on roku, you'll probably have to experiment a little.

Sadly, per Roku docs... Unlike other bitmaps, the MaskGroup node class does not work with 9-patch images.
0 Kudos