Web Development: Google I/O 2017 Aftermath: What's New for Android Wear?

Google I/O 2017 Aftermath: What's New for Android Wear?

In this series of tips, we’ve been taking a closer look at some of the new Android features and tools announced at this year’s Google I/O.

In this post, we’re going to be focusing on Android Wear.

Google has been providing Android Wear UI components via a dedicated Wearable Support Library for a while now, but this is all about to change!

At this year’s event, Google announced that the various components that make up the Wearable Support Library are going to be deprecated, merged, or migrated into the Android Support Library. In this article, we’ll be taking a look at which components are going to be merged, moved and removed, and how you can start using the Android Support Library’s new Wear module today.

We’ll also be looking at some new tools that are designed to make it easier to work with Android Wear’s Complications API.

New Android Wear UI Library

At this year’s Google I/O, the Android Wear team announced that the bulk of the Wearable Support Library is moving to the Android Support Library. The Wear-specific components will form the basis of a new support-wear module, similar to other modules in the Android Support Library, such as support-recylerview and support-design.

According to the Android Wear sessions at Google I/O, we can expect this new Wear module to graduate out of beta at the same time as Android O officially launches.

However, not all components from the Wearable Support Library will be making the move to the Android Support Library. Google also announced that some components from the Wearable Support Library will be:

Merged. Components that are applicable to both wearable and handheld devices will be merged into either the Android framework or more generic support modules. Components that are due to be merged include CircledImageView, DelayedConfirmationView, and ActionButton.
Deprecated. Google is going to deprecate the Android Wear UI components associated with design patterns that haven’t proven popular with Android Wear users. Specifically, Google will remove the two-dimensional spatial model that allowed Android Wear users to move horizontally and vertically, and will replace it with a vertical LinearLayout. All of the classes associated with the two-dimensional spatial model will be deprecated, including GridViewPager, action buttons, and action layouts.

Although this migration is an ongoing process, Google has already integrated some Android Wear components into version 26.0.0 Beta1 of the Android Support Library.

BoxInsetLayout: This is a screen shape-aware FrameLayout that can help you design a single layout that works for both square and round watch faces. When your layout is displayed on a round screen, a BoxInsetLayout will box all its children into an imaginary square in the center of the circular screen. You can specify how your UI elements will be positioned in this center square, using the layout_box attribute. When your app is displayed on a square screen, Android ignores the layout_box attribute and uses a window inset of zero, so your views will be positioned as though they’re inside a regular FrameLayout.
SwipeDismissFrameLayout: This is a layout that you can use to implement custom interactions for your Views and fragments. You’ll generally use SwipeDismissFrameLayout to enable users to dismiss views and fragments by swiping onscreen, essentially replicating the functionality of the Back button found on Android smartphones and tablets.
WearableRecyclerView: This is a Wearable-specific implementation of RecyclerView that helps you design more effective layouts for round displays. The WearableRecyclerView makes more effective use of the curvature of a round screen, and is typically used for implementing curved lists. WearableRecyclerView also gives you the option to use circular scrolling gestures in your app, via its setCircularScrollingGestureEnabled() method.

Adding the New Android Wear Module

To start using the new Android Wear module, you’ll need to have Android Support Library 26.0.0 Beta1 installed—which leads us on to another Google I/O announcement.

At this year’s event, Google announced that it would be distributing all upcoming versions of the Android Support Library (26.0.0 Beta1 and higher) via the Google Maven repository only.

Downloading the Android Support Library from this repository simply requires you to add the Google Maven Repository to your build.gradle file:

repositories {
  maven { url 'http://ift.tt/2pXtIH5' }
  jcenter()
}

You can then set up your compile dependencies as usual, so open your wearable module’s build.gradle file and add the Wear library as a project dependency:

dependencies {
  compile fileTree(dir: 'libs', include: ['*.jar'])

//Add the following//

  compile 'com.android.support:wear:26.0.0-beta1'

To add a component from the Android Wear UI library to your UI, simply open the layout resource file and make sure you use the new, fully-qualified package name. Essentially, this means replacing android.support.wearable.view with android.support.wear.widget. For example, here I’m using the BoxInsetLayout class from the Android Support Library:

<?xml version="1.0" encoding="utf-8"?>
<android.support.wear.widget.BoxInsetLayout 
http://ift.tt/nIICcg"
  xmlns:app="http://ift.tt/GEGVYd"
  xmlns:tools="http://ift.tt/LrGmb4"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="@color/dark_grey"
  android:padding="@dimen/box_inset_layout_padding"
  tools:context="com.jessicathornsby.myapplication.MainActivity"
  tools:deviceIds="wear">

  <FrameLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:padding="@dimen/inner_frame_layout_padding"
      app:layout_box="all">

      <TextView
          android:id="@+id/text"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="Hi World" />

  </FrameLayout>

</android.support.wear.widget.BoxInsetLayout>

To import this class into your Java file, you just need to use the same name, so the old:

import android.support.wearable.view.BoxInsetLayout;

Becomes the new:

import android.support.wear.widget.BoxInsetLayout;

Easier Integration With the Complications API

Android Wear users can choose from a huge variety of styles of watch faces, and although the Complications API does give watch faces complete control over how they draw this data, this flexibility can make it difficult to add complications support to your watch faces.

At this year’s Google I/O, the Android Wear team introduced some additions that should make it easier to work with the Complication API.

ComplicationDrawable

ComplicationDrawable is a new solution that promises to handle all of your complication’s styling and layout for you.

If you create a ComplicationDrawable but don't set any style parameters, then you'll get a default look, but you can also use the ComplicationDrawable to style every part of your complication, including its background colour, corner radius, and border.

If your project targets API 24 or higher, then you can define a ComplicationDrawable object by creating a dedicated layout resource file in your project’s /res/drawable folder.

Open your XML file, and then create a ComplicationDrawable using the following tags:

<android.support.wearable.complications.rendering.ComplicationDrawable
...
...
...
  <ambient

//Define the attributes you want to use when the device is in ambient mode//

    />

  </android.support.wearable.complications.rendering.ComplicationDrawable>

Note that attributes defined at the top level apply to both standard and ambient modes, unless you specifically override these attributes in the file’s <ambient> section.

You then need to pass the complication data to your drawable:

@Override
public void onComplicationDataUpdate(int id, ComplicationData data)  {
 myComplicationDrawable.setComplicationData(data);

 }

And finally, draw your complication by calling setBounds on your drawable:

@Override
public void onDraw(Canvas canvas, Rect bounds)  {
  if(haveChanged(bounds))  {
      myComplicationDrawable.setBounds(
          complicationBoundsWithin(bounds));
}

//Call draw on the ComplicationDrawable//

  myComplicationDrawable.draw(canvas, currentTimeMillis);  
...
...
...

}

TextRenderer

Most complications include some form of text, and TextRenderer is a new class that makes a number of small but powerful adjustments to the way complication text is drawn on the canvas.

You can use TextRenderer to specify the bounds that your complication text has to work with, and TextRenderer will then resize the text or arrange it over several lines, in order to fit this area. In addition, when the screen enters Android Wear’s “always on” ambient mode, TextRenderer adjusts your text by hiding characters and styling that are not suitable for this mode.

To take advantage of this new class, you need to create a TextRenderer when you initialize your watch face, and then pass it the TextPaint you want to use, which defines style attributes such as the font and text colour:

@Override
public void onCreate(SurfaceHolder holder)   {
...
...
...
myTextRenderer = new TextRenderer();
myTextRenderer.setPaint(myTextPaint(TextPaint);

You need to create a TextRenderer for each field, so you’ll also need to create a TextRenderer for your title text:

myTitleRenderer = new TextRenderer();
myTitleRenderer.setPaint(myTitlePaint);
...
...
...
}

When it’s time to draw, you’ll need to set the text on the renderer by calling setText, and then retrieve the text by calling getText:

public void onDraw(Canvas canvas, Rect bounds)  {
...
...
...
    myTextRenderer.setText(myComplicationText.getText(
        Context, data.getShortText(), currentTimeMillis));

    myTextRenderer.draw(canvas, bounds);
...
...
...
}

Note that many complications are time-dependent, which is why currentTimeMillis is included in the above code snippet.

Conclusion

In this article, we looked at how to add the new Android Wear UI Library to your project, and how you can start working with a number of components from this library today. We also examined two components that promise to make integrating with Android Wear’s Complications API much easier than it’s previously been.

In the next instalment, we’ll be getting a preview of the up-and-coming features in Android 3.0, by exploring the latest Android Studio Canary build.

In the meantime, check out some of our other tutorials and our video courses on Android app development!