Converting VB6 to Android: Die Roller - UI

In this post, we'll continue converting the dice roller VB6 application to an android app.  In the last post, we set up the framework of a basic android application, set the project name and title, and defined the custom icon.  In this one, we'll start on setting up the UI.


Android (or at least, the version of Eclipse I am using) doesn't have a wysiwyg editor like VB6 does.  Instead, you edit XML files that tell the system what your UI looks like. (Update: My install was screwed or something.  I clicked Check For Updates from the Help menu and let it do it's updates.  At one point, the Android SDK Manager popped up and needed to download stuff.  When you click "Install Packages",  click "Accept All".  If that doesn't give you the next or finish or whatever it is button, you'll need to reject some until you have just dependency-free downloads.  The manager doesn't automatically download and install the packages in the proper order.  Also, if you find that you are downloading the same things a second time, then it probably updated the manager itself, and you won't be able to do the next set of installs until after you close the SDK manager and reopen it.  I had to do that twice.  Anyway, back to the UI...)

In the Eclipse package explorer (Alt+Shift+Q, P), navigate to TMDice, res, layout in the tree.  In there, you have activity_main.xml.  An activity is basically a screen, or an action your app can take.  According to developer.android.com, An activity is a single, focused thing that the user can do. Almost all activities interact with the user, so the Activity class takes care of creating a window for you in which you can place your UI...  Sounds like a VB6 form to me.  You can spawn additional activities, but we shouldn't need that.

You should have a wysiwyg editor up now with what looks like an android screen.  The size and such will depend on what device you are set up for.  In my case, I have a galaxy tab 2 10.1, so in the dropdown at the top (which currently says "Nexus One" on my setup) I select Generic and 10.1" WXGA (Tablet).  I leave the orientation button (the one next to the screen selection) alone for now, since my VB6 dice roller generally runs up and down, not left to right.  Then I click the "Hello World" text in the middle of the screen and delete it with the "Delete" keyboard key.

From the palette at the left, under "Form Widgets", I drag "Large" onto the screen to the top left.  I align it with the left and top of the screen, and the change the text in the properties window that pops up on the right to "Enter Die Roll (% for percentile dice)".  I then go to "Text Fields" in the palette and drag "abc" (tooltip says Plain Text) over to the layout, lining it up with the left edge, and just below our prompt label.  I use the sizing handles on it to stretch it all the way to the right of the screen.  Then, back under "Form Widgets", I drag "Button" and line it up with the left edge right below the textbox, and change it's text in properties to "Evaluate".  I add another Large textview (everything in the UI is a view, and I believe that technically, our entire layout is a composite view, or something like that) for the "Total" label, and a "Plain Text" textbox for the total.  For the total textbox, I set the "Enabled" property to false.  I haven't found a "Locked" or "Readonly" property, but I may eventually.

If you click "Run", you should get an emulator loaded and it should start the app with your screen.  I created a device called "GalaxyTab2", using Google APIs, Platform 4.0, API level 14, and an ARM processor.  You set up whatever device you are trying to test with (and hopefully it is one that is already provided so you don't have to customize everything.  It actually looks like I installed a "Galaxy Tab" add on, so maybe that created the device for me).

However, I have something screwed up and my emulator never actually started completely.  So I plugged in my actual GalaxyTab.  I then went to "Debug Configurations..." on the "Run" menu.  On the "Target" tab, I selected "Always prompt to pick device".  Then when I ran the project, it prompted me to choose either a running android device or a virtual device.  I chose my tablet (the only running device) and the application started up on that.

For the default screen of our vb6 app, this is all of the UI that shows (and when I originally wrote it, that is all that ever showed) so I'm going to stop there and wire up what we have so far.  In vb6, you would simply double-click the "Evaluate" button, and you would be taken to the click event.  Unfortunately, it isn't that easy in android, but it isn't hard.  If you go back to activity_main.xml, click on the Evaluate button, and then look at the properties panel, you will find an expandable node labeled "View".  These are the properties the button inherits from the View object.  Expand that (if it isn't already) and you will find "On Click".  Set that value to "button1_click".

Now, in Package Explorer, go to TMDice/src/com.hfcsphotography.tmdice/MainActivity.java and double-click it.  That will open the code window.  MainActivity can be considered to be your application class.  It isn't really a form class, as that is a view we haven't had to access yet.  It's more like the "Program" class you get created in a new C# application.  Anyway, at the top of this class, right below the declaration, we are going to add a TAG constant.  This is suggested as a best practice by the android developer reference when using the logging methods.

public class MainActivity extends Activity {
    public final static String TAG = "TMDice";
    ...

This is how you define a constant in java.  "final" tells the compiler that nothing can change it.  "static" simply tells it that there is only one copy of the TAG variable, regardless of how many instances of MainActivity get created (instead of a new copy of TAG getting created for each one).  It could be private at this point, but we may want to use it somewhere else in the future, so we might as well make it public now.  Although I'm not trying to make this into a Java tutorial, if you haven't used it before note that types come before the name, all statements end in a semicolon, and blocks are contained in curly braces instead of VB's "If/End If" style block constructor.  "extends" is the equivalent of VB's "Inherits" keyword, and isn't a separate statement, as it is in VB (so no semicolon separator).

Finally, at the bottom of MainActivity, we are going to create button1_click.  View click handlers must be public, have a void return value (this is the equivalent of a Sub in VB6) and only have a single parameter of type View.  For now, I am just going to log a message using the Log.d routine (Log.d logs a debug message, Log.v logs a verbose message, etc.)

    ...
    public void button1_click(View v) {
        Log.d(TAG, "Button1 Clicked");
    }
}

Run the app, click the "Evaluate" button, and you should find the "Button1 Clicked" message in the LogCat window.  You can select the built-in filter "com.hfcsphotography.tmdice" to see all messages your app is generating, and you can enter "tag:TMDice" in the textbox above the log list to filter to only the messages we have programmed the app to output.

For now, that's enough.  This may be enough to get many of you well on your way to finishing the app.  In my next android post, I'll start adding useful code to the button, which will mean referencing the textbox to pull the users dice calculation, rolling the dice, and updating the total value.