Android Tutorial Guess my number - Visual designer & Events

Please first follow the installation and configuration instructions in these tutorials:
Installing Basic4android and Android SDK
Hello world - Installing Android Emulator

In this tutorial we will use the designer to create the layout. The layout includes an EditText (TextBox) and a Button.
The user needs to guess a random number. The user enters the number in the EditText view (control) and presses on the button to submit the guess.
A "toast" message will appear, indicating to the user whether the number is larger or smaller than the chosen number.

- Create a new project and save it.
- Open the designer by choosing the Designer menu.

The designer is made of two main components. The "control panel" which contains all the available properties and options, and is part of the IDE:

gmn_designer.png


and the "visual" component which runs on a device or emulator:

gmn_emulator_designer.png



The visual component, as it names suggests, displays the layout. It also allows you to move and resize the views (controls).
Changing the layout in the visual component will also change the values stored in the control panel.

Note that all the data is stored in the control panel component. Therefore nothing bad will happen if the emulator crashes or is turned off.
You can connect to it again and the layout will appear.

The first step is to connect to the device. Press Tools - Connect.
This step takes several seconds. Note that the IDE will stay connected until the IDE closes. Closing the designer will not disconnect the connection.

Use the Add View menu to add a Button, an EditText and a Label.
Change the views Text property and position them similar to this:

gmn_layout1.png


Change the Activity Drawable property to GradientDrawable to achieve the gradient effect.

Tip: When working with a small monitor you may find it convenient to check the "Top Most" option (in the upper right corner). It will cause the control panel to stay on top and not be hidden by the emulator.

Save your layout, name it Layout1.

An important concept about layouts is that there is a complete separation between your code and the layouts.
The layout is saved as a file, with ".bal" extension. Each project can have any number of such files and unless you explicitly load a layout file, it will not have any effect on your application.

Once you have saved a layout, it is automatically added to the "File manager". You can see it under the "Files" tab in the IDE right pane.

We want to catch the button's click event.
Each view has an EventName value. It is a property in the Designer, and a parameter passed to the Initialize method when adding views programmatically.
In order to catch an event you should write a Sub with the following structure (it is simpler than it sounds):
Sub <EventName>_<Event> (event parameters).

In the designer, the EventName property is set by default to the view's name.
If we want to catch the Click event of a button with EventName value of Button1 we should write the following sub signature:
Sub Button1_Click

So here is the complete code:
B4X:
Sub Process_Globals
    
End Sub

Sub Globals
    Dim MyNumber As Int
    Dim EditText1 As EditText 'will hold a reference to the view added by the designer    
End Sub

Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("Layout1") 'Load the layout file.
    MyNumber = Rnd(1, 100) 'Choose a random number between 1 to 99
End Sub

Sub Button1_Click
    If EditText1.Text > MyNumber Then
        ToastMessageShow("My number is smaller.", False)
    Else If EditText1.Text < MyNumber Then
        ToastMessageShow("My number is larger.", False)
    Else
        ToastMessageShow("Well done.", True)
    End If
    EditText1.SelectAll
End Sub
Some notes:
- Every activity module comes with an Activity object that you can use to access the activity.
- Activity.LoadLayout loads the layout file.
- There are other views that can load layout files. Like Panel and TabHost. For TabHost each tab page can be created by loading a layout file.
- In order to access a view that was added with the designer we need to declare it under Sub Globals.
- ToastMessageShow shows a short message that disappears after a short period.
Using a toast message in this case is not optimal as it may be unnoticed when the soft keyboard is open.


File is available here: http://www.b4x.com/android/files/tutorials/GuessMyNumber.zip
 

DavidRGreen

New Member
Licensed User
Longtime User
I did actually try to delete the emulator and re-create it, but that had no effect.

But interestingly, I just noticed a "Create AVD" button on the Device Definitions tab, and created a new emulator from there instead.
This time a fully functional emulator was created.

I wish I had discovered that option sooner.
 

kingapps

Member
Licensed User
Longtime User
hello

im starting to learn now to make android apps

i already read and try this guess my number apps and also downloaded
your sample and test it.

i have question why i have this message when i click guess button without entering a number: "program pause on line:25 If EditTex1.Text> MyNumber Then". my question is how to display toast message without display this error message that hang the apps, instead display the message as "pls enter your number"


regards
 

rajughade2006

Member
Licensed User
Longtime User
What about title? and APK??

Im learning to make new android apps, this IDE is excellent!

Where can i find the *.apk file to send to other phones for testing?

Also, the app is getting saved as B4Aexample every time i install it on my phone,
how do i change that?

Appreciate the help in advance
 

rajughade2006

Member
Licensed User
Longtime User
ok, i solved the application label problem under project attributes,
but i still need help with the *.apk

thanks
 

rajughade2006

Member
Licensed User
Longtime User
Thanks for the prompt reply but i am only getting the _DEBUG version of the *.apk file i want,
i read somewhere that shouldn't be used due to overheads.

What should i do then to find regular apk file?

Regards,
Raj
 

Tornet91

Member
Licensed User
Longtime User
I want to know how to change so a user can write a Number not random like this:,
B4X:
 MyNumber = Rnd(1, 100) 'Choose a random number between 1 to 99
 

Tornet91

Member
Licensed User
Longtime User
This is the number that the user needs to find. The user enters his number in the EditText.
Yeah, but I want to modife that, So the number can be change by a user. ec My friend chose a number then im going to guess the number.
 

luisftv

Member
Licensed User
Longtime User
Hi,

I've made a "Guess The Number" game similar to the one here. Now, I would like to add 2 things:

1. Statistics. In other words, the accuracy percentage, AKA "Score".
2. Instead of typing in the guessing number, I would like to have, say, two or three squares (or more), then I will tap on the square that I think has the number (or color, etc) and a sound will play, or not, to reward if my choice was correct.

On number 2 above, I made my game so that it randomly selects a number which is not being displayed. The screen is blank. When I mentally decide on the number, I tap a button (the only one on the screen) to reveal the number (which is shown on the center of the screen) and only I know if I was right or not. So, If instead I have 2 or more plane squares that hide the numbers, then I would tap on the right box (hopefully) and now the program will know if I was right or not, and at the same time, it will keep a record (percentage) of accuracy and show it on the screen.

Can some one please help?

Thanks.
 
Last edited:
Top