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
  •  29 Blocks Available

Animated Navigation

Animated Navigation is an awesome navigation component that you can use to add cool, animated and fully customizable tab navigation in your apps. The component provides handy methods and properties to change the behaviour as well as the appearence of the navigation bar.

Overview

The AnimatedNavigation component provides a customizable navigation tab bar with animations, badge customization, and title visibility features.

Events

Image Description
Events

Start Tab Selected

  • Triggered when a tab starts being selected.

    • # Name Type(s) Default Value
    1 model object *
    2 index integer *
    Image Description
    Events

    End Tab Selected

  • Triggered when a tab selection ends.

    • # Name Type(s) Default Value
    1 model object *
    2 index integer *

    Methods

    Image Description
    Methods

    Add Item

  • Adds a new navigation item with an icon, color, title, and badge title.

    • # Name Type(s) Default Value
    1 icon text *
    2 color color #00000
    3 itemTitle text *
    4 itemBadgeTitle text *
    Image Description
    Methods

    Add Item From Model

  • Adds an item using an existing NavigationTabBar.Model object.

    • # Name Type(s) Default Value
    1 model object *
    Image Description
    Methods

    Badge Graviy

  • Sets the gravity (alignment) of the badge.

    • # Name Type(s) Default Value
    1 gravity integer center
    Image Description
    Methods

    Badge Position

  • Sets the position of the badge.

    • # Name Type(s) Default Value
    1 position integer center
    Image Description
    Methods

    Create

  • Initializes the NavigationTabBar component and sets up tab selection listeners.

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

    Deselect

  • Deselects the current tab selection.

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

    HextoColor

  • Converts a hex color string to an integer color value.

    • # Name Type(s) Default Value
    1 colorhex color #00000
    Image Description
    Methods

    Initialize Default Prefrence

  • Initializes the default preferences for the navigation tab bar.

    • # Name Type(s) Default Value
    1 Initialize Default Prefrence * *
    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 space inside a component, between its content and its boundary. It controls the distance between the component’s content (like text or an image) and its edges.

    • # 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 Model Index

  • Sets the model index of the navigation tab bar, with an option to force the change.

    • # Name Type(s) Default Value
    1 index integer *
    Image Description
    Methods

    Title Mode

  • Sets the title display mode.

    • # Title Type(s) Default Value
    1 TitleMode object *

    Properties

    Image Description
    Methods

    Random Color

  • Generates a random color using the HSL color model.

    • # Name Type(s) Default Value
    1 RandomColor color #00000
    Image Description
    Properties

    Active Color

  • Sets the active navigation color.

    • # Name Type(s) Default Value
    1 ActiveColor color Black
    Image Description
    Image Description
    Properties

    Animation Duration

  • Sets the animation duration in milliseconds.


    • # Name Type(s) Default Value
    1 AnimationDuration integer 1000
    Image Description
    Properties

    Badge Background Color

  • Sets the badge background color.

    • # Name Type(s) Default Value
    1 BadgeBgColor color Green
    Image Description
    Properties

    Badge Size

  • Sets the badge size.

    • # Name Type(s) Default Value
    1 BadgeSize float 10.0
    Image Description
    Image Description
    Properties

    Badge Gravity Top or Bottom

  • Sets the gravity (alignment) of the badge.

    • # Name Type(s) Default Value
    1 BadgeGravity Object
    Image Description
    Image Description
    Image Description
    Properties

    Badge Position Left, Right or Center

  • Sets the position of the badge.

    • # Name Type(s) Default Value
    1 BadgePosition Object
    Image Description
    Properties

    Badge Title Color

  • Sets the badge title color.

    • # Name Type(s) Default Value
    1 BadgeTitleColor int White
    Image Description
    Image Description
    Properties

    Behaviour Enabled

  • Enables/disables special behavior features.


    • # Name Type(s) Default Value
    1 BehaviourEnabled boolean false
    Image Description
    Properties

    Background Color

  • Sets the background color of the navigation bar.

    • # Name Type(s) Default Value
    1 BgColor int Dark Gray
    Image Description
    Image Description
    Properties

    Corner Radius

  • Sets the corner radius.


    • # Name Type(s) Default Value
    1 CornersRadius float 5.0
    Image Description
    Image Description
    Properties

    Height

  • Sets the height of the tab bar.


    • # Name Type(s) Default Value
    1 Height integer -1
    Image Description
    Image Description
    Properties

    Width

  • Sets the width of the tab bar.
    • # Name Type(s) Default Value
    1 Width integer -1
    Image Description
    Image Description
    Properties

    Set Height or Width Percent

  • Sets the height,width as a percentage of the screen height,width

    • # Name Type(s) Default Value
    1 HeightPercent integer -1
    2 WidthPercent integer -1
    Image Description
    Image Description
    Properties

    Icon Size

  • Sets the size of the icons.


    • # Name Type(s) Default Value
    1 IconSize float 14.0
    Image Description
    Properties

    Set Inactive Color

  • Sets the inactive navigation color.

    • # Name Type(s) Default Value
    1 InactiveColor int Gray
    Image Description
    Image Description
    Properties

    Is Badged

  • Enables/disables badge visibility.


    • # Name Type(s) Default Value
    1 IsBadged boolean false
    Image Description
    Image Description
    Properties

    Is Scaled

  • Enables/disables scale effect.


    • # Name Type(s) Default Value
    1 IsScaled boolean false
    Image Description
    Image Description
    Properties

    Is Swiped

  • Enables/disables swipe functionality.


    • # Name Type(s) Default Value
    1 IsSwiped boolean false
    Image Description
    Image Description
    Properties

    Is Tinted

  • Enables/disables tint effect.


    • # Name Type(s) Default Value
    1 IsTinted boolean false
    Image Description
    Image Description
    Properties

    Is Title

  • Enables/disables title visibility.


    • # Name Type(s) Default Value
    1 IsTitle boolean false
    Image Description
    Image Description
    Properties

    Model Index

  • Sets the current model index.


    • # Name Type(s) Default Value
    1 ModelIndex int 1
    Image Description
    Image Description
    Properties

    Title Size

  • Sets the title size.


    • # Name Type(s) Default Value
    1 TitleSize float 14.0
    Image Description
    Properties

    Title Mode Active

  • Sets the title display mode.
    • # Name Type(s) Default Value
    1 TitleMode Object
    Image Description
    Properties

    Title Mode All

  • Sets the title display mode.
    • # Name Type(s) Default Value
    1 TitleMode Object
    Image Description
    Image Description
    Properties

    Type Face

  • Sets the text typeface.


    • # Name Type(s) Default Value
    1 TypeFace String Default
    Image Description
    Image Description
    Properties

    Visible

  • Sets the visibility of the component (visible or gone).

    • # Name Type(s) Default Value
    1 Visible boolean