In this tutorial we are going to build a Hello World Android app and deploy/test the app on Android device. . 

1. To start, we are going to create a new app. From Apps tab, click Start Now button
2. Under App Builder, click Go
3. Under Mobile App, click Start Now 
4. Select Blank Mobile App app and click Next Step button
5. Enter AndroidHello for app name and click Create. 
6. Once the app builder editor is loaded, you will see the following:
   
   
   
   
   
   Now that we got the project, we are ready to build the UI. 

Building the UI

1. Find the Input component and drag and drop it into the phone. Delete its default Input label. 
2. Find the Button component and drag and drop into the phone. Change the button label to Hello Android. 
3. Double click on Caption label and change it to Android Hello World, for example. 
4. Select the screen (you can click outside the phone) and in Properties, pick one of the available themes. We are going to use Blue. 
5. Once you completed all the steps, the result will look like this:
   
   
   
    
6. Before we build a second page, let's make a few minor updates. First, select the screen again and in Properties changes its name to Start. Then, select the Input component and change its name to input (in Properties). We are going to refer to these elements in just a few steps and giving them names will make it simpler for us to find them. 
7. Switch to Projects view, then select Create New > Screen. 
8. With Mobile screen template selected, click OK to create a new screen
9. In Properties, rename the screen to Hello. Then, change its Theme to Blue to match the first screen. 
10. Change its label to Hello, for example.  
11. Switch to Palette view
12. From the Mobile palette, drag and drop Grid component. The Grid component has 2 columns by default. 
13. Select Label component and drag and drop it into the first grid column. 
14. Change its label to Hello.
15. Then, drag and drop another Label component into the second grid column. Delete its default label.  
16. Lastly, change the Label component name to enteredName. Once you are done, your screen should look like this:
    
    
    
    
    

Setting Up Variables, Events and Navigation

1. Open Start screen
2. Open the Events view (right-hand side) and select the button component. 
3. Select Add Event > Click. Click event will be listed in the box below. 
4. Click the + button on the right and add Set Local Storage Variable action and set the following values:
1. Variable name: name
2. Check: Bind to component
3. Target component: input
4. Property name: Text
5. Click OK
   When the button is clicked, the value entered into the input field will be saved in local storage. 
5. Under the same event (Click), press the + button on the right and select Navigate to Page action
1. Select Hello page and click OK
6. Open Hello screen
7. Select the screen, then Events > Add Event > Load.
8. Click the + button on the right and add Set Property action and set the following values
1. Component name: nameEntered
2. Property name: Text
3. Check: Read from local storage variable
4. Variable: name
5. Click OK
   On screen load we are reading the value we saved into local storage on previous screen. 

Let's make it easy to go back to our first page from the second. 

1. Open Hello page
2. Drag and drop a Button component and place it in the header, on the left side of the label
3. Change the button label to Back. It should look like this:
   
   
   
   
   
   
4. Click the button, then Events > Add Event > Click. 
5. Click + and add Navigate to Page action. 
6. Select Start page, click OK. 
7. You may test the app again.  

Testing the App on Android Device with Tiggr Mobile Tester App

Once Tiggr Mobile Tester is installed, login with your username/password. You will see a list of all mobile projects. Click the project, click Preview and after a few seconds, the app will launch. Tiggr Mobile Tester look like this: 

Once you tested the app, you can generate Android binary file install it on your phone or publish it to Android Market. 

To export as Android binary, select Export button from the top menu. You will see the following window:

There are two options for Android binary:

1. Debug binary - this app cannot be published into the Android App Market and can only be installed on your phone. 
2. Release binary - this app can be instantly published to the Android App Market. 
• Optionally, learn more about setting Android APK properties. This step is not required to generate a binary file, all default values will be used otherwise. 

If you decide to just test the app directly on your phone, one approach is to email the app to your phone. When the email is downloaded, your Android device will recognize that it's an app and offer you to install it (by clicking a button). 

You have just built (your first) real Android app. Still hesitant? Let's add some native code with PhoneGap API.   

1. Add a button on the Hello page, change its label A Fun Button. 
   
   
   
   
   
   
   
2. Select the button, then Events > Add Event > Click.
3. Add Run Custom JavaScript action. Enter the following JavaScript:
   alert('Device name: '+ device.name+'\nPhoneGap: '+device.phonegap+'\n
       Platform: '+device.platform+'\nVersion: '+device.version);
4. Run the app again on your Android device form Tiggr Mobile Tester.