Screen Component

Properties

aboutScreen
  Information about the screen. It appears when "About this Application" is selected from the system menu. Use it to tell users about your app. In multiple screen apps, each screen has its own AboutScreen info.
Data type: string
Designer Writable true <screen name="screenName" aboutScreen="Test aboutScreen">
Code Writeable true screenName.aboutScreen = "Test aboutScreen"
Code Readable true let variable = screenName.aboutScreen

accentColor
  This is the accent color used for highlights and other user interface accents in newer versions of Android. It is set as an RRGGBB or RRGGBBAA string. Components affected by this property include dialogs created by the Notifier, the DatePicker, and others.
Data type: color
Designer Writable true <screen name="screenName" accentColor="FF769cc4">
Code Writeable false
Code Readable false

alignHorizontal
  A number that encodes how contents of the screen are aligned horizontally. The choices are 'left', 'right' and 'center'
Data type: string
Designer Writable true <screen name="screenName" alignHorizontal="center">
Code Writeable true screenName.alignHorizontal = "center"
Code Readable true let variable = screenName.alignHorizontal

alignVertical
  A number that encodes how the contents of the arrangement are aligned vertically. The choices are 'top', 'center' and 'bottom
Data type: string
Designer Writable true <screen name="screenName" alignVertical="center">
Code Writeable true screenName.alignVertical = "center"
Code Readable true let variable = screenName.alignVertical

appName
  This is the display name of the installed application in the phone. If the AppName is blank, it will be set to the name of the project when the project is built.
Data type: string
Designer Writable true <screen name="screenName" appName="Test appName">
Code Writeable false
Code Readable false

backgroundColor
  Specifies the Screen's background color as an RRGGBB or RRGGBBAA string. If an BackgroundImage has been set, the color change will not be visible until the BackgroundImage is removed.
Data type: color
Designer Writable true <screen name="screenName" backgroundColor="FF55d94b">
Code Writeable true screenName.backgroundColor = "FF55d94b"
Code Readable true let variable = screenName.backgroundColor

backgroundImage
  Specifies the path of the Screen's background image. If there is both an BackgroundImage and a BackgroundColor specified, only the BackgroundImage will be visible.
Data type: string
Designer Writable true <screen name="screenName" backgroundImage="cat.png">
Code Writeable true screenName.backgroundImage = "cat.png"
Code Readable true let variable = screenName.backgroundImage

bigDefaultText
  When checked, all default size text will be increased in size.
Data type: boolean
Designer Writable true <screen name="screenName" bigDefaultText="false">
Code Writeable true screenName.bigDefaultText = false
Code Readable true let variable = screenName.bigDefaultText

blocksToolkit
  NOT TESTED. THIS MAY NOT WORK. A JSON string representing the subset for the screen. Authors of template apps can use this to control what components, designer properties, and blocks are available in the project.
Data type: string
Designer Writable true <screen name="screenName" blocksToolkit="">
Code Writeable false
Code Readable false

closeScreenAnimation
  Sets the animation type for the transition of this form closing and returning to a form behind it in the activity stack. It should be one of: 'default', 'fade', 'zoom', 'slidehorizontal', 'slidevertical', 'none'
Data type: string
Designer Writable true <screen name="screenName" closeScreenAnimation="slidehorizontal">
Code Writeable true screenName.closeScreenAnimation = "slidehorizontal"
Code Readable true let variable = screenName.closeScreenAnimation

defaultFileScope
  Specifies the default scope used when components access files. Note that the File component has its own property for controlling file scopes. It should be one of: 'app', 'asset', 'cache', 'legacy', 'private', 'shared'
Data type: string
Designer Writable true <screen name="screenName" defaultFileScope="app">
Code Writeable false
Code Readable false

height
  Returns the Screen height in pixels (y-size).
Data type: number
Designer Writable false
Code Writeable false
Code Readable true let variable = screenName.height

highContrast
  When checked, there will be high contrast mode turned on.
Data type: boolean
Designer Writable true <screen name="screenName" highContrast="true">
Code Writeable true screenName.highContrast = true
Code Readable true let variable = screenName.highContrast

icon
  The image used for your App's display icon should be a square png or jpeg image with dimensions up to 1024x1024 pixels. Larger images may cause compiling or installing the app to fail. The build server will generate images of standard dimensions for Android devices.
Data type: string
Designer Writable true <screen name="screenName" icon="red.png">
Code Writeable false
Code Readable false

openScreenAnimation
  Sets the animation type for the transition of this form opening. It should be one of: 'default', 'fade', 'zoom', 'slidehorizontal', 'slidevertical', 'none'
Data type: string
Designer Writable true <screen name="screenName" openScreenAnimation="slidevertical">
Code Writeable true screenName.openScreenAnimation = "slidevertical"
Code Readable true let variable = screenName.openScreenAnimation

platform
  Gets the name of the underlying platform running the app. Currently, this is the text "Android". Other platforms may be supported in the future.
Data type: string
Designer Writable false
Code Writeable false
Code Readable true let variable = screenName.platform

platformVersion
  Gets the version number of the platform running the app. This is typically a dotted version number, such as 10.0. Any value can be returned, however, so you should take care to handle unexpected data. If the platform version is unavailable, the empty text will be returned.
Data type: string
Designer Writable false
Code Writeable false
Code Readable true let variable = screenName.platformVersion

primaryColor
  This is the primary color used as part of the Android theme, including coloring the Screen's title bar.
Data type: color
Designer Writable true <screen name="screenName" primaryColor="FFbbae45">
Code Writeable false
Code Readable false

primaryColorDark
  This is the primary color used when the Theme property is specified to be Dark. It applies to a number of elements, including the Screen's title bar.
Data type: color
Designer Writable true <screen name="screenName" primaryColorDark="FF57fdaa">
Code Writeable false
Code Readable false

screenOrientation
  Declares the requested screen orientation, specified as a text value. Commonly used values are 'landscape', 'portrait', 'sensor', 'user' and 'unspecified'. See the Android developer documentation for the complete list of possible options. All acceptable values are: 'unspecified', 'landscape', 'portrait', 'sensor', 'user', 'behind', 'nosensor', 'fullsensor', 'reverselandscape', 'reverseportrait', 'sensorlandscape', 'sensorportrait'
Data type: string
Designer Writable true <screen name="screenName" screenOrientation="portrait">
Code Writeable true screenName.screenOrientation = "portrait"
Code Readable true let variable = screenName.screenOrientation

scrollable
  When checked, there will be a vertical scrollbar on the screen, and the height of the application can exceed the physical height of the device. When unchecked, the application height is constrained to the height of the device.
Data type: boolean
Designer Writable true <screen name="screenName" scrollable="true">
Code Writeable true screenName.scrollable = true
Code Readable true let variable = screenName.scrollable

showListsAsJson
  If true (the default), lists will be shown as strings in JSON/Python notation for example [1, "a", true]. If false, lists will be shown in the LISP notation, for example (1 a true).
Data type: boolean
Designer Writable true <screen name="screenName" showListsAsJson="true">
Code Writeable false
Code Readable false

showStatusBar
  The status bar is the topmost bar on the screen. This property reports whether the status bar is visible.
Data type: boolean
Designer Writable true <screen name="screenName" showStatusBar="true">
Code Writeable true screenName.showStatusBar = true
Code Readable true let variable = screenName.showStatusBar

sizing
  If set to responsive (the default), screen layouts will use the actual resolution of the device. See the documentation on responsive design in App Inventor for more information. If set to fixed, screen layouts will be created for a single fixed-size screen and autoscaled. NOTE: This property should appear on Screen1 only and controls the sizing for all screens in the app. Acceptable options are: 'fixed', 'responsive'
Data type: string
Designer Writable true <screen name="screenName" sizing="responsive">
Code Writeable false
Code Readable false

theme
  Selects the theme for the application. Theme can only be set at compile time and the Companion will approximate changes during live development. Possible options are 'devicedefault', 'blacktitle', 'dark'.
Data type: string
Designer Writable true <screen name="screenName" theme="devicedefault">
Code Writeable false
Code Readable false

title
  Title property setter method
Data type: string
Designer Writable true <screen name="screenName" title="Test title">
Code Writeable true screenName.title = "Test title"
Code Readable true let variable = screenName.title

titleVisible
  The title bar is the top gray bar on the screen. This property reports whether the title bar is visible.
Data type: boolean
Designer Writable true <screen name="screenName" titleVisible="true">
Code Writeable true screenName.titleVisible = true
Code Readable true let variable = screenName.titleVisible

tutorialURL
  A URL which will be opened on the left side panel (which can be toggled once it is open). This is intended for projects that have an in-line tutorial as part of the project. For security reasons, only tutorials hosted on http://appinventor.mit.edu or linked to from our URL shortener (http://appinv.us) may be used here. Other URLs will be silently ignored.
Data type: string
Designer Writable true <screen name="screenName" tutorialURL="https://appinventor.mit.edu/">
Code Writeable false
Code Readable false

versionCode
  An integer value which must be incremented each time a new Android Application Package File (APK) is created for the Google Play Store.
Data type: number
Designer Writable true <screen name="screenName" versionCode="1">
Code Writeable false
Code Readable false

versionName
  A string which can be changed to allow Google Play Store users to distinguish between different versions of the App.
Data type: string
Designer Writable true <screen name="screenName" versionName="ButternutBiscuit">
Code Writeable false
Code Readable false

width
  Returns the Screen width in pixels (x-size).
Data type: number
Designer Writable false
Code Writeable false
Code Readable true let variable = screenName.width

class
  The styling class of the the component
Data type: string
Designer Writable true <screen name="screenName" class="TestClass">
Code Writeable false
Code Readable false

id
  The styling id of the the component
Data type: string
Designer Writable true <screen name="screenName" id="TestId">
Code Writeable false
Code Readable false

name
  The name of the component that will be used to refer to it in code.
Data type: string
Designer Writable true <screen name="screenName" name="Screen1">
Code Writeable false
Code Readable false

script
  This is the linked JavaScript file
Data type: string
Designer Writable true <screen name="screenName" script="screen1.js">
Code Writeable false
Code Readable false

Methods

Method name Description Parameters
askForPermission Ask the user to grant access to a sensitive permission, such as ACCESS_FINE_LOCATION. This block is typically used as part of a PermissionDenied event to ask for permission. If the user grants permission, the PermissionGranted event will be run. If the user denies permission, the PermissionDenied event will be run. Note: It is a best practice to only ask for permissions at the time they are needed, which App Inventor components will do when necessary. You should not use AskForPermission in your Initialize event unless access to that permission is critical to the behavior of your app and is needed up front, such as location services for a navigation app. Permissions are: CoarseLocation, FineLocation, MockLocation, LocationExtraCommands, ReadExternalStorage, WriteExternalStorage, Camera, Audio, Vibrate, Internet, NearFieldCommunication, Bluetooth, BluetoothAdmin, WifiState, NetworkState, ManageAccounts, GetAccounts, ReadContacts and UseCredentials
screenName.askForPermission(permissionName)
screenName.askForPermission("WriteExternalStorage")
permissionName string
hideKeyboard Hide the soft keyboard
screenName.hideKeyboard()
addEventListener Method used to create event listeners.
See Events below for samples.
eventName string
eventCallbackFunction callback

Events

Event name Description Parameters
backPressed Device back button pressed.
screenName.addEventListener(
    "backPressed",
    function () {
        //Your code here
    }
)
errorOccurred Event raised when an error occurs. Only some errors will raise this condition. For those errors, the system will show a notification by default. You can use this event handler to prescribe an error behavior different than the default.
screenName.addEventListener(
    "errorOccurred",
    function (component, functionName, errorNumber, message) {
        //Your code here
    }
)
component component
functionName string
errorNumber number
message string
initialize The Initialize event is run when the Screen starts and is only run once per screen.
screenName.addEventListener(
    "initialize",
    function () {
        //Your code here
    }
)
otherScreenClosed Event raised when another screen has closed and control has returned to this screen.
screenName.addEventListener(
    "otherScreenClosed",
    function (otherScreenName, result) {
        //Your code here
    }
)
otherScreenName string
result any
permissionDenied Event to handle when the app user has denied a needed permission.
screenName.addEventListener(
    "permissionDenied",
    function (component, functionName, permissionName) {
        //Your code here
    }
)
component component
functionName string
permissionName string
permissionGranted Event to handle when the app user has granted a needed permission. This event is only run when permission is granted in response to the AskForPermission method.
screenName.addEventListener(
    "permissionGranted",
    function (permissionName) {
        //Your code here
    }
)
permissionName string
screenOrientationChanged Screen orientation changed
screenName.addEventListener(
    "screenOrientationChanged",
    function () {
        //Your code here
    }
)