# AppyBuilder Introduction ![](/files/-L9BuNgdKabs0tVuRUtv) Originally based on MIT App Inventor, AppyBuilder is a fully browser-based Drag & Drop mobile app builder platform that allows anyone to quickly design and build Android mobile apps, Even With No Coding Skills! To get more info about AppyBuilder, you can either view **website** at or visit/join **forum community** at ![](/files/-L9BuNguVfuwEq_URA6f) `No part of this document may be reproduced in any form or by any means, electronic or mechanical without prior written permission of AppyBuilder LLC - Copyright © 2018 AppyBuilder LLC - All Rights Reserved` # Release Notes This page lists AppyBuilder Release dates / notes in reverse chronological order. Join Community here: **July 1st, 2018** - Requires Companion [version 5.01](https://play.google.com/store/apps/details?id=com.appybuilder.companiongold) **March 15, 2019** - Requires Companion **v5.06** (side-load [HERE](https://goo.gl/rXHWF5)) or **v5.07** from PlayStore [HERE](https://play.google.com/store/apps/details?id=com.appybuilder.companiongold). NOTE: If you use v5.07, during live-testing, you'll receive a pop-up that you should upgrade. Please ignore this because we didn't want to have another Buildserver release * **OneSignalPush -** Added PlayerID property * **Texting** - Google now limits some permissions in the Google Play Store. Component updated to adhere to Google policy * **PhoneCall** - Google now limits some permissions in the Google Play Store. Component updated to adhere to Google policy * **Map** component - Bug Fix: Resolves an issue with using Map tiles (Thanks to [Peter](https://community.appybuilder.com/u/peter/summary)) * **PushNotification** - Bug fix: Resolves issue that PushNotification was throwing error messages on some devices (Thanks to [Ken](https://community.appybuilder.com/u/ken/summary)) * **Facebook** - Updated to latest Facebook SDK ![](/files/-LGMR6DpoOVK9lcepc9M) **Oct 15, 2018** - Same companion (V 5.05) - no update required * **Non-component release.** Only UI/UX updates to make blocks-editor use Scratch 3.0 color scheme ![](/files/-LGMR6DpoOVK9lcepc9M) **Oct 13, 2018** -[ Requires Companion Version 5.05](https://play.google.com/store/apps/details?id=com.appybuilder.companiongold) * **Bug fix** - Fixed issues with OneSignalPush notification. Now it even works with Android +8 version - (Github issue #8) * **New Component** - Added new Facebook Interstatial monetization component (Github issue #17) * **Bug** **fix** - Fixed the Circle component issue for the Maps (Github issue # 28) * **Feature** - upgraded AppyBuilder to support building larger apps. The limit is no almost 20MB * **Enhancement** - Added **Volume** block to **Player** component for setting / retrieving Player Volume * **Bug fix** - Fixed issue with Switch component (Github issue #23) * **Enhancement** - **FirebaseDB** - added block to set **FirebaseURL** dynamically (Github issue #25) * **Enhancement** - Added **DrawPolygon** block to **Canvas** component. Using this block, provides ability to draw polygon shape with +3 sides (Github issue # 29) * **Enhancement** - Updated **AdMob** banner component to remove the black background (Github issue #27) * **UI/UX updates** - minor UI/UX updates ![](/files/-LGMR6DpoOVK9lcepc9M) **Sept 18, 2018** -[ Requires Companion Version 5.04](https://play.google.com/store/apps/details?id=com.appybuilder.companiongold) * **Enhancement** - Added Screen1 ***MinAPI***. This is a configurable drop-down property that allows choosing minimum API version from 14 (Ice Cream Sandwich 4.02) through 21 (Lollipop 5.0); thus allowing installation of apps on lower API devices. Default will be 14 * **Enhancement** - Added Screen1 ***MaxAPI***. This is a configurable drown-down property that allows choosing maximum API version from 22 ( Lollipop 5.1) through 26 ( Oreo 8.0). If you intend to publish your apps to Google Play Store, you should use API 26. However, if you distribute apps internally (e.g. side-loading) and do not need to have user grant permissions, then you can use API 22 * **New component** - Added new ***GravitySensor*** component. This is a Non-visible component that provides a three dimensional vector indicating the direction and magnitude of gravity. Typically, this sensor is used to determine the device relative orientation in space * **New Component** - Added new ***Airtable*** spreadsheet component (thanks to [Jerin Jacob](https://community.appybuilder.com/u/jerin_jacob/summary)). This is non-visible Storage component that provides access to Airtable.com spreadsheets; allowing to use as alternative for storing and manipulating data in cloud. Sign up [HERE](https://airtable.com/invite/r/eHgwOBFW) * **Feature**: In Blocks editor, added **bitwise** AND, XOR, IOR to ***Math built-in blocks*** * **Bug fix**: Fixed a previous regression in ***FusiontablesControl*** component * **UI / UX**: In Designer editor, removed the left component panel swing effect * **UI / UX:** In Blocks editor, added context menu items to enable and disable all blocks * **Companion**: Now can run on devices 4.x and above * **Companion**: Devices with lower API (e.g. 4.x) can also scan QR code download AppyBuilder .apk directly onto device * **Enhancement:** Added backward compatibility to Android version 4.02 ![](/files/-LGMR6DpoOVK9lcepc9M) **August 9, 2018** - Requires [Companion Version 5.03](https://play.google.com/store/apps/details?id=com.appybuilder.companiongold) * **Bug fixes:** This release is to fix the Permissions issues such as Sharing, Camera * **Bug fix:** Fixed issues related to AdMob clicks * **Bug fix:** Fixed issue for Texting messages. If received messages were > 160 characters, only 25 chars were received * **Bug fix:** Companion was not able to scan QR code to download apk directly to device * **Bug fix:** fixed variables / procedure color-blocks. Previously there were swapped * **Companion and building apps (apk).** The min sdk is now moved to API 21. We will try lower this API in future releases * **NOTE: *****Screen1.RequestAppPermission*** block - Depreciated (obsolete). If you are using this block, please remove from your app ![](/files/-LGMR6DpoOVK9lcepc9M) **July 31st, 2018** Requires [Companion version 5.02](https://play.google.com/store/apps/details?id=com.appybuilder.companiongold) * **Feature:** Updates for **target SDK 26** * **Feature:** Per **European GDPR** requirement, AdMob components now have blocks to get user consent * **Feature:** For **AdMob** components, now includes ability to set personalized ads using SetConsent block * **Feature:** Runtime permissions. Starting Aug 1st, Google requires that app-users have to specifically grant permission for sensitive PERMISSIONS. Sensitive permissions are like Camera, ContactPicker, Texting, PhoneCall, SoundRecorder, Reading / Writing to external storage (File, Image). AppyBuilder now checks to see if app uses these permissions (e.g. Texting). If yes, then it will automatically pop-up a dialog, asking user to grant permission. * **Feature:** Ability to request app-user to grant all permissions use Screen1.RequestAppPermissions block. This will be useful for extension developers. * **UI / UX:** Updated user interface - Thanks to [Turbo\_Programming](https://community.appybuilder.com/u/turboprogramming/summary) for his country-flag and UI style contribution ![](/files/-LGMR6DpoOVK9lcepc9M) * **Feature** - Added new ***Snackbar*** component. This component is available in Effects category * **Feature** - Added new ***Sidebar*** component. This component is available in Effects category * **Feature** - Added new ***Decoration*** component. This component is available in Effects category. It will allow you to change features such as component Margins, Padding * **Bug fix** - Fixed ***Switch*** font size issue * **Feature** - *Switch* component. Added updated properties / blocks such as Switch track color * **Feature** - *GoogleSpreadsheet*. Added new Google Spreadsheet component. This component uses [Cloudstich](https://cloudstitch.com) and is available in Storage category * **Bug fix** - Fixed orientation issue with *FloatingButtonAction*. Thanks to Ken Nichols for his contribution and effort to fix the orientation issue * **Feature** - Updated *BarcodeScanner* to include ability to scan a variety of barcodes (e.g. UPC\_A, UPC\_E, EAN\_13, EAN\_8, RSS\_14, RSS\_EXPANDED, DATA\_MATRIX). For detail barcode types, please visit page [HERE](https://www.scandit.com/types-barcodes-choosing-right-barcode/). Thanks to Ken Nichols for his contribution to add this feature * **Feature** - Added DrawShape & DrawArc into *Canvas* component. Thanks to [ColinTree](https://github.com/ColinTree) for his contribution and efforts * **Feature** - *Copy Scree*n. You now have ability to create a copy of any screen. Thanks to Punya for their contribution * **Feature** - *Export Screen*. You now have ability to export a specific Screen so that it can be imported into another project. This option is available from 'Projects' menu. Thanks to Punya for their contribution. * **Feature** - *Import Screen*. You now have ability to import a screen that was exported using "Export Screen) Screen so that it can be imported into another project. This option is available from 'Projects' menu * **UI / UX -** Updated user interface * **UI / UX -** Updated AppyBuilder.com website ![](/files/-LGMR6DpoOVK9lcepc9M) ***March 20, 2018*** - Requires [**Companion v4.07**](https://play.google.com/store/apps/details?id=com.appybuilder.companiongold) * **Bug fix** - **Spacer** - Updated component to remove background color. Color is light gray * **Bug fix** - **ObfuscatedText** - was causing build issue. * **Feature** - **Spinner**: Added selection index to list of arguments in the **AfterSelection** block * **Enhancement** - Notifier.**ShowChooseDialog**. Added a block called **TitleImage** that can point to an asset image (size of up to 150x150). If used, then **ShowChooseDialog** will display the image next to tile. If image is invalid (or blank), then no image * **Enhancement** - Notifier.**ShowMessageDialog**. Added a block called TitleImage that can point to an asset image (size of up to 150x150). If used, then ShowMessageDialog will display the image next to tile. If image is invalid (or blank), then no image * **Enhancement** - Notifier - **ShowProgressDialog** - Updated for Material Design look & feel * **Enhancement** - Notifier - Now includes a socket for progressStyle; 0=Spinner style (default), 1=Horizontal bar * **Enhancement** - Notifier - **ShowTextDialog** - Updated for Material Design look & feel ![](/files/-L9BuaHqxhsHcU81Fuka) ![](/files/-L9BuaIK7my5M_Y0IZkB) ![](/files/-L9BuaIgPOTHnmufzUgS) ![](/files/-LGMR6DpoOVK9lcepc9M) ***March 07, 2018*** - Requires [**Companion v4.06**](https://play.google.com/store/apps/details?id=com.appybuilder.companiongold) * Release fixes the the bugs we have been experiencing with below release v4.05 below ![](/files/-LGMR6DpoOVK9lcepc9M) March 05, 2018 - Requires [**Companion v4.05**](https://play.google.com/store/apps/details?id=com.appybuilder.companiongold) * **Feature**: Added **Spacer** Visible component. Can be used to add Space (filler / gap) between components * Feature: Added Break ![](/files/-L9BuaM-sjSvcinVUDtr) block. This block can be used to break out of a loop. Available in the Control-drawer of Blocks-Editor (*Thanks Professor Hal Abelson*) * **Feature**: Designer drag and drop - useful when using mobile * **Feature**: **Web** - Added *UriDecode* block * **Enhancement**: **Notifier** - Updated so that title background to be white - applies to *ShowChooseDialog* and *ShowMessageDialog* * **Bug fix**: **Companion** - Updates so that companion would run on Android 4.x * **Feature**: **Button** - Added *PerformClick* to dynamically simulate clicking the Button * **Feature**: **Image** - Added *ImageEffect* block. Allows for *applying* effects such as *invert, binary, blue, brown, bw, green, pink, red, sepia* * **Feature**: **Image** - Added *ApplyShape* block. Allows for applying shapes such as *circle, octagon, star, triangle* * **Feature: Screen** : Added block: SetTitleBarCustomFont for changing titlebar font ![](/files/-L9BuaTY1j5vVKOLS_35) * **Bug fix**: Fixed the broken ***Donate*** link at top of AppyBuilder page * **Updated** Terms of Service [HERE](https://help.appybuilder.com/terms-of-service.html) ![](/files/-LGMR6DpoOVK9lcepc9M) Feb 14, 2018 - Requires [**Companion v4.04**](https://play.google.com/store/apps/details?id=com.appybuilder.companiongold) * **Feature:** ***Toggler*** Component, added ***TextColor*** and ***FontSize*** * **Feature:** ***Web*** component: Added ***UriDecode*** block * **Feature:**Added ***WallpaperManager*** component (Media) allowing to: * SetWallpaper - triggers ***AfterAction*** * From assets - use //YourImage.png, * From SD card - e.g. /SDfolder/YourImage.png * From Internet - user * From ImagePicker - use ImagePicker.Selection * GetWallpaper - triggers ***AfterAction***. You can use ***AfterAction*** message parameter to get current path to wallpaper and set into Canvas or Image * **Feature:** ***Canvas***: New properties / blocks for ***FontSize***, ***FontBold***, ***FontItalic***, ***FontTypeface***, ***FontTypefaceCustom***. * These can be used for drawing text on Canvas * **Enhancement:** ***Map***: Use GeometryUtil for interpreting Map BoundingBox * **Bug fix:** Updated ***Notifier*** so that calls for oneButtonAlert (e.g. from FirebaseDB), is now executed using the new style * **Bug fix:** ***LinedTextEdit***: Fixed underline issue (sorry, custom font still does not align properly) * **Bug fix:** Previously building apps with FirebaseDB and Texting was caused build issue ![](/files/-L9Buai0w7xZmiQIOckf) ![](/files/-LGMR6DpoOVK9lcepc9M) Feb 02, 2018 Requires [**Companion v4.03**](https://play.google.com/store/apps/details?id=com.appybuilder.companiongold) This release is to address updates for **Notifier** components. In addition, the Notifier **ShowChooseDialog** and **ShowMessageDialog** blocks can take ***animationTypes*** of 1 to 4 for four different types of animation (see below). Any number greater than 4 means No-Animation: 1. Animate from Top (demo here: ) 2. Animate from Left (*great for display Help screens*) 3. Animate from Right (*great for display Help screens*) 4. Animate from Bottom **The Notifier now:** * Resizes (shrink / grow) automatically based on amount of text * Resize automatically based on screen-orientation * Creates automatic vertical scrolling ![](/files/-LGMR6DpoOVK9lcepc9M) Jan 31, 2018 Requires [**Companion v4.02**](https://play.google.com/store/apps/details?id=com.appybuilder.companiongold) Updates to **Notifier component**. It now includes updated design and features: * Ability to include html tags * Ability to include hyperlinks * Ability to contain large amount of text with scrolling feature * Animation from top, side, bottom (animationStyle 1 to 3) ![](/files/-L9Buaqe4r0qB3VR_0oE) ![](/files/-LGMR6DpoOVK9lcepc9M) Jan 28, 2018 - Requires [**Companion v4.01**](https://play.google.com/store/apps/details?id=com.appybuilder.companiongold) * **Feature:** Notifier - Updated ShowAlert to use fancy material design interface with images (ref 24 [HERE](https://github.com/AppyBuilder/AppyBuilder/issues/24)). * Block also includes slot for showAtBottom. If true, displays at bottom or at center * Block also includes alertType (1 through 6) for different alert types * **Feature:** Notifier - Updated ShowChooseDialog to use fancy material design interface. * Block also includes a slot for animationType (1 through 3) that allows you to animate the pop-up from Top, Side or Bottom * **Feature:** Notifier - Updated ShowMessageDialog to use fancy material design interface. * Block also includes a slot for animationType (1 through 3) that allows you to animate the pop-up from Top, Side or Bottom * **Feature:** Now includes block and designer property for adding TitleColor (ref 22 [HERE](https://github.com/AppyBuilder/AppyBuilder/issues/22)) (Sync with MIT AI) * **Bug Fix:** Map FeatureCollection icon was not displaying during drag * **Feature:** ListViewCuston - Now includes ability to load images from SD Card (ref 18 [HERE](https://github.com/AppyBuilder/AppyBuilder/issues/18)) * **Feature:** WebViewer Added designer and block for opening a WebViewer in external browser (ref 10 [HERE](https://github.com/AppyBuilder/AppyBuilder/issues/10)) * **Feature:** Added color palette wheel to designer color property (ref 25 [HERE](https://github.com/AppyBuilder/AppyBuilder/issues/25)) * **Feature:** Accelerometer: Implements a workaround for an Android issue that would cause the Accelerometer to switch X and Y directions on some landscape mode devices (sync with MIT AI) * **Feature:** Blocks editor Text drawer: Added an “is-text?” block to test whether a value is a string (ref 26 [HERE](https://github.com/AppyBuilder/AppyBuilder/issues/26)) ![](/files/-L9Bub5xUHQgUaA2DWad) ![](/files/-LGMR6DpoOVK9lcepc9M) Jan 16, 2018 - Requires [**Companion v3.26**](https://play.google.com/store/apps/details?id=com.appybuilder.companiongold) * **CloudDB** Component: New. EXPERIMENTAL - Integrated CloudDB, allowing you to store / retrieve data from cloud server * **Slider**: Fixed bug. When ThumbEnabled was set to false, Slider Thumb was disappearing * **LinedTextBox:** Moved from Experimental to User Interface category * **UI/UX:** Logo update - (\_Thanks to Peter Mathijssen for his work) * **Extension:** Bug fix. UsesPermissions annotation with empty string was resulting in invalid manifest * **Label** - feature: Added ReadMore property / block. If set TRUE, it will make automatically make the Label expandable and collapsable (***Thanks to Andres Cotes for his input***) * ![](/files/-L9BubF-G7oF3k2BJujL) ![](/files/-L9BubF0MRZjr9NndGJr) **AppyBuilder needs your support:** [http://AppyBuilder.com/appybuildersupport.html](http://appybuilder.com/appybuildersupport.html) ![](/files/-L9BubIUTMmXvzaoxGKp) Dec 31, 2017 [**Companion v3.25**](https://play.google.com/store/apps/details?id=com.appybuilder.companiongold) **Map Component**: New Integrated MIT latest Openstreet Map component. For more information, see [HERE](http://gold.appybuilder.com/reference/components/maps.html#Map). * * Simple Map .aia that was developed by Evan from MIT can be found [HERE](http://AppyBuilder.com/tutorials/openstreet/MapsSimple.aia) (NOTE: GPS location services needs to be turned on ![](/files/-L9BubKpDvKwMV50NpOf) * **MemoryInfo**: Non-visible sensor component to get information about device memory and SD Card ![](/files/-L9BubMplyhllOVGwxwR) ![](/files/-L9BubPEksQOGuJvoskC) Dec 11, 2017 [**Companion v3.24**](https://play.google.com/store/apps/details?id=com.appybuilder.companiongold) \- **AppyBuilder needs your support:** [http://AppyBuilder.com/appybuildersupport.html](http://appybuilder.com/appybuildersupport.html) * **HorizontalArrangement:** Updated ***IsCard*** \[1]so that it now setups margins all around the border * **VerticalArrangement:** Updated ***IsCard*** \[1]so that it now setups margins all around the border * **HorizonalArrangement:** For above, updated Card border background to match the Material Card color * **VerticalArrangement:** For above, updated Card border background to match the Material Card color * **Feature:** Arrangements now include UseRoundCorners block. If set to false, the Material Design card will use Rectangle corners, else Round Corners: ![](/files/-L9BubXW_A1_u5IIe8e_) * **FTPManager:** Added ***DeleteFolder*** block. ***Can delete non-empty remote or local folders*** . For remote, use /public \_ html/folder1/folder2/... and for local use /folder1/folder2/... ![](/files/-L9BubaAG7gUDmGVMtLA) * **UX:** When deleting component, now displays GWT pop-up window * **Feature:** Added ***Click*** event-block to all layout arrangements * **Feature:** Added ***LongClick*** event-block to all layout arrangements * Feature: Added StatusBarColor block ![](/files/-L9Bubhx1czslQ54bujG) to Screen. NOTE: Designer won't show color-change. * **Bug fix:** Updated ListView ***TextSize*** so that it now can dynamically change text size * **Bug fix:** Updated ListViewCustom ***TextSize*** so that it now can dynamically change text size * **Memory issues:** Performs memory management for loading images and reduces the Out Of Memory issues **\[1]** ![](/files/-L9BubsMgWokos-YaPPQ) ![](/files/-L9BubwGqUtsvQQw2M_b) Nov 27, 2017 [**Companion v3.23**](https://play.google.com/store/apps/details?id=com.appybuilder.companiongold) \- **AppyBuilder needs your support:** [http://AppyBuilder.com/appybuildersupport.html](http://appybuilder.com/appybuildersupport.html) * **Screen:** Added padding to Screen for top, left, bottom, right. Padding can be specified as single number (e.g. 5), or 4 numbers (e.g. 6,7,8,9 for top, left, bottom, right) * **Layout Arrangements:** Material Card representation. New property / block (IsCard) in Horizontal / Vertical Arrangement. If set to true, arrangement will be converted to Material Card * **OneSignalPush**: Added blocks for SubscriptionEnabled, VibrateEnabled, SoundEnabled * Fix messages in some non-English translations (e.g. Chinese) * Display an extension’s version in the help widget * Perofmance improvement: Prevent error checking on block during drag * **GalleryViewer**: added Thumbnail width, height in designer with default values * Make TitleVisible property to toggle title bar's visibility (Credits to Ben - @moliata on GitHub) * **NetworkManager**: New component to get network information, such as below. See doc [HERE](https://help.appybuilder.com/components/networkmanager.html) for details * if connected through WiFi, mobile, ... * If GPS is on * Start GPS options * Connection speed; slow, medium, fast ![](/files/-L9BucCUbwfzNhiABqdu) ![](/files/-L9BucGcQIL_w85oQykn) Oct 28, 2017 [**Companion v3.22**](https://play.google.com/store/apps/details?id=com.appybuilder.companiongold) \- AppyBuilder Gold Support / Contribution? [**http://PayPal.me/AppyBuilder**](https://www.gitbook.com/book/appybuilder/reference/edit#) :o ) * Browser bug fixes * Chrome browser performance update * Now **FREE** to everyone - no membership required. Just log into * For forum community please sign into here: ![](/files/-L9BucOytyDw_I-W-K97) Oct. 11, 2017 [**Companion v3.21**](https://play.google.com/store/apps/details?id=com.appybuilder.companiongold) \- AppyBuilder Gold - * Bugfix - **Chrome** latest update (61) introduced issue with drop-down position of pop-up menus. This was observed when in Design Editor. Issue resolved * Feature - **KitchenSink**: Now includes block ***IsKeyboardOpen*** \*\* * Feature - **VideoPlayer**: Added **ControlsEnabled** *peroperty / block*. Allows you to show/hide the controls. By default, its set to enabled * Feature - **UI** - Added ability to preview media - ***(Thanks to Aaron Suarez for his contribution*** [***HERE***](https://github.com/mit-cml/appinventor-sources/pull/764)***)*** * Feature - **UI**: Added ability to drag & drop media files for upload into assets ***(Thanks to Aaron Suarez for his contribution*** [***HERE***](https://github.com/mit-cml/appinventor-sources/pull/763)***)*** * Feature - **Switch** component - Click event: Now includes 'isChecked' paramter that indicates if Switch is Checked or Unchecked * Feature - **Checkbox** component - Changed event: Now includes '***isChecked***' parameter that indicates if Switch is Checked or Unchecked * Bugfix - Fixed scrolling issue, in both Designer and Blocks-editor: * Feature - Added **EXPERIMENTAL LinedTextBox** component. This is same as TextBox component, however, it includes notepad like lines and is always multiline * Bugfix - **OneSignalPush** - some devices were experiencing issues at certain times when push message was received. Issue is now fixed ![](/files/-L9BucyJkJF26nx4jUOy) Sept. 28, 2017 [**Companion v3.19**](https://play.google.com/store/apps/details?id=com.appybuilder.companiongold) \- AppyBuilder Gold * Feature - **Label**: now has *Click* events can be used to simulate tabs * Feature - **Label**: now has *LongClick* events * Feature - **ListViewCustom**: now can accept SIMPLE html text * Feature - New **OneSignalPush** notification component (Advanced category) -- See component tutorial [HERE](https://help.appybuilder.com/components/onesignalpush.html) * Feature - **Label**: *Designer* now provides draggable text-entry for entering text. This will be useful when entering long text in designer * Feature - **TextBox**: *Designer* now provides draggable text-entry for entering text. This will be useful when entering long text in designer * Feature - **CheckBox**: Added *CheckboxColor* property & block (default Dark Gray) * Enhancement - **Spinner**: Made spacing between drop-down items wider (when ShowRadioButton is false) * Feature - Added **Windows USB Live Testing** ability. Download the installer zip file from [**HERE**](http://AppyBuilder.com/companion/AppyBuilderStarterSetup.zip) and unzip and run the .msi instller app, which will install AppyBuilder-installer-app into " **C:** **\Program Files** **(** **x86** **)** **\AppyBuilder Starter** " folder. It will also create a shortcut on your Desktop: ![](/files/-L9BudUJZX4Q1TZyLd-C) Follow setup direction [**HERE**](https://help.appybuilder.com/live-testing.html) * BugFix - **WebViewer** *geolocation* was not working properly * BugFix: **ListViewCustom** *AfterDeleting* was returning a zero-based position of deleted-item. Its been updated so that it is now starts from 1. See [**HERE**](http://community.appybuilder.com/t/custom-listview/1402/20) for details * Documentation: **GalleryViewer** *AfterPicking* block. Fixed block tooltip * BugFix: Fixes a bug where the block position in older projects was sometimes forgotten. See [**HERE**](https://github.com/mit-cml/appinventor-sources/pull/931) for details ![](/files/-L9BudlVGN2RASLuNs3O) Aug 29, 2017 - [**Companion v3.18**](https://play.google.com/store/apps/details?id=com.appybuilder.companiongold) \- AppyBuilder Gold * Bug fix - Camera component update. Flash was not working on some devices. Now fixed * Bug fix - ListViewCustom - text now shows left-aliged instead of centered * Bug fix - ListViewCustom - Now can change FontSize * Feature - ListViewCustom - New block for changing image size * Feature - Spinner - now you can set background color * Feature - Spinner - now you ShowRadioButtons for it * Feature - UI - Minor UI/UX updates * Feature - New Switch component * Feature - New RatingBar component * Feature - New 3D shadow effect BLOCK (SetShadow) for Label * Feature - New 3D shadow effect BLOCK (SetShadow) for TexBox * Feature - New 3D shadow effect BLOCK (SetShadow) for CheckBox * Feature - New 3D shadow effect BLOCK (SetShadow) for Button * Feature - New 3D shadow effect BLOCK (SetShadow) for ListPicker ![](/files/-L9Bue4uxyQM6r_Z0DtD) Aug 29, 2017 - [**Companion v3.17**](https://play.google.com/store/apps/details?id=com.appybuilder.companiongold) \- AppyBuilder Gold - **Same as before, No need to re-install** * Just a non-component release that included enhancement to Design Editor. It now includes Android phone background frame for the phone viewer ![](/files/-L9Bue87WXVm0BDTUP3m) Aug 21, 2017 - [Companion v3.17](https://play.google.com/store/apps/details?id=com.appybuilder.companiongold) \- AppyBuilder Gold * New component - **Added AdMob Rewards Video** - This component can be found under Monetize category * New Component - **Millenium Media Interstitial Ad** - This component can be found under Montetize category ![](/files/-L9BueFWvDnf_1X4ivvI) July 26, 2017 - [Companion v3.16](https://play.google.com/store/apps/details?id=com.appybuilder.companiongold) \- AppyBuilder Gold * Bug fix - Creating new projects or even opening old projects, could’ve loaded some default extensions. This issue is now resolved. ![](/files/-L9BueIqfCj2sK0TqiNZ) July 24, 2017 - [Companion v3.15](https://play.google.com/store/apps/details?id=com.appybuilder.companiongold) \- AppyBuilder Gold * Sound component - Added PlayRate * ListView component - AfterDeleting block now includes position (of the deleted item - index) * Notifier component - Now includes Linkify for enabling the hyperlinks * New ListViewCustom component -. Same as ListView, but now can include image and list item * New ListPickerCustom component - Same as ListPicker, but now can include image and list item ![](/files/-L9BueRYDzqk2PLXDN9m) June 29, 2017 - [Companion v3.14](https://github.com/AppyBuilder/AppyBuilderDocs/tree/62b594f1af7854b6114eee4ff7e4750c51fd73ef/%20https:/play.google.com/store/apps/details?id=com.appybuilder.companiongold) \- AppyBuilder Gold * Bug fix: Fixed crash for GoogleMap * Fixed issue with companion crashing on some devices ![](/files/-L9BueVrIBslQ--Mwffc) June 26, 2017 - [Companion v3.13](https://github.com/AppyBuilder/AppyBuilderDocs/tree/62b594f1af7854b6114eee4ff7e4750c51fd73ef/%20https:/play.google.com/store/apps/details?id=com.appybuilder.companiongold) \- AppyBuilder Gold Added ability to include PackageName as a Screen1 property. Can be used even for apps with multiple screens **Includes latest MIT AI updates below:** *MIT AI Changes between nb155 and nb156 (May 25, 2017)* *This is a non-component release, however it is a significant release because of a major upgrade to the Blocks Editor.* 1. *Added the ability to zoom the workspace in/out. Zooming gestures include:* 2. 1. *Click the +/- buttons in the lower left corner above the trashcan.* 2. *Ctrl+Mouse wheel on a mouse.* 3. *Multi-touch trackpad users with Chrome, zooming can also be done with the pinch/expand gesture.* 3. *Added the ability to pan the workspace. Panning gestures include:* 4. 1. *Mouse wheel up/down will pan the view vertical.* 2. *Wheels with 2-dimensional scrolling can also pan left/right.* 3. *Multi-touch trackpad users can pan in two dimensions using two-finger scrolling.* 5. *Added Reset to center button will set the zoom back to 1:1 and move to the center of the blocks workspace.* 6. *Added workspace grid. Right-clicking (Ctrl+Click on Mac) on the workspace brings up a context menu with "Enable Workspace Grid" option. This option is a user setting and will persist across workspaces and across App Inventor sessions.* 7. *Added workspace snapping. If the grid is enabled, another menu option "Enable Snap to Grid" will be available. Enabling this option will make the top-left corner of blocks snap to the nearest grid point. This option is a user setting and will persist across workspaces and across App Inventor sessions.* ![](/files/-L9Buf9xxBSEgDTVXGHq) April 07, 2017 - [Companion v3.08](https://github.com/AppyBuilder/AppyBuilderDocs/tree/62b594f1af7854b6114eee4ff7e4750c51fd73ef/%20https:/play.google.com/store/apps/details?id=com.appybuilder.companiongold) \- AppyBuilder Gold * Sync with MIT AI nb154a and nb155 * Make the Backpack persistent – If you leave AppyBuilder with blocks left in your backpack, they will be there the next time you login * Updates to better support newer versions of Android * Webviewer - Added new blockLoadHtmlblockwhich will allow you to useTextblock to type in any valid HTML string * Webviewer now includes ability to upload files from local device * Webviewer now includes ability to take picture for directly uploading to server. From Designer, just set AllowCamera to true (NOTE: You will need to drag-n-drop a Camera component for this to work) * PasswordTextBox - Fixed Bug ![](https://lh3.googleusercontent.com/UZE-SYOLdf39xwQicXQAtgeGaRcNQ1IsJbs_9wF7WAmqemjFaKaXwtETtULSJVzz4jjjkXR_if2zAOskP39hbNn4lWaJFWB3GU_Bk6cdiioyWdLZ_h4PtibYqEBX8wjJvgdtSfw1) # Terms of Service **Last updated: April 01, 2018** Welcome to AppyBuilder's website (the "Site") and its platforms (such as [http://gold.AppyBuilder.com\\](http://gold.AppyBuilder.com\)\\), collectively referred to as "Services". The Services runs on Google's App Engine service. You must read and agree to these Terms of Service and Privacy Policy (collectively, the "Terms") prior to using any portion of this Services. These Terms are an agreement between you and AppyBuilder. If you do not understand or do not agree to be bound by these Terms, please immediately exit and contact us at . AppyBuiler reserves the right to modify these Terms at any time and will publish notice of any such modifications online on this page for a reasonable period of time following such modifications, and by changing the effective date of these Terms. By continuing to access the Site after notice of such changes have been posted, you signify your agreement to be bound by them. Be sure to return to this page periodically to ensure familiarity with the most current version of these Terms. ## Account Required for Use of AppyBuilder In order to log in to AppyBuilder, you need to use a Google account. Your use of that account is subject to Google's Terms of Service for accounts, and the information you provide to Google is governed by Google's Privacy Policy. AppyBuilder has no access to your Google account or the information you provide for it other than the account email address, which we may use to contact you. In the future, we may provide alternative means for using AppyBuilder without Google accounts, at which point we will update these terms of use to reflect those alternatives. ## Information about you Beyond the name of your Google account, you do not have to tell us anything about yourself to download the AppyBuilder setup software or use the AppyBuilder Web site. ## The Apps you create By creating and storing apps on the AppyBuilder server you represent and warrant that you are the owner and creator of the apps, ( i) that you have the authority to authorize AppyBuilder to store the apps on the AppyBuilder Server and (ii) you will use the apps in compliance with all applicable laws and regulations. You, and not AppyBuilder, are solely responsible for your apps and your use of them. AppyBuilder has no proprietary rights in the apps you create with AppyBuilder. These apps belong to you. Your apps are stored on the AppyBuilder server. You have the right to download your apps and delete them from the server at any time. If you delete an app, there is the possibility that AppyBuilder may be able to continue to access it from the backups we keep for purposes of system maintenance, but these backups are periodically purged and are not designed for long-term preservation. AppyBuilder will strive to keep your apps and your account accessible to you for as long as you wish, but we have no obligation to do so, and AppyBuilder has no liability for the consequences of the service becoming unavailable or your apps becoming unavailable. We therefore strongly suggest that you maintain backup copies of valuable apps at places besides the AppyBuilder server. ## Violation of Policies AppyBuilder provides ability to add monetization to your apps. However, you should follow AdMob / Amazon Terms of Service (ToS). Please watch AdMob video guide below . It is very important to follow their ToS and guide. Violation of their ToS could cause suspension of your app or all apps published by you. If we notice repeated violations, we reserve the right to de-authorize your AppyBuilder account. ​​ ## Analytics AppyBuilder may collect and analyze data and other information relating to the provision, use and performance of various aspects of the Services and related systems and technologies (including, without limitation, information concerning User Content and data derived therefrom) (“**Services Analytics Data**”), and AppyBuilder will be free (during and after the term hereof) to (i) use such information and data for any purpose, including to improve and enhance the Services and for other development, diagnostic and corrective purposes in connection with the Services and other AppyBuilder offerings, (ii) conduct industry research and publish insights and reports, and (iii) disclose such data solely in aggregate or other de-identified form in connection with its business. In addition, AppyBuilder may collect and analyze anonymized, de-identified information relating to use of Your App by your users (“**Customer Analytics Data**”), in order to improve its products and services and for other reasonable internal business purposes and aggregate such anonymized, de-identified information with anonymized, de-identified information of its other users for purposes of creating and distributing case studies industry reports and for conducting research and development efforts in connection with and improving its products and services; provided that, the information does not, and could not reasonably be used to, relate back to or identify you or your user. You hereby grant us the right to: (i) add analytics plug-ins of our third party analytics service providers in Your App to allow them to collect Customer Analytics Data on behalf of AppyBuilder, and (ii) collect Customer Analytics Data as provided herein. You agree that your privacy policy will (a) clearly indicate that you use third party services providers, like and including, AppyBuilder, in order to make Your App(s) available, and that such third party services providers will have access to and will use such customer information in order to improve Services, and (b) clearly indicate that certain of your third party partners, like and including AppyBuilder, will have access to and will use your customer information on an aggregate and anonymized basis, for industry analysis, demographic profiling, and other purposes. As between you and AppyBuilder, you agree that AppyBuilder owns all right, title and interest in and to the Services Analytics Data and Customer Analytics Data collected by or on behalf of AppyBuilder. ## The Digital Millennium Copyright Act ("DMCA") We respect copyright law and expects our users to do the same. It is AppyBuilder's policy to terminate in appropriate circumstances Account holders who repeatedly infringe or are believed to be repeatedly infringing the rights of copyright holders. ## Pricing and Payment AppyBuilder is free for all users to use. However, we reserve the right to change the amount or the basis of determining, any charges or fees and to institute new charges or fees. If decision is made to do so, we will provide notice in AppyBuilder forum community [HERE](http://Community.AppyBuilder.com) at least 14 days before charging any fees. ~~Note: If Monetization components are used, AppyBuilder takes a 5% commission from the monetization revenue.~~ ## Disclaimer of Warranty / Indemnification / Limitation of Liabilities THE SERVICES AND CONTENT ARE PROVIDED “AS IS” AND WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, ALL IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, TITLE AND NON-INFRINGEMENT, AND ANY WARRANTIES ARISING OUT OF COURSE OF DEALING OR USAGE OF TRADE, EACH OF WHICH ARE HEREBY EXPRESSLY DISCLAIMED TO THE FULLEST EXTENT PERMISSIBLE PURSUANT TO APPLICABLE LAW. We make no warranty that the Services will meet your requirements or be available on an uninterrupted, secure, or error-free basis or that any or all errors will be corrected. We make no warranty regarding the quality, accuracy, timeliness, truthfulness, completeness or reliability of the Services or any Content. AppyBuilder SHALL NOT BE RESPONSIBLE OR LIABLE TO ANY USER FOR ANY ACTS OF FRAUD, THEFT, MISAPPROPRIATION, TAMPERING, HACKING, INTERCEPTION, PIRACY, MISUSE, MISREPRESENTATION, DISSEMINATION, OR OTHER ILLEGAL OR UNAUTHORIZED ACTIVITIES OF THIRD PARTIES. YOU UNDERSTAND AND EXPRESSLY AGREE THAT YOUR USE OF THE SERVICES AND THE CONTENT IS AT YOUR SOLE RISK, THAT ANY AND ALL CONTENT, MATERIAL AND DATA UPLOADED, DOWNLOADED OR OTHERWISE OBTAINED THROUGH YOUR USE OF THE SERVICES ARE AT YOUR OWN DISCRETION AND RISK AND THAT YOU WILL BE SOLELY RESPONSIBLE FOR ANY DAMAGE TO YOU, YOUR PROPERTY (INCLUDING ANY OF YOUR USER CONTENT) OR DAMAGE TO ANY THIRD PARTY OR THEIR PROPERTY ARISING FROM YOUR USE OF THE SERVICES. TO THE FULLEST EXTENT PERMITTED BY THE LAW, NEITHER AppyBuilder NOR ANY OTHER PARTY INVOLVED IN CREATING, PRODUCING, OR DELIVERING THE SERVICES OR CONTENT WILL BE LIABLE FOR ANY INCIDENTAL, SPECIAL, EXEMPLARY OR CONSEQUENTIAL DAMAGES, INCLUDING LOST PROFITS, LOSS OF DATA (INCLUDING WITHOUT LIMITATION, YOUR USER CONTENT OR YOUR APP) OR GOODWILL, SERVICE INTERRUPTION, COMPUTER DAMAGE OR SYSTEM FAILURE OR THE COST OF SUBSTITUTE SERVICES ARISING OUT OF OR IN CONNECTION WITH THESE TERMS OR FROM THE USE OF OR INABILITY TO USE THE SERVICES, THE TOOLS OR CONTENT, WHETHER BASED ON WARRANTY, CONTRACT, TORT (INCLUDING NEGLIGENCE), PRODUCT LIABILITY OR ANY OTHER LEGAL THEORY, AND WHETHER OR NOT AppyBuilder HAS BEEN INFORMED OF THE POSSIBILITY OF SUCH DAMAGE, EVEN IF A LIMITED REMEDY SET FORTH HEREIN IS FOUND TO HAVE FAILED OF ITS ESSENTIAL PURPOSE. SOME JURISDICTIONS DO NOT ALLOW THE EXCLUSION OR LIMITATION OF LIABILITY FOR CONSEQUENTIAL OR INCIDENTAL DAMAGES, SO THE ABOVE LIMITATION MAY NOT APPLY TO YOU. IN NO EVENT WILL AppyBuilder's TOTAL LIABILITY ARISING OUT OF OR IN CONNECTION WITH THESE TERMS OR FROM THE USE OF OR INABILITY TO USE THE SERVICES OR CONTENT EXCEED THE AMOUNTS YOU HAVE PAID TO AppyBuilder FOR USE OF THE SERVICES, TOOLS OR CONTENT OR ONE HUNDRED DOLLARS ($100), IF YOU HAVE NOT HAD ANY PAYMENT OBLIGATIONS TO AppyBuilder, AS APPLICABLE. THE EXCLUSIONS AND LIMITATIONS OF DAMAGES SET FORTH ABOVE ARE FUNDAMENTAL ELEMENTS OF THE BASIS OF THE BARGAIN BETWEEN AppyBuilder AND YOU. ## Indemnification You agree to defend, hold harmless and indemnify AppyBuilder, and its subsidiaries, affiliates, officers, agents, and employees from and against any third-party claims, actions or demands arising out of, resulting from or in any way related to your use of the Site, including any liability or expense arising from any and all claims, losses, damages (actual and consequential), suits, judgments, litigation costs and attorneys' fees, of every kind and nature. In such a case, AppyBuilder will provide you with written notice of such claim, suit or action. ## Entire Agreement This Agreement constitutes the entire agreement between you and AppyBuilder with respect to your use of the Site, superseding any prior agreements between you and AppyBuilder regarding your use of the Site. # AppyBuilder Editors AppyBuilder editors include 2 editors; one for designing the layout of the screen and the other for coding the app behavior ![](/files/-L9BuRjiPsX2J64xW9lG) # Design Editor This editor is used for selecting components of the app and designing the user interface or layout. It will also allow you to select components and specify the initial properties for each component such as background image, color, width, etc. ![](http://community.appybuilder.com/uploads/default/original/2X/c/cee9313c76f62c08beef98e06d40c83d11a680d4.gif) ![](/files/-L9Bu_pbs1oke407m3LG) # Blocks Editor Block Editor is where you program for apps logic and its behavior. In this editor, you’ll see all the components that were added in the design editor. The block editor provides you a drag and drop interface to program the behavior of the app by piecing together jigsaw-like blocks. In design editor you visually select components and layout the apps screens layout. In block editor, those components will be available for programming. Each component type (e.g. Button), will have a set of pre-defined properties and event handlers which are presented in form of blocks. ![](/files/-L9BuXv2-XmDKgScWJ0h) ![](/files/-L9BuXv4wojE6eJMMGkl) # Components ## Components ### Blocks Editors Overview. ![](/files/-L9BuT5GftaiLdNmAv6i) Components List ![](/files/-L9BuT5OvNALY26r0qTu) # Live Testing [AppyBuilder ](http://AppyBuilder.com)provides you drag-and-drop interface for designing and building your Android mobile apps. During development, you can connect your Android device for Live Testing. For example, when you drag a Button to the Viewer, you can immediately view the result on your device. Also, when you make something to happen (e.g. pressing a Button), you can directly press the button on your phone. This kind of feedback is enormously useful, because it lets you develop and test your apps *incrementally*, defining each bit of new behavior and testing as you go along. Inexperienced programmers often make the mistake of building a large amount of stuff before they test any of it. Then, when they run into bugs, they're faced with a huge tangle to sort out, where they don't know which pieces are working and which are not. So try to work incrementally. You'll still surely encounter bugs, but incremental development will let you isolate bugs more quickly and fix them more easily. To perform Live Testing / Development, you'll require AppyBuilder companion app. The companion app can be found in Google Play Store. Follow link [HERE ](https://help.appybuilder.com/release-notes.html)which includes the version of the companion app. Once you install AppyBuilder companion app, you'll need to connect it to your computer. **NOTE/Troubleshooting:** Please refer to end of this article for connection issues and troubleshooting Currently, there are 2 approaches for Live Testing / Development: ## 1. Connection through WiFi You'll need to connect both your computer and your device to the SAME WiFi Network. * Start your companion app * Goto * Either open existing app or start a new one * From menu select Connect, then Live Testing: ![](/files/-L9Bu_vL-NLctqzrWodY) * AppyBuilder will provide you a QR code. You can use the companion app to scan or manually enter the 6-digit code: ![](/files/-L9Bu_vh01KNCjotSPq5) ![](/files/-L9Bu_vqQBOprT-8uxuk) ## 2. Connection using USB Currently, the USB option only works for Windows OS. * Download AppyBuilder-Starter-app from [**HERE**](http://AppyBuilder.com/companion/AppyBuilderStarterSetup.zip) . This is a compressed zip file. After download, please extract and run the .msi installer app. This installer package that includes the files required connect your device, through USB to your Windows computer. Run the setup. The setup will install the files onto " **C:\Program Files (x86)\AppyBuilder Starter"** folder. It will also place "AppyBuilder Starter" shortcut on your Desktop: ![](/files/-L9Bu_xB8qXOXZroaofs) . * Connect your phone using USB cable to your computer. * Enable [**USB debugging**](https://www.kingoapp.com/root-tutorials/how-to-enable-usb-debugging-mode-on-android.htm) * Start AppyBuilder-Starter app * From AppyBuilder menu, select Connect, then USB: ![](/files/-L9Bu_yDLdkV7VT53tON) This action should automatically startup your companion and establish connection for Live Testing / Development: ![](/files/-L9Bu_yWTwnIcayo-7Pk) ## Connection Issues / Trouble shooting If your companion does not connect: * Ensure that you DO NOT have MIT AI companion app running in background. You'll need to KILL that companion rather than just closing it. * If you are using the USB connection, from your Windows task manager, **KILL adb.exe**, the refresh browser, and try to reconnect to starter app # Components Components are used to build your mobile app. Components can be visible or non-visible. ## Visible Components These are type of components that have visual interface; like Button or Label ## Non-Visible Components These are type of components that don't have visual interface, but can accomplish tasks such as reading File or sending Texting message # Reference # User Interface # Button Visible component with the ability to detect clicks. Many aspects of its appearance can be changed and whether it is clickable or enabled as well. It can be changed in the Designer or in the Blocks Editor. ## **Events** * Click(): User tapped and released the button. ![](https://lh5.googleusercontent.com/Ob29swaGIH644I77kDuITrKxgSwTK2HRAEy861wOiELEJYWv2DvLqwX94yumDIa0jvEIyjep3bpNgM6FqB3tinTKQIaUMqdFuzdGzlRMy_yExrjrdJONsLmyodPzswRqGR70zfxP) * GotFocus(): Indicates the cursor moved over the button so it is now possible to click it. ![](https://lh3.googleusercontent.com/RKC3uUZq4PhmGiJ-a_40bTaQlMA9u3c6rlcHUk_JCy85CvI-WNTBh2xvtRAQob2phl0Hl2yc3Y2HtsIgOb_hpu39L8vGfnISVNAyGNnRKJgvHiFJVvvWlL9p8Sy2jvclWbQ8dF23) * LongClick(): User held the button down. ![](https://lh4.googleusercontent.com/5jxZMPlDRP-9uyddBcdRHhyYUsCCOQytZsm5HUG3IGCW1sZ1JyjM6jI1bGDiRngdzvPRkAVb5nxZzvq4UC02PDfbtX12GrbneT9Emdm3Gu1MN1MireS4e--IaYbqnfZDRGFHpeIK) * LostFocus(): Indicates the cursor moved away from the button so it is now no longer possible to click it. ![](https://lh6.googleusercontent.com/RbrJAr9dXO-WnJVaTdcwyWKCx2YfI1v-Ypu2unfDct3N-ag-r8c7w4ONXdaMFjsPcpPMFJ3UE07po9mv0C7s5LhvSPUDbHz8yt5mzg0QdQGa1-XZR0KO-rj-cwEW2GRcBJeaNMpl) * TouchDown(): Indicates that the button was pressed down. ![](https://lh4.googleusercontent.com/bUCgo92N7SP7DbxsRC5FUo5HHboUpOgGRxXTkeoQh94JleA22Myu8rIpqyDMZ8P47_l_ip9t6GY652MvgM1uHsgSc-p-csICb7k6OFz1llMtRmgKOklaCiymwKM97BmFTnZ1wSwG) * TouchUp(): Indicates that a button has been released. ![](https://lh5.googleusercontent.com/nuea2ZrudMZenv3XSe55MwHnjFiFl25CP2HnFGJ5KLvdIZuTNbPEdEwgHbvzJJQSuKmKTf4xH8NzRJvwTJkQ1PZqoVh-l20e3n6mGm9EDDr698n36ufRHm60PKM6b6MmEiivbNjX) ## **Methods** * SetShadow: Place a blurred shadow underneath the text with the specified x, y, radius, color, (e.g. -11,12,13,black). ![](https://lh5.googleusercontent.com/Vq-s0VkIY25gPPev6mSdC69IhZUB_nKFkm3SAVaFYU3T7x-F2_j0mwjcvR-pzb-iA_eAEMdpPSFHXHpLAq1SE5X7cjoAAVLdD2HowRDtnrQbcZTzs-zEt0Op6yOxjbo-a7cYKhmC) ## **Properties** * BackgroundColor: Specifies and returns the button's background color. Also available in the Designer properties. ![](https://lh5.googleusercontent.com/_DDQahT9eNOxkUQnJfJnkX0Dl27zsFrSIdMay2fQCDwF6RXDAg1-rIL242i3nFEh60s0UOIEC0E3YKRQEu-tHchmudF1H5dGk3o5fbObc4xjjZ5ltLhvdqOjKP6rHgUyaLsBwsAZ) ![](https://lh4.googleusercontent.com/a42Iv9C8GWXPMKgfB63Yue3x2oJgqtiYL9KcuhDx_fSVha_kRrI24kFjCREF4LxVd5jQ1ToCRljrC1Uu59QzmEp2oBkwGi6ywqfU1s_tiRTp2sxr2EuNCKlkn8HS6vx0ihPilEwr) ![](https://lh3.googleusercontent.com/j-rozBtwZNEUsNqgPm0IPk_gjt54B7c65PZxtqYpdL1P1yGe1oBgWRw9J8xfy2-XDgJFdLEHYv37ymbkVjoFY9WWk81ZslQhz5yD56SCkV_xHwy--r4GO5CruSHYpoUh9HhWnwGx) * Enabled: If set, user can tap check box to cause action. Also available in the Designer properties. ![](https://lh5.googleusercontent.com/PYSzaUM3jWD-kGbK2PTgEWsRVGFdxYGzHkS6i_c4kxHVDjpem528LV5xeBxPga-n0M3yXf78q8m6IigDBjztbAT04oVD414K_PCGOUxdlDUqYhP0IQuM4xb9vtOLL6sZREVsUSOi) ![](https://lh5.googleusercontent.com/_42nhUni-cchXlSL8xjh9Ab1ZgtLbw5jNZ_c5MEa0a3jgF31LTo4920RFa2jIJt3dTRhPkLGjJf48B-0CiGhbBT-KImTkvm9UgTm6cxsG8gNa-bVhGaXHVD8Y-8OK6Kzhif-XLii) ![](https://lh5.googleusercontent.com/1L-mKLfAm6Timxu9odTsxmhkgs_S8PwrWzkc7l47vDvhOaPhli4qeYlGcOguUp3ac6UVsAn8VUUQ4AsCdyW0MMqjOmb0fdw7wT3nyiqt86FnXSUDl6CFgC1ww_x0z0KrKPWDoWxk) * FontBold: If set, button text is displayed in bold. Also available in the Designer properties. ![](https://lh5.googleusercontent.com/eCXFia_vjvDToYBMs3i2EpWIh_C8RQdNFCsGerhB6UYZyv6DleMgLwtkuhq8HyDPVqLrtWY9WSOEoO1VyYidPrCaswk-kjPkwXYRPiSvN616YJ1BTI6HPTrsVBoASA6ub3QjqD-T) ![](https://lh5.googleusercontent.com/Fws7JIjYFX7c3DLmLuqw6_-2e4Ma5dJJSSfo8z7Tb9mTCHc6gmjATDL2A6FFQLsKnWuyoC0z47z1RVd2D3PBH17lf_o5AHhhJ5UUQhmJtm2wAMTAXJvu9ylwD-TE-5Vdq28YvKNi) ![](https://lh4.googleusercontent.com/lwuotFhUS0Cb0iicBK6I8ZKOzjMMJP1sc7_QyVubbiqCC_EdJlRTciS3qOea8h7PLyEc4tvWJpoGo_qnqQNlY0r0LP9qb3MS0hGB4SzERHG1VvpPoXNfe1Grl2R7h2O6yWPN-Xf0) * FontItalic: If set, button text is displayed in italics. Also available in the Designer properties. ![](https://lh5.googleusercontent.com/5WjRH6ciVAbVsYKZeGkUp6TldUQ4llqWG-E0iMuvCTEUfd1po6ayiml5uE3s1wrFptCMSXKmc9kvrvBX0Xiii6yuBtSdWWv6fRqAwJY8Qd986-H8MvjCAteLkFmd8hvBgsfD5kuH) ![](https://lh6.googleusercontent.com/7T8CvxnjJKClOXUDDzLL-gGLLmvhmmv1c-JqYd0OFud8kBYX2gAIB58NS92D5hOr5ffEbHh1ygwuw5cGu6JuSqWJqNuJCzjgmmVii-4gLuXujMMduNHet-2Cn84iJuCy3aF-5j8L) ![](https://lh4.googleusercontent.com/ICFdUsBsS_iPX0kp4FFujSOpOZ8yJ-wZxhL-raQ4eW2Tr8SU0DTiXj3PtSMyNcPPZVenDcmwiCUXCgup4_q7RydilEThAt5C4JNsj-So5o_BuNdxodvg_-9rd94h8mACVNHLcPqO) * FontSize: Point size for button text. Also available in the Designer properties. ![](https://lh3.googleusercontent.com/5Qz4DaiLpMnk-8hb7M8a6N5-FK_bk6ehJDKUPLBejbgqGzINOq0bAcMBKr44yUkXdqVTQHuk_3jZac82Nw34V5KvqicPoJANqgnsRtWtCjrVMuXTOotIuD29LUhZKbxd94wRivV7) ![](https://lh3.googleusercontent.com/pvzpdi_BTUgKLt2fK09P8ghO-EsHUt2uVLL2RPPKN0ETld6zsI-_l2MkqKCFvJRCLRPmeDaxNq3fDN4_hViPBLfeBa7vKh8yXDB8KoqBZP5T5fG3HmNesWyv01FXyJ2Y7UmUfimO) ![](https://lh6.googleusercontent.com/Gs6ib7P6eNRQlEnCN8mNsLldu9E9yi32rG4CTZrNIAaukX7WadhvqzhW2_XqFC9AjaxbRIZ5S0K_Q4jjLMM6n1fa6JLqPKECtBIs22ag_9xOVDMMDy0CxI1BX3pFpV1SGJzmOiTo) * FontTypeface: Available only in the Designer properties. ![](https://lh5.googleusercontent.com/67q_DbZfiNGuNyzszBUR_-fdLL_ctwIiiabAeIQe8DbTJbxFcSFS5bLVtl4iMzz2b--A88PHPT_ley2WXgIHo8hkjfUGQNQtvik4VdvTkYUxXr_JA7IDfeJDFaS1OUH0iaFaPcaj) * FontTypefaceCustom: Font family for button text. Also available in the Designer properties. ![](https://lh4.googleusercontent.com/5qgc_315UEc6iccYivGFrEF9S180ohBTO2MUqHjpEdQZ7uDhev_C6xhVR2QDtON-s-WNMxRC-HAFO1EZypV2zWN_hx7cnqtSaKGp038kcS8JgtxFSKxHxs3R4yAAlZEjmq9JH09v) ![](https://lh3.googleusercontent.com/H5KZ0U3oZxhcf8wDPuhxrgRKmRLmKSC86wGx2zp418kpFycT_RVsw3M46OyOjWWbJdB9ATOYCnrqZQr01xbEco5m5Y57mjoDvihmar_RWisBo0li6mWeDJumQ1AxEeYhhoarGnK3) ![](https://lh3.googleusercontent.com/05uqcpNtj40uPbNocXRgQS87CBpJKO-HIKnxbbokC-Ex0rnMvHHfZmxx9ttbjBjhCm3ZUz1YrpmnLNXuYvV848FUZDt9VceQoGKrVUXQS3zqZHcVdpUz4FQ1QKw5qqnKozfRJPLE) * Height: Button height (y-size). Also available in the Designer properties. ![](https://lh6.googleusercontent.com/B4Q2Aw2dS3kfnfPJqdY-2w4hugPs2IKdWws6Tpb4JmQR-6cGU-UhmNHaCFTkduIqPuDxbGHj06lzqMcIzb01kegzvU61rKkqUYMhje3vs8LRmbuuF1k70S67moVOfVbJcZilR7Tt) ![](https://lh5.googleusercontent.com/T3I251p1OEUYafrgmQL-OjQmJ_iMOvGQkzUpWihw8vK3NrN2REevpnuO_9pIiYaV7_hA8_PsHtyGVD6AbEd1JvZWUiKTRpoWLnysuDphKTG1A3PjG3pAZmQJKBLF7n8SPW8R_S5e) ![](https://lh3.googleusercontent.com/WSbOfF_z19iDmWqEIxzDvMbDtD9DuW7aqr_4dtLuu_bZd6ush4WqlOhSB2bBpijaqcc001fWDh9z1Af_Q5IwHM8p-UQlEAslMUfHzmiUvoy6L4oDXHcSI_k1ho77YJyJi2QQinOD) ![](https://lh4.googleusercontent.com/G6AZLMAoplkp1x6YgG2uZgiih4LIdV8AWjKdLD88JHT1On110aLctfn8g44VI02wyFTttnq_MnXoNvLby7iljyjnvXu07XVzdLzzPJ8Miqdky13aL-8SP9IsRA-mcDROmoQnMMgL) * Image: Image to display on button. Also available in the Designer properties. ![](https://lh3.googleusercontent.com/RVfSiAetiNBOPAVgIX55BTkP2TY-4qX3zjmCHum3Yet-Jdpkv7mApAIuUXEwDzzdwlXI2zIxxO1u2nYRcKAqkBpicwDKmwP5Q6qLB1qxq9f11-YI2Ms_vSH4ZB3dd7w8pr3ONnv5) ![](https://lh3.googleusercontent.com/rkBne2mQ19mCwQ8SaLLeSTWdLVjY-DdC0tH7THorvTLm9VJhJB66mn4GvdNM87c-anb05XJbIlJyvLEbNUBm8gfQ7HxYPC9zkwMOVejhwx1ysLO_e9NsJ4N_si2qYnYWNKtmTe-Z) ![](https://lh4.googleusercontent.com/XOahHTNVOuPhFCd4GQKaDa2opl1PQFsKJOk32dx0klJ1xz9cP9qTyJkJKjsApGJ9QQIIoUNjNfITlvPyjDUhzPC7izObhZegJxoDcnlfuuYYmUax3Vocc2OpUJXhj_XzHMrRLKWv) * Shape(designer only): Specifies the button's shape (default, rounded, rectangular, oval). The shape will not be visible if an Image is being displayed. ![](https://lh5.googleusercontent.com/M9IKiIdrLLleaTNPcjMPYzt-vvCAwPxCCR5zrJ45f7-aKpAOV-j_VJvDzyyj1UFt9vZGgD_3p87mjP5KVNucCujSODK-SN9YjWxccaogLAH96l6FqjCtlud8Md5j-9_KJUWgyHS8) * ShowFeedback: Specifies if a visual feedback should be shown for a button that as an image as background. Also available in the Designer properties. ![](https://lh3.googleusercontent.com/Qgm5UiHZtM18hGa3BXRN7SQc4joh4eOeGcAfyjcR0PxdAAJHOvxD3tvEOshwGTK7JASj22CAy9bbN9XVDYQvwmBxZfWJXvF7asX4c7OvPj9RAi6pdL6GEcrYplr1jzMdWj2Ya32Y) ![](https://lh4.googleusercontent.com/FQBSiNH53RnmedoYNFAlK_2PTwyZ3BDQ93IGBr3dHrIAhKTUNqTk41ZAoZ082Gm4Jj813UNnnLvDeVQtB49KxpzRcV8LFySXF2FzBhehyCxFyFD09xULu399cbPIHi8rsWO8r15g) ![](https://lh3.googleusercontent.com/ks3VM827DfhbalJkCWtRK7sPaJvZI0snknV0djIATi0ViHe3akldJXx7-9ZGVuIW1Zx4G9Os7eZ3HY8unZUlGx2LVpfvEFf5aD4Uv5S8ZV3ppJH1MXfhTps2ZTjj_uz090ryR3Oa) * Text: Text to display on button. Also available in the Designer properties. ![](https://lh5.googleusercontent.com/M-Beg7v4qitWpWqIEfv0vBuuKFtrzmyjlP4-_zGjSmMMjU-I3L8LmTOWGvj-lK5XNWHfmanljaoh90EWKDYemj7Edy584yzc1akcKkUIBx5-hDlfPXyRam43qqH163JxFqR8k8OZ) ![](https://lh6.googleusercontent.com/k3AE2Hjl4mwXOxt4xrnqneEeC8qHR2tGQxWAh-qVEzN8XF5Yvhi9EdOzDMQMDOIU5mIGvnzWe1wlP0KubEP-LJw7QGl1S0AgQR4M3QcPefDaw16NaeTLYKnvY9yLZ7ojG48V-aCQ) ![](https://lh6.googleusercontent.com/GVhTIgcCFLB31qpNXYLBmKmsemkjPeWn644-_VgOpF7iTUd-ruDK2E3iaFQvZUtMlSMEwvrkIZWsZkJWmNdWD8txcnNGhjy3v7S3fhRfq-OjD57CSzqmAx2ycb_ZbMZyhfc0iCEY) * TextAlignment(designer only): Left, center, or right. ![](https://lh3.googleusercontent.com/u0EHS7ouVzDj9mUmNA_zUsTqzqoxl8XiM45jFcgQT0Id6IF9ONricZoarpg-J7-THO82VXKPhDVvzGfr4fvO-cgkwl-LaRgxsytpsH9w69wJIFD3ltExp3VRikKlU7j5HwJXdcPg) * TextColor: Color for button text. Also available in the Designer properties. ![](https://lh4.googleusercontent.com/Ptv5eIt7w2t4Rwsra4NDdf-gvWzH6YMMYHYO0pUZy6RISuIpmAo9tGiGI9j34PA-q4z-ChNpeJ7bnB5eUvSnCBiMLSLUilRoxL0zKCwNOQTdghIynAiBiwlJdPme1_1oeqajHPHd) ![](https://lh5.googleusercontent.com/o9aCH64cLELyoLqCRB-r8wJapTC_4TPDME-QcMCoFRSC0_bVt9jRbIctSH0BRq2Ga4_ADableAIomWucC3vZBCdcGbmFejdUtojSSTVvomkgrsXg0xokA4oMtpI4JepHCKw4-S3i) ![](https://lh5.googleusercontent.com/_H_4PA535ktzGfkYWc3SGaSn1f5DrYEUZwlc-rC4AmCpeFPlue3crSRlPHFVwBzED888LAs5OHUpaTr28w-DMXnXZcLR6BNZDq5zXfnk037wpppiXHZ6cifb1OxZ5G4HDMMax43S) * Visible: Specifies whether the component should be visible on the screen. Value is true if the component is showing and false if hidden. Also available in the Designer properties. ![](https://lh6.googleusercontent.com/f1k46Nm0KywPIWisOAToTR1nSPi4Ff-mmPPolNQUwArvB7XTAX1v6P1iXqaZe8jeL_Iktn1sOyi2E9WRIpDlqayXYilkjeNY8GIAMWk6zHA3mEpEYOO6zIxO4m7KcwXiRlAYkIHZ) ![](https://lh3.googleusercontent.com/zMxx9Q_z4nnPwBUIpHullOB7d8oKw8tR06zwVB780emtxBhLoMESPqVFMHF-4OgRkzXhdcjFtYyyf3MeTIydB1N_dDF_JoJ686gJk5gVvF-HFKBx6EiBEAjXa7DuaSkoDfm9p3y0) ![](https://lh3.googleusercontent.com/ExkZ-mujNjQNFQS_a3kGYiERWVbz8mEyO7p_h09KWIXAdag9d7bnQHvWy4ZL-c7eF1UK6-xmEiPpYloXWUjQFBKDQRzZGyIZISMFh0KAn1DpVw6XXKOKUxUyZjosdPNM7jqsAOKl) * Width: Button width (x-size). Also available in the Designer properties. ![](https://lh4.googleusercontent.com/1ZUlc8fuUJCU-3Qoaw3WfYOTaDLI2Pd5xh9jtInVWJOPart3F9vEasrey4QAYmM7gONLd38XByWnwF7EXl2RhpHoYcfVYB4zx55qtvfW-mu6IV045lXhsEhCtnXvBXcSLzk_ng3n) ![](https://lh4.googleusercontent.com/dhNhqJAjChEBjyT38SpZFd_ZExQE2Al4CVxerZTPIpjQasLtGeETDu5uDBTwov0s3CUIDNFSNzmb6Opih-li0emLp9m9JQcf4Q4p2yUio-48jGMbSDaJbSwfl7iEqQs71SwJLzAj) ![](https://lh4.googleusercontent.com/NlLPXF0siute1L6dNtmh1VooRSBAGI90e4j6ULYjIvBVHgPWUyu2XhZOfpvMiwCMOem3GEyUFRDBzlyk7VUg8GBqR1LjuGzQ65Asvv81gMGxg30l1321GW3eUU4zTrVpDM487Yys) ![](https://lh3.googleusercontent.com/Ws1IhL8t1EqNkF-DXidN2c-WGrg4MAl3pbRLAF1iTxPhkeFJEC8mWpEvmGFhY5ykBprfMVZ9ZcZ8qTmUV3t4lDIgqJiRZaEE4PUyTGhRNrUok0HarFxn-CqCOgY8KjfBQsfl18fJ) # Checkbox Check box components can detect user taps and can change their boolean state in response. A check box component raises an event when the user taps it. There are many properties affecting its appearance that can be set in the Designer or Blocks Editor. ## **Events** * Changed(): User tapped and released check box. ![](https://lh4.googleusercontent.com/hck3g0w9lMKZ_KxHmleFchhdgCp5Mo1g7DnCNEpDGn5yGOmdRb8UqQ0mgQxyeG_eCjcZDbBPFVgtoIy3Ahvynw0fNNwUZAdB3r5mg2r5EFjW9XOCccmLGQc6Hr-e14f_ce282kDC) * GotFocus(): Check box became the focused component. ![](https://lh5.googleusercontent.com/AZqIqOG3CTkQQYRsqKnkIkOvZWTtJv_A4-wF_zymgzdq6fwzyFf3rAp9PuLgaFgpr06h5XabgzVuY6_PH0I885C8yRIr1abwa8y6kmHuRoZ_6q6IDAIxn2FjjKnvC5ZUjxsCglVk) * LostFocus(): Check box stopped being the focused component. ![](https://lh5.googleusercontent.com/EqGK1oL9_JMQIk5Mbs7iKoMrS0iJsx5qSYUqgE4464e6uxlrDj1ARCAtXaaT6_PEo8UMgytIYzetR4BricPcIVWZIjLJmCT-HEFdrzmVfMkgvRk1k7a27ThnNwDrbvcABrhTMjp6) ## **Methods** * SetShadow: Place a blurred shadow underneath the text with the specified x, y, radius, color, (e.g. -11,12,13,black). ![](https://lh4.googleusercontent.com/tcAuqc3GLaV_7v9XjInr3rMTUlqKQI2v1lAy6QKqw7XDLYMU9jJIZJjn7R4Kq-CyLz_QLCoVndrNaAo3_LZPqmNKvEaW-77IefkN6QCsM8Bs13RvH-39a5td4GtE8891SSFl831A) ## **Properties** * BackgroundColor: Color for check box background. ![](https://lh5.googleusercontent.com/z_Oe0ca251I-sglrJKFrXG6G9Ol43PnQRXWbKEjAXJ6t72R3xK7NlIRf-MuQwrvon5qyYMU_h2VmW8WlxxDFnKOIhT2dEm3DEooqbYRJrw7tMfqYYFGPf-o7mkU7iICYdyKvp7T2) ![](https://lh3.googleusercontent.com/ej6P2RTvWKiGj5emKXY1ezD8uCpBYorLIvosiPulx9JaxI8MB33s2P8cqgWZ1iyA9-Gq6MI_gfc58MCluZL-DDvrM-cQLRxYrT2Y8zZMspMJMOh0su6L7hEKlDStA98feRE9k9YR) ![](https://lh5.googleusercontent.com/idK1UnfseAvNU9B0aFImkUxOKezPS0zJh_9fpSFs2SPGz8J0aHIsqnc_NeUXr4HSE4hmlQO4Wx3Y7BUDO46OgSar5o5o8tb3HyioAwDVTzR8lzdEHTRkbYK94_eStAibuvzgNM30) * **CheckboxColor:** ![](https://lh5.googleusercontent.com/tzdTTq33HqqMJfsrr1QKgc9u1glkBpvoLdke5rpzbwO_pFkIgIkixtzbNMuubdE3nfOr43zheGtiffowXBuscEYrUfAsfyU5_YX0e91-99JruOZ-0zOrdEIC9--wyKLjwHiEoW4v) ![](https://lh6.googleusercontent.com/rfWlap5ssGYpQoR7vx-wg8zvBZo2ZmX0MssXzgv7Lwt6l6OIzqYexrzngeEljisBRv2aj0Nu8hct0GJLe9ya-NpRUQGMFpkkAlspbz6mfqT8CD9O0j3QQSj7DyuL6OG_Kz7QTFSf) * Checked: True if the box is checked, false otherwise. ![](https://lh4.googleusercontent.com/v8VcJTmIRrhna0MqLcZDlNTA16pZSYGWmcQ4l40EezQNcotiwnp6YrePHKsLm6iUjYAF1qqlEoPkkoiKmaLh2wz-POQ3M7WH7ht2q8Nty1EHGw0UWqpQQ3Gjn2BG-JlBcHcAZRUq) ![](https://lh4.googleusercontent.com/Uma4496G8u1y6YR7M2rusWUfQyrFOMlFcE-41LSLqRWGPxzFSeZ1YSnTAXKRZ0j0jTh97bRsthhqmY6Nr4VPAhJxZIgKQqQYCUsvFq-IkGa2YGI36EN-5cJOm3OL0JWyCF8F8Koy) ![](https://lh4.googleusercontent.com/YXGGk4-A5KlAHkZ9H-2EHqd60xyAO2936xnoTzd6ATbEAcj3O6HQn_6nimCPw0ygqFEvvV5GnYgYnsPFLPbm9w9rOylFR9MJXAHLdbSIWkYSF48oikbf8RYqzZdxlX_UVolmsFfv) * Enabled: If set, user can tap check box to cause action. ![](https://lh5.googleusercontent.com/z3DcLtlXDN7Ae3J1XMkVIu0uDTs3m0t2snwpdJGJIJXpM8RaRwpzKZcFm70W2ulbE56gWeZWzL1wj4niNaHlaRHfFEO7fePGfPxgi4-wtXgonLJ33N2zgPhHWcp8dbDhvv-0qkNd) ![](https://lh3.googleusercontent.com/KqNY46EV7bR1gY-MKkZkk1OC-LmUTZYsOewQcHWK1Oi-l7Q9FvA-S9b1E-IHoeaF8ejGiLtjKX2O3BKcsLQbEsqcJWBSzPvGrcVTFdcRgF4svweJVjS2EEAQJJobQLCaC9dbpv_4) ![](https://lh5.googleusercontent.com/urDyJlpv4U8Lg3U6dbMw41f8rBJxInXmLs_-gLyCdT3SWggZAEPxiF-_qpjencI2aMzC9B98OPUhUxPRbAM6H79mYe5Mvb4FTlwLjsb60liC8WcodKlhus7kaoFLcMhvjZha_Ryr) * FontBold: Available only in Designer Properties. ![](https://lh6.googleusercontent.com/h4eFJffNUU2ek3jsluZgCvUbz94bNr6Ygw6n5zbsh_7QdLgYXJ-Lsmb0eLyHHLNMKyAPCU0gYpBwuCYfcl5eieTkCXMNlU02urutzr6ZrEw-IAN6HlewTDa5zianJ1rpgVVAe3sQ) * FontItalic: Available only in Designer Properties. ![](https://lh4.googleusercontent.com/jGw58I69vJN5YaRrAuKgl_yMctdnlHgViUaS7UeQjFGX5qiT8XZVEhXyG3kf8947v5HxSi525QcSok0W3YJHcev9ysOcdNP1MgFdwQrDM6H1ijC31EYtEdp4yCk2Gcp9-_YO1vNs) * FontSize**:** ![](https://lh5.googleusercontent.com/RrHolwk6npdKNlEPr6_NhTpaIBM3mWXalFX4Kgq8i0RzUB7zGx8yCB6ITtUls8_0XkLie3E8JSH6nV9vJZ8H2ahKXPExXtWEqhqi6AJ0MLrAOV7RnMcDZxfZhp45slc7xwVjdFWK) ![](https://lh4.googleusercontent.com/-k_SzpdwyMstDsZ_VSct5pplEKy0cfzGnwr5qMQcJP_i1ONVKkFgb0zayDSdy1UG9Y6Q8L5dH-dJ26fl7ZAjtwHP9SR4NQdsxvOhC3V0mC8ZBDs_oG3Py2qrX6jePXnyU399Th5J) ![](https://lh6.googleusercontent.com/DKBTeCO7jSoI5n8W8Y6_1f10KilG873HuNAJGGrmdiO9KSvaDC8s8AcNU-sTmaxUsIkuXFKKUi0x9O5d-Fhj5QAI4-umiWJuSRUPXdqmdqfbChtevQIVAgVYE1lP7TzxglYjeeXF) * FontTypeface: Available only in Designer Properties. ![](https://lh5.googleusercontent.com/HPbyjkaUuxPdxYnog6WPFafpH6kQPWRWSAi3K6WIIZdY7l3Qli9XUxgP8upn0MQvxAANp6hmmWVP3gMrVa3rDV8NLhYfWvAMsYvrobwcBoDtIDG9qK1PFJA8eFrZHwzckqLYXiQB) * Height: Check box height (y-size). ![](https://lh4.googleusercontent.com/hnoy73RQ-UQ6uEwKJTfwNVjbua5I9CfbNaruTHFEdOx0Sp16FzpUbvNmKWeNCuORxmf0Q5L3UsFl-ZZB3RJevmo7uPsXzTelu9rDR_enqjZPLiCxU17kPD-KRHuJunQOJn6DAVD7) ![](https://lh3.googleusercontent.com/qkHo1EZ6Nw32GV1Vrasv9YlWhM2dXk0wXnqf95j89jgMhkjVQYsHBGxI-Gh4WSFapBzMGkNRpdeOEMa5MfBiAdS_7TXXEeQOv97NO6kr0T0CQ0T0l4zOGkE28i_2jcuVQFKbZC0K) ![](https://lh5.googleusercontent.com/EEoArc3M3oXlhzfqfS3IHfxAmRQZ3vJiDxW7PIwHXbETF1retVRp7I3ZN_XbIpQlmJ0G36ke7Grc7b37k-nP70tFkBSzZF6A8tzKxkr8c_OfN1TAViPvYtiemPHMdWSWfG28HgqS) ![](https://lh5.googleusercontent.com/2Fk8RbvJUJJ7HvC08ClC8LGyGoTeKnKIsA2z_CeKWBrIXOoWNNNQkl_AMEZ2At_YlvQbhlK3Gwe95kiZvyScAVayMfjCsfeAsPHaonHNi5Qv-seVjDph6uDgBzAQXpcP_l5duAMQ) * Width: Check box width (x-size). ![](https://lh6.googleusercontent.com/mXRdsnSDzDeIbxeieLwj_MpRcPDCoR0xezlAR9dNzP_BBdxkVDH5LWRPEnaMsZ0WrNYt_BwZhxcfPb50vmAV5CDPFfzHgLcqg3f-15Apwu17ClB7HS-dE7XMtBtEIR2DNXK64lPh) ![](https://lh3.googleusercontent.com/IpzxJsrgmV8v_yNCXHdcdoI_SN6dLbSYsYH_ii5pQ45tEE4PEj3Gv_1aIXwaW0Q8X6Elfys_L6rvlfOGwHHUjEvo-Y95QX3LMSlKVY3pbr57eB6vy6EWJ3q_J9QUmdYoAND-uea5) ![](https://lh5.googleusercontent.com/8AaytzFegprT79AuoiunuENURLZ1Qg0iqNG5RPhK96f46nhZvKF7UmzaB9N41pNwQGg1Vrci0763K1JVoNLrKr9MbDltI42Aq-5XwWM8YrZhDKYUcd2Ow5Aqjwyqm1xLCehbtRYP) ![](https://lh4.googleusercontent.com/4X-K6jENmLjy1kcokcRVv3GSgj3P97CWbhO5h9p_MZzwfIfaAEv35F_2yceiiXWK3DknIWCSCfaQ2Vesn7oLtEPmXqNI1pfubUYstpNqSIQQe_57fMLBN5DQFvOIyiNmUaNT8YLE) * Text: Text to display on check box. ![](https://lh4.googleusercontent.com/9V46VqZ0nigYM9ovf_2EeY_NAs98HxGQ9fKeAF4sH7eRIf9znGhqlwoI_A5kqZBWIE6pQTaHAZB5Ot4xImMe4OUouMlyKMo6v1MZN7NBhFvxRRp09Dj88PuXtqf-ST7x4IQzEMFi) ![](https://lh6.googleusercontent.com/j_QklN-QaPlFJqK2dWIi9zLnq63heIENVscqC5QweLrgHUDMYlS9hSDKv3hMwM2LfHpYKGxL4yH1hlDl3v8ag69DDM3IbbB21_PTPt-SaKxO5tevdGE8h01MkLPjyp_EAVD9Ckmw) ![](https://lh3.googleusercontent.com/gkbyXsHI4K31U8l8svBDQGc4xB31V3xxRcN5Gk60zHFhfQYCiSWP0XZh2B7UHZnipg_Iml7ux_SSeI6WVaiuKfzXRs52e-kyWGii5wZe_1yjf1ZGnRQk_InXDw1uq-DuXj8LAdZm) * TextColor: Color for check box text. ![](https://lh4.googleusercontent.com/noojMeo5hMGfxf_gm7uFtOAAps7jaNg_qOtPtRVfX5pGrq9i83bvB5OenIK3GdfkNNeVP1dBLnkrnA8vAJ5fAf0l73QSbcWWtPDnZJwKDntE4Di2goXq4PXVaBXJz50UZHerSzKI) ![](https://lh5.googleusercontent.com/lZwtp9u_dQajvA85P9usxFcVVy838NiJ46n4qexWIxzqtje3cNp531bF-9RhzE8iNI4JqXL9XLQVY-30uAYyG9z8HuJYvIcU9KS3J1idRFPjfCgVEVg6ZsZGYfEdz1QYexwY1l-D) ![](https://lh4.googleusercontent.com/goYeBtM3PcC2v9ieyBa6a5Z-WcOp9ehAFGzafsPN3OXFH-nKn9tildCSC4kx1rzZRgNHiHf9IHgrrOrVVpHIlMX85WWxT1HxolVm_j-c4hdJREXCMEUUjHP18T0oIblmQ4dDLDv2) * Visible: If set, check box is visible. ![](https://lh5.googleusercontent.com/aa3VI0tkYm0Mi4-NuRY4iGssQG0IPdNxBkzMSvdpkWFuA1Br8iqnbH6GlzDCAeNqkrGyQGAeHqNVx0SAAhlmh-xJjkCYyytH8336RPJWuP_lwu5chDohrwdjucqNQkqnyDRY2WTL) ![](https://lh5.googleusercontent.com/F2a6lNwehNQajuqm_9ifWv2NfdxdLDix-d4-VIU6kgYwCpRfowtbnfi3v1O7Ft7FvxUog1soyq-lPyc7MzKzX1tYCbUQ4X1MamTaB5S2Zk18p8JPUWoEd3Oxr9A9uE5PxK74uaUG) ![](https://lh5.googleusercontent.com/H5pb_9snHVHlxKIMFuqGnSywAf3CoDSZyPooq7Ci__bp7eFr9LZL8nM2kYhmkouItYMcAHOgQOeSK-2YxPFaZizmeE2gTdEdiUX8O-0YOoncB7YkEnPAz8JVTjI-pY_JjaMxUX-k) # Chronometer A Chronometer is a simple timer that can be started or stopped. ## **Events** * Click(): Toggles chronometer start / stop state ![](https://lh4.googleusercontent.com/YqPod7-tVEC5aTyhm3IIIHs6hma8jQE5QFHovZKz3WB79esfQUd8dEjmwBuyoEkhPKgxqmzVlMciqot_wL1Qm_gPpuv58jc3stYsw_x1FhyHbumRgTR4RZkZkQi28p3ghM97bJNA) * GotFocus(): Event handler for when the cursor moved over the chronometer so it is now possible to click it. ![](https://lh3.googleusercontent.com/8Elo3VIaamLICzkOXUV_9cArT_5MVlB0R7LVSwIBuaHrfvKkehMgAkl8eyanJIz5NmCh_Prg_G56XoOoGrZwXPGo6XMzPiSbAsQYdsBF_nSTFQw0mdDGeH0t1U2EshZyN3xGBLi2) * LongClick(): Resets chronometer to 0. ![](https://lh3.googleusercontent.com/9EExKVT67VDsBCO9dbnO7Tao26lOt-a6p05spUdfwF0B-Dl2OWHzJgYPSp55gA8IyyhYNRHtXgyMS0KOmxGvIo_h2F26Rf2uKd7BbltakxM8aMw7dhQNjE5Z4Cig40om72cU8WXv) * LostFocus(): Event handler for when the cursor is not over the chronometer anymore. ![](https://lh4.googleusercontent.com/C6sveqKg02K_F-LQjO4sjO1HfLLXh6XWfE_CMritk8hkpdNHAj7-bheTYB9QOqzEZyI92RGfyp6v3IeUq-D2UKovjfnmOQNwd2CfUGl6PuVKLFm3Ioel89vNvJ4px-LlcF__lqcs) ## **Properties** * BackgroundColor ![](https://lh3.googleusercontent.com/XhK8BN-OARHvfckTX5uDwCK2KhFTUyr0H1WQDpZL0oPnHlGZK7r7nM2vsXAyKic70u81V_NNX6gbvm-kjR_jyXy0rYtUcHHjZMqxZZQLYFVbtHFzE14sZvaXVqC7St4kXcbyFjeh) ![](https://lh4.googleusercontent.com/Iomn6udgUyMW55kUB8Lgs_wC7uXWGSf52EpJuFVAuOH-95xcB0eZfGMXhWjW_rcXKWjEWc87UOjiTc0UK2BXkJy3qoe6AQrX-izTJvvQZnkmVAHXJ3CLg-TcOBjJq6YDlSh5YsQk) ![](https://lh3.googleusercontent.com/wlAOFnDEQoYhN0baBDFYh-eENtjTglW3766dDNqMa4wBWvQSO-ZLVfBTt6A7UpuoDXS-adhj8FxP5KCUyjdqdfF9ADYwkZ54tNC1HPbFGm_-2fU--pjNYM6F1TYPfHMkPhnnEBgg) * ElapsedTimeInSec ![](https://lh4.googleusercontent.com/8xOcoGz-e4issSJS4OFx7M57FQ1sSjsoB2QnRNXL8zdtHs8R45jvfk4c7_BS4-8leU6suz3lZeIzlfMbXNEUSjrR9-OAXrjjOBYwQ8h0P5wbOsmctKgz22m0PPmBRIRtLcEfbnoU) * **Enabled** ![](https://lh3.googleusercontent.com/HhKm6K6R9onG7ToNsJpK8VdR6W3ao5h73PW6fnnc6r8JmLxrIDwC1cU1hr-VWxp59y6JBYzKP9xp9VtDQbep0SI6yDLWPuo5xDP9dAiFqCCZmz7F3R1-mcx8KAJUOKD-F9Hig21_) ![](https://lh5.googleusercontent.com/m7JuvPtqKEmJfdPzgD-EE7h5OWxH3ym_drJ_WDopvTZK24ozvJiZeuRu21yDo-axu9BSv0OW7BlOX580_NNTjN-6hBKy6mcmFu3NIjqQj_a46SCf3sUum3YK7sPd6ZcCHCjdU56H) ![](https://lh5.googleusercontent.com/7G8VKZE6Nl8IBPDGbtbg76jYvHPhpgtsYY8-M2eBm7uty1qQS8CyNBhaSAfq1aqCmrorebWKHxHvjAHTNiOimCO61jIy4MIz0HV_f6hVHfu5WRQT8cTVJQKjQf3sZ7rWcx788E2c) * FontBold ![](https://lh6.googleusercontent.com/FzanvHGqWzjD5ymZJJutX6r0lO4u4f1fwYxrtW3lZYmKojfkJy1M-lScSSoSkm-ZHXb0tP6eNaXbboaWLwdG9IYP7jcEVJzWJpyXlnVUM-ft-kcVCg4rl_hHut7UOi0ysEaEAC9a) * FontItalic ![](https://lh3.googleusercontent.com/DxymGlDGHfsHZ_ww-jJDFoMgakelV0eAZSTnhNrDQMdKSG15qPOR3M_f6--DYKJzw_LipgzXpV9kr6JbADkxeH8noAbmWyfm7c-jOlY39IuoQkAMsIloq_TmSRbWho8cyAxpAuEL) * FontSize ![](https://lh5.googleusercontent.com/Bzp6g_CLtQt3aVwWDFo8ZtI4nCgbTvy13FsaVfhrqlZTp2csA3aofFKKS6pByYHHYH8ro4kGDhRwOPFTIfwlF8wHn2GnF0yTASEDR7hfzG6OctKY3T9bFlVkXapYC1Jz4nYwGI1q) ![](https://lh5.googleusercontent.com/HBONL8If1A-Sja9yFEGgniRGRajUVtbqJagpNYsp82_hwSW2eIycjMms0wDWWpaTynLnQX_LctHUaXtgJeYit7y7Q3QTXmswBtWFs3tgVoH7e8DLZnf9joJJWYK3wy_1W0S8veBX) ![](https://lh5.googleusercontent.com/P75DHlv2HbatSTVsDMhr8hp4l8nLgwqiN0hfZ24NbsEYLu_yL6eiEYWazg7Md9kNtdSFT1NTcvvWINF5zooOOeN535bAt1-gTnN33D3eduGJ5pSDS9PDWhmF83gknk4ORYbJGaOL) * Height ![](https://lh5.googleusercontent.com/lfOMpSBRtbAerTcjYwYJjTmyh-SClLiHAGRygKlWsl5SA6RCMZ4g-vOS3RZOrhBA9o28lgGZeS3mqB4txnP4ip14roT9f8WAhDY3iP0QyfhyFsYGVsrYVTtmd-NknRnqjj7rOx1p) ![](https://lh6.googleusercontent.com/xbJtYp4bZgslK0QCceQssswwI95NlulRSgt7caaha3oIAyn3Zd5gTTaznUGDMVCYyptqKeuq8KQrgPJvrXX1aSIOv2MY6gh0TvGk06cH8vU-jeuHLCKyX4XoX7aDSuBRT46vCnD_) ![](https://lh6.googleusercontent.com/bT1Mfi8IG1JDSY26zowlVTZt9YTHvjyuU5SQhDXTt0hy1UHUmiimD3C4EgU3Au7F4soojqLX2gByXoEe-mmGOERxoqfaohtrAidlrB6rFfprsPsQRBAkjO49CZU75XlZBgj3bOx2) * Image: Specifies the path of the chronometer’s image. If there is both image and BackgroundColor, only the Image will be visible. ![](https://lh5.googleusercontent.com/M7-4LbvLrQnYAd5P-XdeKRIKPZV6vVzUBWoDbrY2RZou0JXfGbfgW-ZTU1lkwbq-MpU2SDNbmf8TOhwslUbGWrlg07Ix44QUwvDu_VmVJVvKJfavcS5df1-cl_0qaZLFKiKCXX_W) ![](https://lh5.googleusercontent.com/IC8czwCayYIQJ96nuX7RamBGzE2XzZFL_PFn40TOKKYURyEGGg1jshYP9skLzPps_2anz1nGYb7BIGbKkpFbN4VA_a_dsv6FthgmmlYZp-xnuT2LXCrZnzOUDHFF0tb06Hz_lgI2) ![](https://lh3.googleusercontent.com/-iFKTGZnKn-v0epq7v3iGXBrali715Awh2GoLGauDwseGwa50qYUd3-NDoWpxgkkbugdByta9o6IJoQdiR8AQr8TYX2GxmGdvY839p2uQS7i4-rqT_jOnacNO4rqREW0tn2jTDfQ) * ShouldResume: ![](https://lh4.googleusercontent.com/JDoSrwxBUrQ05p2y7mQ3q1zhQt3bYWAjHiBSmmU1mh9iOk-JO93Dm5RxNszvXdc7l51ea2tgPvWMpzngMFtiHwrjfYfmF3pnRxm8A61sskXV7Pi8fPg60pJ4XUd7V0etPyZMNmr_) ![](https://lh3.googleusercontent.com/8hqs6Nz0-85_BFq_AGiu9Ur6lhiLJa5RnbpyFGI3v4TkJj6TZ3LzOWUtRGU_6dwa_fclCaSSXzZniIUEvx2KKrFgdeEaH56QrJBOfPZKSos6plJUR7HSdleHhreC8Vh7Ks5UyOPp) ![](https://lh4.googleusercontent.com/Qrix3rDa-W7hZsECE5Zyuoxv-EK19wPYbZlhdlJMiQE9BQYh8XxTQ1iCqaGSDe5AFH_-izSshViccfclIxOJGXPW5G07kmi-yswXP0TCB8wmuEIcV6rAJSCCrRd2us-SEfKkhMGl) * **Started** ![](https://lh4.googleusercontent.com/iF2Q7fxNLWR58iwWDI3SfVi2UvGDTaJYQb8fH4ujb1jZq8jD_UMJtMjqpDQUxbFm5bKP_XSDgehxY9YVHiJK2pmJzH15u-RnNIBm5b4T1ryCBt_I3s8y9SSgr5j5sbBUcOd3GB-W) ![](https://lh6.googleusercontent.com/CAUJkhXc6ZhCjL-HXzZoFsO6zL2rDzWlCQTehmHKUceeIQr3YUmoiUNyFNNAx5bFjlMVW26o2oDbR5vCU09Yj1EHIsLAVc8fvNcMPcEF77hrbczdssiPCgxicBovjw77msrdi5Ez) ![](https://lh6.googleusercontent.com/ob996lgiRuPUYK17-T0g_pA5TA_NBUe0UdN4xL6T8qgwjLjzvEXKatavGsAMSsZy47z4b_AbwR2cZ6jWb4xyRH7af3QjIPwc2oVwVX12M8xd8d15eFfzbf8h2EhFc_3tX5Moh4Fa) * TextColor ![](https://lh5.googleusercontent.com/VOlCckVdJZ2azX-bJiVLCw9glleLpU9YqALKqKRi3adIbcaF3DZ8yCO3JViFFfLepTiubSSxSMpVf5y7zBIbZqDjJFsSmUekCscf86wsE72SWAI0M1o6aCfuOWizxZp5MRNBnWLX) ![](https://lh6.googleusercontent.com/NfGJThRTrU_SOvmOwRwZE2bKDc6GSOnG1p3q76lajn2B44zP810a92TqbFaTY7rMTyfvMZD9Svw4IbYY8J_E3jHTIeDlgH_eEaSXTh6yurhUgqnTC2bflSPMBixUTHq-WyMQ-Qco) ![](https://lh6.googleusercontent.com/g2kofjrmMliHsJ3mzSAi9S-RCvrv4A9o2TaMW43UZLMWcPHqL440uMNBOJoW4vGtoSXaS9MNcrHj1YQ-29Nu9MPv6s3eUHEXtWSyBMAU-OCCp0fevzs1qhgvz04jScS5mViBvr7O) * Visible: ![](https://lh5.googleusercontent.com/lOkP8aqT7IURyNzfbo__1YKalWAeav7aFPEVqnrDHwUaCaZcNDO7hgyqWlXQ_tCcI_kr0Ip8LO03Kx7ytskeFGR2-ri8FtoCwJeyuMgrZaGKO8nSP_nvVB3w8fc5iONh-zRwS_uZ) ![](https://lh3.googleusercontent.com/capIFLq6efRPXlpRNNHzL-r6VPu5kA8B3Xw9h8Sa01L1M2c5KaYMPzcHImETUmu-fNc-3kN69UpSXLeEk9FguJqX0PvQHNreqiv7d2bnEt4pHSxRtXJt9OBkEsL4AnnoZqoj8L3T) * Width ![](https://lh6.googleusercontent.com/95kuQtr8lpXvZCNjTfG3BMqw-8SH7gLh03kPLedJ0oZjSYtLTNAVcv9dz55RcxVL1jddDKwqqTv7w80tv0jhfGV2vIiN3SnzYn14x8Hwn15S38d3B92KGTKNN-TM6jJh_PWICNrs) ![](https://lh5.googleusercontent.com/K2f_TzXuWU0PcFl74J1gpvb3BxktRR-9NO6bEKOt3RmiwJLUfn0pecjFDmZ3QEKxC9Kb9HFyenihqni-21VoxUoWnrLDYPujD3L5Hz47kKQvIu77AmNx8qQAl1nn-lsYf282eTi8) ![](https://lh4.googleusercontent.com/aI69cVR_AxUjPSRHbYgN_TnU3WmPy0OlpZKx-GjuP3eVvvnMcZ2lo-yThf2FHJBp2UxD8NuXFdm1vcIzcNrQilgFUXinAyZ6HDD-mgRlKLjv86it5oMo1yS0Hm2H0ou0nUQRcxXq) ![](https://lh3.googleusercontent.com/uRmT6QaIG-40jffNnscMFU9BE1KaxKoUx2oWUtdqB4BPDO-wZc5CL8qfqA1PhBoqePQ2Ex5FMU0WVEzsocIb7mE4WG6sMlReLzX45QBXcuAvhPJWG4nym8j-rMXl_PfEM0VSIWnQ) # DatePicker A button that, when clicked on, launches a popup dialog to allow the user to select a date. ## **Events** * AfterDateSet(): Event that runs after the user chooses a Date in the dialog. ![](https://lh6.googleusercontent.com/XwOWtPgSmgQQLT-1jqEV_6DGsxOFb5UwFSfSHCgUesYHBUksCyGolV5ndcfkfEe_WszTPUIGIZ-Xa-YL0WZdZ_Qz-tuvD7s0z5BX1zN2VjFS-dJ70s50s9kCY5cAxroSHrf13ylv) * GotFocus(): Indicates the cursor moved over the button so it is now possible to click it. ![](https://lh6.googleusercontent.com/vH-lr8e1MHdVgwtg_LAbQMebEbH7AsxjgQXU8vhEFS3MdOrH2AuLdNJ6GxuAuBj8yoj8HVfXl1QIaGgunzSjxXeTwvhePvZ7GODv9rIT2z_GkYASrYCTl7KzGHH8a_2qdMBVSjXd) * LostFocus(): Indicates the cursor moved away from the button so it is now no longer possible to click it. ![](https://lh3.googleusercontent.com/38ZN5WM41zXw4SSt9-GOOP-N67FPI9Jcqi7C1K6J9xiFlG-NbdfzSEoNLLJET0s087KPh4lMV5IsAvxMqZTYTRoPBvUeLrwD84Pk3SHOdtTB6K57xHm36Xtvfp3E24mlAmWViCFH) * TouchDown(): Indicates that the button was pressed down. ![](https://lh4.googleusercontent.com/-ikLyLfFRAiIYmij0XK69Qjuw6VSFC5YJHKWAQR6_IDP6bUeeixQSTX6vW_bRinWhc9uNJ1vLaAfqMVbuQq19BWfRBGA1awx64OFfGqMH19SHRMHc5GHp0Un6fmiKpczGGz4im0J) * TouchUp(): Indicates that a button has been released. ![](https://lh4.googleusercontent.com/0xWZNbdUPn0yGJaZHlUSrN6XemrRtiF7bNYSEpum1KYPQlKQ1Vo9djZeQ1oUds-nThjV4_ipPe-S3MCx3mL2xgIiwGD_Yp_bmKxWhqBvPC1f7CMgU3RFwEh_dOqvP6aBWeVGEFXK) ## **Methods** * LaunchPicker(): Launches the DatePicker popup. ![](https://lh5.googleusercontent.com/mD269N1gcjeAQLldwRhaiQs3nEQr7Sm7VRondflzrydsNoGMfsK4lKkc8mT4l_5xKboGKaZO_61BE0HZEeKs8mnV4fW7L7ktXDLwxWaS_rx8_D_ov045NiXrgdoFhtNqH-wIunG_) * SetDateToDisplay(number year, number month, number day): Allows the user to set the date to be displayed when the date picker opens. Valid values for the month field are 1-12 and 1-31 for the day field. ![](https://lh3.googleusercontent.com/kZkw47ffpZvNu02FmIywHDqa3ROb4Rr_fPB_X4IbXtF54Wa1XrNU209fb9SGArdIBrdTFI-qpiIoig3j3gDCn3QbcCH_UtcaHQ_4RV0JPsCXd3R2XK5hEtCH1qyjfTdyhl88PoXw) * SetDateToDisplayFromInstant(InstantInTime instant): Allows the instant to set the year, month, and day to be displayed when the date picker opens. Instants are used in Clock, DatePicker, and TimePicker components. ![](https://lh6.googleusercontent.com/PYrbIdgoN4svPWI-qbP8z6fPQHZqk5vt2mslc5B1hZrFl0H_8vV0oj0TEwP8ETYGh1PTZaUecGeBwUDTKuxtj6vSvsAS2pkSNLBRAPHx5vrRFG4gWXd7Qali8HUZhdeAT091F0o8) * SetShadow: ![](https://lh5.googleusercontent.com/udFJZ960dpu111nZfPImJgjTki5Oa-Q80BktI69OwTRJ8Yq9IwUvYe97-lgrVqbhAfJukvkxnR-eSGumEEPPHWJbAyOHFJFGaek0Amgsb55iQo2_5JVVv54yf-lFAi3fEPY0yXK7) ## **Properties** * BackgroundColor: Returns the button's background color. Also available in the Designer properties. ![](https://lh5.googleusercontent.com/mjsXsPv2LlBPTEKT61hpZqrd44pjLoCd4_KyNpKCe2DRRPGaZX_I_9QO3oChdMI1ZpBWwCSXn3tQgUV4M67cO8MLdJKMjSttegaRGDEE2SnGVenUIF4fJVMR3kj6iQ_X9gkr600n) ![](https://lh6.googleusercontent.com/vO5zx_cb46g57-MKoxN_BbDHqlbB93HYczT5NkLvdycwba-VhG8OinAS9S2e6nD23k2j7ky478Q3mg1mL9n0SIPuM1S-30putyaGNhFAb5WPd5pbx3Rf5yqCm_SkMCZ4NiG-UMad) ![](https://lh5.googleusercontent.com/LE2bQycGbC0TfazYbGq8f4Tw0JdEZuXTVZhav42QSk9ZVkNK_qMuRLlrYEq0_6VZIhtb5R6ECVeURU-G3FinufhYsMZCyEfsL4i68VCL32eggQvpP9UR8U6h_NZPFgEWkdjNWWR-) * Day: the Day of the month that was last picked using the DatePicker. ![](https://lh5.googleusercontent.com/4QLFVlhuCC6ngEdRJLDtg54yNdGy66NZBJMLf8QjOQ2nGBRV5M4rOmQXTt5Ujqs6tyCzkU_aItpSdeaSelnJKAZJeDA7Yeol14SAaT7xey1oHlGfBNbYbHk6MAHM4d7-7mR95-SP) * Enabled: If set, user can tap check box to cause action. Also available in the Designer properties. ![](https://lh3.googleusercontent.com/bQnYlRluyswO7A9iSPOMNo2K-nUPnmLaJCA7v2w65_tXn3eyL85YP6vKLulOGnh3yCs4gnCVCczlqlplHGlUAdIFh9_BTw-6a35RB20AZgiIloWpQTVPIHLyWJsFibfX4vGOH0zg) ![](https://lh5.googleusercontent.com/_3kguKt2nq-TWGm1SO9xec9DWz6AvQXLfaxHCdDlc2y7QQfwbWnwXVhxXmi5I8aT34A5u47yx02mDuQgMcNbrMqXltvyZHL1bb_t1orm3zXEEzuaOtKVrWJeD7YVidQQUunz6f6x) ![](https://lh5.googleusercontent.com/pOnTUcOJF5ealZZiGQe_Nfoldu44_Dwmb5hD4R73dJUosoiJnz8FG17tO67SYfCS76pEG8-ZLnHbLuLUDwDiJGBphxLpnEnQShVKHovu7ah4BcuHSY-sjflUMAykaVJoUcuIxuPs) * FontBold: If set, button text is displayed in bold. Also available in the Designer properties. ![](https://lh4.googleusercontent.com/LAk-T490A6Q5Vu0tf9Z4SvnFLvPXIaWjB_smxzX47qwX75Qzan9gC1G52yvpD-Q-HD4_2s9l0T2kq-UTH-jDxoZDu-LQfI2BtEheUIX8Uf18MXb2RaBLERLfTxA_RiiI6ghWUTQD) ![](https://lh3.googleusercontent.com/OZYrq2qefm1ihtYoqcO8O9PytC4EfH2Ogm85iC1Q4Bj2IEHlJsqZTCJhPDMvgg1UHgE8iKPAydSfAu6SVxjFGxceOO_tk3xHEYyi1c7L5__TbUjJCQbJcx9y9WgqYLV1gp6dlGz5) ![](https://lh6.googleusercontent.com/QhSpJDK71l2XWqQpOWA3UpxSsTSL9_kzySwNrcCkx2bM47VFdEJ-KULP2NUXS1eVFU_0G5TybV6WPjbuzzHVSpgBhPSAH7KzMl4BJv3Wgepsv_hiaDGt2hK4jGpNslVxrxuMf7_k) * FontItalic: If set, button text is displayed in italics. Also available in the Designer properties. ![](https://lh5.googleusercontent.com/XwFHDZxGvnUwjW6iHyLj6Cw-qVYQWa5xeGD7XLn6Qp1HGddOyM2qodh47eKUpub8zxPZW-ph50CiDLnaKPWjkHrYKRMGw1zYFieyfvBmRCDtcNDXixbNftKdpCX5RRiQOYGvfTAG) ![](https://lh3.googleusercontent.com/Dg0mMrDXrCPdwhlj3duyPNHj4-jvuCFiSi4c8NsOe2_Q1-gXaeakfNtTkBRR3gDRV_jpYkw5cb_q6arsL83K6BRydN3CAF7-pVCI8fX4_BZmtNo2BCIY7HGXMfDsJJuADqBY94vO) ![](https://lh5.googleusercontent.com/NMzlo8Qc2nRx6sZvnAeUA8sQOLePmQ_mvft3awge0MCzeCghz0Jt5BZ9yhecv9hN4o5o-G3zidsZHy7qhCJ16Wf8U48gl2c7laVTueyEQEokjPB9eWos5pZsoJkEgi8FUNHqfUdP) * FontSize: Point size for button text. Also available in the Designer properties. ![](https://lh5.googleusercontent.com/_h_tOdG93MgyodcTCN0GN04_JJVjveFcTHzCqNa59gN8H1oya4QxV6lBzxlwPbFcLGLR8DY3gzQ9HFYnRAz9RLy35LBY6ZnbJdxlrE16SvkqS2_ZYXZ5Vu-MfyZYm7Ck01RsV0Yu) ![](https://lh5.googleusercontent.com/zi8i9BRcJ5P2p2aPWlHm1zIDN--2BCTeqY2AaG_sag2Po22Ru4aGgU-KWIFmIsi2MVm_T0n9a-BRCWjAqC3qNgYfzmfSmEYkANMIXZLE7AHYPZd5I3Ox6KKl1zaVuFoJuJMftBJO) ![](https://lh6.googleusercontent.com/SncGfoG-iKerxML8AtnuVq_Spg2p2pofTQZBe2e2T33nxNO_h7CKZ113aUzb7sTbqDgwhkBF8V4WU9P77XwFaZD3imjhphnx08CnA6QS1g1oZ9CyejXIgbbv73jnhaPvPf5ZNYUY) * FontTypeface (designer only): Font family for button text. ![](https://lh4.googleusercontent.com/LjwObVroppE_34xAlDYmeGFzrLOTo_ynS8E_1fnavEDs4cI5QU7fSKs8MX_0kwVg1xTOQO3UHXxQDrIngpISgon1Ki0XXbzKxmNKtNJNwxCbBFy24Qf32_c6CWEahb5ipAGH6wqw) * FontTypefaceCustom. Also available in the Designer properties. ![](https://lh6.googleusercontent.com/JemwwfBAvZbnVjwAsRkllkdVo-tXSwDMSz1HZpJLtlVff2mTE0Ns15P71tEIUnYkZXm0t8gNjoYfZHWyMJPxKIjZ1cMdBEW-7egjqtYzWt0r5psSGnc8ppUe20mVdtoAbsjdfzRT) ![](https://lh4.googleusercontent.com/jYhzQCCE1AsgtK1JwEs8L7oWi5TTiB3nVlcbB3bo_NAM4KP_raaVb1Jy58s-IgAMhTAVC7q_0rvDyH62OlHW4XSyy6AfdRnDBIn9R8hsNJAcPC_w8m7U86IAYI8kG6fYF4Dc53pZ) ![](https://lh5.googleusercontent.com/NjeZ9WxWubOUzSxpwC1Mz3s9342Rlo5M3OquU8dGLPWLwH3s5o8Z572IzwVxayp74DRusfXFw4IzQVREreyowhOtTK3FHAU5oNOcZ8kYDD4Ta27FF9fqGqgDVog_9yV46N-Ji9-w) * Height. Also available in the Designer properties. ![](https://lh3.googleusercontent.com/WJyh6JIxgV_7WZzH1sXS0bZSc0rjnpqfX7o_Fb5sHVKgAhxWuGwGQjqLW3n_4_FtQD1desh6l4Fb0k9HMlNesdKpNsPTZSnh4ehgM3aeXAUVBLPsQqV9sMI9Fj_8TwoWg3JnH40y) ![](https://lh5.googleusercontent.com/phDOoAfDpph1Ce8NUbDDOiIEclQwBAJrr2paBtpcntokroUxhieaUMKelrelbCLoGHyKhDVaQTXMaEn-IDUnI6yelwDU0NZA4wlqnYMTaB96giKXcti4g5HLdDeKI95_i0xfOFwc) ![](https://lh5.googleusercontent.com/FgdgcP0aPr2z2S73tEIxgKyWm1gqUAckpDnC3j2ROjvqZ5JGGesDGYZ0KZ4KQTdWbpsYJMTrhhMhJys0m2PgitKCOjM1Nduh0RapqZ8KBD67f7AxhpWAhayirUKMBzH4xUCi5FqE) ![](https://lh5.googleusercontent.com/sfVh2-bBhO5aoeDUtyX2SFCd7NihyBH1EmnRDc3q-Kx5RJw2jnvlXTlyHgbC9wGrb18iPko18uR1IyvOpC-FiMaMcYVHKrRX8ockhbUX0L7gIydVzgBNsZVsTFtTw9_8ri0WvSxz) * Image: Image to display on button. Also available in the Designer properties. ![](https://lh3.googleusercontent.com/LUnzUcu0AbvYqPQh4A28yfcwyXzH81jFe2uTv4nNcJyBB1j4j8lU1SRfsXA-TvkdCqes0Q98XQk0DaztQjJ6oP10N5fPEGrfuD7YFILvivj5zkKQzD3V0K6NIE3LGKP_L8aOpU2U) ![](https://lh5.googleusercontent.com/yTwXSZG2gybkRN7ETeewEijtUd7giW47u6zY6bwtSKDSlvC2eZTppA45PnK3MmH6E-UhcnZ9ldjZi269zzMWOfqxXX1ll8oyEGrUcy-G_byEiIvRIRru90whRZLRCNe5wOG0DHkE) ![](https://lh4.googleusercontent.com/rM6915J782yBB8nsXoIS4gelCutYeBGJbkLFwSawIe_qkGUs-DHKvtthXo6IW9zP4IonqIhHRBtNfrNQPzu8UbexRfAevwBwrQzJbklfx2hK8DVKPWLkD8o1naTryItNS5nQA5ch) * Instant: Instant of date. This instant can be used with Clock component for date documentation, conversion, and matriculation. ![](https://lh4.googleusercontent.com/O3jWhOjK3VmvYiO0aoabtcRHyjBhYn7t9z1tjlaQUc4eRno7Ve2sNTz3noywfZ0HGxkhcVFpIyu0nLWZryDXAVczPPezPQaaO5VRJ8IYjtkcm46qFG-l-nvh90AYfKWVyPV3Sr4R) * Month: the number of the Month that was last picked using the DatePicker. Note that months start in 1 = January, 12 = December. ![](https://lh4.googleusercontent.com/7qBByEEtXdLGBsiD0vaxnFA4aGpzUjQACKZWRoQOLXs22UM1SqhD0fTRw1l-vxr778i0vqtt350tYJu1DofNhkdjJc9dogud1601T3js73sGFARhAo8n0QCZxNmCqGnLDkYfHwqQ) * MonthInText: Returns the name of the Month that was last picked using the DatePicker, in textual format. ![](https://lh4.googleusercontent.com/B1O-v7OYmTlGS08dJ73Xm9x_R6FjBokmWTUGD68vCwpTEso-ML12B3MRIE17wZMSFjeVU-DG8xiBrll0JqfJlcUZXeyVH7Q0s-in0Hxyak_Rdixqp2tn6mq_KJPWLIzJGddf7r3m) * Shape (designer only): Specifies the button's shape (default, rounded, rectangular, oval). The shape will not be visible if an Image is being displayed. ![](https://lh4.googleusercontent.com/-VSaSdaLp6jgqtrrixPyhyDTYyyVZOUPsTnFYwIyjUFgFax4Sxztlc3xEwni05d-Q4SreuBSfpXdUQ6B30Yq3BXu1ZLaYl0wnJh0iXsg3F6qReINeX54aM7TmxSRy0j5YB721e-F) * ShowFeedback: Specifies if a visual feedback should be shown for a button that as an image as background. Also available in the Designer properties. ![](https://lh4.googleusercontent.com/oRd1wRLYR7QEP2RAQ6SMujC5aD1CT_LDf4J3kG1M1B7L8gNsIihvMyheDW8o7uGcpD1qRn1mpWWDb9EeOiekt_NS61g9YGayqtV3x6038XbJznLVRqRnf3B3oef0zqv8_fYPcevF) ![](https://lh6.googleusercontent.com/NromG9LTr9PBiRE9H3RVq8CxyT1F7-F8deUlQ7alGZ8g2wDh-eTlHzb9Hz9AAJ4xzshJEprKictyg12iukGzGpRc3IjyAMjt9z0jdTNN3lIVen2jgEgIgaOZ-tVLQXLLur9kNPj_) ![](https://lh4.googleusercontent.com/44LV_QddOagjvtEw-6MUQq-krka1-jPxl1czgKkkiVcA-DDjhIGzjh4nZleh5vMqin_WAAYBwS1c4P7TjxQpL368MufBr0wsWBTCjIdBQekEWGLJ2IOqzvsAh0eQMjDe0Ov5Xlbb) * Text: Text to display on button. Also available in the Designer properties. ![](https://lh4.googleusercontent.com/VHhMxhWobc_Ur1sIQiHZhrx8069LsCRdVK-WhbaEGnKJgIpYJ-kr8WWAoT7qux9ghZljtRxaosPghlZdPruajxYPPBYs3Ekj_AwEulvs7ZlW2OB8EDXLBwXjz7ZXeoiu67yyq6pd) ![](https://lh3.googleusercontent.com/xaJx6N7hIjt-xQ0YLX-YP_lbBVTZluwEZA_9HB-6Z5leO-GNvdMfEYFZqda5rrVuuMp-ZEuc09etajrZlhN3bQ9NCQXJWS_Doou_jD3up6f8VjHnVHs4j536D8inDoxPYNzZIP6a) ![](https://lh6.googleusercontent.com/HmjuaFtiNt9ogsswWRdqSxRY0F6C6cW8-7gjbqXlsOfBd0CFUcvnSkAZxVSMraohjXPZxFYN2VHBMvIiB2rQZ-37AQ01z7nmjtWfFawaG6sCh92IjVoMWQyospIGDuU6UKOtMDzU) * TextAlignment (designer only): Left, center, or right. ![](https://lh6.googleusercontent.com/RvDrw7eAVBlFKj8L-X8azfefHlgDcphmG-Uwjw7PJ12Jz4okfLT0b-AMVa68mHZat6RYJQVAh2b-dg28Znyt1aBia1CR_u2c1s1zY11Mqb1Gl1imwPgubAsm0F0-2Q7Ar1xpnA1m) * TextColor: Color for button text. Also available in the Designer properties. ![](https://lh5.googleusercontent.com/oKrBpVjMOilLmw--Y8Wd2P7rOjVYY-Kbm3ZGyIUbb7uGvQMWGKQ43YMpGkdIQXOktTZpEN1wcsB28oZXNoMMSkJv9iUZGZJqUdINRP1DR6IhUpUkNjzHcmQQgjMVhF9HaXclOc0X) ![](https://lh5.googleusercontent.com/Mck1yANgnEw6dmdig7h3p-LdYLMqXrCqvfs-8k3vmlldRkZvvPrCfuNAKq6sJ8TCJ9G3HhNDKltbHfLYlPavJweYcgSpePzlET-iuLSSna4u2PADnu3D4YgOW2BxHa7dWXoPfPK4) ![](https://lh6.googleusercontent.com/7XnYcgBUlMoL7fPAZ9_MI6sBEqAnZl_4e3QAcW_sq0gr2rtDBcBk0Wgty4qGz5IR_BZsiei4LTFQr_N6glzkTE7I7hGOO2hXic89vzmFQcQHRFbWhA8_PAnzFrHOY6keWW7Gkagg) * Visible: Specifies whether the component should be visible on the screen. Value is true if the component is showing and false if hidden. Also available in the Designer properties. ![](https://lh3.googleusercontent.com/irR8cUDSkNakvWp0Ch23JR6mCdoZudsx00wKrLjOyJECWhkQdWV0JhDvV8U5fkEDV4LbE3upsoOf6eAeaDiVgISborcw6alsVSGtIwbFylYG8iTYco0sV6F17Ufch6vTLgn4K-_6) ![](https://lh3.googleusercontent.com/HWfQCZUZvGnanmApqF9N5tvwjSDI6HliGZA-J6_4DqTwXXVqy_HMQAfMWz3F8w772OdQSlR510yXpqz9OfvApVrEZEQe12QVg8g-aLxjbjSnMCpsEES1g2qcEhAw2I5g88C1PTIy) ![](https://lh4.googleusercontent.com/YZ1mgF6faGjH07EIsoMy-pfaabTTUCmFTj1PcdAaKT-qtdgiVhlI3PkkbRp9uIQsMMDCGezatNO6XOZqZTwfwrmRtPb1iOyF5tcljmtfPSQ1MgvOdiDndSWUIkRsvsF0GQPS2TNA) * Width: Also available in the Designer properties. ![](https://lh4.googleusercontent.com/6pUn9BE8jPPAhCZ3MoF3d19WLMSvoyEHvUwm0dXoZkseLcn2D-20rtQ6te5ddg6nGibUeRP8DOcLd8e-LJ3MlPqwtF-Lt7XVXFn01EseMuKMw90Yymd3JcPUPoat1VjhOVYrZkEL) ![](https://lh4.googleusercontent.com/2Lin_WcvtBgwu4wJuZgKUKLNJ7FZZ6ACXS1fbWiAJVHeLHzwdQsXZU-hpwF-TgDV4-D_c-g6Modi0XOqLhtBexWs68kQDNGSlqNNQ6RAzwp77ljmBXyt5Eo9XI0CzqBa59OlxbFd) ![](https://lh4.googleusercontent.com/BHjzPpdl6w2k0XB7IrBpbtigS0Pin7LdcqCTCmcSy2gAL3jCvMFNH13Jf-abcCRm_Xq5trMx1fYWs6QA9Ou8Kjqtu48Xy_ardBOLyjjhkQy34yJsrx1vXZYZeT36ro97V4fdCxCp) ![](https://lh3.googleusercontent.com/k9-s309gUfRnXaP3sYZV2RkAgavLvP6LKW3_G-OJINAVjY2vw0ZaQcV21iuG1a1S7LRA1baUe3M7W1YRWf0zT5oTNOppmcGtvv79K8UDEK1ry3b8jpujN_6ulg4K_pr9sVIeji2C) * Year: the Year that was last picked using the DatePicker. ![](https://lh5.googleusercontent.com/9otJXvshBjU7VUwDgBbjswi08aFZu81sxF3DjDFgnw8_MaFK8XxjYWOB3PdSJ7iwpzWBZTcR6KeCFpo1pvJODInjY5ca_lIDVvJVyNYnk7opljFFoN33rl7usN5dcg7rkSsaxc4M) # FloatingButton A FloatingButton component is a non-visual component that can be shown as floating button on the screen. By default, the button will be at bottom-right of screen. NOTE: For this to work, the Screen Scrollable should be set to true. ## **Events** * Click() ![](https://lh5.googleusercontent.com/L5cegzmiDZZNNbqLDV_tWb6JMEWfguw4pDRGK7phKHnnj8Fz2P_0Kf4tWKL4yR99SyYUxPFrVrIfaDGLc2XG_-2UtECCRejqVBAbttIRyo9BWaiqd8hOCPZ3D2kIQmom7YOf7PfV) * TouchDown() ![](https://lh4.googleusercontent.com/x_UhCjLz1wIFx6em5fkm01nvyz-QK65Mh1REBbSvi2XahtkoKnc_h_TabO1wawljYRwggxZgUcwsQKPmKrzsSd3vMapmhBji3xFfdmSkKejUvGK5qKWkH8HUd_OvsgDwShIFFkpe) * TouchUp**()** ![](https://lh4.googleusercontent.com/Pj4Va6Q0fCSv8523M4K9XVQ0vCxUD1t87Q0hzhFI1mWmND29NQ2fzfF-K_NAvKAczitABAs3bcLHM36-WphXRS1gkWXXOUP25CtCVqLpPURsX71C47aaJyGSOIzVcwGgyo-R9BID) ## **Properties** * BackgroundColor. Also available in the Designer properties. ![](https://lh3.googleusercontent.com/ioAa4jihLclTqbY0aKxzFJQlNrEc06J72tyj0v9n5tG6wthjVU-_jm8mYz3MF7bBBYS2KZ4wej6lAKhiVtvOrBMmYv7TC275BvqaEYi7turNr9d0pEPhED664GwPvbaDXq9Vjhy8) ![](https://lh4.googleusercontent.com/N9XP3xBa1gbwqCwvSB_C7TLPaRh2wD2_8CWlEJvtXBtJJzakiOMYqx7I3SxtefoNw1-f65-a5C-hHj8pz_Z3WBRpCHG7NBK153oAW3YPNOnl9XBRSSG-gEck6W3PqQrzFULvwjnc) * ButtonSize. Also available in the Designer properties. ![](https://lh3.googleusercontent.com/yBko2pC7sw7VLzkE5a0ZT8i9FwyaA_cLiO3ombgHfqpvvqgT_4ieIsnCJNdrGiBZb8ElLW2ILR6SWoe3u5qaT8tMWgB6GYBwYdL1IeHXvtmRAQO9Ycorhk-lC_67qH22q9BO-KWX) ![](https://lh4.googleusercontent.com/nkbAith7d7ahYeiZJ44o4t7gXL95_PLXZ1EBqLfPLnMo5uH0mNx5-KQBz1G_Y_U3XtfwYJ4zqWJ8NC813Jwh1n5lr_g9kwKjEE5CPo3m-jlsZj4hOfDlFPTEqAg33rs33jZAFUFb) * Enabled. Also available in the Designer properties. ![](https://lh5.googleusercontent.com/y9kH3tKI9hF0ShpspDT8-YrEKp3jtr1gV2jM13tq6gc09Q8zTqXppfiZkLTmJhkXhpmnRoHVzA1-z7W15-kNJF6ecUofAJZGkG_NkhGGqUpS-jbemfSsUFYkXB4YUEaYePNFifrO) ![](https://lh6.googleusercontent.com/aIKYsZu_Sl6qROyXnQj-kWCa7HN8G_kUVlVG5S0tQj8XrjIAO-u4r_R13iABECdBsLYuyNX9wsHarTuD_yYkiGzLdRAX_5hhmRM0JxkpFAFkpzF2qeC4z-vKRVCVhEibDXiAvBvG) ![](https://lh3.googleusercontent.com/imQm2YNdmFNJEYOXXCiVWqFpypP-TLFHFO7mez2Y32TVQYG30feuGyRaw6jNhCM4F2EEu9_MFLI3XDW0QNeF7TGrspBwkNmEpYs_JgGrOt9qdQIF0-LiUTY37_Y8yVhw1mK2f6N3) * Image. Also available in the Designer properties. ![](https://lh3.googleusercontent.com/VhoX8X7W23eFIfmmyU01806omIA6cWPYJHuLHsFBIglqh-jXp0WSkVtgKFuDH_pz98O_mTWbqngGL1emMyTpa78aNp5FLXXGmFloGsHvz9wau3paEpD5tr65DJadyu_jqYc3pTZw) ![](https://lh5.googleusercontent.com/cKEWVzFkqn2NxcU3RvHx0J8oBj97Yl-isa055mtEarSHEppKrmw8OYMQCPw9X71wiw2WVPUYUMLiQm3rIyrDPfp_YzAN317wuitzSR6QbBXDlAd8QkvkDoh2EbGBK6pKBPvmHN6A) ![](https://lh5.googleusercontent.com/qCEQOmj_Ge9OFd5x03UsAsOFcSaa6WwEHwu7BKtebEVYE1YZRAARWCUdXQJFZcSYiIS0wsIs8-1Gj0bU38AXTqhbfTka-QI3Rzv2rAKuo7PhwzlPLIl-WyXgBMUXmUteE5WPnmMs) * MarginBottom. Also available in the Designer properties. ![](https://lh6.googleusercontent.com/qNzgSY2tMTbJKhq7wNsjbKXao3lOLgOgywzI1Uh99IzvJ_nEcBqSQeJR6BuTWZdroumg_jUG3hdMkxIA32nr2lrLNy1UFIv8yqV5NgeAnhkq9M0g2qLvpdpdOfU2n31Fn_c0Fsm3) ![](https://lh4.googleusercontent.com/8TwRkxHa2kobWJIQIJXnxJGxeVzgw5a44bxbuQuSagwLT3qmEF45q-40XL0OkGA-Ad7gefk4Anh-qshLB1SoisbmwbaeamnkMS9rqDc9kmOa5rrtTHxU4QGp3zLgh5Xj-Y0M14UD) * MarginRight. Also available in the Designer properties. ![](https://lh6.googleusercontent.com/ONz5P-nclWh0EkO5HZXr3jDvETUjCrFxylcPYEpq5ASQhMExiPq-TfzWwNd9HcYGIHWrnm0ORAeFQynPD3pRcZpaGRB9bB9JCto7fdsKyNOUMqfNC-3aD7NNG-noU_bkjHabQDAZ) ![](https://lh6.googleusercontent.com/hpheU5wYP27_4YVVcuqlYJAAE2smaK2cFuDfSM2c6ShQ7e9jvtpdN97hfqQhqJEEpnAUEYtCFXrqmawci8khA-5ApKiqKsgI0elY6oEgxe0fQNaX9xt920L-8ROsvN2XCfdRpOme) * Visible. Also available in the Designer properties. ![](https://lh5.googleusercontent.com/yYfB3PYTPgshhiwVgsNqKxZQpeB-8NrxaCrICur9HZ6SAAgDCwJB4jpl7LNfzQqIRHCBEboMb8nQaddVppdkTkujQ75Gf00XWo56HUBB2wuuIwo8dk_39UejIOUxerlvNot_JiUO) ![](https://lh3.googleusercontent.com/hLjqqBrmkO4eLZp_5IgxuA1-MANWxWFLM6iCYjsctDexl5V_H5q2j7MHq6OQmeZnXfLiXRTDqAzJXWQIwCPB9OkfXCWimiyFOdQ1PZ1-maDHH-f4oatBHggTfqSMJZXzD88sLQTC) ![](https://lh4.googleusercontent.com/mph-1YlzGNVPRooxUVTGnpAtAjab0fqwrgWuTqR3kicTG2SsoeZl-fyciGLJEU1d8TvoNZ2aB3GnOX4BibJmEQmsEGRfc3s5AAboAbaJW4_rUZt1VNxcEprGhHDsu5Sn7BZzjjiF) # GalleryViewer This is a visible component that shows images in a center-locked, horizontally scrolling list. The video below shows an example video on how to use GalleryViewer component: ![](https://i1.wp.com/AppyBuilder.com/img/pixiibomb3.png) **By:** [**Pixii Bomb**](http://community.appybuilder.com/t/admob-component-monetize-your-app-using-an-admob-banner-make-money/1313) {% embed url="" %} # GridView # Image Component for displaying images. The picture to display, and other aspects of the Image's appearance, can be specified in the Designer or in the Blocks Editor. ## Properties ### Animation This is a limited form of animation that can attach a small number of motion types to images. The allowable motions are ScrollRightSlow, ScrollRight, ScrollRightFast, ScrollLeftSlow, ScrollLeft, ScrollLeftFast, and Stop ### Height ### Picture ### Visible Specifies whether the component should be visible on the screen. Value is true if the component is showing and false if hidden. ### Width ## Events none ## Methods none # Label Labels are components used to show text. A label displays text which is specified by the Text property. Other properties, all of which can be set in the Designer or Blocks Editor, control the appearance and placement of the text. ## Properties ### BackgroundColor Color for label background. ### FontBold If set, label text is displayed in bold. ### FontItalic If set, label text is displayed in italics. ### FontSize Point size for label text. ### FontTypeface Font family for label text. ### HasMargins Reports whether or not the label appears with margins. All four margins (left, right, top, bottom) are the same. This property has no effect in the designer, where labels are always shown with margins. ### HTMLFormat If true, sets text of label to html format else it is plain text format. Note: Not all HTML is supported. ### Height Label height (y-size). ### Width Label width (x-size). ### Text Text to display on label. ### TextAlignment Left, center, or right. ### TextColor Color for label text. ### Visible If set, label is visible. # ListPicker A button that, when clicked on, displays a list of texts for the user to choose among. The texts can be specified through the Designer or Blocks Editor by setting the ElementsFromString property to their string-separated concatenation (for example, choice 1, choice 2, choice 3) or by setting the Elements property to a List in the Blocks editor. Setting property ShowFilterBar to true, will make the list searchable. Other properties affect the appearance of the button (TextAlignment, BackgroundColor, etc.) and whether it can be clicked on (Enabled). ## Properties ### BackgroundColor Returns the button's background color ### Elements List of Choices to Display (as a list) ### ElementsFromString Comma separated list of choices to use ### Enabled Whether the ListPicker can be tapped ### FontBold (designer only) If set, list picker text is displayed in bold. ### FontItalic (designer only) If set, list picker text is displayed in italics. ### FontSize (designer only) Point size for list picker text. ### FontTypeface (designer only) Font family for list picker text. ### Height Box height (y-size). ### Image Specifies the path of the button's image. If there is both an Image and a BackgroundColor, only the Image will be visible. ### Selection The selected item. When directly changed by the programmer, the SelectionIndex property is also changed to the first item in the ListPicker with the given value. If the value does not appear, SelectionIndex will be set to 0. ### SelectionIndex The index of the currently selected item, starting at 1. If no item is selected, the value will be 0. If an attempt is made to set this to a number less than 1 or greater than the number of items in the ListPicker, SelectionIndex will be set to 0, and Selection will be set to the empty text. ### Shape (designer only) Specifies the button's shape (default, rounded, rectangular, oval). The shape will not be visible if an Image is being displayed. ### ShowFeedback Specifies if a visual feedback should be shown for a button that as an image as background. ### ShowFilterBar Returns current state of ShowFilterBar indicating if Search Filter Bar will be displayed on ListPicker or not ### Text Title text to display on list picker. ### TextAlignment (designer only) Left, center, or right. ### TextColor Color for text. ### Title Optional title displayed at the top of the list of choices. ### Visible Specifies whether the component should be visible on the screen. Value is true if the component is showing and false if hidden. ### Width Box width (x-size). ### ItemTextColor The text color of the ListPicker items. ### ItemBackgroundColor The background color of the ListPicker items. ## Events ### AfterPicking() Event to be raised after the picker activity returns its result and the properties have been filled in. ### BeforePicking() Event to raise when the button of the component is clicked or the list is shown using the Open block. This event occurs before the list of items is displayed, and can be used to prepare the list before it is shown. ### GotFocus() Indicates the cursor moved over the button so it is now possible to click it. ### LostFocus() Indicates the cursor moved away from the button so it is now no longer possible to click it. ## Methods ### Open() Opens the picker, as though the user clicked on it. # ListPickerCustom # ListView This is a visible component that allows to place a list of text elements in your Screen to display. The list can be set using the ElementsFromString property or using the Elements block in the blocks editor. Warning: This component will not work correctly on Screens that are scrollable. ## Properties ### BackgroundColor The color of the listview background. ### Elements List of text elements to build your list. ### ElementsFromString Build a list with a series of text elements separated by commas such as: Cheese,Fruit,Bacon,Radish. Each word before the comma will be an element in the list. ### Height Determines the height of the list on the view. ### Selection Returns the text last selected in the ListView. ### SelectionIndex The index of the currently selected item, starting at 1. If no item is selected, the value will be 0. If an attempt is made to set this to a number less than 1 or greater than the number of items in the ListView, SelectionIndex will be set to 0, and Selection will be set to the empty text. ### ShowFilterBar Sets visibility of ShowFilterBar. True will show the bar, False will hide it. ### TextColor The text color of the listview items. ### Visible Specifies whether the component should be visible on the screen. Value is true if the component is showing and false if hidden. ### Width Determines the width of the list on the view. ## Events ### AfterPicking() Simple event to be raised after the an element has been chosen in the list. The selected element is available in the Selection property. ## Methods none # ListViewCustom ![](https://i1.wp.com/AppyBuilder.com/img/pixiibomb3.png) **By: Pixii Bomb** This is a visible component that displays a **list** of Images and Text elements in a **ListView** like below: ![](/files/-L9BuaXgUtpl90hf8UVe) The list can be set using the **ElementsFromString** property or using the **Elements** block in the blocks editor. In this example, we will build an app that will show fish images and text description in a ListView. Clicking an item will display a large image of the selected row. It will also display a textual description of the selected image. The source for this sample app can be found here in the forum community here: ![](/files/-L9BuaYA0jelDrwZsME0) ## Blocks ![](/files/-L9BuaYJUf2inub_QRib) # Notifier The Notifier component displays alert dialogs, messages, and temporary alerts, and creates Android log entries. ## Methods ### ShowMessageDialog Displays a message which the user must dismiss by pressing a button. You can specify an animationType (1 to 5) where: * 1 = pop-up from top * 2 = Slide from top * 3 = Slide from left * 4 = Slide from bottom * 5 = no animation ![](/files/-L9BuSx_MuVGTrJ0Kpd-) ### ShowChooseDialog Displays a message two buttons to let the user choose one of two responses, for example, yes or no, after which the AfterChoosing event is raised. You can specify an animationType (1 to 5) where: * 1 = pop-up from top * 2 = Slide from top * 3 = Slide from left * 4 = Slide from bottom * 5 = no animation ![](/files/-L9BuSy4toch8-fAUxMU) ### ShowTextDialog Lets the user enter text in response to the message, after which the AfterTextInput event is raised. You can specify an animationType (1 to 5) where: * 1 = pop-up from top * 2 = Slide from top * 3 = Slide from left * 4 = Slide from bottom * 5 = no animation ![](/files/-L9BuSyrT-w2DUDRG_Eh) ### ShowAlert Displays a temporary alert that goes away by itself after a short time. You can specify an alertType of 1 through 6. ![](/files/-L9BuSyzJsDwLHUUFErj) ![](/files/-L9BuSz52LxAAGPjG3mH) ### ShowProgressDialog Displays an alert with a loading spinner that cannot be dismissed by the user. It can only be dismissed by using the DismissProgressDialog block. You can also specify a progressStyle: * 0 = Spinner style * 1 = Horizontal style ![](/files/-L9BuSzlkSQl6XzNqAFf) ### DismissProgressDialog Dismisses the progress dialog displayed by ShowProgressDialog. ### LogError Logs an error message to the Android log. ### LogInfo Logs an info message to the Android log. ### LogWarning Logs a warning message to the Android log. The messages in the dialogs (but not the alert) can be formatted using the following HTML tags: `, ,
,
, , ,
, , , , , , , `\ You can also use the font tag to specify color, for example, ``. Some of the available color names are aqua, black, blue, fuchsia, green, grey, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow ## Properties ### BackgroundColor Specifies the background color for alerts (not dialogs). ### NotifierLength (designer only) specifies the length of time that the alert is shown -- either "short" or "long". ### TextColor Specifies the text color for alerts (not dialogs). ## Events ### AfterChoosing(text choice) Event after the user has made a selection for ShowChooseDialog. ### AfterTextInput(text response) Event raised after the user has responded to ShowTextDialog. # PasswordTextBox # ProgressBar # RatingBar A RatingBar is a component that shows a rating in stars. The user can touch/drag or use arrow keys to set the rating: ![](/files/-L9BuS4uhAAqSia3LRPv) This is a User Interface component that can be added to screen layout. It contains default properties such as number of stars, the current selection, color, etc: ![](/files/-L9BuS5Cg_6zAetJi_4F) For this tutorial, as shown above, we are setting defaults NumStars to 5, a start-up Rating of 4.5, StepSize of .5 (half stars selection) , StarColor of Red, and AllowSelection to true, allowing user to touch & drag & select number of stars for rating. ## Blocks Event block AfterSelecting gets triggered when user touches and drags the stars. As dragging is done, this block will return the Rating (number of stars) selected. ![](/files/-L9BuS5OA05R_KO68ttG) In this event-block, we can add other blocks to display additional information: ![](/files/-L9BuS5X1gAwtxGSfwSn) This component includes many other blocks that can be used to programatically set or update the component settings: ![](/files/-L9BuS5iEHLd2OAvRF_b) # Slider A Slider is a progress bar that adds a draggable thumb. You can touch the thumb and drag left or right to set the slider thumb position. As the Slider thumb is dragged, it will trigger the PositionChanged event, reporting the position of the Slider thumb. The reported position of the Slider thumb can be used to dynamically update another component attribute, such as the font size of a TextBox or the radius of a Ball. ## Properties ### ColorLeft The color of slider to the left of the thumb. ### ColorRight The color of slider to the left of the thumb. ### MaxValue Sets the maximum value of slider. Changing the maximum value also resets Thumbposition to be halfway between the minimum and the (new) maximum. If the new maximum is less than the current minimum, then minimum and maximum will both be set to this value. Setting MaxValue resets the thumb position to halfway between MinValue and MaxValue and signals the PositionChanged event. ### MinValue Sets the minimum value of slider. Changing the minimum value also resets Thumbposition to be halfway between the (new) minimum and the maximum. If the new minimum is greater than the current maximum, then minimum and maximum will both be set to this value. Setting MinValue resets the thumb position to halfway between MinValue and MaxValue and signals the PositionChanged event. ### ThumbPosition Sets the position of the slider thumb. If this value is greater than MaxValue, then it will be set to same value as MaxValue. If this value is less than MinValue, then it will be set to same value as MinValue. ### ThumbEnabled Sets whether or not to display the slider thumb. ### Visible Specifies whether the component should be visible on the screen. Value is true if the component is showing and false if hidden. ### Width ## Events ### PositionChanged(number thumbPosition) Indicates that position of the slider thumb has changed. ## Methods none # Spinner A spinner component that displays a pop-up with a list of elements. These elements can be set in the Designer or Blocks Editor by setting theElementsFromString property to a string-separated concatenation (for example, choice 1, choice 2, choice 3) or by setting the Elements property to a List in the Blocks editor. Spinners are created with the first item already selected. So selecting it does not generate an After Picking event. Consequently it's useful to make the first Spinner item be a non-choice like "Select from below\...". ## Properties ### Elements returns a list of text elements to be picked from. ### ElementsFromString sets the Spinner list to the elements passed in the comma-separated string ### Height ### Prompt Text with the current title for the Spinner window ### Selection Returns the current selected item in the spinner ### SelectionIndex The index of the currently selected item, starting at 1. If no item is selected, the value will be 0. ### Visible Specifies whether the component should be visible on the screen. Value is true if the component is showing and false if hidden. ### Width ## Events ### AfterSelecting(text selection) Event called after the user selects an item from the dropdown list. ## Methods ### DisplayDropdown() displays the dropdown list for selection, same action as when the user clicks on the spinner. # Switch A Switch is a User Interface two-state toggle component that can select between two options. The user may drag the "thumb" back and forth to choose the selected option, or simply tap to toggle as if it were a checkbox. ![](/files/-LHEfKch3EdNoVmDmyIp) ![](https://help.appybuilder.com/assets/tutSwitch3.png) ![](https://help.appybuilder.com/assets/tutSwitch1.png) This component includes Designer properties that allows for changing the default Text, TrackColor, ThumbColor, etc. It also includes blocks and events for capturing user clicks. Using the Click event, allows you to change properties such as Text, and Thumb/Track colors. The Click event-block is used to capture taps. The Checked block is used to determine the Switch state (checked or not checked) ![](/files/-LHEg8LfJvOFUEOVcntk) ![](/files/-LHEgGpj6ZE4fv5N-3bs) # TextBox Users enter text in a text box component. The initial or user-entered text value in a text box component is in the Text property. If Text is blank, you can use the Hint property to provide the user with a suggestion of what to type. The Hint appears as faint text in the box. The MultiLine property determines if the text can have more than one line. For a single line text box, the keyboard will close automatically when the user presses the Done key. To close the keyboard for multiline text boxes, the app should use the HideKeyboard method or rely on the user to press the Back key. The NumbersOnly property restricts the keyboard to accept numeric input only. Other properties affect the appearance of the text box ( TextAlignment , BackgroundColor , etc.) and whether it can be used ( Enabled ). Text boxes are usually used with the Button component, with the user clicking on the button when text entry is complete. If the text entered by the user should not be displayed, use PasswordTextBox instead. ## Methods ### HideKeyboard() Hide the keyboard. Only multiline text boxes need this. Single line text boxes close the keyboard when the users presses the Done key. ### RequestFocus() Sets the textbox active. ## Properties ### BackgroundColor The background color of the input box. You can choose a color by name in the Designer or in the Blocks Editor. The default background color is 'default' (shaded 3-D look). ### Enabled Whether the user can enter text into this input box. By default, this is true. ### FontBold (designer only) Whether the font for the text should be bold. By default, it is not. ### FontItalic (designer only) Whether the text should appear in italics. By default, it does not. ### FontSize The font size for the text. By default, it is 14.0 points. ### FontTypeface (designer only) The font for the text. The value can be changed in the Designer. ### Height ### Hint Text that should appear faintly in the input box to provide a hint as to what the user should enter. This can only be seen if the Text property is empty. ### MultiLine If true, then this text box accepts multiple lines of input, which are entered using the return key. For single line text boxes there is a Done key instead of a return key, and pressing Done hides the keyboard. The app should call the HideKeyboard method to hide the keyboard for a mutiline text box. ### NumbersOnly If true, then this text box accepts only numbers as keyboard input. Numbers can include a decimal point and an optional leading minus sign. This applies to keyboard input only. Even if NumbersOnly is true, you can use \[set Text to] to enter any text at all. ### Text The text in the input box, which can be set by the programmer in the Designer or Blocks Editor, or it can be entered by the user (unless the Enabled property is false). ### TextAlignment (designer only) Whether the text should be left justified, centered, or right justified. By default, text is left justified. ### TextColor The color for the text. You can choose a color by name in the Designer or in the Blocks Editor. The default text color is black. ### Visible Whether the component is visible ### Width ## Events ### GotFocus() Event raised when this component is selected for input, such as by the user touching it. ### LostFocus() Event raised when this component is no longer selected for input, such as if the user touches a different text box. # Toggler Toggler is a visible component that can display checked / unchecked states as a button with a light indicator. By default, it will display a text with ON or OFF labels: ![](/files/-LHEdhpyoBHyDVcgoaWP) Toggler includes a Click event block that will be invoked when user taps on the button ![](/files/-LHEb8ARB_uJCuERbhtN) Toggler also includes a Checked property block. It can be used to determine the state of it and determine if it is Checked or un-Checked. Use if-then-else block in your Toggler.Click block the add custom logic based on its status: ![](/files/-LHEbrIZ1cIcRDyCOUNt) This component includes many other blocks to change some properties such as its color or font size. ![](/files/-LHEc7Hzr5WVpk12TLSS) This component also includes blocks that can be used to change the default ON / OFF text. For example, to change ON / OFF to Yes / No, use blocks below ![](/files/-LHEc_h9EMpTBE_G31f2) Note: You can also use Switch component, to basically, accomplish same. # WebViewer Component for viewing Web pages. The Home URL can be specified in the Designer or in the Blocks Editor. The view can be set to follow links when they are tapped, and users can fill in Web forms. Warning: This is not a full browser. For example, pressing the phone's hardware Back key will exit the app, rather than move back in the browser history. You can use the WebViewer.WebViewString property to communicate between your app and Javascript code running in the Webviewer page. In the app, you get and set WebViewString. In the WebViewer, you include Javascript that references the window\.AppInventor object, using the methoods and setWebViewString(text). For example, if the WebViewer opens to a page that contains the Javascript command document.write("The answer is" + window\.AppInventor.getWebViewString()); and if you set WebView\.WebVewString to "hello", then the web page will show The answer is hello. And if the Web page contains Javascript that executes the command windowAppInventor.setWebViewString("hello from Javascript"), then the value of the WebViewString property will be hello from Javascript. ## Properties ### CurrentPageTitle Title of the page currently viewed ### CurrentUrl URL of the page currently viewed. This could be different from the Home URL if new pages were visited by following links. ### FollowLinks Determines whether to follow links when they are tapped in the WebViewer. If you follow links, you can use GoBack and GoForward to navigate the browser history. ### Height ### HomeUrl URL of the page the WebViewer should initially open to. Setting this will load the page. ### IgnoreSslError Determine whether or not to ignore SSL errors. Set to true to ignore errors. Use this to accept self signed certificates from websites. ### PromptforPermission If True, then prompt the user of the WebView to give permission to access the geolocation API. If False, then assume permission is granted. ### UsesLocation (designer only) Whether or not to give the application permission to use the Javascript geolocation API. This property is available only in the designer. ### Visible Specifies whether the component should be visible on the screen. Value is true if the component is showing and false if hidden. ### WebViewString Gets the WebView's String, which is viewable through Javascript in the WebView as the window\.AppInventor object ### Width ## Events none ## Methods ### boolean CanGoBack() Returns true if the WebViewer can go back in the history list. ### boolean CanGoForward() Returns true if the WebViewer can go forward in the history list. ### ClearCaches() Clear the WebViewer caches ### ClearLocations() Clear stored location permissions. ### GoBack() Go back to the previous page in the history list. Does nothing if there is no previous page. ### GoForward() Go forward to the next page in the history list. Does nothing if there is no next page. ### GoHome() Loads the home URL page. This happens automatically when the home URL is changed. ### GoToUrl(text url) Load the page at the given URL. # TimePicker A button that, when clicked on, launches a popup dialog to allow the user to select a time. ## Properties ### BackgroundColor Returns the button's background color ### Enabled ### FontBold (designer only) ### FontItalic (designer only) ### FontSize (designer only) ### FontTypeface (designer only) ### Height ### Hour The hour of the last time set using the time picker. The hour is in a 24 hour format. If the last time set was 11:53 pm, this property will return 23. ### Image Specifies the path of the button's image. If there is both an Image and a BackgroundColor, only the Image will be visible. ### Instant Instant of time. This instant can be used with Clock component for time documentation, conversion, and matriculation. ### Minute The minute of the last time set using the time picker ### Shape (designer only) Specifies the button's shape (default, rounded, rectangular, oval). The shape will not be visible if an Image is being displayed. ### ShowFeedback Specifies if a visual feedback should be shown for a button that as an image as background. ### Text ### TextAlignment (designer only) ### TextColor ### Visible Specifies whether the component should be visible on the screen. Value is true if the component is showing and false if hidden. ### Width ## Events ### AfterTimeSet() This event is run when a user has set the time in the popup dialog. ### GotFocus() Indicates the cursor moved over the button so it is now possible to click it. ### LostFocus() Indicates the cursor moved away from the button so it is now no longer possible to click it. ## Methods ### LaunchPicker() Launches the TimePicker popup. ### SetTimeToDisplay(number hour, number minute) Allows the user to set the time to be displayed when the time picker opens. Valid values for the hour field are 0-23 and 0-59 for the second field. ### SetTimeToDisplayFromInstant(InstantInTime instant) Allows the instant to set the hour and minute to be displayed when the time picker opens. Instants are used in Clock, DatePicker, and TimePicker components. # LinedTextBox # Effects Components under this category allow you to change the visual appearance of components such as changing their border, color, shape. # Decoration Decoration is a non-visible component that allows you to change decoration (appearance) (e.g. Padding) of any of the Visible components. **SetMargin block.** This block allows you to set the margin for a visible component (e.g. Label, Button, etc). The Margin is the distance from the other visible components. For values, use a Text block and enter values for top, left, bottom right in CSV format. Example formats are as follows: * 10,5,10,5 - for top=10, left=5, bottom=10, right=5 * 10,5 - same as above, but shorthand version * 10 - means same value for all top, left, bottom, right ![](/files/-LGcW3K4zXG4Avh34N-0) **SetPadding block**. This block allows you to set the gap around the component. It is the space inside the border, between the border and the actual content. For values, use same formats as SetMargin (above) can be used ![](/files/-LGcYcVUCHKkVQQjKzbJ) SetShape block. This block allows you to create a rectangle or round shape for the visible component. It also allows you to change its background and border color. isRound allows you to make the component appear as rectangle (false) or round / oval (true). ![](/files/-LGcZ29WvSdIdqeQNlVF) # Sidebar **Sidebar** panel shows app main navigation menu. When sidebar is not used, it is invisible, and it is visible when the user swipes a finger from the left edge of the screen. You can setup a headerImage and a list of icons from [here](https://fontawesome.com/cheatsheet) **Triggering Sidebar.** Triggered when user picks (selects) an item from Sidbar ![](/files/-LGh4Y1-zuQPiN4jRYiM) **Creating Sidebar.** You can create a Sidebar menu by following block, there are app's main options in the left edge of screen. The Sidebar is visible if user swipes a finger from left edge of screen. HeaderImagePath could be added from asset folder or point to the Internet or even you can leave it empty. Notice that for ListItems , it provides a CSV of items, and for ListIcons, it provides a CSV of icons from [here](https://fontawesome.com/cheatsheet) ![](/files/-LGh83xPq-LKkhTnHaDV) **Open Sidebar.** A Sidebar which is already created, can be opened using the following block: ![](/files/-LGhF1l1XGV3ZHUtcHi2) **Checking Sidebar.** You can check if a Sidebar is opened or not with the following block: ![](/files/-LGhFccHctzZMnwHoe8k) **Closing Sidebar.** if you want to close a created Sidebar, you can use the below Sidebar , by entering the sidebar name: ![](/files/-LGhGVM07RCDlo6UY7hE) **Tutorial.** Please check-out e-Book tutorial [HERE](https://help.appybuilder.com/tutorials/creating-e-book). # Snackbar Using **Snackbar** , you could have feedback on an operation. Snackbar shows a brief message at the bottom of the screen, above all other elements. Only one can be displayed at a time. Snackbar disappear after user interaction. Snackbar includes an event-block called AfterAction. It will be automatically triggered when Snackbar action is clicked. This block contains a parameter called "action". It can be used to determine type action that user selected. For example, we can use if-then-else, to check user's response as below: ![](/files/-LGqWj27wI0F2m0Q6hfb) **Creating Snackbar.** You can create a Snackbar using the following block, in message you should add one-message and up to two actions. The message will appear on left-side and the actions will display on right side. If you want to have only one-action, just plug an empty text block into socket. ![](/files/-LGqET3RSH2sFggu8x3D) **Opening Snackbar.** Use block below to determine if Snackbar is open or not ![](/files/-LGqFWPKdJqjoqOOe4IB) **Closing Snackbar.** Use block below to force closing of Snackbar. ![](/files/-LGqFmau7R-DKCPZdfge) Image below shows how Snackbar looks when 2 actions are provided. Note: For this example, we used Snackbar.TextColor to change the default color: ![](/files/-LGqYn_tLmQWlshUTpOs) ![](/files/-LGqYQHvXeiQnd2yIS7w) # Layout # Horizontal Arrangement Use a horizontal arrangement component to display a group of components laid out from left to right. This component is a formatting element in which you place components that should be displayed from left to right. If you want to have components displayed one over another, use VerticalArrangement instead. In a HorizontalArrangement, components are arranged along the horizontal axis, vertically center-aligned. If a HorizontalArrangement's Height property is set to Automatic, the actual height of the arrangement is determined by the tallest component in the arrangement whose Height property is not set to Fill Parent. If a HorizontalArrangment's Height property is set to Automatic and it contains only components whose Height properties are set to Fill Parent, the actual height of the arrangement is calculated using the automatic heights of the components. If a HorizontalArrangement's Height property is set to Automatic and it is empty, the height will be 100. If a HorizontalArrangement's Width property is set to Automatic, the actual width of the arrangement is determined by the sum of the widths of the components. If a HorizontalArrangement's Width property is set to Automatic, any components whose Width properties are set to Fill Parent will behave as if they were set to Automatic. If a HorizontalArrangement's Width property is set to Fill Parent or specified in pixels, any components whose Width properties are set to Fill Parent will equally take up the width not occupied by other components. ## Properties ### AlignHorizontal A number that encodes how contents of the arrangement are aligned horizontally. The choices are: 1 = left aligned, 2 = right aligned, 3 = horizontally centered. Alignment has no effect if the arrangement's width is automatic. ### AlignVertical A number that encodes how the contents of the arrangement are aligned vertically. The choices are: 1 = aligned at the top, 2 = aligned at the bottom, 3 = vertically centered. Alignment has no effect if the arrangement's height is automatic. ### BackgroundColor Background color for this component ### Image Background image for this component ### Visible If true, component and its contents are visible. ### Height Horizontal arrangement height (y-size). ### Width Horizontal arrangement width (x-size). # Horizontal Scroll Arrangement Use a horizontal arrangement component to display a group of components laid out from left to right. This component is a formatting element in which you place components that should be displayed from left to right. If you want to have components displayed one over another, use VerticalArrangement instead. In a HorizontalArrangement, components are arranged along the horizontal axis, vertically center-aligned. If a HorizontalArrangement's Height property is set to Automatic, the actual height of the arrangement is determined by the tallest component in the arrangement whose Height property is not set to Fill Parent. If a HorizontalArrangment's Height property is set to Automatic and it contains only components whose Height properties are set to Fill Parent, the actual height of the arrangement is calculated using the automatic heights of the components. If a HorizontalArrangement's Height property is set to Automatic and it is empty, the height will be 100. If a HorizontalArrangement's Width property is set to Automatic, the actual width of the arrangement is determined by the sum of the widths of the components. If a HorizontalArrangement's Width property is set to Automatic, any components whose Width properties are set to Fill Parent will behave as if they were set to Automatic. If a HorizontalArrangement's Width property is set to Fill Parent or specified in pixels, any components whose Width properties are set to Fill Parent will equally take up the width not occupied by other components. ## Properties ### AlignHorizontal A number that encodes how contents of the arrangement are aligned horizontally. The choices are: 1 = left aligned, 2 = right aligned, 3 = horizontally centered. Alignment has no effect if the arrangement's width is automatic. ### AlignVertical A number that encodes how the contents of the arrangement are aligned vertically. The choices are: 1 = aligned at the top, 2 = aligned at the bottom, 3 = vertically centered. Alignment has no effect if the arrangement's height is automatic. ### BackgroundColor Background color for this component ### Image Background image for this component ### Visible If true, component and its contents are visible. ### Height Horizontal arrangement height (y-size). ### Width Horizontal arrangement width (x-size). # Table Arrangement Use a table arrangement component to display a group of components in a tabular fashion. This component is a formatting element in which you place components that should be displayed in tabular form. In a TableArrangement, components are arranged in a grid of rows and columns, with not more than one component visible in each cell. If multiple components occupy the same cell, only the last one will be visible. Within each row, components are vertically center-aligned. The width of a column is determined by the widest component in that column. When calculating column width, the automatic width is used for components whose Width property is set to Fill Parent. However, each component will always fill the full width of the column that it occupies. The height of a row is determined by the tallest component in that row whose Height property is not set to Fill Parent. If a row contains only components whose Height properties are set to Fill Parent, the height of the row is calculated using the automatic heights of the components. ## Properties ### Visible If true, component and its contents are visible. ### Rows (number-of-rows) The number of rows in the table. ### Columns (number-of-columns) The number of columns in the table. ### Height Table arrangement height (y-size). ### Width Table arrangement width (x-size). # Vertical Arrangement Use a vertical arrangement component to display a group of components laid out from top to bottom, left-aligned. This component is a formatting element in which you place components that should be displayed one below another. The first child component is stored on top, the second beneath it, and so on. If you want to have components displayed next to one another, use HorizontalArrangement instead. In a VerticalArrangement, components are arranged along the vertical axis, left-aligned. If a VerticalArrangement's Width property is set to Automatic, the actual width of the arrangement is determined by the widest component in the arrangement whose Width property is not set to Fill Parent. If a VerticalArrangement's Width property is set to Automatic and it contains only components whose Width properties are set to Fill Parent, the actual width of the arrangement is calculated using the automatic widths of the components. If a VerticalArrangement's Width property is set to Automatic and it is empty, the width will be 100. If a VerticalArrangement's Height property is set to Automatic, the actual height of the arrangement is determined by the sum of the heights of the components. If a VerticalArrangement's Height property is set to Automatic, any components whose Height properties are set to Fill Parent will behave as if they were set to Automatic. If a VerticalArrangement's Height property is set to Fill Parent or specified in pixels, any components whose Height properties are set to Fill Parent will equally take up the height not occupied by other components. ## Properties ### AlignHorizontal A number that encodes how contents of the arrangement are aligned horizontally. The choices are: 1 = left aligned, 2 = horizontally centered, 3 = right aligned. Alignment has no effect if the arrangement's width is automatic. ### AlignVertical A number that encodes how the contents of the arrangement are aligned vertically. The choices are: 1 = aligned at the top, 2 = vertically centered, 3 = aligned at the bottom. Alignment has no effect if the arrangement's height is automatic. ### BackgroundColor Background color for this component ### Image Background image for this component ### Visible If true, component and its contents are visible. ### Height Vertical arrangement height (y-size). ### Width Vertical arrangement width (x-size). # Vertical Scroll Arrangement A formatting element in which to place components that should be displayed one below another. (The first child component is stored on top, the second beneath it, etc.) If you wish to have components displayed next to one another, use HorizontalArrangement instead. This version is scrollable ## Properties ### AlignHorizontal A number that encodes how contents of the arrangement are aligned horizontally. The choices are: 1 = left aligned, 2 = right aligned, 3 = horizontally centered. Alignment has no effect if the arrangement's width is automatic. ### AlignVertical A number that encodes how the contents of the arrangement are aligned vertically. The choices are: 1 = aligned at the top, 2 = aligned at the bottom, 3 = vertically centered. Alignment has no effect if the arrangement's height is automatic. ### BackgroundColor Returns the component's background color ### Height HeightPercent ### Image Specifies the path of the component's image. If there is both an Image and a BackgroundColor, only the Image will be visible. ### Visible Specifies whether the component should be visible on the screen. Value is true if the component is showing and false if hidden. ### Width ### WidthPercent # Drawing and Animation # Ball A round 'sprite' that can be placed on a `Canvas`, where it can react to touches and drags, interact with other sprites (`ImageSprite`s and other `Ball`s) and the edge of the Canvas, and move according to its property values. For example, to have a `Ball` move 4 pixels toward the top of a `Canvas` every 500 milliseconds (half second), you would set the `Speed` property to 4 \[pixels], the `Interval` property to 500 \[milliseconds], the `Heading` property to 90 \[degrees], and the `Enabled` property to `True`. These and its other properties can be changed at any time. The difference between a Ball and an `ImageSprite` is that the latter can get its appearance from an image file, while a Ball's appearance can only be changed by varying its `PaintColor` and `Radius` properties. ## Properties ### Enabled Controls whether the sprite moves when its speed is non-zero. ### Heading Returns the sprite's heading in degrees above the positive x-axis. Zero degrees is toward the right of the screen; 90 degrees is toward the top of the screen. ### Interval The interval in milliseconds at which the sprite's position is updated. For example, if the interval is 50 and the speed is 10, then the sprite will move 10 pixels every 50 milliseconds. ### PaintColor ### Radius ### Speed he speed at which the sprite moves. The sprite moves this many pixels every interval. ### Visible True if the sprite is visible. ### X The horizontal coordinate of the left edge of the sprite, increasing as the sprite moves to the right. ### Y The vertical coordinate of the top of the sprite, increasing as the sprite moves down. ### Z How the sprite should be layered relative to other sprits, with higher-numbered layers in front of lower-numbered layers. ## Events ### CollidedWith | Parameter | Type | | --------- | --------- | | other | component | Handler for CollidedWith events, called when two sprites collide. > Note that checking for collisions with a rotated ImageSprite currently checks against the sprite's unrotated position. Therefore, collision checking will be inaccurate for tall narrow or short wide sprites that are rotated. ### Dragged | Parameter | Type | | --------- | ------ | | startX | number | | startY | number | | prevX | number | | prevY | number | | currentX | number | | currentY | number | Handler for Dragged events. On all calls, the starting coordinates are where the screen was first touched, and the "current" coordinates describe the endpoint of the current line segment. On the first call within a given drag, the "previous" coordinates are the same as the starting coordinates; subsequently, they are the "current" coordinates from the prior call. > Note that the Sprite won't actually move anywhere in response to the Dragged event unless MoveTo is specifically called. ### EdgeReached | Parameter | Type | | --------- | ------ | | edge | number | Event handler called when the sprite reaches an edge of the screen. If Bounce is then called with that edge, the sprite will appear to bounce off of the edge it reached. Edge here is represented as an integer that indicates one of eight directions north(1), northeast(2), east(3), southeast(4), south (-1), southwest(-2), west(-3), and northwest(-4). ### Flung | Parameter | Type | | --------- | ------ | | x | number | | y | number | | speed | number | | heading | number | | xvel | number | | yvel | number | When a fling gesture (quick swipe) is made on the sprite: provides the (x,y) position of the start of the fling, relative to the upper left of the canvas. Also provides the speed (pixels per millisecond) and heading (0-360 degrees) of the fling, as well as the x velocity and y velocity components of the fling's vector. ### NoLongerCollidingWith | Parameter | Type | | --------- | --------- | | other | component | Event indicating that a pair of sprites are no longer colliding. ### TouchDown | Parameter | Type | | --------- | ------ | | x | number | | y | number | When the user begins touching the sprite (places finger on sprite and leaves it there): provides the (x,y) position of the touch, relative to the upper left of the canvas ### TouchUp | Parameter | Type | | --------- | ------ | | x | number | | y | number | When the user stops touching the sprite (lifts finger after a TouchDown event): provides the (x,y) position of the touch, relative to the upper left of the canvas ### Touched | Parameter | Type | | --------- | ------ | | x | number | | y | number | When the user touches the sprite and then immediately lifts finger: provides the (x,y) position of the touch, relative to the upper left of the canvas ## Methods ### Bounce | Parameter | Type | | --------- | ------ | | edge | number | Makes this sprite bounce, as if off a wall. For normal bouncing, the edge argument should be the one returned by EdgeReached. ### CollidingWith #### Returns: (boolean) | Parameter | Type | | --------- | --------- | | other | component | Indicates whether a collision has been registered between this sprite and the passed sprite. ### MoveIntoBounds Moves the sprite back in bounds if part of it extends out of bounds, having no effect otherwise. If the sprite is too wide to fit on the canvas, this aligns the left side of the sprite with the left side of the canvas. If the sprite is too tall to fit on the canvas, this aligns the top side of the sprite with the top side of the canvas. ### MoveTo | Parameter | Type | | --------- | ------ | | x | number | | y | number | Moves the sprite so that its left top corner is at the specfied x and y coordinates. ### PointInDirection | Parameter | Type | | --------- | ------ | | x | number | | y | number | Turns the sprite to point towards the point with coordinates as (x, y). ### PointTowards | Parameter | Type | | --------- | --------- | | target | component | Turns the sprite to point towards a designated target sprite. The new heading will be parallel to the line joining the centerpoints of the two sprites. # Canvas Canvas is a two-dimensional touch-sensitive rectangular panel on which drawing can be done and sprites can be moved. The BackgroundColor, PaintColor, BackgroundImage, Width, and Height of the Canvas can be set in either the Designer or in the Blocks Editor. The Width and Height are measured in pixels and must be positive. Any location on the Canvas can be specified as a pair of (X, Y) values, where * X is the number of pixels away from the left edge of the Canvas * Y is the number of pixels away from the top edge of the Canvas There are events to tell when and where a Canvas has been touched or a Sprite(ImageSpriteorBall) has been dragged. There are also methods for drawing points, lines, and circles. Using this component, you can also draw shapes. Courtesy of [ColinTree](https://github.com/ColinTree), [HERE](https://github.com/mit-cml/appinventor-sources/files/1795587/DrawShape.DrawArc.zip) are 2 sample .aia that can be used to DrawShape and DrawArc onto Canvas component ## Properties ***BackgroundColor*** The color of the canvas background. ***BackgroundImage*** The name of a file containing the background image for the canvas ***FontSize*** The font size of text drawn on the canvas. ***Height*** ***LineWidth*** The width of lines drawn on the canvas. ***PaintColor*** The color in which lines are drawn ***TextAlignment*** Determines the alignment of the text drawn by DrawText() or DrawAngle() with respect to the point specified by that command: point at the left of the text, point at the center of the text, or point at the right of the text. ***Visible*** Specifies whether the component should be visible on the screen. Value is true if the component is showing and false if hidden. ***Width*** ## Events **Dragged**(number startX, number startY, number prevX, number prevY, number currentX, number currentY, boolean draggedSprite) When the user does a drag from one point (prevX, prevY) to another (x, y). The pair (startX, startY) indicates where the user first touched the screen, and "draggedSprite" indicates whether a sprite is being dragged. **Flung**(number x, number y, number speed, number heading, number xvel, number yvel, boolean flungSprite) When a fling gesture (quick swipe) is made on the canvas: provides the (x,y) position of the start of the fling, relative to the upper left of the canvas. Also provides the speed (pixels per millisecond) and heading (0-360 degrees) of the fling, as well as the x velocity and y velocity components of the fling's vector. The value "flungSprite" is true if a sprite was located near the the starting point of the fling gesture. **TouchDown**(number x, number y) When the user begins touching the canvas (places finger on canvas and leaves it there): provides the (x,y) position of the touch, relative to the upper left of the canvas **TouchUp**(number x, number y) When the user stops touching the canvas (lifts finger after a TouchDown event): provides the (x,y) position of the touch, relative to the upper left of the canvas **Touched(number x, number y, boolean touchedSprite)** When the user touches the canvas and then immediately lifts finger: provides the (x,y) position of the touch, relative to the upper left of the canvas. TouchedSprite is true if the same touch also touched a sprite, and false otherwise. ## Methods ***Clear()*** Clears anything drawn on this Canvas but not any background color or image. ***DrawCircle(number x, number y, number r)*** Draws a circle (filled in) at the given coordinates on the canvas, with the given radius. ***DrawLine(number x1, number y1, number x2, number y2)*** Draws a line between the given coordinates on the canvas. ***DrawPoint(number x, number y)*** Draws a point at the given coordinates on the canvas. ***DrawText(text text, number x, number y)*** Draws the specified text relative to the specified coordinates using the values of the FontSize and TextAlignment properties. ***DrawTextAtAngle(text text, number x, number y, number angle)*** Draws the specified text starting at the specified coordinates at the specified angle using the values of the FontSize and TextAlignment properties. ***number GetBackgroundPixelColor(number x, number y)*** Gets the color of the specified point. This includes the background and any drawn points, lines, or circles but not sprites. ***number GetPixelColor(number x, number y)*** Gets the color of the specified point. ***text Save()*** Saves a picture of this Canvas to the device's external storage. If an error occurs, the Screen's ErrorOccurred event will be called. ***text SaveAs(text fileName)*** Saves a picture of this Canvas to the device's external storage in the file named fileName. fileName must end with one of .jpg, .jpeg, or .png, which determines the file type. ***SetBackgroundPixelColor(number x, number y, number color)*** Sets the color of the specified point. This differs from DrawPoint by having an argument for color. # Image Sprite A 'sprite' that can be placed on a Canvas, where it can react to touches and drags, interact with other sprites (Balls and other ImageSprites) and the edge of the Canvas, and move according to its property values. Its appearance is that of the image specified in its Picture property (unless its Visible property is False. To have an ImageSprite move 10 pixels to the left every 1000 milliseconds (one second), for example, you would set the Speed property to 10 \[pixels], the Interval property to 1000 \[milliseconds], the Heading property to 180 \[degrees], and the Enabled property to True. A sprite whose Rotates property is True will rotate its image as the sprite's Heading changes. Checking for collisions with a rotated sprite currently checks the sprite's unrotated position so that collision checking will be inaccurate for tall narrow or short wide sprites that are rotated. Any of the sprite properties can be changed at any time under program control. ## Properties ### Enabled Controls whether the sprite moves when its speed is non-zero. ### Heading Returns the sprite's heading in degrees above the positive x-axis. Zero degrees is toward the right of the screen; 90 degrees is toward the top of the screen. ### Height ### Interval The interval in milliseconds at which the sprite's position is updated. For example, if the interval is 50 and the speed is 10, then the sprite will move 10 pixels every 50 milliseconds. ### Picture The picture that determines the sprite's appearence ### Rotates If true, the sprite image rotates to match the sprite's heading. If false, the sprite image does not rotate when the sprite changes heading. The sprite rotates around its centerpoint. ### Speed The speed at which the sprite moves. The sprite moves this many pixels every interval. ### Visible True if the sprite is visible. ### Width ### X The horizontal coordinate of the left edge of the sprite, increasing as the sprite moves to the right. ### Y The vertical coordinate of the top of the sprite, increasing as the sprite moves down. ### Z How the sprite should be layered relative to other sprits, with higher-numbered layers in front of lower-numbered layers. ## Events ### CollidedWith(component other) Handler for CollidedWith events, called when two sprites collide. Note that checking for collisions with a rotated ImageSprite currently checks against the sprite's unrotated position. Therefore, collision checking will be inaccurate for tall narrow or short wide sprites that are rotated. ### Dragged(number startX, number startY, number prevX, number prevY, number currentX, number currentY) Handler for Dragged events. On all calls, the starting coordinates are where the screen was first touched, and the "current" coordinates describe the endpoint of the current line segment. On the first call within a given drag, the "previous" coordinates are the same as the starting coordinates; subsequently, they are the "current" coordinates from the prior call. Note that the Sprite won't actually move anywhere in response to the Dragged event unless MoveTo is specifically called. ### EdgeReached(number edge) Event handler called when the sprite reaches an edge of the screen. If Bounce is then called with that edge, the sprite will appear to bounce off of the edge it reached. Edge here is represented as an integer that indicates one of eight directions north(1), northeast(2), east(3), southeast(4), south (-1), southwest(-2), west(-3), and northwest(-4). ### Flung(number x, number y, number speed, number heading, number xvel, number yvel) When a fling gesture (quick swipe) is made on the sprite: provides the (x,y) position of the start of the fling, relative to the upper left of the canvas. Also provides the speed (pixels per millisecond) and heading (0-360 degrees) of the fling, as well as the x velocity and y velocity components of the fling's vector. ### NoLongerCollidingWith(component other) Event indicating that a pair of sprites are no longer colliding. ### TouchDown(number x, number y) When the user begins touching the sprite (places finger on sprite and leaves it there): provides the (x,y) position of the touch, relative to the upper left of the canvas ### TouchUp(number x, number y) When the user stops touching the sprite (lifts finger after a TouchDown event): provides the (x,y) position of the touch, relative to the upper left of the canvas ### Touched(number x, number y) When the user touches the sprite and then immediately lifts finger: provides the (x,y) position of the touch, relative to the upper left of the canvas ## Methods ### Bounce(number edge) Makes this sprite bounce, as if off a wall. For normal bouncing, the edge argument should be the one returned by EdgeReached. ### CollidingWith(component other) Indicates whether a collision has been registered between this sprite and the passed sprite. ### MoveIntoBounds() Moves the sprite back in bounds if part of it extends out of bounds, having no effect otherwise. If the sprite is too wide to fit on the canvas, this aligns the left side of the sprite with the left side of the canvas. If the sprite is too tall to fit on the canvas, this aligns the top side of the sprite with the top side of the canvas. ### MoveTo(number x, number y) Moves the sprite so that its left top corner is at the specfied x and y coordinates. ### PointInDirection(number x, number y) Turns the sprite to point towards the point with coordinates as (x, y). ### PointTowards(component target) Turns the sprite to point towards a designated target sprite. The new heading will be parallel to the line joining the centerpoints of the two sprites. # Maps # Circle The Circle component visualizes a circle of a given radius, in meters, at a latitude and longitude. The circle's appearnce can be customized using properties such as FillColor, StrokeColor, and StrokeWidth. The Circle component can also be used to implement features such as geofencing, a mechanism where the user's presence within an area is used to trigger other behaviors. Using the DistanceToPoint method combined with the LocationSensor, you can determine whether a user's location is inside or outside of the circle. You can use this feature to trigger additional actions. ## Properties ### Description Sets or gets the description displayed in the info window. The info window appears when the user taps on the circle. ### Draggable Sets or gets whether or not the user can drag a map feature. This feature is accessed by long-pressing and then dragging the circle to a new location. ### EnableInfobox Enables or disables the infobox window display when the user taps the circle. ### FillColor Sets or gets the color used to fill in the circle. ### Latitude Sets or gets the latitude of the center of the circle, in degrees. Positive values representing north of the equator and negative values representing south of the equator. To update the latitude and longitude simultaneously, use the SetLocation method. ### Longitude Sets or gets the longitude of the center of the circle, in degrees. Positive values representing east of the prime meridian and negative values representing west of the prime meridian. To update the latitude and longitude simultaneously, use the SetLocation method. ### Radius Sets or gets the radius of the circle, in meters. ### StrokeColor Sets or gets the color used to outline the circle. ### StrokeWidth Sets or gets the width of the stroke used to outline the circle. ### Title Sets or gets the title displayed in the info window that appears when the user clicks on the map feature. ### Type Gets the type of the feature. For Circle, this will always be "Circle". ### Visible Sets or gets whether the component should be visible on the screen. Value is true if the component is showing and false if hidden. ## Events ### Click Runs when the user taps on the circle. ### Drag Runs during drag operations. ### LongClick Runs after the user long clicks on the circle but does not trigger a drag. Note that this event will only trigger if Draggable is false. ### StartDrag Runs before a drag operation begins. Use this to save the current position of the circle, for example. ### StopDrag Runs after a drag operation completes. Use this to save the new position of the circle, for example. ## Methods ### DistanceToFeature(component mapFeature, boolean centroids) Computes the distance between the Circle and the given mapFeature. If centroids is true, the computation is done between the centroids of the two features. Otherwise, the distance will be computed between the two features based on the closest points. Further, when centroids is false, this method will return 0 if the circle intersects or contains the mapFeature. If an error occurs, this method will return -1. ### DistanceToPoint(number latitude, number longitude, boolean centroids) Computes the distance between the Circle and the given latitude and longitude. If centroids is true, the distance is computed from the center of the circle to the given point. Otherwise, the distance is computed from the closest point on the circle to the given point. Further, this method will return 0 if centroids is false and the point is in the circle. If an error occurs, -1 will be returned. ### HideInfobox Hides the circle's info box if it is visible. Otherwise, no action is taken. ### SetLocation(number latitude, number longitude) Moves the center of the circle to the given latitude and longitude. This method is more efficient than setting latitude and longitude separately. ### ShowInfobox Shows the info box for the circle if it is not visible. Otherwise, this method has no effect. This method can be used to show the info box even if EnableInfobox is false. # FeatureCollection A FeatureCollection groups one or more map features together. Any events that occur within a feature in the collection will also trigger the corresponding event in the collection component. FeatureCollections can be loaded from exernal resources to populate Maps with content. GeoJSON is the only format supported at this time. ## Properties ### Features Returns a list of features present in the feature collection, if any. ### FeaturesFromGeoJSON Populates the feature collection from a string containing GeoJSON content. Given the size of such strings, it is recommended to load the feature collection from assets or the web using the Source property. ### Source The source of the content for the feature collection, such as a filename or a URL. ### Visible Specifies whether the component should be visible on the screen. Value is true if the component is showing and false if hidden. ## Events ### FeatureClick(component feature) When a feature is clicked, the feature collection containing it (if any) will also receive a FeatureClick event. The feature parameter indicates which child feature was clicked. ### FeatureDrag(component feature) When a feature is dragged, the parent collection will also receive a FeatureDrag event. The feature parameter indicates which child feature was dragged. ### FeatureLongClick(component feature) When a feature is long clicked, the parent collection will also receive a FeatureLongClick event. The feature parameter indicates which child feature was long clicked. ### FeatureStartDrag(component feature) When the user begins dragging a feature, the parent collection will also receive a FeatureStartDrag event. The feature parameter indicates which child feature was dragged. ### FeatureStopDrag(component feature) When the user stops dragging a feature, the parent collection will also receive a FeatureStopDrag event. The feature parameter indicates which child feature was dragged. ### GotFeatures(text url, list features) The GotFeatures event is run when when a feature collection is successfully read from the given url. The features parameter will be a list of feature descriptions that can be converted into components using the FeatureFromDescription method. ### LoadError(text url, list features) The LoadError event is run when an error occurs while processing a feature collection document at the given url. The responseCode parameter will contain an HTTP status code and the errorMessage parameter will contain a detailed error message. ## Methods ### FeatureFromDescription(list description) Returns a new component based on the description provided. If there is an error in the properties, such as incorrectly formatted data, then the method will return text describing the error. Use the is-text? block to test whether the result is an error message. is an error or not. Properties of features are converted into App Inventor properties using the following case-insensitive mapping: * description → Description * draggable → Draggable * infobox → EnableInfobox * fill → FillColor * image → ImageAsset * stroke → StrokeColor * stroke-width → StrokeWidth * title → Title * visible → Visible ### LoadFromURL(text url) Call this method to load a GeoJSON description of a feature collection from a URL (including file URLs). If successful, the set of features managed by the feature collection will be replaced by the new features and LoadFeatureCollection event will be run. If an error occurs, the ErrorLoadingFeatureCollection event will be run instead. # LineString LineString is a component for drawing an open, continuous sequence of lines on a Map. To add new points to a LineString, drag the midpoint of any segment away from the line to introduce a new vertex. Move a vertex by clicking and dragging the vertex to a new location. Clicking on a vertex will delete the vertex. ## Properties ### Description The description displayed in the info window that appears when the user clicks on the map feature. ### Draggable Sets or gets whether or not the user can drag a line string by long-pressing and then dragging it to a new location. ### EnableInfobox Enable or disable the infobox window display when the user taps the feature. ### Points The list of points, as pairs of latitudes and longitudes, in the LineString. ### PointsFromString A GeoJSON-encoded string of points to populate the LineString. Editing the LineString in the designer will update this property. ### StrokeColor The paint color used to outline the map feature. ### StrokeWidth The width of the stroke used to outline the map feature. ### Title The title displayed in the info window that appears when the user clicks on the map feature. ### Type Gets the type of the feature. For LineString, this will always be "LineString". ### Visible Specifies whether the component should be visible on the screen. Value is true if the component is showing and false if hidden. ## Events ### Click Runs when the user taps on or very close to the line string. ### Drag Runs during a drag operation. ### LongClick Runs after the user long clicks on the line string but does not trigger a drag (within a given threshold). ### StartDrag Runs immediately after the user begins a drag operation but before any Drag events. ### StopDrag Runs after the user releases the LineString from a Drag operation. ## Methods ### DistanceToFeature(component mapFeature, boolean centroids) Computes the distance between the LineString and the given mapFeature. If centroids is true, the computation is done between the centroids of the two features. If false, the distance will be computed between the two features based on the closests points. If the linestring intersects the mapFeature, this method will return 0. If an error occurs, -1 will be returned. ### DistanceToPoint(number latitude, number longitude, boolean centroids) Computes the distance between the LineString and the given latitude and longitude. If centroids is true, the computation is done between the weighted midpoint of the LineString to the point. If false, the distance is computed from the closest point on the LineString to the point. If the point is on the LineString, this method will return 0. If an error occurs -1 will be returned. ### HideInfobox Hides the line string's info box if it is visible. Otherwise, this method has no effect. ### ShowInfobox Shows the info box for the line string if it is not visible. Otherwise, this method has no effect. This method can be used to show the info box even if EnableInfobox is false. # Map A two-dimensional container that renders map tiles in the background and allows for multiple Marker elements to identify points on the map. Map tiles are supplied by OpenStreetMap contributors and the United States Geological Survey. The Map component provides three utilities for manipulating its boundaries within App Inventor. First, a locking mechanism allows the map to be moved relative to other components on the Screen. Second, when unlocked, the user can pan the Map to any location. At this new location, the "Set Initial Boundary" button can be pressed to save the current Map coordinates to its properties. Lastly, if the Map is moved to a different location, for example to add Markers off-screen, then the "Reset Map to Initial Bounds" button can be used to recenter the Map at the starting location. ## Properties ### BoundingBox Sets or gets the current boundary for the map's drawn view. The value is a list of lists containing the northwest and southeast coordinates of the current view in the form ((North West) (South East)). ### CenterFromString Sets the center of the map from a given "latitude, longitude" string. This is used mainly to populate the center of the Map from the designer. See also the PanTo method to animate a change to the Map center. ### EnablePan Enables or disables the ability of the user to move the Map. ### EnableRotation Enables or disables the two-finger rotation gesture to rotate the Map. ### EnableZoom Enables or disables the two-finger pinch gesture to zoom the Map. ### Features Sets or gets a list of features present on the Map. Setting this to an empty list will clear the Map. ### Height Sets or gets the height of the Map. ### HeightPercent Sets the height of the Map to a percentage of the Screen. ### Latitude Gets the latitude of the center of the Map. To change the latitude, use the PanTo method. ### LocationSensor Uses the provided LocationSensor for user location data rather than the built-in location provider. ### Longitude Gets the longitude of the center of the Map. To change the longitude, use the PanTo method. ### MapType Sets or gets the tile layer used to draw the Map background. Defaults to Roads. Valid values are 1 (Roads), 2 (Aerial), or 3 (Terrain). Road layers are provided by OpenStreetMap and aerial and terrain layers are provided by the U.S. Geological Survey. ### ShowCompass Shows or hides a compass overlay on the Map. The compass will be rotated based on the device's orientation if a digital compass is present in hardware. ### ShowUser Shows or hides an icon indicating the user's current location on the Map. The availability and accuracy of this feature will depend on whether the user has location services enabled and which location providers are available. ### ShowZoom Shows or hides the Android native zoom buttons to allow the user to zoom the Map in or out. This can be used in place of the two-finger pinch-to-zoom gesture. ### UserLatitude Returns the user's latitude if ShowUser is enabled. ### UserLongitude Returns the user's longitude if ShowUser is enabled. ### Visible Sets or gets whether the Map is visible. ### Width Sets or gets the width of the Map. ### WidthPercent Sets the Width of the Map to a percentage of the Screen. ### ZoomLevel Gets or sets the zoom level for the Map. Valid values range from 1-20. Not all tile layers will support each zoom level at every location. For example, detailed aerial photography is likely not available for tiles in the middle of the ocean or at the poles. Highest zoom levels will likely occur in major city centers due to the amount of detailed data available. ## Events ### BoundsChange Runs when the user changes the map bounds, either by zooming, panning, or rotating the view. ### DoubleTapAtPoint(number latitude, number longitude) Runs when the user double-taps at a point on the map. latitude and longitude indicate the location of the tap event in map coordinates. This event may be followed by a ZoomChange event if zooming gestures are enabled and the map is not at the highest possible zoom level. ### FeatureClick(component feature) When a feature is clicked, the parent map will also receive a FeatureClick event. The feature parameter indicates which child feature was clicked. ### FeatureDrag(component feature) When a feature is dragged, the parent map will also receive a FeatureDrag event. The feature parameter indicates which child feature was dragged. ### FeatureLongClick(component feature) When a feature is long clicked, the parent map will also receive a FeatureLongClick event. The feature parameter indicates which child feature was long clicked. ### FeatureStartDrag(component feature) When the user begins dragging a feature, the parent map will also receive a FeatureStartDrag event. The feature parameter indicates which child feature was dragged. ### FeatureStopDrag(component feature) When the user stops dragging a feature, the parent map will also receive a FeatureStopDrag event. The feature parameter indicates which child feature was dragged. ### GotFeatures(text url, list features) The GotFeatures event runs after a call to LoadFromURL successfully reads feature description from url. The features parameter will be a list of feature descriptions that can be converted into components using the FeatureFromDescription method. ### InvalidPoint(text message) Runs when the program encounters an invalid point while processing geographical data. Points are considered invalid when the latitude or longitude for the point is outside the acceptable range (\[-90, 90] and \[-180, 180], respectively). The message parameter will contain an explanation for the error. ### LoadError(text url, number responseCode, text errorMessage) The LoadError event runs when processing a feature collection document at the given url produces an error. The responseCode parameter will contain an HTTP status code and the errorMessage parameter will contain a detailed error message. ### LongPressAtPoint(number latitude, number longitude) Runs when the user long presses a point on the map. Latitude and longitude indicate the location of the long press in map coordinates. Note that this event will not trigger if EnablePan is true as a long press causes a panning event instead. ### Ready Runs when the map has initalized and is ready for use. ### TapAtPoint(number latitude, number longitude) Runs when the user taps at a point on the map. The tapped location will be reported in map coordinates via the latitude and longitude parameters. ### ZoomChange Runs when the user changes the zoom level, such as through a pinch gesture or double-tapping. ## Methods ### CreateMarker(number latitude, number longitude) Creates a new marker on the map at the given latitude and longitude. The marker can be manipulated using the "any component" blocks. ### FeatureFromDescription(list description) Returns a new component based on the description provided. If there is an error in the properties, such as incorrectly formatted data, then the method will return text describing the error. Use the is-text? block to test whether you get an error. Feature properties converted into App Inventor properties use the following case-insentive mapping: * description → Description * draggable → Draggable * infobox → EnableInfobox * fill → FillColor * image → ImageAsset * stroke → StrokeColor * stroke-width → StrokeWidth * title → Title * visible → Visible ### LoadFromURL(text url) Call this method to load a feature collection from a URL (including file URLs). If the event is successful, the feature descriptions are passed as a list to the GotFeatures event. If it fails, the LoadError event will be run. At this time, GeoJSON is the only supported format. ### PanTo(number latitude, number longitude, number zoom) Pans the map center to the given (Latitude Longitude) and zooms to the given zoom. The movement is animated. ### Save(text path) Saves descriptions of the map contents to the given path. Currently, this will only save the features using the GeoJSON format. # Marker The Marker component indicates points on a Map, such as buildings or points of interest. Markers can be customized in many ways, such as using custom images from the app's assets. Markers can also be created dynamically using the CreateMarker method and configured using the "Any Component" blocks. ## Properties ### AnchorHorizontal Sets or gets the horizontal offset of the marker center relative to its image. Valid values are 1 (Left), 2 (Right), 3 (Center) ### AnchorVertical Sets or gets the vertical offset of the marker center relative to its image. Valid values are 1 (Top), 2 (Center), 3 (Bottom). ### Description Sets or gets the description displayed in the info window that appears when the user taps on the marker. ### Draggable The Draggable property is used to control whether or not the user can drag the marker by long-pressing and then dragging the marker to a new location. ### EnableInfobox Enables or disables the infobox window display when the user taps the marker. ### FillColor Sets or gets the color used to fill in the marker. This property only applies for markers using vector image assets, including the default icon. ### Height Sets or gets the height of the marker, in pixels. ### HeightPercent Sets the height of the marker as a percentage of the screen height. ### ImageAsset Sets or gets the image shown for the marker. If set to the empty string "", then the default marker icon will be used. ### Latitude Sets or gets the latitude of the marker, in degrees, with positive values representing north of the equator and negative values representing south of the equator. To update the latitude and longitude simultaneously, use the SetLocation method. ### Longitude Sets or gets the longitude of the marker, in degrees, with positive values representing east of the prime meridian and negative values representing west of the prime meridian. To update the latitude and longitude simultaneously, use the SetLocation method. ### StrokeColor Sets or gets the color used to outline the marker. ### StrokeWidth Sets or gets the width of the stroke used to outline the marker. ### Title Sets or gets the title displayed in the info window that appears when the user clicks on the marker. ### Type Gets the type of the feature. For Marker, this will always be "Marker". ### Visible Sets or gets whether the component should be visible on the screen. Value is true if the component is showing and false if hidden. ### Width Sets or gets the width of the marker, in pixels. ### WidthPercent Sets the width of the marker as a percentage of the screen width. ## Events ### Click Runs when the user taps on the marker. ### Drag Runs continuously while a user is dragging the marker. ### LongClick Runs when the user long-clicks on the marker but does not trigger a drag. Note that this event will only run if Draggable is false. ### StartDrag Runs before a drag operation begins. ### StopDrag Runs after a drag operation completes. ## Methods ### BearingToFeature(component mapFeature, boolean centroids) Returns the bearing from the Marker to the given mapFeature, in degrees from due north. If the centroids paremter is true, the bearing will be to the center of the map feature. Otherwise, the bearing will be computed to the point in the feature nearest the Marker. ### BearingToPoint(number latitude, number longitude, boolean centroids) Returns the bearing from the Marker to the given latitude and longitude, in degrees from due north. ### DistanceToFeature(component mapFeature, boolean centroids) Computes the distance between the Marker and the given mapFeature. If centroids is true, the computation is done between the centroids of the two features. Otherwise, the distance will be computed between the two features based on the closest points. Further, when centroids is false, this method will return 0 if the marker intersects or contains the mapFeature. If an error occurs, this method will return -1. ### DistanceToPoint(number latitude, number longitude, boolean centroids) Computes the distance between the Marker and the given latitude and longitude. If centroids is true, the distance is computed from the center of the circle to the given point. Otherwise, the distance is computed from the closest point on the marker to the given point. If an error occurs, -1 will be returned. ### HideInfobox Hides the circle's info box if it is visible. Otherwise, no action will be taken. ### SetLocation(number latitude, number longitude) Moves the center of the circle to the given latitude and longitude. This method is more efficient than setting latitude and longitude separately. ### ShowInfobox Shows the info box for the circle if it is not visible. Otherwise, no action will be taken. This method can be used to show the info box even if EnableInfobox is false. # Polygon Polygon encloses an arbitrary 2-dimensional area on a Map. Polygons can be used for drawing a perimeter, such as a campus, city, or country. Polygons begin as basic triangles. New vertices can be created by dragging the midpoint of a polygon away from the edge. Clicking on a vertex will remove the vertex, but a minimum of 3 vertices must exist at all times. ## Properties ### Description Sets or gets the description displayed in the info window that appears when the user taps on the polygon. ### Draggable Sets or gets whether or not the user can drag the polygon by long-pressing and then dragging it to a new location. ### EnableInfobox Enables or disables the infobox window display when the user taps the polygon. ### FillColor Sets or gets the color used to fill in the polygon. ### HolePoints Sets or gets the lists of points that comprise the polygon's holes. Points are given as (Latitude Longitude) pairs and should be given counterclockwise. ### HolePointsFromString Sets the list of hole points from a string in GeoJSON format. ### Points Sets or gets the list of points that comprise the polygon. Points are given as (Latitude Longitude) pairs and should be given clockwise. ### PointsFromString Sets the list of points from a string in GeoJSON format. ### StrokeColor Sets or gets the color used to outline the polygon. ### StrokeWidth Sets or gets the width of the stroke used to outline the polygon. ### Title Sets or gets the title displayed in the info window that appears when the user clicks on the map feature. ### Type Gets the type of the feature. For Polygon, this will always be "Polygon". ### Visible Sets or gets whether the component should be visible on the screen. Value is true if the component is showing and false if hidden. ## Events ### Click Runs when the user taps on the polygon. ### Drag Runs continuously while a user is dragging the polygon. ### LongClick Runs when the user long-clicks on the polygon but does not trigger a drag. Note that this event will only run if Draggable is false. ### StartDrag Runs before a drag operation begins. ### StopDrag Runs after a drag operation completes. ## Methods ### Centroid Returns the centroid of the polygon as a list of the form (Latitude Longitude). ### DistanceToFeature(component mapFeature, boolean centroid) Computes the distance between the polygon and the given mapFeature. If centroids is true, the computation is done between the centroids of the two features. Otherwise, the distance will be computed between the two features based on the closest points. Further, if centroids is false, this method will return 0 if the polygon intersects or contains the mapFeature. If an error occurs, this method will return -1. ### DistanceToPoint(number latitude, number longtitude, boolean centroid) Computes the distance between the Polygon and the given latitude and longitude. If centroids is true, the distance is computed from the center of the polygon to the given point. Otherwise, the distance is computed from the closest point on the polygon to the given point. Further, this method will return 0 if centroids is false and the point is in the polygon. If an error occurs, -1 will be returned. ### HideInfobox Hides the polygon's info box if it is visible. Otherwise, this method has no effect. ### ShowInfobox Shows the info box for the polygon if it is not visible. Otherwise, this method has no effect. This method can be used to show the info box even if EnableInfobox is false. # Rectangle Rectangles are polygons with fixed latitudes and longitudes for the north, south, east, and west boundaries. Moving a vertex of the rectangle updates the appropriate edges accordingly. ## Properties ### Description Sets or gets the description displayed in the info window that appears when the user taps on the rectangle. ### Draggable Sets or gets whether or not the user can drag a map feature by long-pressing and then dragging the rectangle to a new location. ### EastLongitude Sets or gets the longitude bounding the rectangle on the east. Range: \[-180, 180] ### EnableInfobox Enables or disables the infobox window display when the user taps the rectangle. ### FillColor Sets or gets the color used to fill in the rectangle. ### NorthLatitude Sets or gets the latitude, in degrees, bounding the rectangle on the north. Range: \[-90, 90] ### SouthLatitude Sets or gets the latitude, in degrees, bounding the rectangle on the south. Range: \[-90, 90] ### StrokeColor Sets or gets the color used to outline the rectangle. ### StrokeWidth Sets or gets the width of the stroke used to outline the rectangle. ### Title Sets or gets the title displayed in the info window that appears when the user clicks on the rectangle. ### Type Gets the type of the feature. For Rectangle, this will always be "Rectangle". ### Visible Sets or gets whether the component should be visible on the screen. Value is true if the component is showing and false if hidden. ### WestLongitude Sets or gets the longitude, in degrees, bouding the rectangle on the west. Range: \[-180, 180] ## Events ### Click Runs when the user taps on the rectangle. ### Drag Runs continuously while a user is dragging the rectangle. ### LongClick Runs when the user long-clicks on the rectangle but does not trigger a drag. Note that this event will only run if Draggable is false. ### StartDrag Runs before a drag operation begins. ### StopDrag Runs after a drag operation completes. ## Methods ### Bounds Returns the bounding box of the Rectangle in the format ((North West) (South East)). ### Center Returns the center of the Rectangle as a list of the form (Latitude Longitude). ### DistanceToFeature(component mapFeature, boolean centroids) Computes the distance between the Rectangle and the given mapFeature. If centroids is true, the computation is done between the centroids of the two features. Otherwise, the distance will be computed between the two features based on the closest points. Further, when centroids is false, this method will return 0 if the rectangle intersects or contains the mapFeature. If an error occurs, this method will return -1. ### DistanceToPoint(number latitude, number longitude, boolean centroids) Computes the distance between the Rectangle and the given latitude and longitude. If centroids is true, the distance is computed from the center of the rectangle to the given point. Otherwise, the distance is computed from the closest point on the rectangle to the given point. Further, this method will return 0 if centroids is false and the point is in the rectangle. If an error occurs, -1 will be returned. ### HideInfobox Hides the rectangle's info box if it is visible. Otherwise, this method has no effect. ### SetCenter(number latitude, number longitude) Moves the Rectangle so that it is centered on the given latitude and longitude while attempting to maintain the width and height of the Rectangle as measured from the center to the edges. ### ShowInfobox Shows the info box for the rectangle if it is not visible. Otherwise, this method has no effect. This method can be used to show the info box even if EnableInfobox is false. # Media # Camcorder A component to record a video using the device's camcorder.After the video is recorded, the name of the file on the phone containing the clip is available as an argument to the AfterRecording event. The file name can be used, for example, to set the source property of a VideoPlayer component. ## Properties none ## Events ### AfterRecording(text clip) Indicates that a video was recorded with the camera and provides the path to the stored picture. ## Methods ### RecordVideo() Records a video, then raises the AfterRecoding event. # Camera Use a camera component to take a picture on the phone. Camera is a non-visible component that takes a picture using the device's camera. After the picture is taken, the path to the file on the phone containing the picture is available as an argument to the AfterPicture event. The path can be used, for example, as the Picture property of an Image component. ## Properties none ## Methods ### TakePicture() Opens the phone's camera to allow a picture to be taken. ## Events ### AfterPicture(Text image) Called after the picture is taken. The text argument image is the path that can be used to locate the image on the phone. # ImagePicker A special-purpose button. When the user taps an image picker, the device's image gallery appears, and the user can choose an image. After an image is picked, it is saved, and the Selected property will be the name of the file where the image is stored. In order to not fill up storage, a maximum of 10 images will be stored. Picking more images will delete previous images, in order from oldest to newest. ## Properties ### BackgroundColor Returns the button's background color ### Enabled ### FontBold (designer only) ### FontItalic (designer only) ### FontSize (designer only) ### FontTypeface (designer only) ### Height ### Image Specifies the path of the button's image. If there is both an Image and a BackgroundColor, only the Image will be visible. ### Selection Path to the file containing the image that was selected. ### Shape (designer only) Specifies the button's shape (default, rounded, rectangular, oval). The shape will not be visible if an Image is being displayed. ### ShowFeedback Specifies if a visual feedback should be shown for a button that as an image as background. ### Text ### TextAlignment (designer only) ### TextColor ### Visible Specifies whether the component should be visible on the screen. Value is true if the component is showing and false if hidden. ### Width ## Events ### AfterPicking() Simple event to be raised after the picker activity returns its result and the properties have been filled in. ### BeforePicking() Simple event to raise when the component is clicked but before the picker activity is started. ### GotFocus() Indicates the cursor moved over the button so it is now possible to click it. ### LostFocus() Indicates the cursor moved away from the button so it is now no longer possible to click it. ## Methods ### Open() Opens the picker, as though the user clicked on it. # Player Multimedia component that plays audio and controls phone vibration. The name of a multimedia field is specified in the Source property, which can be set in the Designer or in the Blocks Editor. The length of time for a vibration is specified in the Blocks Editor in milliseconds (thousandths of a second). For supported audio formats, see Android Supported Media Formats. This component is best for long sound files, such as songs, while the Sound component is more efficient for short files, such as sound effects. ## Properties ### IsPlaying Reports whether the media is playing ### Loop If true, the player will loop when it plays. Setting Loop while the player is playing will affect the current playing. ### PlayOnlyInForeground If true, the player will pause playing when leaving the current screen; if false (default option), the player continues playing whenever the current screen is displaying or not. ### Source ### Volume Sets the volume to a number between 0 and 100 ## Events ### Completed() Indicates that the media has reached the end ### OtherPlayerStarted() This event is signaled when another player has started (and the current player is playing or paused, but not stopped). ## Methods ### Pause() Suspends playing the media if it is playing. ### Start() Plays the media. If it was previously paused, the playing is resumed. If it was previously stopped, it starts from the beginning. ### Stop() Stops playing the media and seeks to the beginning of the song. ### Vibrate(number milliseconds) Vibrates for specified number of milliseconds. # Sound A multimedia component that plays sound files and optionally vibrates for the number of milliseconds (thousandths of a second) specified in the Blocks Editor. The name of the sound file to play can be specified either in the Designer or in the Blocks Editor. For supported sound file formats, see Android Supported Media Formats. This Sound component is best for short sound files, such as sound effects, while the Player component is more efficient for longer sounds, such as songs. ## Properties ### MinimumInterval The minimum interval, in milliseconds, between sounds. If you play a sound, all further Play() calls will be ignored until the interval has elapsed. ### Source The name of the sound file. Only certain formats are supported. See . ## Events none ## Methods ### Pause() Pauses playing the sound if it is being played. ### Play() Plays the sound. ### Resume() Resumes playing the sound after a pause. ### Stop() Stops playing the sound if it is being played. ### Vibrate(number millisecs) Vibrates for the specified number of milliseconds. # SoundRecorder Multimedia component that records audio. ## Properties ### SavedRecording Specifies the path to the file where the recording should be stored. If this proprety is the empty string, then starting a recording will create a file in an appropriate location. If the property is not the empty string, it should specify a complete path to a file in an existing directory, including a file name with the extension .3gp. ## Events ### AfterSoundRecorded(text sound) Provides the location of the newly created sound. ### StartedRecording() Indicates that the recorder has started, and can be stopped. ### StoppedRecording() Indicates that the recorder has stopped, and can be started again. ## Methods ### Start () Starts recording. ### Stop () Stops recording. # SpeechRecognizer Use a speech recognizer component to listen to the user speaking and convert the spoken sound into text using Android's speech recognition feature. ## Properties ### Result The last text produced by the recognizer. ## Methods ### GetText() Asks the user to speak, and converts the speech to text. Signals the AfterGettingText event when the result is available. ## Events ### AfterGetting(Text result) Signaled after the recognizer has produced text. The argument is the text result that was produced. ### BeforeGettingText() Signaled just before the recognizer is called. # TextToSpeech The TextToSpeech component speaks a given text aloud. You can set the pitch and the rate of speech. You can also set a language by supplying a language code. This changes the pronounciation of words, not the actual language spoken. For example, setting the language to French and speaking English text will sound like someone speaking English (en) with a French accent. You can also specify a country by supplying a country code. This can affect the pronounciation. For example, British English (GBR) will sound different from US English (USA). Not every country code will affect every language. The languages and countries available depend on the particular device, and can be listed with the AvailableLanguages and AvailableCountries properties. ## Properties ### AvailableCountries List of the country codes available on this device for use with TextToSpeech. Check the Android developer documentation under supported languages to find the meanings of these abbreviations. ### AvailableLanguages List of the languages available on this device for use with TextToSpeech. Check the Android developer documentation under supported languages to find the meanings of these abbreviations. ### Country Country code to use for speech generation. This can affect the pronounciation. For example, British English (GBR) will sound different from US English (USA). Not every country code will affect every language. ### Language Sets the language for TextToSpeech. This changes the way that words are pronounced, not the actual language that is spoken. For example setting the language to French and speaking English text will sound like someone speaking English with a French accent. ### Pitch Sets the Pitch for TextToSpeech. The values should be between 0 and 2 where lower values lower the tone of synthesized voice and greater values raise it. ### Result ### SpeechRate Sets the SpeechRate for TextToSpeech. The values should be between 0 and 2 where lower values slow down the pitch and greater values accelerate it. ## Events ### AfterSpeaking(boolean result) Event to raise after the message is spoken. ### BeforeSpeaking() Event to raise when Speak is invoked, before the message is spoken. ## Methods ### Speak(text message) Speaks the given message. # VideoPlayer A multimedia component capable of playing videos. When the application is run, the VideoPlayer will be displayed as a rectangle on-screen. If the user touches the rectangle, controls will appear to play/pause, skip ahead, and skip backward within the video. The application can also control behavior by calling the Start, Pause, and SeekTo methods. Video files should be in 3GPP (.3gp) or MPEG-4 (.mp4) formats. For more details about legal formats, see Android Supported Media Formats. App Inventor for Android only permits video files under 1 MB and limits the total size of an application to 5 MB, not all of which is available for media (video, audio, and sound) files. If your media files are too large, you may get errors when packaging or installing your application, in which case you should reduce the number of media files or their sizes. Most video editing software, such as Windows Movie Maker and Apple iMovie, can help you decrease the size of videos by shortening them or re-encoding the video into a more compact format. You can also set the media source to a URL that points to a streaming video, but the URL must point to the video file itself, not to a program that plays the video. ## Properties ### FullScreen ### Height ### Source The "path" to the video. Usually, this will be the name of the video file, which should be added in the Designer. ### Visible Specifies whether the component should be visible on the screen. Value is true if the component is showing and false if hidden. ### Volume Sets the volume to a number between 0 and 100. Values less than 0 will be treated as 0, and values greater than 100 will be treated as 100. ### Width ## Events ### Completed() Indicates that the video has reached the end ## Methods ### GetDuration() Returns duration of the video in milliseconds. ### Pause() Pauses playback of the video. Playback can be resumed at the same location by calling the Start method. ### SeekTo(number ms) Seeks to the requested time (specified in milliseconds) in the video. If the video is paused, the frame shown will not be updated by the seek. The player can jump only to key frames in the video, so seeking to times that differ by short intervals may not actually move to different frames. ### Start() Starts playback of the video. # YandexTranslate Use this component to translate words and sentences between different languages. This component needs Internet access, as it will request translations to the Yandex.Translate service. Specify the source and target language in the form source-target using two letter language codes. So "en-es" will translate from English to Spanish while "es-ru" will translate from Spanish to Russian. If you leave out the source language, the service will attempt to detect the source language. So providing just "es" will attempt to detect the source language and translate it to Spanish. This component is powered by the Yandex translation service. See for more information, including the list of available languages and the meanings of the language codes and status codes. Note: Translation happens asynchronously in the background. When the translation is complete, the "GotTranslation" event is triggered. ## Properties ### ApiKey ## Events ### GotTranslation | Parameter | Type | | ------------ | ---- | | responseCode | text | | translation | text | Event triggered when the Yandex.Translate service returns the translated text. This event also provides a response code for error handling. If the responseCode is not 200, then something went wrong with the call, and the translation will not be available. ## Methods ### RequestTranslation | Parameter | Type | | --------------------- | ---- | | languageToTranslateTo | text | | textToTranslate | text | By providing a target language to translate to (for instance, 'es' for Spanish, 'en' for English, or 'ru' for Russian), and a word or sentence to translate, this method will request a translation to the Yandex.Translate service. Once the text is translated by the external service, the event GotTranslation will be executed. Note: Yandex.Translate will attempt to detect the source language. You can also specify prepending it to the language translation, i.e., "es-ru" will specify Spanish to Russian translation. # Connectivity # ActivityStarter A component that can launch an activity using the `StartActivity` method. Activities that can be launched include: * Starting another AppyBuilder app. To do so, first find out the *class* of the other application by downloading the source code and using a file explorer or unzip utility to find a file named "youngandroidproject/project.properties". The first line of the file will start with "main=" and be followed by the class name; for example, `main=com.appybuilder.pmathijssen.MaterialDesignColorPalette.Screen1`. To make your `ActivityStarter` launch this application, set the following properties: * `ActivityPackage` to the class name, dropping the last component (for example, `com.gmail.Bitdiddle.Ben.HelloPurr`) * `ActivityClass` to the entire class name (for example, `com.gmail.Bitdiddle.Ben.HelloPurr.Screen1`) * Starting the camera application by setting the following properties: * `Action`: `android.intent.action.MAIN` * `ActivityPackage`: `com.android.camera` * `ActivityClass`: `com.android.camera.Camera` * Performing web search. Assuming the term you want to search for is "vampire" (feel free to substitute your own choice), set the properties to: * `Action`: `android.intent.action.WEB_SEARCH` * `ExtraKey`: query * `ExtraValue`: vampire * `ActivityPackage`: `com.google.android.providers.enhancedgooglesearch` * `ActivityClass`: `com.google.android.providers.enhancedgooglesearch.Launcher` * Opening a browser to a specified web page. Assuming the page you want to go to is "[www.facebook.com](http://www.facebook.com)" (feel free to substitute your own choice), set the properties to: * `Action`: `android.intent.action.VIEW` * `DataUri`: `http://www.facebook.com` ## Properties ### Action ### ActivityClass ### ActivityPackage ### DataType ### DataUri ### ExtraKey Returns the extra key that will be passed to the activity. DEPRECATED: New code should use Extras property instead. ### ExtraValue Returns the extra value that will be passed to the activity. DEPRECATED: New code should use Extras property instead. ### Extras ### Result ### ResultName ### ResultType ### ResultUri ## Events ### ActivityCanceled Event raised if this ActivityStarter returns because the activity was canceled. ### AfterActivity | Parameter | Type | | --------- | ---- | | result | text | Event raised after this ActivityStarter returns. ## Methods ### ResolveActivity #### Returns: (text) Returns the name of the activity that corresponds to this ActivityStarter, or an empty string if no corresponding activity can be found. ### StartActivity Start the activity corresponding to this ActivityStarter. # BluetoothClient Bluetooth client component ## Properties ### AddressesAndNames The addresses and names of paired Bluetooth devices ### Available Whether Bluetooth is available on the device ### CharacterEncoding ### DelimiterByte ### Enabled Whether Bluetooth is enabled ### HighByteFirst ### IsConnected ### Secure Whether to invoke SSP (Simple Secure Pairing), which is supported on devices with Bluetooth v2.1 or higher. When working with embedded Bluetooth devices, this property may need to be set to False. For Android 2.0-2.2, this property setting will be ignored. ## Events none ## Methods ### BytesAvailableToReceive() Returns an estimate of the number of bytes that can be received without blocking ### Connect(text address) Connect to the Bluetooth device with the specified address and the Serial Port Profile (SPP). Returns true if the connection was successful. ### ConnectWithUUID(text address, text uuid) Connect to the Bluetooth device with the specified address and UUID. Returns true if the connection was successful. ### Disconnect() Disconnect from the connected Bluetooth device. ### IsDevicePaired(text address) Checks whether the Bluetooth device with the specified address is paired. ### ReceiveSigned1ByteNumber() Receive a signed 1-byte number from the connected Bluetooth device. ### ReceiveSigned2ByteNumber() Receive a signed 2-byte number from the connected Bluetooth device. ### ReceiveSigned4ByteNumber() Receive a signed 4-byte number from the connected Bluetooth device. ### ReceiveSignedBytes(number numberOfBytes) Receive multiple signed byte values from the connected Bluetooth device. If numberOfBytes is less than 0, read until a delimiter byte value is received. ### ReceiveText(number numberOfBytes) Receive text from the connected Bluetooth device. If numberOfBytes is less than 0, read until a delimiter byte value is received. ### ReceiveUnsigned1ByteNumber() Receive an unsigned 1-byte number from the connected Bluetooth device. ### ReceiveUnsigned2ByteNumber() Receive a unsigned 2-byte number from the connected Bluetooth device. ### ReceiveUnsigned4ByteNumber() Receive a unsigned 4-byte number from the connected Bluetooth device. ### ReceiveUnsignedBytes(number numberOfBytes) Receive multiple unsigned byte values from the connected Bluetooth device. If numberOfBytes is less than 0, read until a delimiter byte value is received. ### Send1ByteNumber(text number) Send a 1-byte number to the connected Bluetooth device. ### Send2ByteNumber(text number) Send a 2-byte number to the connected Bluetooth device. ### Send4ByteNumber(text number) Send a 4-byte number to the connected Bluetooth device. ### SendBytes(list list) Send a list of byte values to the connected Bluetooth device. ### SendText(text text) Send text to the connected Bluetooth device. # NetworkManager This component can be used to provide information about network. The blocks for this component are as follows: **IsConnected**: Use this block to determine if device has network connectivity. Will return true if connection is through WiFi or Mobile Network ![](/files/-L9BuTTSPGww1W_iRxn4) **IsGPSEnabled**: Use this block to determine if GPS is enabled ![](/files/-L9BuTTd-xD8wCqXXEUI) **StartGPSOptions**: If device isn't connected to GPS, you can start this block to startup the GPS options ![](/files/-L9BuTTmr_1axnUfY1un) **GetConnectionType**: Use this block to determine the connection type; e.g. WiFi or Mobile ![](/files/-L9BuTTssfIqbUwR4hF7) **IsFastConnection**: Use this block to determine if device has slow or fast connection. Useful when there is a need to download large files ![](/files/-L9BuTTzo9PmMmBq19bU) # Web Non-visible component that provides functions for HTTP GET, POST, PUT, and DELETE requests. ## Properties ### AllowCookies Whether the cookies from a response should be saved and used in subsequent requests. Cookies are only supported on Android version 2.3 or greater. ### RequestHeaders The request headers, as a list of two-element sublists. The first element of each sublist represents the request header field name. The second element of each sublist represents the request header field values, either a single value or a list containing multiple values. ### ResponseFileName The name of the file where the response should be saved. If SaveResponse is true and ResponseFileName is empty, then a new file name will be generated. ### SaveResponse Whether the response should be saved in a file. ### Url The URL for the web request. ## Events ### GotFile(text url, number responseCode, text responseType, text fileName) Event indicating that a request has finished. ### GotText(text url, number responseCode, text responseType, text responseContent) Event indicating that a request has finished. ## Methods ### BuildRequestData(list list) Converts a list of two-element sublists, representing name and value pairs, to a string formatted as application/x-www-form-urlencoded media type, suitable to pass to PostText. ### ClearCookies() Clears all cookies for this Web component. ### Delete() Performs an HTTP DELETE request using the Url property and retrieves the response. If the SaveResponse property is true, the response will be saved in a file and the GotFile event will be triggered. The ResponseFileName property can be used to specify the name of the file. If the SaveResponse property is false, the GotText event will be triggered. ### Get() Performs an HTTP GET request using the Url property and retrieves the response. If the SaveResponse property is true, the response will be saved in a file and the GotFile event will be triggered. The ResponseFileName property can be used to specify the name of the file. If the SaveResponse property is false, the GotText event will be triggered. ### HtmlTextDecode(text htmlText) Decodes the given HTML text value. HTML character entities such as &, <, >, ', and " are changed to &, <, >, ', and ". Entities such as \&#xhhhh, and \&#nnnn are changed to the appropriate characters. any JsonTextDecode(text jsonText) Decodes the given JSON encoded value to produce a corresponding AppInventor value. A JSON list \[x, y, z] decodes to a list (x y z), A JSON object with name A and value B, (denoted as A:B enclosed in curly braces) decodes to a list ((A B)), that is, a list containing the two-element list (A B). ### PostFile(text path) Performs an HTTP POST request using the Url property and data from the specified file. If the SaveResponse property is true, the response will be saved in a file and the GotFile event will be triggered. The ResponseFileName property can be used to specify the name of the file. If the SaveResponse property is false, the GotText event will be triggered. ### PostText(text text) Performs an HTTP POST request using the Url property and the specified text. The characters of the text are encoded using UTF-8 encoding. If the SaveResponse property is true, the response will be saved in a file and the GotFile event will be triggered. The responseFileName property can be used to specify the name of the file. If the SaveResponse property is false, the GotText event will be triggered. ### PostTextWithEncoding(text text, text encoding) Performs an HTTP POST request using the Url property and the specified text. The characters of the text are encoded using the given encoding. If the SaveResponse property is true, the response will be saved in a file and the GotFile event will be triggered. The ResponseFileName property can be used to specify the name of the file. If the SaveResponse property is false, the GotText event will be triggered. ### PutFile(text path) Performs an HTTP PUT request using the Url property and data from the specified file. If the SaveResponse property is true, the response will be saved in a file and the GotFile event will be triggered. The ResponseFileName property can be used to specify the name of the file. If the SaveResponse property is false, the GotText event will be triggered. ### PutText(text text) Performs an HTTP PUT request using the Url property and the specified text. The characters of the text are encoded using UTF-8 encoding. If the SaveResponse property is true, the response will be saved in a file and the GotFile event will be triggered. The responseFileName property can be used to specify the name of the file. If the SaveResponse property is false, the GotText event will be triggered. ### PutTextWithEncoding(text text, text encoding) Performs an HTTP PUT request using the Url property and the specified text. The characters of the text are encoded using the given encoding. If the SaveResponse property is true, the response will be saved in a file and the GotFile event will be triggered. The ResponseFileName property can be used to specify the name of the file. If the SaveResponse property is false, the GotText event will be triggered. ### UriEncode(text text) Encodes the given text value so that it can be used in a URL. any XMLTextDecode(text XmlText) Decodes the given XML string to produce a list structure. # WiFiManager # LegoMindStorms # Ev3ColorSensor A component that provides a high-level interface to a color sensor on a LEGO MINDSTORMS EV3 robot. ## Properties ### BluetoothClient The BluetoothClient component that should be used for communication. Must be set in the Designer ### SensorPort The sensor port that the sensor is connected to. Must be set in the Designer ### BottomOfRange The bottom of the range used for the BelowRange, WithinRange, and AboveRange events. ### TopOfRange The top of the range used for the BelowRange, WithinRange, and AboveRange events. ### BelowRangeEventEnabled Whether the BelowRange event should fire when the light level goes below the BottomOfRange. ### WithinRangeEventEnabled Whether the WithinRange event should fire when the light level goes between the BottomOfRange and the TopOfRange. ### AboveRangeEventEnabled Whether the AboveRange event should fire when the light level goes above the TopOfRange. ### ColorChangedEventEnabled Whether the ColorChanged event should fire when the Mode property is set to "color" and the detected color changes. ### Mode Get the current sensor mode. ## Methods ### GetLightLevel () It returns the light level in percentage, or -1 when the light level cannot be read. ### GetColorCode () It returns the color code from 0 to 7 corresponding to no color, black, blue, green, yellow, red, white and brown. ### GetColorName () Return the color name in one of "No Color", "Black", "Blue", "Green", "Yellow", "Red", "White", "Brown". ### SetColorMode () Enter the color detection mode. ### SetReflectedMode () Make the sensor read the light level with reflected light. ### SetAmbientMode () Make the sensor read the light level without reflected light. # Ev3Commands A component that provides a low-level interface to a LEGO MINDSTORMS EV3 robot, with functions to send system or direct commands to EV3 robots. ## Properties ### BluetoothClient The BluetoothClient component that should be used for communication. Must be set in the Designer ## Methods ### KeepAlive (number minutes) Keep the EV3 brick from shutdown for a period of time. ### GetBatteryVoltage () Get the battery voltage. ### GetBatteryCurrent () Get the battery current. ### GetOSVersion () Get the OS version on EV3. ### GetOSBuild () Get the OS build on EV3. ### GetFirmwareVersion () Get the firmware version on EV3. ### GetFirmwareBuild () Get the firmware build on EV3. ### GetHardwareVersion () Get the hardware version of EV3. # Ev3GyroSensor A component that provides a high-level interface to a gyro sensor on a LEGO MINDSTORMS EV3 robot. ## Properties ### BluetoothClient The BluetoothClient component that should be used for communication. Must be set in the Designer ### SensorPort The sensor port that the sensor is connected to. Must be set in the Designer ### Mode The sensor mode can be a text constant of either "rate" or "angle", which correspond to SetAngleMode or SetRateMode respectively. ### SensorValueChangedEventEnabled Whether the SensorValueChanged event should fire when the sensor value changed. ## Methods ### GetSensorValue () Returns the current angle or rotation speed based on current mode, or -1 if the value cannot be read from sensor. ### SetAngleMode () Measures the orientation of the sensor. ### SetRateMode () Measures the angular velocity of the sensor. # Ev3Motors A component that provides both high- and low-level interfaces to a LEGO MINDSTORMS EV3 robot, with functions that can control the motors. ## Properties ### BluetoothClient The BluetoothClient component that should be used for communication. Must be set in the Designer ### MotorPorts The motor ports that the motors are connected to. The ports are specified by a sequence of port letters. Must be set in the Designer ### WheelDiameter The diameter of the wheels attached on the motors in centimeters. ### ReverseDirection It specifies if the direction of the motors is reversed. ### EnableSpeedRegulation The robot adjusts the power to maintain the speed if speed regulation is enabled. ### StopBeforeDisconnect Whether to stop the motor before disconnecting. ### TachoCountChangedEventEnabled Whether the TachoCountChanged event should fire when the angle is changed. ## Methods ### RotateIndefinitely (number power) Start to rotate the motors. ### RotateInTachoCounts (number power, number tachoCounts, boolean useBrake) Rotate the motors in a number of tacho counts. ### RotateInDuration (number power, number milliseconds, boolean useBrake) Rotate the motors in a period of time. ### RotateInDistance (number power, number distance, boolean useBrake) Rotate the motors in a distance. ### RotateSyncIndefinitely (number power, number turnRatio) Start to rotate the motors at the same speed. ### RotateSyncInDistance (number power, number distance, number turnRatio, boolean useBrake) Rotate the motors at the same speed for a distance in cm. ### RotateSyncInDuration (number power, number milliseconds, number turnRatio, boolean useBrake) Rotate the motors at the same speed in a period of time. ### RotateSyncInTachoCounts (number power, number tachoCounts, number turnRatio, boolean useBrake) Rotate the motors at the same speed in a number of tacho counts. ### Stop (boolean useBrake) Stop the motors of the robot. ### ToggleDirection () Toggle the direction of motors. ### ResetTachoCount () Set the current tacho count to zero. ### GetTachoCount () Get the current tacho count. # Ev3Sound A component that provides a high-level interface to a LEGO MINDSTORMS EV3 robot, which provides sound functionalities. ## Properties ### BluetoothClient The BluetoothClient component that should be used for communication. Must be set in the Designer ## Methods ### PlayTone (number volume, number frequency, number milliseconds) Make the robot play a tone. ### StopSound () Stop any sound on the robot. # Ev3TouchSensor A component that provides a high-level interface to a touch sensor on a LEGO MINDSTORMS EV3 robot. ## Properties ### BluetoothClient The BluetoothClient component that should be used for communication. Must be set in the Designer ### SensorPort The sensor port that the sensor is connected to. Must be set in the Designer ### PressedEventEnabled Whether the Released event should fire when the touch sensor is pressed. ### ReleasedEventEnabled Whether the Released event should fire when the touch sensor is released. ## Methods ### IsPressed () Returns true if the touch sensor is pressed. # Ev3UI A component that provides a high-level interface to a LEGO MINDSTORMS EV3 robot, with functions to draw graphs on EV3 screen. ## Properties ### BluetoothClient The BluetoothClient component that should be used for communication. Must be set in the Designer ## Methods ### DrawPoint (number color, number x, number y) Draw a point on the screen. ### DrawIcon (number color, number x, number y, number type, number no) Draw a built-in icon on screen. ### DrawLine (number color, number x1, number y1, number x2, number y2) Draw a line on the screen. ### DrawRect (number color, number x, number y, number width, number height, boolean fill) Draw a rectangle on the screen. ### DrawCircle (number color, number x, number y, number radius, boolean fill) Draw a circle on the screen. ### FillScreen (number color) Fill the screen with a color. # Ev3UltraSonicSensor A component that provides a high-level interface to an ultrasonic sensor on a LEGO MINDSTORMS EV3 robot. ## Properties ### BluetoothClient The BluetoothClient component that should be used for communication. Must be set in the Designer ### SensorPort The sensor port that the sensor is connected to. Must be set in the Designer ### BottomOfRange The bottom of the range used for the BelowRange, WithinRange, and AboveRange events. ### TopOfRange The top of the range used for the BelowRange, WithinRange, and AboveRange events. ### BelowRangeEventEnabled Whether the BelowRange event should fire when the distance goes below the BottomOfRange. ### WithinRangeEventEnabled Whether the WithinRange event should fire when the distance goes between the BottomOfRange and the TopOfRange. ### AboveRangeEventEnabled Whether the AboveRange event should fire when the distance goes above the TopOfRange. ### Unit The distance unit, which can be either "cm" or "inch". ## Methods ### GetDistance () Returns the current distance in centimeters as a value between 0 and 254, or -1 if the distance can not be read. ### SetCmUnit () Measure the distance in centimeters. ### SetInchUnit () Measure the distance in inches. # NxtDirectCommands A component that provides a low-level interface to a LEGO MINDSTORMS NXT robot, with functions to send NXT Direct Commands ## Properties ### BluetoothClient The BluetoothClient component that should be used for communication. Must be set in the Designer ## Methods ### DeleteFile (text fileName) Delete a file on the robot. ### DownloadFile (text source, text destination) Download a file to the robot. ### GetBatteryLevel () Get the battery level for the robot. Returns the voltage in millivolts. ### GetBrickName () Get the brick name of the robot. ### GetCurrentProgramName () Get the name of currently running program on the robot. ### GetFirmwareVersion () Get the firmware and protocol version numbers for the robot as a list where the first element is the firmware version number and the second element is the protocol version number. ### GetInputValues (text sensorPortLetter) Reads the values of an input sensor on the robot. Assumes sensor type has been configured via SetInputMode. ### GetOutputState (text motorPortLetter) Reads the output state of a motor on the robot. ### KeepAlive () Keep Alive. Returns the current sleep time limit in milliseconds. ### ListFiles (text wildcard) Returns a list containing the names of matching files found on the robot. ### LsGetStatus (text sensorPortLetter) Returns the count of available bytes to read. ### LsRead (text sensorPortLetter) Reads unsigned low speed data from an input sensor on the robot. Assumes sensor type has been configured via SetInputMode. ### LsWrite (text sensorPortLetter, list list, number rxDataLength) Writes low speed data to an input sensor on the robot. Assumes sensor type has been configured via SetInputMode. ### MessageRead (number mailbox) Read a message from a mailbox (1-10) on the robot. ### MessageWrite (number mailbox, text message) Write a message to a mailbox (1-10) on the robot. ### PlaySoundFile (text fileName) Play a sound file on the robot. ### PlayTone (number frequencyHz, number durationMs) Make the robot play a tone. ### ResetInputScaledValue (text sensorPortLetter) Reset the scaled value of an input sensor on the robot. ### ResetMotorPosition (text motorPortLetter, boolean relative) Reset motor position. ### SetBrickName (text name) Set the brick name of the robot. ### SetInputMode (text sensorPortLetter, number sensorType, number sensorMode) Configure an input sensor on the robot. ### SetOutputState (text motorPortLetter, number power, number mode, number regulationMode, number turnRatio, number runState, number tachoLimit) Sets the output state of a motor on the robot. ### StartProgram (text programName) Start execution of a previously downloaded program on the robot. ### StopProgram () Stop execution of the currently running program on the robot. ### StopSoundPlayback () Stop sound playback. # NxtDrive A component that provides a high-level interface to a LEGO MINDSTORMS NXT robot, with functions that can move and turn the robot ## Properties ### BluetoothClient The BluetoothClient component that should be used for communication. Must be set in the Designer ### DriveMotors The motor ports that are used for driving. ### WheelDiameter The diameter of the wheels used for driving. ### StopBeforeDisconnect Whether to stop the drive motors before disconnecting. ## Methods ### MoveForwardIndefinitely (number power) Move the robot forward indefinitely, with the specified percentage of maximum power. ### MoveForward (number power, number distance) Move the robot forward the given distance, with the specified percentage of maximum power. ### MoveBackwardIndefinitely (number power) Move the robot backward indefinitely, with the specified percentage of maximum power. ### MoveBackward (number power, number distance) Move the robot backward the given distance, with the specified percentage of maximum power. ### Stop () Stop the drive motors of the robot. ### TurnClockwiseIndefinitely (number power) Turn the robot clockwise indefinitely, with the specified percentage of maximum power. ### TurnCounterClockwiseIndefinitely (number power) Turn the robot counterclockwise indefinitely, with the specified percentage of maximum power. # NxtLightSensor A component that provides a high-level interface to a light sensor on a LEGO MINDSTORMS NXT robot ## Properties ### BluetoothClient The BluetoothClient component that should be used for communication. Must be set in the Designer ### SensorPort The sensor port that the sensor is connected to. Must be set in the Designer ### GenerateLight Whether the light sensor should generate light. ### BottomOfRange The bottom of the range used for the BelowRange, WithinRange, and AboveRange events. ### TopOfRange The top of the range used for the BelowRange, WithinRange, and AboveRange events. ### BelowRangeEventEnabled Whether the BelowRange event should fire when the light level goes below the BottomOfRange. ### WithinRangeEventEnabled Whether the WithinRange event should fire when the light level goes between the BottomOfRange and the TopOfRange. ### AboveRangeEventEnabled Whether the AboveRange event should fire when the light level goes above the TopOfRange. ## Events ### BelowRange() Light level has gone below the range. ### WithinRange() Light level has gone within the range. ### AboveRange() Light level has gone above the range. ## Methods ### GetLightLevel () Returns the current light level as a value between 0 and 1023, or -1 if the light level can not be read. # NxtTouchSensor A component that provides a high-level interface to a touch sensor on a LEGO MINDSTORMS NXT robot ## Properties ### BluetoothClient The BluetoothClient component that should be used for communication. Must be set in the Designer ### SensorPort The sensor port that the sensor is connected to. Must be set in the Designer ### PressedEventEnabled Whether the Pressed event should fire when the touch sensor is pressed. ### ReleasedEventEnabled Whether the Released event should fire when the touch sensor is released. ## Events ### Pressed() Touch sensor has been pressed. ### Released() Touch sensor has been released. ## Methods ### IsPressed () Returns true if the touch sensor is pressed. # Ev3ColorSensor A component that provides a high-level interface to a color sensor on a LEGO MINDSTORMS EV3 robot. ## Properties ### BluetoothClient The BluetoothClient component that should be used for communication. Must be set in the Designer ### SensorPort The sensor port that the sensor is connected to. Must be set in the Designer ### BottomOfRange The bottom of the range used for the BelowRange, WithinRange, and AboveRange events. ### TopOfRange The top of the range used for the BelowRange, WithinRange, and AboveRange events. ### BelowRangeEventEnabled Whether the BelowRange event should fire when the light level goes below the BottomOfRange. ### WithinRangeEventEnabled Whether the WithinRange event should fire when the light level goes between the BottomOfRange and the TopOfRange. ### AboveRangeEventEnabled Whether the AboveRange event should fire when the light level goes above the TopOfRange. ### ColorChangedEventEnabled Whether the ColorChanged event should fire when the Mode property is set to "color" and the detected color changes. ### Mode Get the current sensor mode. ## Methods ### GetLightLevel () It returns the light level in percentage, or -1 when the light level cannot be read. ### GetColorCode () It returns the color code from 0 to 7 corresponding to no color, black, blue, green, yellow, red, white and brown. ### GetColorName () Return the color name in one of "No Color", "Black", "Blue", "Green", "Yellow", "Red", "White", "Brown". ### SetColorMode () Enter the color detection mode. ### SetReflectedMode () Make the sensor read the light level with reflected light. ### SetAmbientMode () Make the sensor read the light level without reflected light. # Storage # Airtable Airtable is a non-visible component that is a spreadsheet-database hybrid, with the features of a database but applied to a spreadsheet. Airtable can store information in a spreadsheet that's visually appealing and easy-to-use, but it's also powerful enough to act as a database that businesses can use for customer-relationship management (CRM), task management, project planning, and tracking inventory. AppyBuilder has component and blocks to access and manipulate your Airtable spreadsheets. To start using Airtable: 1. create an account [HERE](https://airtable.com/invite/r/eHgwOBFW) or simply log into Airtable. Next, create a spreadsheet using "Add a base" and then selecting "Start from scratch" ![](/files/-LMzCGNMBZt5tCbGwiry) 2\. After assigning a name, you'll be brought to a screen like below. I * Item 1 is the name of your spreadsheet (also **referred to as base-id**). * Item 2 is the name of your table **(store away this table name)** * Item 3 is the name of your view **(Store away this grid name)** * Click item 4 (+ sign) to add column. * Click on each header (item 5) to either change default column name, or delete column or add a new column. * Click on Account (item 6) to retrieve your account API Key **(store away this API Key)** ![](/files/-LMzN0MfZM7Ox9pmDc3H) Generating API key is by going to your account (item 6 above) and then generating (or viewing) an API Key: ![](/files/-LMzNgRt3q94T8Il_DJI) 4\. Finally, you'll need to retrieve an id (BaseId) that is a unique id for the selected table. Goto and then select the spreadsheet that was just created. When the page opens, scroll down to "AUTHENTICATION" and on right hand side select "node.js". Take note of this BaseID. ![](/files/-LMzHfSKQk_rLNG6SMyX) To manipulate (Add, Read, Update, Delete) data, goto your AppyBuilder project and fro Storage category, select Airtable and drop onto layout: ![](/files/-LMzPZ63nRliHuwKEuCD) ![](/files/-LMzQ7rZYxrbxTjdDXZr) \ The properties section of Airtable component will now have the properties shown below. Paste your Airtable API key and Base ID into properties above. Also change the TableName and ViewName to match your Airtable names (use defaults if you haven't changed them) ![](/files/-LMzQf1ahg6JpjUZpeWf) In blocks-editor, you can find may blocks to retrieve rows or add, delete, update row / cell data: ![](/files/-LMzSHg7ZdeNepHxmdbp) There are also event-handler blocks that are associated with the blocks. For example, to retrieve row data, you'll use Airtable.GetRow block. Once result is retrieved, it will trigger Airtable1.GotRow event-handler: ![](/files/-LMzTXDhJLXQX6zCyIyd) AppyBuilder contains may other blocks for handling single or multiple rows or columns or even single cell: ![](/files/-LMzUbKNw1jMM3JbCn8N) # File Non-visible component for storing and retrieving files. Use this component to write or read files on your device. The default behavior is to write files to the private data directory associated with your App. The Companion writes files to /sdcard/AppInventor/data for easy debugging. If the file path starts with a slash (/), then the file is created relative to /sdcard. For example, writing a file to /myFile.txt will write the file in /sdcard/myFile.txt. ## Properties none ## Events ### GotText(text text) Event indicating that the contents from the file have been read. ## Methods ### AppendToFile(text text, text fileName) Appends text to the end of a file. Creates the file if it does not already exist. See the help text under SaveFile for information about where files are written. ### Delete(text fileName) Deletes a file from storage. Prefix the filename with / to delete a specific file in the SD card (for example, /myFile.txt will delete the file /sdcard/myFile.txt). If the filename does not begin with a /, then the file located in the program's private storage will be deleted. Starting the file with // is an error because asset files cannot be deleted. ### ReadFrom(text fileName) Reads text from a file in storage. Prefix the filename with / to read from a specific file on the SD card (for example, /myFile.txt will read the file /sdcard/myFile.txt). To read assets packaged with an application (also works for the Companion) start the filename with // (two slashes). If a filename does not start with a slash, it will be read from the application's private storage (for packaged apps) and from /sdcard/AppInventor/data for the Companion. ### SaveFile(text text, text fileName) Saves text to a file. If the filename begins with a slash (/) the file is written to the sdcard (for example, writing to /myFile.txt will write the file to /sdcard/myFile.txt). If the filename does not start with a slash, it will be written in the program's private data directory where it will not be accessible to other programs on the phone. There is a special exception for the AppyBuilder Companion where these files are written to /sdcard/AppInventor/data to facilitate debugging. Note that this block will overwrite a file if it already exists. If you want to add content to a file use the append block. # FirebaseDB # FTPManager # FusionTableControl A non-visible component that communicates with Google Fusion Tables. Fusion Tables let you store, share, query and visualize data tables; this component lets you query, create, and modify these tables. This component uses the Fusion Tables API V2.0. Applications using Fusion Tables must authenticate with Google's servers. There are two ways this can be done. The first way only uses an API Key which you (the developer) obtain. With this approach end-users must also login to access a Fusion Table. The second approach is to use Service Authentication. With this approach you create credentials and a special "Service Account Email Address" which allows end-users to edit your Fusion Tables without logging in; your service account authenticates all access. ## Using the FusiontablesControl Component ### Creating Fusion Tables You will probably want to create your own Fusion Tables to experiment with as you are developing your apps. This is as easy as creating a Google document, if you are familiar with that process. Here are the steps: On the web, login to your Gmail account or any other Google service (e.g., Drive, YouTube). Navigate to Google Drive. Click the New button and navigate to More. If you do not see a Google Fusion Tables option, select Connect more apps and scroll through the page of Google services to find the Fusion Tables service and connect it to your Google Drive. You may want to view some of the examples and work through a tutorial (e.g. Pizza Party Tutorial) to learn the basics. Click the See my tables button (top right of the page). This will bring you to your own page. You should see a list of your own tables or tables that have been shared with you (possibly none). Use the Create button to create a new table. Give it some column names and save it. Click on the Share button (top right) to modify the table's permissions. ### Creating a Fusiontables App When you drag the FusiontablesControl component onto the Designer, don't forget to set its ApiKey property, which is initially blank. You should copy this from your Google Developers Console and paste it into the property field. To get an API key, follow these instructions. Go to your Google Developers Console and login if necessary. Under APIs & auth select the APIs item from the menu on the left. Choose the Fusion Tables API from the list provided and turn it on. On the left bar, select the Credentials item. Under Public API access click Create new Key, choose Android key and click Create to generate an API key. Your API key(s) will appear in the pane next to "Public API access". You must provide that key as the value for the ApiKey property in your Fusion Tables app. Once you have an API key, set the value of the Query property to a valid Fusiontables SQL query and call SendQuery to execute the query. App Inventor will send the query to the Fusion Tables server and the GotResult block will fire when a result is returned from the server. Query results will be returned in CSV format, and can be converted to list format using the "list from csv table" or "list from csv row" blocks. Note that you do not need to worry about UTF-encoding the query. But you do need to make sure the query follows the syntax described in the reference manual, which means that things like capitalization for names of columns matters, and that single quotes must be used around column names if there are spaces in them. To set up Service Authentication for your Fusion Table, follow these additional steps: In the Google APIs Console under APIs & auth select the APIs item from the menu on the left. Click the Create new Client ID button. Select the Service account option, and click Create Client ID. A file called the KeyFile (ends in extension .p12) will automatically download onto your computer. Save it in a place you will remember. Once the creation is complete, you will get a table with your Service Account information. In the designer window of App Inventor, select the FusionTablesControl. In the properties pane, add the ServiceAccountEmail (from the table on the console), upload the KeyFile, and check the UseServiceAuthentication box. Share the Fusion Table with your ServiceAccountEmail, and give it editing permissions, just like you would share any other Google Doc with an email address. ## Properties ### ApiKey Your Google API Key. See above for details on obtaining an API key. ### KeyFile Specifies the path of the private key file. This key file is used to get access to the FusionTables API through Service Authentication. ### Query The query to send to the Fusion Tables API. For legal query formats and examples, see the Fusion Tables API v2.0 reference manual. Note that you do not need to worry about UTF-encoding the query. You must make sure the query follows the syntax described in the reference manual. Note that capitalization for names of columns is necessary and that single quotes must be used around column names if there are spaces in them. ### ServiceAccountEmail The Service Account Email Address used for Service Authentication. ### UseServiceAuthentication Indicates whether a service account should be used for authentication. ## Events ### GotResult(text result) Indicates that the Fusion Tables query has finished processing and returned with a result. The result of the query will generally be returned in CSV format, and can be converted to list format using the "list from csv table" or "list from csv row" blocks. ## Methods ### DoQuery() DEPRECATED. This block is deprecated as of the end of 2012. Use SendQuery instead. ### ForgetLogin() Forget the end-user's login credentials. Has no effect on Service Authentication. ### GetRows(text tableId, text columns) Gets all the rows from a specified Fusion Table. The tableId field (required) is the id of the Fusion Table. The columns field is a comma-separated list of the columns to retrieve. ### GetRowsWithConditions(text tableId, text columns, text conditions) Gets all the rows from a Fusion Table that meet certain conditions. The tableId field (required) is the id of the Fusion Table. The columns field is a comma-separated list of the columns to retrieve. The conditions field specifies what rows to retrieve from the table (for example, the rows in which a particular column value is not null). ### InsertRow(text tableId, text columns, text values) Inserts a row into the specified Fusion Table. The tableId field is the id of the Fusion Table. The columns field is a comma-separated list of the columns into which to insert values. The values field specifies what values to insert into each column. ### SendQuery() Send the query to the Fusion Tables server. # TinyDB TinyDB is a non-visible component that stores data for an app. Apps created with App Inventor are initialized each time they run. This means that if an app sets the value of a variable and the user then quits the app, the value of that variable will not be remembered the next time the app is run. In contrast, TinyDB is a persistent data store for the app. The data stored in a TinyDB will be available each time the app is run. An example might be a game that saves the high score and retrieves it each time the game is played. Data items are strings stored under tags. To store a data item, you specify the tag it should be stored under. Subsequently, you can retrieve the data that was stored under a given tag. Each app has its own data store. There is only one data store per app. Even if you have multiple TinyDB components, they will use the same data store. To get the effect of separate stores, use different keys. You cannot use the TinyDB to pass data between two different apps on the phone, although you can use the TinyDB to share data between the different screens of a multi-screen app. When you are developing apps using the AI Companion, all the apps using that Companion will share the same TinyDB. That sharing will disappear once the apps are packaged and installed on the phone. During development you should be careful to clear the Companion app's data each time you start working on a new app. ## Properties none ## Events none ## Methods ### ClearAll() Clear the entire data store in the TinyDB. ### ClearTag(text tag) Clear the entry with the given tag. ### any GetTags() Return a list of all the tags in the TinyDB. ### any GetValue(text tag, any valueIfTagNotThere) Retrieve the value stored under the given tag. If there's no such tag, then return valueIfTagNotThere. ### StoreValue(text tag, any valueToStore) Store the value under the given tag. The storage persists on the phone when the app is restarted. # TinyWebDB Non-visible component that communicates with a Web service to store and retrieve information. See [Creating a Custom TinyWebDB Service.](http://ai2.appinventor.mit.edu/reference/other/tinywebdb.html) ## Properties ### ServiceURL The URL to the database with which the component should communicate. ## Events ### GotValue(text tagFromWebDB, any valueFromWebDB) Indicates that a GetValue server request has succeeded. ### ValueStored() Event indicating that a StoreValue server request has succeeded. ### WebServiceError(text message) Indicates that the communication with the Web service signaled an error. ## Methods ### GetValue(text tag) Sends a request to the Web service to get the value stored under the given tag. The Web service must decide what to return if there is no value stored under the tag. This component accepts whatever is returned. ### StoreValue(text tag, any valueToStore) Sends a request to the Web service to store the given value under the given tag. # Sensors # Accelerometersensor Non-visible component that can detect shaking and measure acceleration approximately in three dimensions using SI units (m/s2). The components are: * **xAccel**: 0 when the phone is at rest on a flat surface, positive when the phone is tilted to the right (i.e., its left side is raised), and negative when the phone is tilted to the left (i.e., its right size is raised). * **yAccel**: 0 when the phone is at rest on a flat surface, positive when its bottom is raised, and negative when its top is raised. * **zAccel**: Equal to -9.8 (earth's gravity in meters per second per second when the device is at rest parallel to the ground with the display facing up, 0 when perpendicular to the ground, and +9.8 when facing down. The value can also be affected by accelerating it with or against gravity. ## Properties ### Available ### Enabled ### MinimumInterval The minimum interval, in milliseconds, between phone shakes ### Sensitivity A number that encodes how sensitive the accelerometer is. The choices are: * 1 = weak * 2 = moderate * 3 = strong ### XAccel ### YAccel ### ZAccel ## Events ### AccelerationChanged | Parameter | Type | | --------- | ------ | | xAccel | number | | yAccel | number | | zAccel | number | Indicates the acceleration changed in the X, Y, and/or Z dimensions. ### Shaking Indicates the device started being shaken or continues to be shaken. # BarcodeScanner Component for using the Barcode Scanner to read a barcode ## Properties ### Result Text result of the previous scan. ### UseExternalScanner If true, AppyBuilder will look for and use an external scanning program such as "Bar Code Scanner." ## Events ### AfterScan | Parameter | Type | | --------- | ---- | | result | text | Indicates that the scanner has read a (text) result and provides the result ## Methods ### DoScan Begins a barcode scan, using the camera. When the scan is complete, the AfterScan event will be raised. --- [Next Page](/llms-full.txt/1)