Uncategorized

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!

Standard
Uncategorized

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 :)

Standard
Android

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

Standard
Uncategorized

My 2013 In Books

 

Thanks for keeping track of this Goodreads

Standard
Uncategorized

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.

Standard
Programming

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

Standard
Android

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.

Standard
Android

Android TextView setTextSize Gotcha

Most developers know about the different ways to specify dimensions of visual elements in Android. While setting dimensions for visual elements is usually done in “device independent pixels”, it is recommended to use “scale independent pixels” (sp) for type. The Android OS provides a setting (under the Display category on stock Android) where users can set the default minimun font size of all applications to small, normal, large or huge, an important accessibility feature for users with poor eyesight. Any text fontSize set in sp’s will scale up or down to respect this setting.

That said, you may want your textView to not scale up or down with the settings. Setting the TextView value to some sp value in the layout.xml file will do that. However if you are setting the text size in code, remember that even if you do read the dimensions from a dimen.xml file with values set in dp, the value returned cannot be used in textView.setTextSize (value) since it will interpret those values as sp’s regardless. To set dp values, use the other setTextSize method that takes an additional parameter: how to interpret the numbers being read.

TL;DR: Use setTextSize(TypedValue.COMPLEX_UNIT_DIP, xx) to set dp values to textviews

Standard
Android, iOS, Web

Standardizing Application End User Licenses

If you have installed an application lately chances are that one of the first screens you have run into is an End User License Agreement (EULA). While it may not be as gargantuan as say the iTunes one, most people don’t bother reading it, and just click on the accept. This numbness to the EULA screen has been bothering me lately. Even though I do it, I have very little idea about what I am agreeing to. I make an assumption that its fair hoping that if it goes beyond what it needs to, I would have heard about that on the internet.

As an app developer, I also worry from the other side of the fence. I want users to know exactly what they are getting and only use my apps if they are comfortable with sharing information with my apps. Additionally I am not a lawyer and I don’t really want to make my own EULA. My apps usually do things very similar to other apps and I just want my users to know that.

Whats interesting is that there is another domain developers work in that licensing comes across often: using third party libraries. However there isn’t that much confusion there anymore. There are a handful of popular licenses out there: The MIT license, the Apache license and GPL are the ones that I run into most often and I am careful to only use the appropriate licensed libraries in my software. However no such named licenses seemed to be shared across multiple end user products today.

I would love to see a few standard licenses appear that encompass certain rights and privileges. For example, an Apache Standard App License that will not hold any user data but the developer is not responsible for damages to the device or injury to user while using the app, or an Apache Social App License that says it will store my friends data and photos for a certain period of time. These would also be great as guidelines for independent developers as well on how they should hold and use end user data.

 

Standard