Sunday, 14 October 2012

Detecting and Handling Button Clicks on Android

In Android apps, there are two common ways to detect and handle user clicks on UI elements such as buttons: by attaching a listener to a layout item in Java or by including an onClick attribute in the item's layout XML code. Either way, you will typically include the Java code to execute on clicks inside the Activity class hosting the layout with the clickable item in it.

Here's an overview of each approach:

Attaching the Listener in Java

Include the button in an XML layout file, assigning it an ID attribute so that you can identify it in the Java Activity code:
<Button
android:id="@+id/your_button_id"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="@string/your_button_label"
/>

The text attribute should be a string included in your res/values/strings.xml file with the specified name:
<string name="your_button_label">Click Me</string>

In the Activity using the layout, applied as follows...
setContentView(R.layout.layout_file_name);

...extend the class to implement the click listener interface:
public class YourActivity extends Activity implements OnClickListener

In your onCreate method, find a reference to the button and attach a click listener to it:
Button yourBtn = (Button)findViewById(R.id.your_button_id);
yourBtn.setOnClickListener(this);

Add the onClick method to the class:
public void onClick(View v) {

}

Inside the method, find out whether your button has been clicked:
if (v.getId()==R.id.your_button_id) {  

}   

Inside the conditional block, you can add whatever code you want to execute when users click the button.

Using the onClick Attribute

Using the onClick attribute is typically a little simpler, although there are some cases in which it isn't possible, for example where UI items are being created programmatically in Java rather than in XML layout files.

To use this approach, include your button in an XML layout file with one additional line:
<Button
android:id="@+id/your_button_id"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="@string/your_button_label"
android:onClick="buttonClicked"
/>

The onClick method should include the name of the method you want to execute when users click the button. In the Activity class, the layout is set as the content view using the same technique as the first approach. When you use the onClick attribute there is no need to implement the click listener interface, to retrieve a reference to the button or to attach an event listener to it. Instead of providing the onClick method, include the method listed as your XML attribute in the Activity class hosting the layout with the button in it:
public void buttonClicked(View view){

}

The method name must match what you included in your XML attribute. Whatever method you list as an onClick attribute will receive a view parameter representing the UI item clicked. This allows you to use the same method to handle clicks on more than one item, just check which one has been clicked using the passed view parameter. Inside the method, include whatever code you want to execute when users click the button.

The onClick attribute is available on devices running Android API 4.0 and up.

Tuesday, 9 October 2012

Developing Android Clock Widgets

I recently created a tutorial series for Mobiletuts+ on creating an Android clock widget. It was the first time I had attempted the task, so I thought I'd share a couple of the things I discovered.

Analog or Digital

First, the process for creating analog and digital clocks is totally different. For an analog clock widget, the process is pretty straightforward, in fact the most time consuming part is probably creating your clock design. The basic tasks in creating a simple analog clock widget are as follows:

  • Create a widget project, setup the properties in the Manifest and XML resource file.
  • Create images for the dial, minute and hour hands for each density.
  • Add an AnalogClock element to your layout file.
  • Extend AppWidgetProvider and receive updates.

For a digital clock widget, more programming is involved. There is a DigitalClock class/ View, but unlike the AnalogClock, the DigitalClock cannot be used within the layout for a widget, only within standard apps. This means that you need to implement the details yourself, for example using a Service or AlarmManager for updating the widget appearance - there are potentially serious performance issues.

XML Layout

The following code outlines including an AnalogClock element within your widget layout file:
<AnalogClock
android:id="@+id/AnalogClockID"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:dial="@drawable/your_dial_image"
android:hand_hour="@drawable/your_hour_hand_image"
android:hand_minute="@drawable/your_minute_hand_image"
/>
Just replace the dial, minute and hour hand references with the names of your own drawable image files. The minute and hour hands should be included as though pointing at 12 o'clock, with the hands placed centrally horizontally within the dial image.

Clicks

If you do develop an Android clock widget, you need to decide what will happen on user clicks. Users have now come to expect certain behaviour as standard on clicking clock widgets, such as launching the device alarm clock (although there is as yet no standard way of doing this). Another option is to allow the user to configure the clock, choosing between designs - this is what I did in the tutorial series.

Launcher

Although widgets are of course accessed from the device homescreen, there is invariably the issue of users attempting to launch a widget app from the device menu. To accommodate this, you can add a launcher Activity to your widget app, which contains instructions on how to add the widget.

Conclusion

If you haven't attempted any Android widgets yet, don't be afraid to have a go, they are generally not too tough to implement. For clock widgets, it's easy enough as long as you go for analog, a little trickier for digital.

Related Info


Monday, 1 October 2012

Google's Project Glass

When Project Glass hit the headlines earlier this year following Sergey Brin's demo at Google I/O I must admit I wasn't massively interested. I've never thought much about Augmented Reality/ wearable computing other than finding the concept vaguely scary.

However, following the London Olympics/ Paralympics I found myself thinking about the role of technology in sport. It looks as though sport is going to be one of the main areas developers will look to target with Project Glass apps - there are already projects under development to that end.

Although I'm not competitive, I love to swim and started to think about the possibility of smart swimming goggles. Since Project Glass runs Android, I thought about how I would love to come up with some swimming apps. I'm a big fan of swimming techniques including the Shaw Method and Total Immersion, so initial app ideas would probably focus on the quality of the swimming experience rather than exclusively on competitive/ high performance aspects. Following a cursory Google search on the topic, I was pleased to find that the company has indeed acquired a patent for swimming goggles.

Anyway, this development has basically got me excited about programming for the first time in a while. Although I love developing applications, I haven't felt too creatively stimulated recently, mainly because I don't spend enough time working on my own projects. I've got a lot to learn if I do want to target these devices, as I know virtually nothing about AR or wearable computing at the moment. I'll be posting on the topic as I learn more about it, and keep my fingers crossed that the smart goggles do become a reality.

Here are some related links:

Hacking for Fun: Programming a Wearable Android Device
Could Google Glass Change Pro Sports Forever?
Google Googles For The Open Water?
Google Acquires Swimming Goggle Patent
Wikipedia: Project Glass
Project Glass on Google+