Back

FloatingActionButton

Create FloatingActionButton objects using the CreateFAButton method of the UIExtras object:

 fab = uix.CreateFAButton( icon, options );

The FloatingActionButton supports FontAwesome icons. The icon parameter should be a FontAwesome icon definition, for example, [fa-check]. There are two sizes of FloatingActionButton, Normal(default) and Mini. Use the Mini size by passing "Mini" as the options parameter.

The color of the icon can be set using the SetIconColor method.

 fab.SetIconColor( "#0000FF" );

The color of the circle can be set using the SetButtonColors method, passing the colors for the normal and pressed states:

 fab.SetButtonColors( "#db4437", "#c33d32" );

Example

app.LoadPlugin( "UIExtras" );

function OnStart()
{
 lay = app.CreateLayout( "Linear", "FillXY" );

 txt = app.CreateText( "My Notes", 1.0 );
 txt.SetTextSize( 28 );
 txt.SetTextColor( "#FFFFFF" );
 txt.SetPadding( 0, 0.01, 0, 0.01 );
 txt.SetBackColor( "#1cbcff" );
 lay.AddChild( txt );

 list = app.CreateList( "", 1.0, 0.95 );
 list.SetBackColor( "#FFFFFF" );
 list.SetTextColor1( "#888888" );
 list.SetTextColor2( "#000000" );
 lay.AddChild( list );
 app.AddLayout( lay );

 layFab = app.CreateLayout( "Linear", "FillXY, Bottom, Right, TouchThrough" );

 uix = app.CreateUIExtras();
 fab = uix.CreateFAButton( "[fa-pencil]" );
 fab.SetMargins( 0.02, 0.01, 0.02, 0.01 );
 fab.SetButtonColors( "#db4437", "#c33d32" );
 fab.SetOnTouch( fab_OnTouch );
 layFab.AddChild( fab );

 app.AddLayout( layFab );

 app.ShowPopup( "Press the FAButton to add notes" );
}

function fab_OnTouch()
{
 dlg = app.CreateDialog( "New Note" );

 dlgLay = app.CreateLayout( "Linear", "Vertical, FillXY" );
 dlgLay.SetPadding( 0.02, 0, 0.02, 0.02 );
 dlg.AddLayout( dlgLay );

 dlgTxt = app.CreateTextEdit( "", 0.8, 0.2, "Multiline" );
 dlgTxt.SetHint( "Enter notes..." );
 dlgLay.AddChild( dlgTxt );

 dlgBtn = app.CreateButton( "Ok" );
 dlgBtn.SetOnTouch( dlgBtn_OnTouch );
 dlgLay.AddChild( dlgBtn );

 dlg.Show();
}

function dlgBtn_OnTouch()
{
 var itemTitle = "Note " + (list.GetLength() + 1);
 list.AddItem( itemTitle, dlgTxt.GetText() );

 dlg.Dismiss();
}
  Copy   Copy All    Run   

The following methods are available on the FloatingActionButton object:

 GetType()
 SetIcon( icon )
 SetIconColor( color )
 SetButtonColors( normal, pressed )
 SetOnTouch( callback )
 SetLabel( label )

The FloatingActionButton control uses the android-floating-action-button library from futuresimple, licensed under the Apache 2.0 License.