Hello World! on Android using LiveCode

In my last post i explained about LiveCode programming language which is super easy and lets you create Apps for Android, iOS, Linux quickly without worrying the platform. Apps created through LiveCode can be ported to other platform without modifying the source code. The best thing about LiveCode is that even novice user can code and use complex features of mobile devices using English like programming language. In this post i am going to explain creating a simple Hello World! program using LiveCode and running it on any Android Mobile.

LiveCode User Interface

LiveCode Application Structure and How it Works

Before creating the app let me explain you the structure of LiveCode Application. LiveCode Application is designed in form window and in livecode you call it Stack. Each window you see in LiveCode is a stack. Palettes, dialog boxes, and standard windows are all stacks.

Each stack contains one or more sets of information called cards. Each card can have a different appearance or all the cards in a stack can look the same. By going from card to card in a stack, you change what’s being displayed in that stack’s window. You can think of a LiveCode stack as a stack of playing cards (hence the name), where you can flip through the cards, but only one card at a time is visible. A stack can have a single card or many cards.

All user interface objects (controls) are created by dragging them on to a card area.
LiveCode Application Structutre using Stack
A collection of stacks can be saved together in a single file. This file is known as a stack file. The first stack in the file is called the main stack and will be loaded automatically when your application runs.

Create Hello World! on Android using LiveCode

I hope you have downloaded the LiveCode and installed it on your system, if not then download it from here LiveCode community edition . After downloading install it , there will be minimal setting so just click next,next and Finish 🙂

Lets start creating our first Hello World! Application using LiveCode.

To do that open LiveCode and create a new MainStack by selecting File -> New Mainstack from the IDE panel. This creates an empty stack on which you will be implementing the application.

Create Android Application using LiveCode

We are going to drag a button from Tools panel to just created MainStack, but before doing that make sure you are in edit mode and to do that select the second pointer from tools panel. Now drag the button to Mainstack

Create a button using Livecode

Now if you see the stack name then it will be default name untitled 1, and it does not look good. You can change the propert by right clicking on the stack and selecting Stack Property Inspector Now change the contents of the Name field from Untitled 1 to Hello World.Same way you can change the button name by right clicking on button and selecting property inspector . Change the button name from Button to Click Me, your screen should look like below.
Property Inspector in LiveCode

Now we have done all the chnages lets write the code and to do that right click on button and then select Edit Script , It will open script editor with pre populated code for button . Add below code in the script editor

Your screen look like below screenshot
Hello World
Then select the Apply button. And close the script editor, now your IDE will be in RUN mode. Simply click on the button and you will see the message on your screen. Remember one thing till now you have not deployed your application on Android device, you are running it through IDE.
Hello World Application

How to Configure the Android Standalone Application Settings in LiveCode

To run the app on any device you need to configure the Standalone Application Settings. As you know through LiveCode you can create and standalone app and run it on different platform, so to run this newly created standalone app on android , LiveCode needs to be configured for android environment. To do that Java SDK and Android SDK should be installed on windows. You can get these from

The Java SDK:
http://www.oracle.com/technetwork/java/javase/downloads/index.html
The Android SDK:
http://developer.android.com/sdk/index.html

After you have set up your system with the Java Development Kit and Android Development Kit, it is necessary to inform LiveCode where to find them.
To configure the paths to your installed SDKs, click on Edit menu -> Preferences and in mobile support option select the Android SDK path.

Setting Android SDK in LiveCode

Now LiveCode is set for Android Application Development. To run the newly created app first set the standalone setting.

This can be done by selecting File -> Standalone Application Settings … from the IDE Panel. This launches the Standalone Application Settings dialog. Select Android as your target and ensure that the Build for Android tick box is selected. You should be able to use the default settings.

Standalone Application Setting in Livecode

You have now implemented your Android application and are ready to launch it on an Android device or Emulator, to do that select Development -> Test Target from LiveCode IDE and select your device. Based on your selection you will see the output in selected device.

So this was the basic guide on writing Hello World! program using LiveCode. I have tried my best to provide step by step instruction using snapshots, if there is any mistake please correct me by giving your input in comments.

If you are going to start building apps using LiveCode i suggest you check this LiveCode Supersite , which is having collection tutorials for you to start.

Also if you interested in submitting article like this on Coding byte then check here Join CodingByte

Related Post

Leave a Reply

Your email address will not be published. Required fields are marked *