Android: Square View

In Monkey Write, the character sits in a square. Initially I just hard-coded the width to be equal to the height, but I wanted them to scale with the device dimensions. Today I found an elegant way to do it, with 3 lines of code in my custom View:

public void onMeasure(int widthSpec, int heightSpec) {
  super.onMeasure(widthSpec, heightSpec);
  int size = Math.min(getMeasuredWidth(), getMeasuredHeight());
  setMeasuredDimension(size, size);
}

Since my class extends View, I can reuse all the measurement logic by calling super. After that, I take the measured width and height, find the smaller one, and use it to set the width to be the same as the height.

I made a sample project to test the SquareView. It is set to take one third of the screen width, and the easiest way to try it with different dimensions is to rotate the screen.

Source code: http://github.com/chiuki/android-square-view.

New Year Resolution: Be a public speaker

When we think of presentations, we often think of slides after slides of bullet points. A few years ago I attended a talk by Prof Lawrence Lessig, which was more like a performance than a presentation. Each slide only has one word or image on it, perfectly timed to emphasize a point.

After the eye-opening talk, I was inspired to do more public speaking myself, to practice the art of speaking. But like most good intentions, I didn't really do anything about it. And here comes the new year, when people dig out the goals of yesteryear and vow to make it happen. So I decided to try the age-old tradition of New Year Resolution. Here is my goal for 2012:

Give 5 lightning talks and 3 full-length lectures.

I am keeping a close eye on public speaking opportunities, but as a newcomer I could really use your help. Shoot me a note when you hear about an upcoming meetup or conference who is looking for speakers. What kind of topics? Glad that you asked. Here is a laundry list:

Android

I started working on Android when I was at Google, on the Google Maps for Mobile team. I can speak on a wide range of topics, from beginner tutorials to advanced tips and tricks. Here are some examples:

• Layout by xml and code
• Notification mechanisms: Toast, Dialog, status bar notification and more
• Persisting data: bundles, sqlite database, sdcard etc
• Geolocation: getting and using the device location
• Custom components: measuring, drawing, updating
• App to app communications: intents, content providers, broadcast receivers etc
• In-depth adb: testing intents, listing packages, querying system state etc
• Instrumentation testing

Career Development

During my tenure at Google I was involved with various mentoring efforts. I can share practical tips on:

• Gaining visibility while staying authentic
• Negotiation as a habit
• Getting the most of out networking

Coding for fun and profit

I code as my profession, but I also like to write small programs to play with different technologies. I can share my experience with what I call "hacking on the side".

• Hackathons tips and tricks
• Power your application with Freebase
• Offline app with HTML5 cache manifest and local storage

The media is abuzz with tips and tricks for keeping new year resolutions. Making it public seems to be the number one factor to make it stick. For my goal, it makes perfect sense. After all, I'm trying to be a public speaker. Plus, I get to enlist all of you to help! Next time you hear about an event, think of me, and let me know if you think I should speak there.

HTML5 Slides

When I prepared my Android Layout 101 talk, I looked for an easy way to put my slides online. I started with Landslide because it has a lot of options: table of contents, speaker notes, export to pdf etc. But then I hit a major limitation: I wanted to show xml files with certain words highlighted. Since Landslide generates syntax-highlighted html with pygments, there is no easy way to add custom style. This was a tie-breaker for this particular talk I need the answers highlighted within the xml context.

I looked around some more and settled with the Google HTML5 slide template. I edit the html directly, and syntax highlighting is done by javascript, so I can layer my own css style on top. I really miss the compact Markdown syntax for Landslide, but the flip side is that I lose fine styling control.

A bonus for using the Google HTML5 slide template is that it works with my wireless presenter, so I can be anywhere in the room. Very convenient.

Android Layout 101

Sarah Allen invited me to teach Android classes at Blazing Cloud, and we kicked off last night with Android Layout 101.

Presenting: Android Layout 101

We started with the Hello World app, gradually introducing more and more layout types and attributes. From time to time I showed a screenshot and asked everyone to modify the xml file to achieve the same layout.

"hmm... how I do get the buttons to go to the second line?"

By the end of the workshop we were implementing this screen:

This can be done with either LinearLayout or RelativeLayout. The LinearLayout version uses a nested horizontal LinearLayout to specify the second row, with android:gravity="right" to scoot the buttons over. One of the students, Anne, went on to experiment with setting android:layout_gravity="right" on the buttons themselves, but that did not work. We were quite baffled.

Turns out android:layout_gravity="right" is only honored by a vertical LinearLayout, not horizontal one. I guess the LinearLayout expects to put down one View after another horizontally, so if it puts the first button to the right, the second button would have nowhere to go. As a result it simply ignores the layout_gravity attributes. Still, it was rather confusing, and it is precisely the kind of nuance you only find out when you get your hands dirty.

The screenshot exercises gave everyone a chance to put theory into practice, and see how the elements interact with each other. You can try them as well. Just go to http://www.sqisland.com/talks/android-layout-101. Even if you are already familiar with the basic layout components, you may still want to check out puzzles at the end. Some of the solutions may surprise you!

It warms my heart to read a nice review

Puzzle Pal caters to puzzle aficionados who want a little help, but often people download it without reading the description, and get disappointed because it is not a game. So I am always elated to read a review of someone who appreciates it. Today I saw one in the NOOK store:

If you use an app and you like it, go write a nice review. That's what fuels developers to create even more awesome apps!

Random Hacks of Kindness: Drop2Drink

I have always been intrigued by the idea of programming for good, and tried many times to contribute to open source projects. Finally I got my acts together and attended Random Hacks of Kindness this weekend.

As my newbie, my goal was simple: observe how a charity hackathon is run, contribute whatever I can. Random Hacks of Kindess maintains a list of project proposals at the website, and we could use that as a starting point. However, the site was down during the day. Fortunately some people came with project ideas, and we heard 6 people explain their projects. We then split into groups, essentially interviewing the different projects to figure out which one was want to spend time on.

I ended up working on the project proposed by Sarah Filley, Drop2Drink. Apparently San Francisco uses potable water for fire fighting, so to ensure that there is enough drinking water during an emergency, the City of San Francisco has designated 67 Emergency Drinking Water Fire Hydrants, marked with a blue water drop. Sarah would like to use them as anchors to spread awareness for diaster preparation. 

Hydrant #33. Photo by Sarah Filley

We gathered around and brainstormed. Since the group was quite large, it took a while to hear everybody. While all the talking was happening, Christiaan was typing furiously. He was grabbing the address of the hydrants from a PDF and populating a Fusion Table with it. By the time we wrote all our ideas on the white board, he had a Google Map showing all the hydrants! Awesome. Initially I was a bit worried since there was a lot more talking than doing, but seeing the map made me feel much better.

Lunch came and went, and we split into a few subteams: website, foursquare, tropo and QR code. I was in charge of the dynamic part of the website, generating one page per hydrant. Finally I got to code! I set up an appengine instance, fetched the data from Fusion Table, and populate each page with a row. This serves as the landing page when people click on a map marker, or scan the QR code we were putting on the hydrants themselves.

It didn't take me that much time to set up the base site, but the iterations were a bit slow, mostly because I had a sore throat and I couldn't talk. That turned out to be a huge problem. Since I was there to help with a problem defined by others, communication was really important. I would say the split is 80/20 - 80% talking, 20% coding. And since I couldn't talk, I couldn't contribute as much as I'd like to. By the end of Saturday I actually lost my voice, so I stayed home on Sunday to rest. I really wished I didn't have a sore throat!

All told I had a great experience, and I would probably attend more charity hackathons, knowing that the most important aspect is co-ordination. In a way it's leadership bootcamp: you meet tons of new people, try to figure each person's skill and passion, and align everything to the project goal. It's an interesting challenge.

I'm happy to report that Team Drop2Drink has risen to the challenge beautifully: we were selected as first place winner of RHoK SF! Check us out at http://www.drop2drink.org.

Puzzle Pal now in the NOOK store

I attended the NOOK Apps Workshop at App Dev Hackathon, and decided to submit Puzzle Pal to the NOOK store just to see how it works. 

Bundle the dictionary

Puzzle Pal was first developed for the G1, which has very little on-device space for apps. This drove the decision to deliver the wordlist in a separate package for storing on SD card. But it makes the initial install a little cumbersome, requiring the user to juggle between two apps. Since the NOOK store has an approval process, I decided it is easier to have a single package with the wordlist bundled. It only adds 1MB to the package, which is not a big deal as long as you are not running the G1 :)

Test on the emulator

I did a round of testing on the emulator from the NOOK sdk. Everything works fine except the about dialog. The AlertDialog on NOOK uses a white background even if you specify a dark theme, so the white text on my about dialog was not visible. I used a WebView to link to the data source for the wordlist, setting the text color with css. With the NOOK, I had to switch AlertDialog.Builder.setMessage so the system can set both the background color and the text color. The side effect is that I could not have clickable links, which is fine. I simply spell out the url.

The many steps of app submission

Now my app is ready, I started the app submission process. Man, there are so many steps!

1. Upgrade to NOOK App Developer status

   I signed up at the Nook Developer Site to download the SDK, but to submit an app, my account needs to be upgraded to developer status. I did not understand why. Fortunately since I attended the NOOK Apps Workshop, I was granted access fairly quickly.

2. Get the developer account approved

   Next I had to fill in tons of information including my bank account and tax information. And all these needs to be approved. Why? I am not even selling anything. I just want to offer Puzzle Pal for free. Again, the saving grace was that it took only a few hours for the account to be approved.

3. Get the app metadata approved

   Finally I got to the point where I filled in the basic information for my app. They wanted a 300x300 icon. No problem, I resized mine that way. A few screenshots with the app running on the NOOK. Fair request, I captured a few. I put everything together, and BAM, the icon was rejected. Why? Because it has a transparent background. What? What's wrong with a transparent background? And oh, it cannot be white either. Why? I ended up adding a random blue gradient background to my icon. But this is so arbitrary.

   And now I wait for the metadata to be approved. That didn't take long, because some script rejected it, saying that the description "makes references to the app being for a phone". I was pretty sure I did not do that, but I checked my description text anyway. Turns out I said you can use Puzzle Pal for "phone spell", which is a standard puzzle technique to translate numbers to letters according to the dial pad, e.g. 3569377 becomes FLOWERS. I didn't have the energy to explain that, so I just removed the words "phone spell" from the description.

4. Get the apk approved

   Finally I got to upload my apk! That turned out to be the easy part. No issues whatsoever, the apk was approved within a day.

Check the NOOK store

I was waiting patiently for Puzzle Pal to show up at the NOOK store, which should take 24 to 48 hours according to the status message for my app. A week went by and nothing happened. I filed a ticket to figure out why. Someone responded within a few hours:

Hello! Yes, it's being worked on and hopefully resolved by the end of the week. Stay tuned on this. You've done everything right, we're working on our build system and your account had missing information which is on us.

Very happy that they reassured me that I've done everything right. Also very happy that I pinged them, because I had no idea that my account had missing information.

Two days after I filed the ticket, Puzzle Pal is on the NOOK store today!

I did not expect this to be such an adventure. How I miss the straightforward Android Market! Hopefully they will streamline the process so us developers can focus on producing wonderful apps instead of stressing over getting our apps approved and published.