Back

FloatingActionsMenu

The FloatingActionsMenu is a special FloatingActionButton that, when pressed, will expand to reveal a collection FloatingActionButtons.

Create FloatingActionsMenu objects using the CreateFAMenu method of the UIExtras object:

 fam = uix.CreateFAMenu( icon, options );

As with the FloatingActionButton, the FloatingActionsMenu supports FontAwesome icons. Set the direction that the menu will open using the Up(default), Down, Left or Right option.

Use the AddFAButton method to add a FloatingActionButton object to the menu. You can find out how to create FloatingActionButtons here.

 fam.AddFAButton( fab );

When the menu is expanded, text labels can be shown next to each FloatingActionButton. You can set the label for each FloatingActionButton using its SetLabel method.

 fab.SetLabel( label );

Use the LabelsLeft or LabelsRight option of the CreateFAMenu method to set the side of the FloatingActionButtons that the labels will appear.

Note that labels are only supported in vertical menus, i.e. when using the Up or Down open direction.

Example - Vertical Menu with Labels

app.LoadPlugin( "UIExtras" );

function OnStart()
{
 lay = app.CreateLayout( "Linear", "FillXY" );
 lay.SetBackground( "/Sys/Img/GreenBack.png" );
 app.AddLayout( lay );
 
 layFab = app.CreateLayout( "Linear", "FillXY, Bottom, Right, TouchThrough" );

 uix = app.CreateObject( "UIExtras" );
 
 fam = uix.CreateFAMenu( "[fa-envelope-o]", "Up,LabelsLeft" );
 fam.SetMargins( 0.02, 0.01, 0.02, 0.01 );
 layFab.AddChild( fam );
 
 fabReply = uix.CreateFAButton( "[fa-reply]", "Mini" );
 fabReply.SetButtonColors( "#db4437", "#c33d32" );
 fabReply.SetOnTouch( fab_OnMailReply );
 fabReply.SetLabel( "Reply" );
 fam.AddFAButton( fabReply );
 
 fabReplyAll = uix.CreateFAButton( "[fa-reply-all]", "Mini" );
 fabReplyAll.SetButtonColors( "#db4437", "#c33d32" );
 fabReplyAll.SetOnTouch( fab_OnMailReplyAll );
 fabReplyAll.SetLabel( "Reply All" );
 fam.AddFAButton( fabReplyAll );
 
 fabForward = uix.CreateFAButton( "[fa-share]", "Mini" );
 fabForward.SetButtonColors( "#fbbc05", "#efb306" );
 fabForward.SetOnTouch( fab_OnMailForward );
 fabForward.SetLabel( "Forward" );
 fam.AddFAButton( fabForward );
 
 app.AddLayout( layFab );
}

function fab_OnMailReply()
{
 app.ShowPopup( "Reply" );
 fam.Close();
}

function fab_OnMailReplyAll()
{
 app.ShowPopup( "Reply All" );
 fam.Close();
}

function fab_OnMailForward()
{
 app.ShowPopup( "Forward" );
 fam.Close();
}
  Copy   Copy All    Run   

Example - Horizontal Menu

app.LoadPlugin( "UIExtras" );

function OnStart()
{
 lay = app.CreateLayout( "Linear", "FillXY" );
 lay.SetBackground( "/Sys/Img/BlueBack.png" );
 app.AddLayout( lay );
 
 layFab = app.CreateLayout( "Linear", "FillXY, Top, Left, TouchThrough" );

 uix = app.CreateObject( "UIExtras" );
 
 fam = uix.CreateFAMenu( "[fa-cog]", "Right" );
 fam.SetIconColor( "#000000" );
 fam.SetButtonColors( "#ffffff", "#ececec" );
 fam.SetMargins( 0.02, 0.01, 0.02, 0.01 );
 layFab.AddChild( fam ); 
 
 fabBT = uix.CreateFAButton( "[fa-bluetooth]" );
 fabBT.SetOnTouch( fab_OnBluetooth );
 fam.AddFAButton( fabBT );
 
 fabWifi = uix.CreateFAButton( "[fa-wifi]" );
 fabWifi.SetOnTouch( fab_OnWifi );
 fam.AddFAButton( fabWifi );
 
 fabGPS = uix.CreateFAButton( "[fa-location-arrow]" );
 fabGPS.SetOnTouch( fab_OnGPS );
 fam.AddFAButton( fabGPS );
 
 app.AddLayout( layFab );
}

function fab_OnBluetooth()
{
 app.ShowPopup( "Bluetooth" );
 fam.Close();
}

function fab_OnWifi()
{
 app.ShowPopup( "Wifi" );
 fam.Close();
}

function fab_OnGPS()
{
 app.ShowPopup( "GPS" );
 fam.Close();
}
  Copy   Copy All    Run   

The following methods are available on the FloatingActionsMenu object:

 GetType()
 SetIconColor( color )
 SetButtonColors( normal, pressed )
 AddFAButton( fab )
 Open()
 Close()
 IsOpen()

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