User Interface

User Interface (UI) refers to the visual and interactive elements of a digital system or application that enable users to interact with and control it.

About the component


Image Description
  •  Last Update 25 Oct, 2023
  •  Component Version : 1.0.0
  •  API 21, Android 5.0 Lollipop
  •  45 Blocks Available

Floating Button

The Floating Button component provides a customizable floating action button (FAB) with various styling, animation, and positioning options. It supports touch events, focus events, and click/long-click events.

Overview

A small button, above all the layout. It is used to indicate the primary action of the screen.

Events

Image Description
Events

Click

  • Triggered when the button is clicked.

    • Image Description
    Events

    Long Click

  • Triggered when the button is long-clicked.

    • Image Description
    Events

    Got Focus

  • Triggered when the button gains focus.

    • Image Description
    Events

    Lost Focus

  • Triggered when the button loses focus.

    • Image Description
    Events

    Touch Down

  • Triggered when the button is touched down.

    • Image Description
    Events

    Touch Up

  • Triggered when the button touch is released.

    • Image Description
    Events

    Touch Move

  • Triggered when the touch moves on the button.

    • Methods

    Image Description
    Methods

    Create(String icon)

  • Creates the floating button with the specified icon.

    • # Name Type(s) Default Value
    1 icon file *
    Image Description
    Methods

    CustomMove(int xAxisDelta, int yAxisDelta, long animationDuration)

  • Moves the button with custom x and y axis delta values and animation duration.

    • # Name Type(s) Default Value
    1 xAxisDelta Integer *
    2 yAxisDelta Integer *
    3 animationDuration Integer *
    Image Description
    Image Description
    Methods

    isDismissed(), Dismiss()

  • `isDismissed()`: Checks if the button is dismissed.


  • `Dismiss()`: Removes the floating button from the screen.

    • # Name Type(s) Default Value
    1 isDismissed boolean *
    2 Dismiss boolean *
    Image Description
    Image Description
    Methods

    isHidden(), Hide()

  • `isHidden()`: Checks if the button is hidden.


  • `Hide()`: Hides the floating button.

    • # Name Type(s) Default Value
    1 isHidden boolean *
    2 Hide boolean *
    Image Description
    Image Description
    Image Description
    Image Description
    Methods

    MoveUp(int distance), MoveDown(int distance), MoveLeft(int distance), MoveRight(int distance)

  • `MoveUp(int distance)`: Moves the button up by the specified distance.


  • `MoveDown(int distance)`: Moves the button down by the specified distance.


  • `MoveLeft(int distance)`: Moves the button left by the specified distance.


  • `MoveRight(int distance)`: Moves the button right by the specified distance.


    • # Name Type(s) Default Value
    1 MoveUp Integer *
    2 MoveDown Integer *
    3 MoveLeft Integer *
    4 MoveRight Integer *
    Image Description
    Image Description
    Methods

    PlayShowAnimation(), PlayHideAnimation()

  • `PlayShowAnimation()`: Plays the show animation.

  • `PlayHideAnimation()`: Plays the hide animation.

    • # Name Type(s) Default Value
    1 PlayShowAnimation Animation *
    2 PlayHideAnimation Animation *
    Image Description
    Image Description
    Methods

    RemoveShowAnimation(), RemoveHideAnimation()

  • `RemoveShowAnimation()`: Removes the show animation.


  • `RemoveHideAnimation()`: Removes the hide animation.

    • # Name Type(s) Default Value
    1 RemoveShowAnimation Animation *
    2 RemoveHideAnimation Animation *
    Image Description
    Image Description
    Methods

    hasStroke(), hasShadow()

  • `hasStroke()`: Checks if the button has a stroke.

  • `hasShadow()`: Checks if the button has a shadow.

    • # Name Type(s) Default Value
    1 hasStroke boolean *
    2 hasShadow boolean *
    Image Description
    Image Description
    Image Description
    Methods

    isShown(), isShadowResponsiveEffectEnabled(), isRippleEffectEnabled()

  • `isShown()`: Checks if the button is shown.


  • `isShadowResponsiveEffectEnabled()`: Checks if the shadow responsive effect is enabled.


  • `isRippleEffectEnabled()`: Checks if the ripple effect is enabled.

    • # Name Type(s) Default Value
    1 isShown boolean *
    2 isShadowResponsiveEffectEnabled boolean *
    3 isRippleEffectEnabled boolean *

    Properties

    Image Description
    Image Description
    Methods

    BackgroundColor

  • `BackgroundColor` (int): Sets the background color of the button.


    Default Value: DEFAULT_VALUE_COLOR_CYAN


  • `PressedBackgroundColor` (int): Sets the background color of the button when pressed.

    Default Value: DEFAULT_VALUE_COLOR_GRAY

    • # Name Type(s) Default Value
    1 BackgroundColor Set #00FFFFFF
    2 PressedBackgroundColor set #888888FF
    Image Description
    Image Description
    Image Description
    Image Description
    Image Description
    Methods

    RippleColor, ButtonRippleColor, IconColor, ShadowColor, StrokeColor

  • `RippleColor` (int): Sets the color of the ripple effect.


    Default Value: DEFAULT_VALUE_COLOR_LTGRAY


  • `ButtonRippleColor` (int): Sets the color of the ripple effect. (Deprecated, use RippleColor)


    Default Value: DEFAULT_VALUE_COLOR_GRAY


  • `IconColor` (int): Sets the color of the button's icon.


    Default Value: DEFAULT_VALUE_COLOR_WHITE


  • `ShadowColor` (int): Sets the color of the button's shadow.


    Default Value: DEFAULT_VALUE_COLOR_GRAY


  • `StrokeColor` (int): Sets the color of the button's stroke.


    Default Value: DEFAULT_VALUE_COLOR_GRAY


    • # Name Type(s) Default Value
    1 set RippleColor text #CCCCCCFF
    2 set ButtonRippleColor text #888888FF
    3 set IconColor text #FFFFFFFF
    4 set ShadowColor text #888888FF
    5 set StrokeColor text #888888FF
    Image Description
    Image Description
    Image Description
    Image Description
    Image Description
    Methods

    EnableRippleEffect, EnableShadow, EnableShadowAnimation, EnableStroke, ShadowResponsiveEffectEnabled

  • `EnableRippleEffect` (boolean): Enables or disables the ripple effect on button press.


    Default Value: "False"


  • `EnableShadow` (boolean): Enables or disables the button's shadow.


    Default Value: "True"


  • `EnableShadowAnimation` (boolean): Enables or disables the shadow animation.


    Default Value: "True"


  • `EnableStroke` (boolean): Enables or disables the button's stroke.


    Default Value: "False"


  • `ShadowResponsiveEffectEnabled` (boolean): Enables or disables the responsive shadow effect.


    Default Value: "False"


    • # Name Type(s) Default Value
    1 set EnableRippleEffect boolean *
    2 set EnableShadow boolean *
    3 set EnableShadowAnimation boolean *
    4 set EnableStroke boolean *
    5 set ShadowResponsiveEffectEnabled boolean *
    Image Description
    Methods

    FabIconSize

  • `FabIconSize` (float): Sets the size of the button's icon.


    Default Value: "24"

    • # Name Type(s) Default Value
    1 set FabIconSize Integer 24
    Image Description
    Methods

    StrokeWidth

  • `StrokeWidth` (float): Sets the width of the button's stroke.


    Default Value: "5"

    • # Name Type(s) Default Value
    1 set StrokeWidth Integer 5
    Image Description
    Image Description
    Methods

    ShadowXOffset, ShadowYOffset

  • `ShadowXOffset` (float): Sets the horizontal offset of the button's shadow.


    Default Value: "2"


  • `ShadowYOffset` (float): Sets the vertical offset of the button's shadow.


    Default Value: "2"

    • # Name Type(s) Default Value
    1 set ShadowXOffset Integer 2
    2 set ShadowYOffset Integer 2