Android Wear — Design + Code [#2]

Intro to layouts

Before jumping into any technical stuff I want to thank all of you for the support. I was definitely not expecting so many people reading this. You guys are awesome!

As I promised you this would be progressive tutorials, so I thought that would be a good idea to visually explain you how the layouts we are going to code actually work. This would be as easy as counting apples. Promise.


Say hello to the Wearable UI Library

Inside this library you’ll find many of the UI elements used to create app for Android Wear this days. I’ll show how this are designed to work.

  • Card Frame: this is a simple frame for content. Just like cards on Android this is a white frame, with shadows and round corners. You can also change the background to be a color or maybe an image.
  • Card Scroll View: we can consider this one as a container for a card frame, but also has the functionality to make the content scrollable in case that your card holds a lot of content.
  • Card Fragment: and now this one it’s my favorite. This fragment can hold the previous card scroll view. This is my to-go view when creating custom layouts.
  • Circled Image View: mostly the way to show images on android wear. An image inside a circle (optional). Also you can declare a border to the circle, so you can create countdowns and show progress.

Do you see what I did there? I showed you how those layouts relate to each other. I consider these as the base of any interface of android wear.

  • Confirmation Activity: this is a class for creating feedback animation for user actions.
  • Crossfade Drawable: this will allow us to fade between two different drawables. You can easily create effects with this.
  • Delayed Confirmation View: a subclass of circled image view with the function of sending action after a period of time.
  • Box Inset Layout: this is a Frame Layout that’s aware of screen shape and can box its content in the center square of a round screen.
  • Watch View Stub: this class is use to detect the device’s shape and the load the correct layout for that device. But I think by this time this is deprecated tho’.

Obviously there’s a few more and you can find all the related information on the developer documentation, but the goal of this part 2 of the series is to get you started creating custom layouts.


Now imagine that you are working for delta airlines and some manager dropped on your desk what they call a new contextual feature for their Android Wear users; so when the users are in the airport, the wear will display information about their flight. Can look something like this:

Contextual Feature

The users can see depart and destiny point, at what time they go, the gate and terminal and the name of the airline.

You can also get inspired and change the background for something more branded. I just like this color.

OK, so now that you know what they want, the designer sent you the screen; you are excited about start working on this!


The Contextual Feature

1- Open Android Studio and create a new project, name it Contextual Feature, use the domain name of your preference and click next.

2 - Select just the Wear form factor and API 21 as the minimum and click next.

3 - Select Blank Wear Activity as your starting point and click next.

4 - You can use defaults here and click finish. After that we just need to wait for the system to build your project.

5 - In your project view located to the left of Android Studio, look for the layout folder. Let’s create a new XML layout where we are going to display the information. Right click on top of layout > New > Layout resource file Name it custom_layout, use the defaults and click OK.

6 - And as always let’s tackle the XML first, so open custom_layout.xml. Now we just need to add the four TextViews we need.

Pretty straight forward. Just adding TextViews and giving them style to get some visual hierarchy. You can handle this.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="LGA - NAS"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#616161" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Depart: 9:30 a.m."
android:textAppearance="?android:textAppearanceMedium"
android:textColor="#9e9e9e" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Terminal C, Gate 10"
android:textAppearance="?android:textAppearanceSmall"
android:textColor="#9e9e9e" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Delta Airlines"
android:textAppearance="?android:textAppearanceSmall"
android:textColor="#9e9e9e" />

</LinearLayout>

As a pro-tip you can use textAppearance and you’ll save a couple of lines declaring the size and style of the text. The result should look like this:

7 - Open activity_main. You’ll noticed that it has a some code inside. You can delete it and let’s add your own code :)

<?xml version="1.0" encoding="utf-8"?>
<android.support.wearable.view.BoxInsetLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#00bcd4">

<FrameLayout
android:id="@+id/frame_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_box="bottom" />

</android.support.wearable.view.BoxInsetLayout>

8 - Now let’s create a new class and call it CustomCardFragment that will extend from the superclass CardFragment. Right click on your name package > New > Java Class. Name it and click OK.

9 - Open the class and let’s add some code.

public class CustomCardFragment extends CardFragment {

@Override
public View onCreateContentView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){
return inflater.inflate(R.layout.custom_layout, container, false);
}

}
The second ViewGroup argument of this method refers to the Activity you are about to attach this Fragment to. And at the end you are just inflating the custom layout you create to put inside the fragment.

10 - Go ahead and open the MainActivity class because the you need to do almost the same thing you did in the first tutorial. Fragment transaction and commit the changes. I won’t stress you too much with this because is repetition and I know that you already want to see the result of your efforts here hehe.

The MainActivity class already has some code auto-generated, because we use a blank template. I’ll talk about this at the end of the tutorial, so for now you can just match your code with mine.

public class MainActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

FragmentManager fragmentManager = getFragmentManager();
FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();

fragmentTransaction.add(R.id.frame_layout, new CustomCardFragment());
fragmentTransaction.commit();

}
}

AND NOW LET’S RUN THE APP

Yeah. I wanted to see how it looks on a round screen :p

So what about those auto-generated files?

WatchViewStub being deprecated

When you first opened the MainActivity class it was using WatchViewStub, that’s because the template provided by Android Studio still using the technique of designing two different XML layouts and let the watch decide which one to use base on the shape. As you can see in the image to the left. We are using BoxInset. So just delete those two files.

As always the full code of the app is here → GitHub.

Don’t forget to recommend and share if you like it, so others can get started too. Stay Awesome :D

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.