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 : 2.0.0
  •  API 21, Android 5.0 Lollipop
  •  49 Blocks Available

Button

Provides a user interface element that users can tap to trigger actions. It offers various customization options, including text, colors, shapes, images, and interactive feedback. This component supports click events, long press events, touch events, hover events, and other interactions. It allows for detailed customization of the button's visual appearance and behavior.

Overview

The "Button" component creates an interactive button that users can tap to trigger actions. It offers various customization options, including text, colors, shapes, images, and interactive feedback.

Events

Image Description
Events

Click

  • Triggered when the user taps and releases the button.

    • Image Description
    Events

    Got Focus

  • Triggered when the cursor moves over the button, making it clickable.

    • Image Description
    Events

    Long Click

  • Triggered when the user holds down the button.

    • Image Description
    Events

    Lost Focus

  • Triggered when the cursor moves away from the button, making it no longer clickable.

    • Image Description
    Events

    Touch Down

  • Triggered when the user touches the button.

    • Image Description
    Events

    Touch Up

  • Triggered when the user releases the touch from the button.

    • Methods

    Image Description
    Methods

    Perform Click

  • Triggers a click event on the button when called. This method calls the click() function, which handles the button's click action.

    • Image Description
    Methods

    Perform Long Click

  • Triggers a long press event on the button when called. This method calls the longClick() function, which handles the button's long press action.

    • Image Description
    Methods

    Set Margin

  • The space outside a component, between the component’s boundary and other components. It determines the distance between different UI elements.

    • # Name Type(s) Default Value
    1 left Integer 5
    2 right Integer 5
    3 top Integer 5
    4 bottom Integer 5
    Image Description
    Methods

    Set Padding

  • The padding around the button. Padding is the space inside the border.

    • # Name Type(s) Default Value
    1 left Integer 5
    2 right Integer 5
    3 top Integer 5
    4 bottom Integer 5
    Image Description
    Methods

    Set Shadow

  • Sets a shadow effect on the button's text. You can specify the shadow's x and y offset, radius, and color. This method utilizes the TextViewUtil.setShadow() function.

    • # Name Type(s) Default Value
    1 x Integer *
    2 y Integer *
    3 radius Integer #ffffff00
    4 Color Integer #ffffff00

    Properties

    Image Description
    Image Description
    Methods

    Background Color

  • Gets/sets background color.


  • Sets the background color of the button.

    • # Name Type(s) Default Value
    1 get BackgroundColor return #a3a3ab
    2 set BackgroundColor text #a3a3ab
    Image Description
    Image Description
    Methods

    Elevation

  • Get/Set the value of button elevation.


  • Sets the elevation of the button, creating a shadow effect.

    • # Name Type(s) Default Value
    1 get Elevation return 0
    2 set Elevation Integer 0
    Image Description
    Image Description
    Methods

    Enabled

  • Return the value of if enabled, true or false.


  • Enables or disables the button.

    • # Name Type(s) Default Value
    1 get Enabled return true
    2 set Enabled boolean true
    Image Description
    Image Description
    Methods

    Font Bold

  • Return the value of font bold from the Button.


  • Sets the button's text to bold.

    • # Name Type(s) Default Value
    1 get FontBold return false
    2 set FontBold boolean false
    Image Description
    Image Description
    Methods

    Font Italic

  • Return the value of font italic from the Button.

  • Sets the button's text to italic.

    • # Name Type(s) Default Value
    1 get FontItalic return false
    2 set FontItalic boolean false
    Image Description
    Image Description
    Methods

    Font Size

  • Return the value of font size from the Button.


  • Sets the font size of the button's text.

    • # Name Type(s) Default Value
    1 get FontSize return 14
    2 set FontSize Integer 14
    Image Description
    Image Description
    Methods

    Font TypeFace

  • Return the value of font type face from button.


  • Sets the font family of the button's text (default, serif, sans serif, monospace).

    • # Name Type(s) Default Value
    1 get FontTypeFace return default
    2 set FontTypeFace text default
    Image Description
    Image Description
    Methods

    Height

  • Return the value of height from button.


  • Specifies the component's vertical height, measured in pixels.

    • # Name Type(s) Default Value
    1 get Height return -1
    1 set Height Integer -1
    Image Description
    Image Description
    Methods

    Width

  • Return the value of width from button.


  • Specifies the component's horizontal width, measured in pixels.

    • # Name Type(s) Default Value
    1 get Width return *
    2 set Width Integer -1
    Image Description
    Image Description
    Methods

    Height or Width Percent

  • Specifies the component's vertical height as a percentage of the height of its parent Component.


  • Specifies the component's horizontal width as a percentage of the Width of its parent Component.

    • # Name Type(s) Default Value
    1 set HeightPercent Integer -1
    1 set widthPercent Integer -1
    Image Description
    Image Description
    Methods

    Image

  • Get/Set the value of button's image.


  • Sets the path to an image to display on the button.

    • # Name Type(s) Default Value
    1 get Image return *
    2 set Image text *
    Image Description
    Image Description
    Methods

    Ripple Color

  • Get/Set the value of height.


  • Sets the ripple effect color.

    • # Name Type(s) Default Value
    1 get RippleColor return #ccccccff
    2 set RippleColor color #ccccccff
    Image Description
    Image Description
    Methods

    Shadow Color

  • Get/Set the value of shadow color in integer.


  • Sets the shadow color of the button.

    • # Name Type(s) Default Value
    1 get ShadowColor return #ffffff00
    2 set ShadowColor color #ffffff00
    Image Description
    Image Description
    Methods

    Shape

  • Get/Set the value of button shape


  • Sets the shape of the button (default, rounded, rectangle, oval).

    • # Name Type(s) Default Value
    1 get Shape Integer 0
    2 set Shape Integer 0
    Image Description
    Image Description
    Methods

    Show Feedback

  • Get/Set the value of showfeedback from button.


  • Sets whether to show visual feedback when image button is pressed.

    • # Name Type(s) Default Value
    1 get Showfeedback return true
    2 set Showfeedback boolean true
    Image Description
    Image Description
    Methods

    Text

  • Get/Set the value of text from button.


  • Sets the text displayed on the button.

    • # Name Type(s) Default Value
    1 get Text return Text for Button1
    2 set Text text Text for Button1
    Image Description
    Image Description
    Methods

    Text Alignment

  • Get/Set the value of text alignment from button.


  • Sets the alignment of the button's text (normal, center, opposite).


    • # Name Type(s) Default Value
    1 get TextAlignment return