Big in China

I haven’t looked at the usage stats for PicScribe in a while. It does the couple of things I need it for and I am mostly content with the functionality. But with Material Design I was thinking of giving the app a refresh as well as add some features I had been meaning to as well.

Looking at the stats today was interesting though. Looking at my integrated Google Analytics data, it appears that majority of the app usage is happening in China where Google Play doesn’t even exist. I have no idea how they got the app, its free so it doesn’t matter, but still.

All the top phones are also local ones (mostly Xiaomi ).

Lesson of the day: Make sure you add analytics to your app.

Android wishlist: A different notification UI for background services

This post is first in a series around enhancements to the mobile experience I’d like to see going forward. Stay tuned for more :)

Background services are one of my favorite features on Android. As the idea of a smartphone changes from a phone to a true contextual device, background services that keep track of user context and push information to the user at appropriate times are essential. That said, the current visual treatment they get on the device to let a user know that they are running, which hasn’t changed much since the inception of Android, needs to change.

The Problem

Here is a screenshot of my notification shade right now. Note that only one of the 8 notifications I am currently seeing is actually a new event that I actually need to respond to. The flooding of my notification window with the always running service notifications numbs me to actually important actionable notification that sits there.

2014-05-10 12.59.31

 

Proposed Solution Option 1:  Notification Tabs with services tucked away

A lot of ROMs already implement Notification Tabs. Moving the background services to a separate tab so that I don’t have to look at them whenever I pull down the shade would solve the problem, though it does add some complexity to the shade.

2014-05-10 12.45.32

 

 

Proposed Solution Option 2: Collapse background service notifications into one low-priority notification:

This option may be a little better since you don’t add the cognitive complexity to the notifications shade. Simple is better usually :)

2014-05-10 13.35.20

Final thoughts:

In both the cases above developers will have to explicitly change their own notification priority to escape the “grouping”. So if a significant event occurs, their notification can be shown along with the rest of the notifications.

As notifications become increasingly more important to the mobile experience, like the coming smart watches that are all about contextual notifications sent by your phone, there is a greater need to make sure that we don’t overwhelm the user with an unorganized stream of information.

As always, feedback is most welcome :)

 

Announcing FreeFlow

This week I announced FreeFlow, a UI framework for Android, that I lead the development on at Comcast for the last 6 months or so. The project started after repeated frustrations in building truly unconventional layouts in Android. Most of the times, developers end up hacking the default Layouts in terrible ways trying to get layouts like the designers I work with come up with. Another problem with such layout nesting is that layout animations are next to impossible to get working right.

FreeFlow solves these problems by separating the layout logic from the core View containers (ViewGroups). The idea is very similar to UICollectionViews in iOS. Additionally as layouts are transitioned or data changed, the developer gets full control over the transition animations. The video below shows some of the kind of effects that FreeFlow enables:

The library was announced 3 days ago on Google+ and Twitter. Its exciting to see that in a very short time, the project has been starred over 600 times, forked over 50 times and is seeing some initial contributions back already. I also just started a Google+ community for developers looking for help or offering feedback to the the project.

Its also exciting that this is Comcast’s first Android open source project, and that we now have a process to do that. Of course that leads to some interesting comments on Twitter. The one below might be my favorite conversation thread:

freeflow

I am excited to see where FreeFlow could go in the future. Its already solving a core need in internal Comcast projects and hopefully will lead to a new breed of interactive applications on the Android platform.

I’m psyched!

International Time is Hard

Just in case anyone else is ever foolish enough to try writing a World Clock app without realizing how crazy it is, do watch this video:

I was foolish enough to try writing one (not using a third web party api) 3 years ago. Its still available on the Play Store (the source is available on Github) and works at least for the few countries I keep track of, though I am sure its buggy for others.

Wish I had seen this video 3 years ago :)

Setting up a continuous build environment for Android with AWS, Jenkins and Github

__jenkins

I have been getting more into Android testing lately, especially for a core library that we use within our team that may be shared across projects and may have different developers modifying it to suit there own needs. Not making sure that every commit doesn’t break the code for someone is a recipe for trouble (and I have been there). To avoid that as much as we can, last week I set up an continuous build environment that can run tests against the core library on every commit.

The parts:

  • AWS: There are a bunch of advantages of using AWS, but the biggest advantage is the availability of preconfigured stacks called AMIs that can be deployed immediately on an EC2 instance.
  • Jenkins: Jenkins is a pretty popular continuous integration server. Jenkins is deployed as a Java War Its used at other parts of the company too so I can seek help if I get into trouble.
  • Github: Github is a very popular code hosting service. We have been using it for a bit and its been very convenient for code that needs to be shared or open sourced.

Steps:

  • Select the Bitnami AMI from the AWS marketplace and deploy it on a new EC2 instance
    • The AMI creates a couple of users on the server: A default “bitnami” user and another “tomcat” user thats actually starts up a Tomcat server thats has the Jenkins app deployed.
    • The Bitnami AMI has also created a user named “user” with password “bitnami” that you can use to log in to Jenkins. You can at this point decide how you want new users to be added to the system and who has access permissions.
    • If the deploy works, you should be able to go to the root of your server and see a link to the running instance.
  • On the left nav, click on Configure link to set up global configuration for your install
  • Under Manage Jenkins  >  Configure System
    • Make sure Ant is set up to download if needed
    • For Android make sure “Automatically install Android if needed” is checkedScreen Shot 2014-01-05 at 5.52.36 PM
  • Create a new Job and choose “Build a free-style software project” 
  • In the configure tab, under the Source Code Management section, choose Git and paste the Github URL for the project.
    • Note this part is a little buggy. The problem that took me way too long to realize is that the Tomcat user doesn’t have Github.com in its list of known hosts. Follow the steps here to fix that.
  • On the server, as the Tomcat user, create your ssh keys that you will use to authenticate your pull requests with Github. See Github’s guide for doing that here
  • Add the public key in the account for an authorized Github user (May not be a bad idea to create a new Github user just for build purposes)
  • Log in to your Jenkins account on the web again and in add your private key against the user account in the user settings section. Conveniently, Jenkins can read ssh keys from the running server but you may need to enable that.
  • At this point the system is pretty set up. Now make sure your Android project is set up for testing by following the guide on the Android Developers site. At the end you should have 2 projects: Your main application and a test application. Both will have Ant based build.xml files that you will have Ant on Jenkins run. Commit your projects to Github.
  • You can point to the build.xml
    file you want to execute. If there is a build.xml
    at the root of the project that’ll be executed by default.
  • You should now be able to build your project explicitly at least. Go to your “Job” and click build now.
  • You can then set up automatic builds by going into your project settings on Github and go to > Service Hooks > Jenkins (Git Plugin) and pointing it to your server url.
    Screen Shot 2014-01-05 at 6.25.49 PM

Thats it. Now every time a developer pushes to Github, Github will notify Jenkins, which will pull your repo and run the appropriate build file.

Continue Reading…

My 2013 In Books

 

Thanks for keeping track of this Goodreads

Introducing Picscribe for Android

Picscribe screens

Here is a scenario: You are on a trip and taking a bunch of pictures. Usually there is some context to those pictures that you are trying to capture (what a building is for example or what this dish or drink is that you ate that day and if you liked it or not). While taking pictures is easy with our smartphones today, capturing your thoughts at the moment is much harder and so far I hadn’t found a good way of doing that. If you use a photo service like Flickr or Google Plus/Picasa, you can annotate your albums, but that usually happens much later and is a pain in the ass. Otherwise you have hard-drives full of photos that sit in some folder based albums and often elicit the “Wait, what was this?” face.

Marty-McFly-Confused-In-Back-To-The-Future-Gif

To solve this problem, last week I released Picscribe, a photo notes app available now on the Google Play Store for Android (iOS coming soon). Picscribe is a pretty simple app: It lets you take any photo in your phone and add a comment right into the EXIF metadata of the photo itself. Any comments you write are available in the photo forever and not in some proprietary database. The app itself is designed with the latest Android design guidelines in mind and while it took quite a bit of time and effort to get the animations working the way I wanted them to, I think the final result is pretty great :).

I have a bunch of features lined up for future iterations of the app (of course), but I am pretty proud of where the app is today already. If you have an Android phone or a tablet, get the app from Google Play (its FREE!) and let me know if you have any feedback or comments.

Helios: Visualizing TechCrunch data with OpenFrameworks


Helios ScreenshotOnce a quarter, the Technical and Product Team at Comcast lets all its engineers participate in a “Lab Week”, a tradition that started a while back at CIM and now encompasses a much larger Engineering group across Comcast. Goals of labweek can be different, from learning new technologies to pitching new products and services. You can read a bit more about lab week here

This quarter, I (and Gabo by coercion) decided to work on a data visualization project, mostly as an excuse to learn OpenFrameworks. For the unfamiliar, OpenFrameworks is a C++ based toolkit for “creative coding”. Its used quite a bit in a variety of fields visualizing information or just creating very rich visual imagery. For example, it was used in Tron:Legacy for creating a variety of visuals used in the movie. Being in C++, it gives you so much power and its really nice not really worrying about how many pixels/shapes you are putting on screen. The other thing thats really cool is that its cross platform and your C++ code is compiled to OpenGL based desktop apps or OpenGL ES based Android or iPhone apps.

The app itself was interesting: At my current group, Comcast Innovation Labs, we work quite a bit with startups but often I am very unfamiliar with their history. So the goal of the app was to represent the startup data and see how they compared with their competitors.  We never finished our final vision, but the app as it stands currently lets you plug in names of companies and the app will render them on the stage with circles representing the size of their funding on a timeline of when they did close their funding rounds as well as any news stories that mentioned them in that timeframe. You can see a video of the app in use below:

 

 

We went from barely remembering C++ and reading up on OF to the project shown below in 4 days. The code is not super clean and there are is also a lot of code that we ended up not using thats in the codebase, but if its on GitHub if you want to take a look. And if you want to install the app just to check it out, you can download it from here

Android: Implementing Touch Feedback on Views

One of the most commonly overlooked parts of building Android applications is touch feedback. While some views like Buttons have touch feedback built into them, thats not the case when using custom views.

The Android Design Guidelines explicitly talk about the UX part of touch feedback and it was also discussed a while back on the Android Design In Action YouTube series:

The problem is that there are no clean standard hooks in the Android framework to implement these. The only implementations I have found have been:

  • FrameLayouts have a foreground property that can be used
  • ViewGroups like the ListView that extend the AbsListView class have a property called “drawSelectorOnTop” that can be used to draw the background selector on top of your custom item renderer.

Given the lack of default apis in most of the common layouts, one approach that you jump to (like I did) was to listen to touch events and change background on touch down  and up. This is hard to implement perfectly because a touch event can be canceled in a bunch of ways. For example, a user may be swiping across your view and you may still end up showing touch feedback which would be wrong. In our app, we often ended up with views stuck in an incorrect state.

The Android framework’s selector system (or rather the StateListDrawable class) handles a bunch of these situations appropriately already. The best approach therefore is to create a selector and the apply that to your view. Setting that selector as your view’s background though will draw that under all the views on top which doesn’t work either. To fix that, the best approach is overriding the dispatchDraw method and then after calling super, calling your new drawable’s draw method within the bounds of the View, something like:

@Override
protected void dispatchDraw(Canvas canvas){
super.dispatchDraw(canvas);
touchFeedbackDrawable.setBounds(0,0,getWidth(), getHeight());
touchFeedbackDrawable.draw(canvas);
}

The one gotcha here is that the base ViewGroup does not invalidate custom drawable invalidated automatically, so this is something you have to do by overriding a different method:

@Override
protected void drawableStateChanged() {
if (touchFeedbackDrawable != null) {
touchFeedbackDrawable.setState(getDrawableState());
invalidate();
}
super.drawableStateChanged();
}

Props to Rich Ratmansky for solving this quirk.

The final result looks something like this:

touch_feedback

I have created a sample project to show the experience. You can find the project on Github. This works well, but as you can see it does require a custom ViewGroup class. If anyone from the Android framework team is reading this, having a “touchFeedbackDrawable” property would probably be really useful extension to the framework.

[Update] Had an interesting discussion on this on Google+, whether touch feedback should be shown in a view’s background or foreground. The consensus seems to be background as long as the background is fairly prominent/visible. For opaque content like say images, foreground feedback is pretty much required.