Build your own Android app – #4 Processing button clicks and other events

Movement is slow but there has most definitely been some progress…

I’ve had a bit of a breakthrough in understanding “event-driven” interface handling – I’ve got to grips with processing button clicks to dynamically change both Text elements and Image elements of the screen.

I mentioned in a previous post that I did not have a handle on how much to try and manage in one screenful or activity… Well, I’ve seen the light, and it will be the “bleedin’ obvious” to those familiar with this sort of territory.

Basically the penny dropped that I do nothing in an Activity, except process user interactions (or system interventions, which will be taken care of by other parts of the API (onPause(), onStop() etc)…

So, if I have a TextView element on the screen and an ImageView element on the screen and a button, all I have to do – once the pre-defined Activity layout has been loaded, is fill out the function that takes care of the button click – that is what the activity is: a number of predefined elements and a number of listener functions.

I can see it’s like event-driven Windows programming, which I never got to grips with. There is no ‘while loop’ where you drive and control the screen. Rather, you passively react, via defined ‘listener’ functions, whenever a user acts. (You are further down the food chain, as it were, simply working with the existing platform infrastructure, rather than being in complete and sole control). Of course, what the list selections or button clicks actually present is what your application is all about…

The minor breakthrough achieved (pictured below) is that when the lower button is clicked (originally labelled ‘Cancelled’) a count is incremented and shown as the button label. If the top button is clicked the TextView above the buttons is changed to show the count value. For example, in the screenshot, I had clicked the lower button 12 times, which is reflected in the lower button text, and then I clicked the upper button which changed the text displayed above it.

Many ways to skin a cat

There are a couple ways to process button clicks, which are the easiest of UI elements to handle. These examples are from Google’s developer pages:

public class MyActivity extends Activity {
     protected void onCreate(Bundle icicle) {
         super.onCreate(icicle);

         setContentView(R.layout.content_layout_id);

         final Button button = (Button) findViewById(R.id.button_id);
         button.setOnClickListener(new View.OnClickListener() {
             public void onClick(View v) {
                 // Perform action on click
             }
         });
     }
 }

An alternative, which I used from the Sams book, was simply assigning a method in the XML layout file, using the android:onClick attribute. For example:

 <Button
     android:layout_height=”wrap_content”
     android:layout_width=”wrap_content”
     android:text=”@string/self_destruct”
     android:onClick=”selfDestruct” />

When a user clicks the button, the activity’s selfDestruct(View) method is called (the method must be public and accept a View as its only parameter):

 public void selfDestruct(View view) {
     // my code
 }

Cracking images

My first app is going to involve the dynamic display of images, so having cracked the dynamic setting of a simple TextView, the next target was dynamically changing an ImageView.

This was straight forward to do and I am now close to be being able to implement ‘Next’ and ‘Prev’ buttons that page through pre-defined images with some suitably explanatory text below.

Basically, my intention is to display Korean characters (Hangul) and reveal the English equivalent underneath, enabling self-testing of the characters for those learning Korean. (You have to learn the new alphabet before you can even begin learning the new words. It’s like a complete foreign language!)

In the screenshots below, different button clicks are changing the graphic and text.

Yes, I’ve a lot still to do to polish up the presentation!

Emulator fail

The progress has relieved other frustrations experienced with the Emulator. Like the old Monty Python joke, it is tempting to say ‘What has the Emulator ever provided for me?’ (except serious runtime test environments, support for screen configurations, API configurations, memory management, support for calling and texting, etc…)

It is a major piece of work, but my main frustration is twofold:

* It won’t always load new versions of the applications that have been built and downloaded via Eclipse. This can be very confusing when you are trying to incrementally try out new functionality – what you are witnessing is not what you thought you were testing. It has got to the point where I display a little version number on every screen. If it doesn’t increment (and often it doesn’t), I know the new version has not been downloaded. And yes, I know you have to wait a while.

* It won’t clear user data despite being configured to do so (‘Wipe user data on load’) – and this is despite me attempting to reset values in the app’s OnCreate() method. Strange. For example, in my little test, the Count value will carry on from the last running instance. Despite me resetting the count value in the class initialisation function, and selecting the ‘Wipe data’ option….

Resources

Finally, I just want to highlight two useful pieces of info that came out of a recent Google Developer post – Android Developers on Google+

* Take a look at the impressive Android Training micro-site – a lot to digest there

* +Android Developers is flagged as a place where developers can discuss Android matters (I mentioned previously that I was still looking for such a place. Haven’t had a chance to test this out yet (!))

Previous entries:

* Build your own Android app – #3 Getting busy with Activities

* Build your own Android app – #2 Getting connected, slowly

* Build your own Android app – #1 Hello World