Corner for layer

[BIG Eyes Games]

I wanted to leave my "round" layouts the same as the image. It's possible?

image:
http://imgur.com/A5CAC2A

[Alex]

Hi. It's possible. Create a transparent layout with a Button and TextEdit over the image object.

[Symbroson Development]

What if you draw a round rect, save it as image (.png for example) and set this image as background for your layout?
or just add an image control to the layout and draw the roundRect there

[Alex]

Layer with rounded corners can be made of buttons.

function OnStart()
{
   
  layLight =  app.CreateLayout( "absolute", "Vertical" );
  layLight.SetBackColor( "white" );
  layLight.SetPadding( 0.1, 0.1, 0.1, 0.1 );
 
  b5 = app.CreateButton( "", 0.7, 0.4, "Custom" );
  b5.SetStyle( "#00ff00", "#00ff00", 20, 0, 0, 0 );
  layLight.AddChild( b5 );
 
  layInner = app.CreateLayout( 'linear', 'vCenter, fillXY' );
  layInner.SetSize( 0.7, 0.4);
  layInner.SetBackColor( '#00000000' );

  txt = app.CreateText( "Hello World" );
  txt.SetTextColor( '#ffffffff' );
  txt.SetTextSize( 24 );

  txe = app.CreateTextEdit( ":)", 0.5, -1 );
  txe.SetTextSize( 24 );
 
  btn = app.CreateButton( "OK", 0.15, -1 );
  btn.SetTextColor( '#ffffffff' );
  btn.SetTextSize( 18 );
 
  layInner.AddChild( txt );
  layInner.AddChild( txe );
  layInner.AddChild( btn );
 
  layLight.AddChild( layInner );
 
  app.AddLayout( layLight );
}

[Symbroson Development]

Yes it is possible
But not very ingenious - I would prefer a drawn rounded rectangle
It is also a little challenge ;)

[Alex]

Ok, and how do you like the rectangle icon from FontAwesome [fa-square] ? ;-). We found three ways. More suggestions?

[Symbroson Development]

Hm
It would be difficult to strech the (fa) text to the right size...

[BIG Eyes Games]

Material Design.js c:

function OnStart()
{
lay = app.CreateLayout("linear","topcenter,fillxy");
lay.SetBackColor("#FFFFFF");

//--
var ibtn = "[fa-exclamation-circle]";

app.CreateBar(lay,"[fa-bars]","Material Design",layBar_OnTouch,"#22cc22",ibtn,btnRightBar_OnTouch);
layBar.SetMargins(0,0,0,0.1);

laybg = app.CreateCorner(lay,0.9,0.3,"#22cc22",true);

layTst = app.CreateLayout("linear","vcenter");
layTst.SetSize(0.9,0.3);
laybg.AddChild(layTst);

txt = app.CreateText();
txt.SetTextColor("#FFFFFF");
txt.SetText("Hello World");
txt.SetTextSize(20);
layTst.AddChild(txt);

txe = app.CreateTextEdit(":)",0.8,-1,"");
layTst.AddChild(txe);

btn = app.CreateButton();
btn.SetText("OK");
btn.SetSize(-1,0.08);
layTst.AddChild(btn);

laybg = app.CreateShadow(lay,0.3);
laybg.SetMargins(0,0.02);

layTst = app.CreateLayout("linear","vcenter");
layTst.SetBackColor("#22cc22");
layTst.SetSize(0.85,0.3);
laybg.AddChild(layTst);

txt = app.CreateText();
txt.SetTextColor("#FFFFFF");
txt.SetText("Hello World");
txt.SetTextSize(20);
layTst.AddChild(txt);

txe = app.CreateTextEdit(":)",0.8,-1,"");
layTst.AddChild(txe);

btn = app.CreateButton();
btn.SetText("OK");
btn.SetSize(-1,0.08);
layTst.AddChild(btn);

//~~
laymenu = app.CreateLayout("linear","fillxy,left,touchthrough");
laymenu.SetPadding(0,0.11);
laymenu.runing = false;
laymenu.Hide();

//--
laybg = app.CreateShadow(laymenu);
laybg.SetPadding(0,0,0.01,0);

layTst = app.CreateLayout("linear","");
layTst.SetBackColor("#ff22bb22");
layTst.SetSize(-1,1);
laybg.AddChild(layTst);

lst = app.CreateList(null,0.7,-1);
lst.SetDivider(0.0018,"#FFFFFF");
lst.SetList("Home,Settings,Exit");
lst.SetTextColor1("#FFFFFF");
lst.SetTextSize1(19);
layTst.AddChild(lst);

//~~
layabout = app.CreateLayout("linear","fillxy,vcenter");
layabout.SetBackColor("#d5FFFFFF");
layabout.Hide();

//--
laybg = app.CreateCorner(layabout,0.9,0.4,"#22cc22",true);

layTst = app.CreateLayout("linear","vcenter");
//layTst.SetPosition(0.02,0);
layTst.SetSize(0.9,0.4);
laybg.AddChild(layTst);

txt = app.CreateText();
txt.SetTextColor("#FFFFFF");
txt.SetText("Thank you for using");
txt.SetTextSize(20);
layTst.AddChild(txt);

txt = app.CreateText(null,0.89,-1,"multiline,left");
txt.SetTextColor("#FFFFFF");
txt.SetPadding(0.02);
txt.SetText("This example was created by Hoodown or Maico");
txt.SetTextSize(18);
layTst.AddChild(txt);

btn = app.CreateButton();
btn.SetMargins(0,0.04);
btn.SetOnTouch(btn_OnTouch);
btn.SetText("OK");
btn.SetSize(-1,0.08);
layTst.AddChild(btn);

app.AddLayout(lay);
app.AddLayout(laymenu);
app.AddLayout(layabout);
}

app.CreateShadow = function(layer)
{
laybg=app.CreateLayout("linear","");
laybg.SetBackground("/Res/drawable/shadow");
layer.AddChild(laybg);
return laybg;
}

app.CreateCorner = function(layer,w,h,clr,sh)
{
laybg = app.CreateLayout("absolute","");
layer.AddChild(laybg);

btnbg=app.CreateButton("",w,(h+0.0089),"custom");
btnbg.SetStyle(clr,clr,6,null,0,(sh?1:0));
btnbg.SetPosition(0,0);
laybg.AddChild(btnbg);

return laybg;
}

app.CreateBar = function(layer,icon,title,callback,clr,rbtn,rclbk)
{
var clrBar = clr?clr:"#000000";

layBar = app.CreateLayout("absolute","");
layBar.SetBackColor(clrBar);
layBar.SetSize(1,0.11);
layer.AddChild(layBar);

btnBar1 = app.CreateButton(icon?icon:"[fa-bars]",-1,-1,"fontawesome,custom");
btnBar1.SetPosition(-0.015,-0.0405);
btnBar1.SetStyle(clrBar,clrBar,0,null,0,0);
btnBar1.SetOnTouch(callback);
btnBar1.SetSize(0.2,0.2);
btnBar1.SetTextSize(23);
layBar.AddChild(btnBar1);

txtBar = app.CreateText(title?title:"");
txtBar.SetTextColor("#FFFFFF");
txtBar.SetPosition(0.225,0.0275);
txtBar.SetTextSize(23);
layBar.AddChild(txtBar);

if(rbtn) {
var ibtn = rbtn;
var left=0.815;

btnBar2 = app.CreateButton(ibtn,-1,-1,"fontawesome,custom");
btnBar2.SetPosition(1.0*left,-0.0405);
btnBar2.SetStyle(clrBar,clrBar,0,null,0,0);
btnBar2.SetOnTouch(rclbk);
btnBar2.SetSize(0.2,0.2);
btnBar2.SetTextSize(23);
layBar.AddChild(btnBar2);

}
}

function btn_OnTouch()
{
layabout.Animate("FadeOut");
}

function btnRightBar_OnTouch()
{
layabout.Animate("FadeIn");
}

function layBar_OnTouch()
{
if(!laymenu.IsVisible()) {
if(!laymenu.runing) {
laymenu.runing = true;
laymenu.Animate("SlideFromLeft",anim_OnDone);
}
}
else {
if(!laymenu.runing) {
laymenu.runing = true;
laymenu.Animate("SlideToLeft",anim_OnDone);
}
}
}

function anim_OnDone()
{
laymenu.runing = false;
}

[Alex]

Looks good with the shadow. Of buttons make it easier than to calculate and draw round rectangle, add shadow, etc.

FontAwesome can be used (the size can be calculated in advance according to the width of an invisible object and convert it to text size). There's another problem - constant radius.

[BIG Eyes Games]

Thanks for the feedback c: