Weather Delta: Building Apps Across Form Factors

What is Weather Delta?

Over a year ago I launched a weather app called Weather Delta. I wanted something very simple: an app that would tell me not only the current weather in my current location, but how it would change throughout the day. Should I wear a jacket, or grab an umbrella? Most weather apps will give you an overview of today and days to come, but not give you a detailed look of today. So, with my little knowledge of Android and Java, I got started.

I published the app on Google Play and began to get feedback from people. They reported bugs and suggested things. Material design was just announced, so I tried to focus on improving the design. I came up with a custom icon set and an in-app purchase for premium features like improved Android Wear support.

Custom lightning icon

There is a watchface on Android Wear
There is a watchface on Android Wear

I soon decided to add support for Android TV. It was basically a rehash of the tablet UI. It displayed a series of cards that you could scroll through by moving up and down. Instead of a bar along the top, in mobile apps, I put that to the side of the screen and opened up a menu if the user decided to go left. I also modified the settings interface to take advantage of the larger screen, not stretching everything out.

TV layout, with an overflow bar on the left
TV layout, with an overflow bar on the left
Settings on a larger screen displays content in the center
Settings on a larger screen displays content in the center

After using it for many months on my watch, my phone, and my TV, I began to think a little more about each device and how I used it. The features I wanted for each version were similar, and the layout that I wanted was consistent. However, the way I interacted with each one was very different. After more development, I am now launching version 2.0 of Weather Delta on Google Play which improves the design and functionality.

Graphs

In the original version of the app, data is displayed in a single row table. You can see the next five hours represented by a number. Having differently colored text did an okay job of getting the point across, but I wanted a better way to visualize change over time. I added the MPAndroidChart library so the change can be shown through a line chart. Users can understand the day’s weather even quicker.

Android Wear

The watchface was nice, but I didn’t use it that often. I didn’t really use the app either. What I found most useful was having a notification that told me the current weather. The watch is designed for immediacy, not the future. If I was curious I could open the app and look at the next few hours. Due to size constraints and usage, weather data is limited to two hours ahead of now. I can see if it’ll get colder or rain soon. If I want to get more granular information, I can open up the app on my phone with a quick shortcut.

How long does it take to get my phone out of my pocket and in the app? I would estimate about thirty seconds at most. The information a watch presents shouldn’t take more than thirty seconds to understand, otherwise you’re not saving time. This means limiting information and focusing on now. Background information like a notification can be a great way to present information because the user does not have to open the app.

Android TV

On a TV, you have a similar issue with information density. Although you aren’t limited by the physical size of the screen, you are limited by the user’s distance from the screen. People may sit five or ten feet away from the device and still expect to read what’s on the screen. Everything has to be big and bold. From my use on a TV, I am not looking for the quickest information; I’m looking for a great experience. It’s usually faster to use my phone, so the question is how to make your TV experience better than what’s on a phone.

With a remote control, you don’t have the same flexibility of a touchscreen, and the way you interact has to change. In my case, it wasn’t a big change. Instead of scrolling with your finger, you scroll with the up and down of your directional pad. However, this allowed me to make my TV interface more cinematic.

What does that mean? Navigating the foreground is very simple, and the OS does not take any of the screen’s real estate. On your phone, there is your app and its action bar, the notification shade, and navigation buttons on the bottom. Your UI is designed for touchscreens, so various views can be sliding around or scrolled through. There’s a lot of actions that can be done by tapping and swiping all of these widgets. I want the background to be stark and simple so the user can understand the hierarchy. Using shadows to demonstrate the hierarchy is one of the tenants of material design.

Android TV doesn’t have a notification drawer or quick settings. Navigation buttons are done on the remote, not on-screen. Developers have the entire screen to themselves. When I was planning this visual redesign, I thought about how I could take advantage of this screen. I wanted to have something interesting displayed in the background.

After some thought, I decided on displaying your location on a map. It would be something that is both personal and vivid. The cards are displayed in front, offset to the right. The contrast to the background makes the cards stand out instead of blending in to the background. I also added a scrolling effect to the map when you scrolled through each card. This creates a more beautiful experience compared to the gray background I had originally.

Daydream

A user suggested at one point to add a daydream, Android’s equivalent of a screensaver. When the device is charging and not being used, it activates a service that runs until the user stops charging it or unlocks the screen. I created a daydream that displays the current weather, time, and user location in big text. After creating and using it the first night, I realized I needed to add a dark theme. I added three more themes as premium features.

Developing Across Screens

Android makes developing across screen sizes relatively easy. I can create several layouts of the same activity for different screen sizes using resource qualifiers. All the TV-specific layouts go in the layout-television folder. To prevent my layout from looking stretched out on a TV, I can easily change some of the attributes of my television theme.

If you wanted to simplify the process further, you could apply a style to the views in your layout. My card could be given the style daydream_card. In values/styles.xml, I could give my card the basic properties that I want. Then I create another file, values-television/styles.xml which has the same style but with attributes optimized for a TV. Now I have a single layout that will adjust its properties based on screen type, much like CSS.

In the code, I can change the functionality of my app by calling this method:

public static boolean isTV(Context mContext) {
        UiModeManager uiModeManager = (UiModeManager) mContext.getSystemService(mContext.UI_MODE_SERVICE);
        return uiModeManager.getCurrentModeType() == Configuration.UI_MODE_TYPE_TELEVISION;
    }

I can check if this app is running on a TV to deal with 5% of the use cases. I can write my television and mobile app using the same codebase.

Conclusion

Android runs on your watch, your phone, and your TV. Most of the code for the apps I write are shared across all three. However, when developing your user experience, it helps to consider the way that users, and you, interact with each device. To create truly great TV apps, it helps to consider what a TV brings and how to take advantage of a 40-inch screen.

Weather Delta v2.0 is now available on Google Play for free. The in-app purchase is not required, but it does unlock additional features like a background notification, a more elegant summary card, and more customization.

Nick Felker

Nick Felker

Nick Felker is a student Electrical & Computer Engineering student at Rowan University (C/O 2017) and the student IEEE webmaster. When he's not studying, he is a software developer for the web and Android (Felker Tech). He has several open source projects on GitHub (http://github.com/fleker)Devices: Moto G-2013 Moto G-2015, Moto 360, Google ADT-1, Nexus 7-2013 (x2), Lenovo Laptop, Custom Desktop.Although he was an intern at Google, the content of this blog is entirely independent and his own thoughts.

More Posts - Website

Follow Me:
TwitterLinkedInGoogle PlusReddit