I have been kicking this app idea around for a while now, as a way to teach my daughter about coding an Android app. For those unfamiliar with Madlibs, you basically submit a handful of words and then the words get inserted into a paragraph. Since you don’t get to see the paragraph up front, the end result can turn out to be a very funny story. As a father, this is also a very fun way to trick my fourth grade daughter into doing  some spelling and grammar!

Quick caveat: I have been college trained in Java and Android programming languages, but this is not my profession. Programming is just a hobby of mine. In other words, I’m a real hack so don’t crucify me for my programming skills!

So off I go!

Ingredients (or things you should already have set up before coding Android):

(1) Download and install Android Studio. You can get by with Eclipse, but Android Studio is much better and it’s also free.

(2) Setup your mobile device (smartphone or tablet) with developer options enabled. You will also need to switch on or enable USB debugging.

(3) Optional for now: install the Firebase Assistant in Android Studio. I’ve integrated my app with this neat toolset and will explain more in a future blog post, but you can just pass the data via intents in the app.

(4) Optional for now: setup version control or VCS such as thru Github. This makes life a lot easier for handling working code from code in development! I’ll blog about this in a future post perhaps as well.

Getting Started 

The proper way to build an app is to design your user experience first, i.e. how is the user going to get around your app. Taking a few minutes to sketch something out also helps you think a little bit about how you intend to structure the app.

UX design/sketch
UX Design/sketch

I work with really good developers, and one shared this bit of advice: before writing your classes, setup your XML layout files first. Android Studio has a simple, drag-and-drop feature for creating the layouts, and you can toggle between the design and text versions of the feature, perfect for a hack like me who needs to see how it looks while creating the layout.

Android is an object-oriented language based on Java, so once you get the screens done (the XML layouts), you can basically start wherever you want. I decided to start with what I thought would be the most difficult piece first: a screen with a lot of EditText inputs. I would pass the entries via Intent to another class, concatenate the entered words with sentence fragments, and display it as a paragraph/short story. An Intent is basically the triggering mechanism for starting a new class which launches a new screen in the app. Pressing a button in an app to launch a new screen is done by an Intent.

If you’ve done any programming, this is actually very easy. And if you haven’t done any coding, Android is an open source language which makes it easy to learn and easy to find examples on the internet. Lots and lots of examples and even YouTube videos. So at the very least, you can find some examples and copy/paste it to get started.

Hacks like me need to be careful not to make rookie mistakes such as not updating the Android Manifest, missing semi-colons or closing brackets and not selecting the right layout file for the Java classes. I spent a few hours over a few weeks getting things ready, but when I had my first version of the app ready, I got my daughter, a niece and nephew to test it out.

A HIT!

The kids spent about an hour or so playing with the app and had a blast. I only had one story setup, but I also added a feature to ‘share’ their story with their mothers (or each other by sending to their iPads). They provided some good feedback: 1) needed an easy way to clear out the words, and 2) wanted more stories! I watched them play with the app for a while and learned that they mostly typed the complete words, which achieved one of my app objectives – to get them spelling the words. At times, however, they would use the smart typing / word suggestion, and once in a while would cheat typing by using the voice recognition button. This gave me a few more thoughts on future enhancements.

I went back to work and implemented a device ShakeListener for clearing the words. Simply shake the device and the words previously entered would clear out. I setup the Story Picker screen which let’s the user pick a story and enter their name. I added more stories as well. I enter a lot of comments in my code already, which let’s me understand why I did something or where I learned something, but it’s also good coding practice. I tweaked a few places with some behavior logging for debugging and to ensure the code was functioning the way I wanted it to.

Error checking Log.e(TAG)

My app is functioning properly, and it’s integrated with a real-time database via Google Firebase.  I want to tweak this app so that it gets all the stories and sentence fragments from Firebase. But I’ll save how-to do that in a future blog post.

firebase-capture
Google Firebase (real-time database)

The Files

If you want to try building the app yourself, I’ve setup a public repository on Github. I would love to have others contribute to enhancing this project, and I’ve got a few more ideas on how I want to enhance the app.

More Screenshots

Advertisements