Tiggzi Docs > Tutorials > Building Hello World Android App

Building Hello World Android App

What are we going to build?

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

Before you start

Tutorial level: Beginner

Creating New Project

  1. To start, we are going to create a new app. Enter AndroidHello for app name and click Create.
  2. Once the app builder editor is loaded, you will see the following:
  1. On Project section (on the left-hand side click on Pages->startScreen), you should see something like this:

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. On the right-hand side (in Properties-Input section) 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. Select the header and change its Caption label to Hello World, for example.
  4. Select the screen (you can click on Pages > startScreen on the left-hand side) 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:
  1. 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.
  2. Switch to Project view, then select Create New > Page.
  3. With Blank mobile screen selected, click Create Page.
  4. In Properties, rename the screen to Hello. Then, change its Theme to Blue to match the first screen.
  5. Change its label to Hello, for example.
  6. From the Components view drag and drop Grid component. The Grid component has 2 columns and 2 rows by default.
  7. In Properties change number of rows to 1.
  8. Select Label component and drag and drop it into the first grid column.
  9. Change its label to Hello (note that you can also change font color, size etc. in Properties).
  10. Then, drag and drop another Label component into the second grid column. Delete its default label.
  11. 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 (click on Event button on the bottom of the screen).
  3. From Component dropdown menu select mobilebutton (event Click is set by default).
  4. From Action dropdown select 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 Add Event button

    When the button is clicked, the value entered into the input field will be saved in local storage.

  5. Under the same event (Click), add one more Navigate to Page action.
    1. Select Hello page
    2. Click Add Event button.
  6. Open Hello screen.
  7. Click Events button, from Component select Hello screen (event Load is set by default).
  8. Add Set Property action and set the following values:
    1. Component name: enteredName
    2. Property name: Text
    3. Check: Read from local storage variable
    4. Variable: name
    5. Click Add Event button

    On screen load we are reading the value we saved into local storage on previous screen.

Testing the App

You may now test the app. Open Start page and click Test. A new browser window will open where you can try the app. Learn more about Testing Your App.

One More UI Update

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

  1. Open Hello page.
  2. Select the header, in Properties check Back Button, it should look like this:
  1. You may test the app again.

Testing the App on Android Device with Tiggzi Mobile Tester App

Install Tiggzi Mobile Tester app on your device. From this app, you can launch and test any app in your account. What you will run is a native app. You can install Tiggzi Mobile Tester from here. We recommend this approach as this is the easiest way to test and app without having to update and install it each time.

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

Exporting and Publishing the App

Once you tested the app, you can generate Android binary file and 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.

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).

Getting Native, Really.

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.

  1. Open Events view, on Click event add Run JavaScript action. Enter the following JavaScript:
alert('Device name: '+ device.name+'\nPhoneGap: '+device.phonegap+'\n Platform: '+device.platform+'\nVersion: '+device.version);
  1. Run the app again on your Android device from Tiggzi Mobile Tester.

Note: because JavaScript calls native API, this will not work in browser. You can learn more about PhoneGap device API here.