Hello Pal

In this tutorial we'll dive into basics by developing a simple app.

What to do?

In this sample, we'll create a simple app. We'll create a button and when the user taps the button we'll play a sound and the device will vibrate also.

Create a new project

Create a new project and name it Hello Pal or whatever you want. We'll start with a Blank Template and we won't include DevPal Android content.

For more information about creating a new DevPal project, click here.

Add an audio file

We'll need a sound file to play when the button is clicked. A sound (audio/music) file is needed to be added as a Raw Resource. So go to the Other Resources tab on the main screen and scroll down to Raw Files. When you're in the Raw Files list, you can click New Resource button and select the audio file you want to play. Then click Save All.

Alternatively, you can drag and drop the file to the Raw Files list and it will be imported to your project.

Audio Resource

Add a new screen

We need to add at least one screen. In the Activities tab, click the New blank activity button. You can give any title and description to this newly created screen. For this sample, we name it Main.

For more information about adding screens to your project, click here.

Add Screen

Designing the UI

To open the Design and NoCode window, just click the newly created screen.

Alpha version limitation

Because drag&drop UI design section is not functional in alpha version, we'll use the UI design by writing/importing XML option.

Switch to the Android XML tab and copy&paste the XML below to the text editor on this tab.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" >


   <Button
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Hello Pal"
       android:id="@+id/button_HelloPal"
       android:layout_centerInParent="true"/>

</RelativeLayout>       

Within a second, DevPal Studio will parse the xml you've pasted and it will be ready to use the UI elements in NoCode section.

UI XML

NoCode

Before going any further it's recommended to read the NoCode basics here if you haven't yet.

Now, we're done with the UI design and it's time to NoCode!

When you're still on Design and NoCode window, switch to the NoCode section by clicking the NoCode button at the top right corner.

Variables

First of all, look at the Variables list there. You'll see that there's a variable named button_HelloPal already. This is a variable automatically created when you add an UI control to the screen. Because we have add a button with the Id button_HelloPal in our design xml, DevPal Studio created a variable with the same name and same data type (Button) for you.

Now, drag this variable from the list and drop it to the NoCode Graph canvas (the empty area).

Var menu

Here you can select the Get with default event to create a NoCode item with this button's default event which is Click Event. But, this time we'll go with the longer version to understand the logic better. So, select the Get option. Below you see the button's getter NoCode item added.

Button get

Now, left click on the output pin of this getter item and drag it to an empty area and the NoCode Items List will be displayed.

Search for click or tap and select Button Events->Clicked.

Button events

Now we have a Click Event for our button. That's so simple!

Button click

Now, we need something to do when this Clicked Event is fired. So, drag from execution pin (the white output pin) of Clicked Event item to an empty area and search for "sound" or "audio" or "music" and select the Audio -> Play Audio item.

Play sound

You see that the only input pin of this Play Audio item is Audio Resource. Now, just click the little rectangle on this pin and select Select from resource option.

You'll see a list of audio resources which includes the file we've added earlier. Select this resource item by clicking it.

Select audio res

That's it! Now, this audio file will be played when the user taps the button.

Now, just for fun, let's also vibrate the phone when the button is clicked. to do so, right click on an empty area on NoCode Graph canvas and search for "vibrate" and add Vibrate device and connect it's input execution pin to the output execution pin of the Play Audio item.

When you hover your mouse over the Time pin of the Play Audio item, you'll see that this pin defines how many milliseconds to vibrate. Enter 500 to this pin's value box.

Vibrate

The last step is to compile the NoCode so DevPal Studio generates the Java code from the NoCode Graph. First click Save button and then click Compile button. If everthing goes right, the icon on the compile button will change to a smily face.

You can always see the generated code by clicking the Show generated code button.

Note

Compiling the NoCode before closing this window or running the app is very important and a must do process for generating the app correctly. So please always remember to compile your NoCodes everytime you've changed something.

Now, we're done with NoCode!

Running the app

Well.. We're ready to run the app on a device or an emulator.

Before running the app, you need to make sure that an Android device is connected to your computer or an Android emulator is running. For more information about running an app, please click here.

To run our app, just click the Run button on the Build toolbar on the main screen. This will build the app and generate the .apk file and then runs it on the connected device or an emulator.