Stylight 360° – Fashion on your wrist

Currently Android Wear is the big thing in the world of Googles operating system for mobile devices. Having the power of Android on your wrist is like a true comming dream for developers and technology affine people.

Our IT team has always access to the latest and coolest gadgets as well as slack time to research and play around with those devices. In fact, it was only a matter of time, that the STYLIGHT Android app met the smart watches.

Using and developing for smart watches is a complete new area. Besides that the UX patterns are completly new and different to mobile phones, you have to build an app for tiny screens which are even not equal in their form factor. So what are the steps, need to be taken to extend the existing STYLIGHT Android app to deliver awesome fashion content to your wrist?

 

 

Step 1: Create a suitable navigation on the watch

Navigating on the smartwatches feels always like navigation through a huge grid, so we tried to use the same for our prototype. After the fancy loading screen, the MainActivity starts with the first level navigation, where you can choose between HOME and LOOKs. The second sections has the sub menus NEW and POPULAR.

 

 

To implement such navigation patterns, Google introduced the GridViewPager in the support library for wearables. Using this UI component is as easy as putting it into your layout and attaching an adapter to it. For simplicity reasons we decided to split the different levels of the navigation to separate acitivies.

The only difference to a conventional ViewPagerAdapter is, that you now have to serve views for two dimensions: rows and columns.

 

 

Step 2: Build a fancy layout

As already mentioned we wanted to build our STYLIGHT Wear App prototype for the different form factors of watches: rectangular and round. And because this is not enough we also had to consider the oddities of the specific models. For example the MOTO 360 isn’t completly round, but has a tiny black bar at the button, which cannot be used to display content (e.g. the page indicators).

To create layouts for different form factors, we used the WatchViewStub from the support libraries for wearables. This placeholder can determine, if it sould be layouted on round or rectangular devices and can replace itself with different layouts according to the display form.

 

 

In order to get the right references to the views of the different layouts, we had to use a OnLayoutInflatedListener on the WatchViewStub. Once the ViewStub inflated the right layout, we were able to find all the views and reference them.

 

 

For sure you have to pay attention, that you add the same components to the rectangular and the round layout, but with everything else you’re very flexible to use the advantages of both form factors. How it looks with the STYLIGHT splash screen can be seen here:

 

 

Step 3: Prepare the necessary data and synchronize it with the watch

The wearables haven’t any possibilites to connect to the outer world except to the phone to which they are assigned to. That means, that the mobile phone apps have to serve all the data, which should be presented, to the watches.

This is fairly easy when you are using the GoogleApiClient, which is a simple but mighty tool, when it comes to sync data between devices. To keep it simple in the prototype we decided, to implement a plain data model to exchange e.g. LookItems with the wearable.

 

 

After connecting to the the api client on the phone, we created a PutDataRequest with a path that describes our data we want to sync. After that, we were iterating over all items we have on the phone, and created for each a WearableLookItem, where we put all the necessary information in. Because the wearables can’t access the internet, also the images had to be preloaded on the phone. To also transfer them to the watch, we used the assets container of the request.

 

 

On the watch, we were able to get the synchronized data in the onCreate-Method of the Look-Activity. After fetching the data, we updated our GridAdapter to show the the received data.

 

 

After merging our data with the layout, we were able to present the user simplified content of the app on his wrist:

Step 4: Catch a breath and marvel

In the sum, it took us three days to extend our STYLIGHT Android app with wearable support. The most challenging part was to figure out, how Google intends to transfer data between wearables and phones. The technology is very young and documentation and blog posts about the development of apps for watches are really rare, so the most time we had to follow the try & error process.

But the result is awesome and this prototype shows, what potential is available in the wearable apps. The whole environment is designed to develop simple wearable apps very easy. Check out more images: