Android, Java, Open Source

Release 0.4 – PR #1; Clockwise

Introduction

This PR is a continuation of the work detailed in Release 0.3 – PR #3; Tick,Tock,Work with the goal of improving the Clock Widget by making it able to actually update to the current time while at the same time limiting the updates to be made on app widget to conserve the battery use and optimize performance of the widget. The complete work is detailed in the PR that can be seen here. 2 new major features are also added – the ability for the user to configure the timezone that will be used to display the time in the Clock Widget and a widget preview. Therefore, there are 3 Major Features that are added in this PR: an updated Clock Widget functionality, Clock Widget configuration, and Clock Widget preview.

The Process

Updated Clock Widget functionality

Implementing the updated Clock Widget functionality is no easy task in itself – I spent 3 hours alone on this task, the majority of it spent on trying to debug the app. In the end, I ended up using Text Clock to create a digital clock UI in the widget that actually runs and doesn’t need updating by the widget manager every minute or so. Based on my understanding of Android app widgets, app widgets are basically ‘activities’ but remotely activated and controlled using their respective apps using Broadcast Senders and Receivers. Now, straight to the point – the code snippets added were small but made a very huge difference:

Updated clock_widget.xml file
clock_widget_changes

Clock Widget Configuration Screen

If you’ve ever used an Android app widget on your screen, chances are you ran into a configuration screen for that widget to setup what it will display once it’s been instantiated. That configuration screen is exactly what I managed to implement for the Clock Widget and it’s a part of the specs requested in the Issue where the Clock Widget was requested in.

First, when you want to create an app widget for your app, make sure that you know exactly if you will need a configuration screen or not. I spent roughly 2 hours trying to figure out how to even display a configuration screen using manual methods because my I didn’t think that I would need a configuration screen. As the saying goes, “Measure Twice, Cut Once”, I should’ve done that. In the end, I had to save all the code files that makes the current app widget work in a separate folder, delete the current Clock Widget-related files, and then recreate the Clock Widget this time using the Android Studio widget creation screen and actually check the ‘Configuration Screen’ option so that Android Studio would scaffold the code needed for the Configuration activity of the app, saving the developer the trouble of manually creating the files:

widget_creation_screen

Once the configuration screen for the widget has been successfully created via code scaffolding in Android Studio, the highlighted parts in the next images will show the snippets of the code that’s responsible for the app widget to recognize that a Configuration Screen is needed before a widget instance is instantiated:

AndroidManifest.xml
androidmanifest_clockwidgetconfig
clock_widget_info.xml
clock_widget_info_config

Now to the real deal which actually controls the implementation for the Configuration Screen. The Configuration Screen activity is a special type of activity – it’s temporary activity that will save data preferences for the Clock Widget that the user has selected. Think of it this way – when Amazon receives your order and begins to process it – it sends the information related to the items that you ordered to the Amazon warehouse or retailer that it will retrieve the item from. For my Clock Widget, I need to create a config screen that will allow the user to pick a timezone that they want the Clock Widget to display the time from. Therefore, a collapsible options of time zones are needed. The easiest method of implementing that is to create a Spinner in the respective XML file, manage that Spinner in the Activity file of the Configuration Screen, and load the Time Zone options from a String array of Time Zones that’s been collected using the Android TimeZone API into an ArrayAdapter so that the Spinner can use it as a resource when displaying the options. The following images will demonstrate the aforementioned steps by highlighting the appropriate snippets of code:

clock_widget_configure.xml
clock_widget_config
ClockWidgetConfigureActivity.java
clockwidgetconfig_p1

However, that’s still not the end of it – that’s only the UI part of the Configuration Screen that’s been completed. You need to remember that you need to save the preferences as data so that the app widget will be configured properly. Based on my implementation, I need to save the selected time zone by the user and seen it’s a Spinner object, I need to access the value selected  in the Spinner object, process that value as a ‘preference’ then store it into an Intent object so that the Configuration Screen activity will send that information to the app widget once it’s been destroyed, and then the app widget will retrieve the ‘preference’:

ClockWidgetConfigureActivity.java

clockwidgetconfig_p2

ClockWidget.java

clock_widget_prefs

Clock Widget Preview

This feature is implemented pretty easily – all you have to do is take a screenshot of the app widget, optimize it properly, upload it into the res/drawable folder of your Android Project, and then have the app widget’s XML info file point utilize that image as the preview for the widget:

clock_widget_info.xml
clock_widget_preview

The End Result

worldclockwidgetdemo

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s