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
 

addi

Member
Nice Example for us Noobs

Runs well!So for the epad android devices you can make the layout variant much greater.Very useful.Thanks
:sign0087:
 

schimanski

Well-Known Member
Licensed User
Longtime User
Hi!

I test my application on a HTC HD2 with a screen resolution of 480x800 (WVGA). The layout looks very fine on the HD2 (Device details 480x800, scale=1.5, 240dpi). I have choosed the layout-variant 480x800.

Now I want to develop the same app on the emulator, but the layout is never the same. I have tried WVGA800 and many manuall settings, but the emulator-screen is to large or to small. What's the reason for that? What I have to do to get the same resolution on the emulator and the device?
 

Standa

Member
Licensed User
Longtime User
I think I have the same problem - objects in emulator are bigger then in real WVGA device. Picture is better then thousand words... :)
 

Attachments

  • IMG00032-20101225-1814.jpg
    IMG00032-20101225-1814.jpg
    25.9 KB · Views: 1,361

klaus

Expert
Licensed User
Longtime User
What size did you set the Emulator ?
It seems that your device is 800/480 (400/240) and the emulator is 480/320 or 640/480.
Even if you set the emulator to 800/480 like the device, the physical dimensions could be different due to the different pixel size.

Best regards.
 

Standa

Member
Licensed User
Longtime User
klaus, agraham: thanks for advices. Hw.lcd.density changed from 240 to 160 solved the problem :)
 

Storm

New Member
Licensed User
Longtime User
My guess Button??

Every thing looks good but I can't get my Guess Button to work???
I'm sure it's in the button's click event I'm not getting that. Storm:BangHead:
 

FrankR

Member
Licensed User
Longtime User
Scrolling in Designer

Wow. Very impressive.

Does the designer support scrolling?

In the - very primitive - designer in Eclipse, you can only visually lay out a screen that doesn't need to scroll. Once you have to scroll in a ScrollView, you have to back down to coding the layout in XML by hand.

Does this designer render a scrolling, long screen design?
 

FrankR

Member
Licensed User
Longtime User
I'm sorry - I'm not following this yet. Could you say more? Thank you.

[Got set up last night and ran through first tutorials - wow. Great, great, great job - both on the software, and on the tutorials.]
 

Erel

B4X founder
Staff member
Licensed User
Longtime User
Each layout (including including its "variants") is saved as a file.
Usually you add this file to an activity by calling Activity.LoadLayout.
However you can also add layout files to Panels and ScrollViews (which contain a Panel).

So if you have a complicated layout that you want to add to a ScrollView, you can create a new layout and load it to the ScrollView.
You can use a larger emulator to see the complete layout if required.
 

James Moxham

Member
Licensed User
Longtime User
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:

Would you be able to explain that a bit more? See attached. I've done that and it brings up the text part of the edittext, but is it supposed to put an edittext box on the emulator screen as well?

I'm sure that is a simple step to get it to display like in the demo. Help would be most appreciated.
 

Attachments

  • image4.jpg
    image4.jpg
    95.2 KB · Views: 638
Last edited:

James Moxham

Member
Licensed User
Longtime User
Would you ever use an Android device rather than an emulator?

The emulator is a bit slow. I gave it a test connecting to the Android instead, and it did seem to run a program on the android called "B4A" with a blank black screen.

But - an error came up on Windows.

I guess it might be harder on a real android because you can't resize components so easily.
 
Top