Creating rounded or outlined Layout in DroidScript Native

There is no direct Layout method to set the corner radius or create an outlined layout. To do this, there is a simple hack.

Create a Frame layout

frame = app.AddLayout(lay, "Frame")
frame.SetSize(width, height)

Create a button as the first child of the Frame layout

btn = app.AddButton(frame, "", width, height)

Set the button style

btn.SetStyle(backColor, backColor, borderRadius, borderColor, borderWidth, 0)

Add the main layout in front of the button

mainLay = app.AddLayout(frame, type, options)
mainLay.SetSize(width, height)

Voila. You now have a customizable layout.

Here's a complete code making an CreateOutlinedLayout as a function for reusability.

function OnStart()
{
    backColor = "#ffffff"
    borderColor = "#228822"
    borderWidth = 2
    borderRadius = 8
    
    lay = app.CreateLayout("Linear", "VCenter,FillXY")
    lay.SetBackColor( backColor )
    
    lay1 = CreateOutlinedLayout(lay, "Linear", "VCenter", 0.8, 0.35)
    
    sampleBtn = app.AddButton(lay1, "My button", 0.5)
    
    
    lay2 = CreateOutlinedLayout(lay, "Linear", "VCenter", 0.8, 0.15)
    
    sampleTxt = app.AddText(lay2, "Text inside second box", 0.5)

    app.AddLayout( lay )
}

function CreateOutlinedLayout(lay, type="Linear", options="", width=0.5, height=0.2)
{
    var frame = app.AddLayout(lay, "Frame")
    frame.SetSize(width, height)
    
    var btn = app.AddButton(frame, "", width, height)
    btn.SetStyle(backColor, backColor, borderRadius, borderColor, borderWidth, 0)
    
    var mainLay = app.AddLayout(frame, type, options)
    mainLay.SetSize(width, height)
    
    return mainLay
}

Happy Coding