A journey into the world of Android wearables

Introduction

Extends its entire scope and possibilities Android by expanding the next generation of application development concepts in various electronic modules such as TV, wear and automotive. This article provides a Android Wear brief summary and overview of application development in (Future Emerging Application Development Platform).

This article introduces clear concepts about Android wearables and their capabilities. This article details a high-level overview of Android application development in the Wear platform. If you’re an Android enthusiast who likes to play with code and want to make amazing apps with it, let’s build something cool for our watch!

Android keeps fit

Technically, it’s a version of the Android operating system designed for wearable smartwatches and computers. A mobile device running Android 4.3 or later, or iOS 8.2 or later, with limited support, is required to pair with these watches. It was introduced from API level 20 the beginning, and the codename _ is KITKAT \ _ WATCH _.

Android Wear (Source: tech. Thai visa. Com)

History

The wearable platform for Android was first launched on March 18, 2014 with the release of a developer preview. Let’s roll back the history to get some key points about the platform.

Samsung Gear Live and LG G Watch were released on Google I/O on June 25, 2014.
Motorola’s Moto 360 was released on September 5, 2014.
On December 10, 2014, an update for Android 5.0 Lollipop began rolling out.
Google launched its Pairing app for iOS 8.2 or later on August 31, 2015.

Currently, Motorola, Samsung, LG, HTC and Asus are producing wearable smartwatches for Android.

Functions at a glance

Google introduced some cool features to the smartwatch platform that still don’t exist on its mobile platform. Let’s take a look.

Google Now: This is probably the most important feature in terms of smartwatches. When you ask “OK Google, what’s my heart rate” or “Where’s the nearest fire station?” It’s great to get the answer from the watch, a bit like the J. A. R. V. I. S. In the Iron Man movie.
Notice: Stay in touch with your watch and check messages at a glance.
Weather updates: Get updated weather reports from time to time.
Trip: Receive your travel information at a glance.
Remind Don’t miss anything. Get calendar and other reminders.
Play your phone’s music Interaction with mobile devices from your watch!
Google Fit: Support for riding and running tracking. Just say “Ok Google, start running”.
Support for Google Maps, Sleep Tracking, Find Your Phone and more!

Before we start

This paper briefly introduces the application development process of the wear platform. So, whether it’s development or having a solid understanding of code structure, you need to have some understanding of Android application development, and you need to have knowledge of JAVA. If you don’t think you have enough knowledge, no problem, take the time to learn JAVA and OOP. To make the application, we will use Android Studio. If your computer has 4GB of RAM and JDK 7 or later, you’re good to go. To set up all development environments properly with the studio, you can follow this YouTube video. Note the version (32/64 bit) match between the operating system and the JDK.

Wear App Design Principles

Because the watch has a smaller screen than a mobile device, the platform’s design principles are quite different from traditional Android apps. Before making a brief explanation on the official website, you can take a look at the key design guidelines-

The five-second rule This means that anything in the application should use this typical time to interact with its user. Your user should not keep his/her attention longer than this. If it’s longer than that, you should rethink your app’s functionality and design!
Design to remember yours Thumb rule! Think about it, when you’re walking or eating, it’s hard to slow down these activities and concentrate on doing work on your watch. So when designing, leave enough space on the screen for your thumb to do the job. Don’t design your application in such a way that items are too close together. Always design for Big gesture.
If you have too much content to display in the app, split it into multiple pages (Card).
Avoid the user’s traditional input system, at a glance, keep it to a minimum, at a glance, use a smarter solution for your watch, say hello to “Google Now “.

Build your first Wear app

First, we will concentrate on making a “Hello Wear” application that will demonstrate the steps to make a basic wear application and run the application into a wear simulator. Next, we’ll polish the app and make something cool!

SDK requirements

Before you build a wearable app, check two things. You have to —

Update your Android SDK Tools to 23.0.0 or later &
Update your Android SDK with Android 4.4W.2 （API 20） or later.

Select the mentioned tool from the SDK Manager and update it to the latest version.

Figure 1: Android SDK Tools

Figure 2: Minimum Android SDK Version Required for Wearable Apps

If you don’t have a real Android watch, don’t forget to install the listed Android Wear system images, which are required to build the Wear emulator.

Create a new project

Open Android Studio and select the New Project option. Name your app. We use “Hello Android Wear” here as the app name as well as the company domain name.

Figure 1: Create a new project for Android wear

Select the minimum SDK version for your wear application, here we chose the API 20 codename KitKat Wear.

Figure 2: Select the target SDK version

Wear supports all types of professional activities, including watch faces, Google Maps, and more. However, we have selected Blank Wear Activity in this example.

Figure 3: Select Blank Wear Activity

Now set your activity and layout file name. There are different rectangular and circular layout files as well as the main layout file. Keep the default names so far, we’ll talk about them later. Click the _ Finish _ button and wait for some time to build the Gradle project information for the Wear app.

Figure 4: Setting the Layout and Activity Name

When all the processes have completed successfully, you will find the Studio window as shown below.

Figure 5: Project window after a successful build

Create a Wear virtual appliance

To create a wear simulator, click the button in the upper right corner AVD Manager of the Studio window. Then click the “_ Create Virtual Device _” button in the AVD Manager _ window located in the lower left corner of the window.

Figure 1: Selecting the AVD Manager

Next, select _ Wear _ from the category list in the left panel. Depending on the screen size and shape (round/square), there are some devices listed on the right, which you can choose according to your choice. At present, we choose the circular clothing with a screen size of 1.65 inches and a resolution of 320 * 320.

Figure 2: Selecting wear for the simulator

The available system images will be seen in the next window. We chose the oriented Android 4.4 x86. Always x86 prefer emulators armeabi-v7a over simulators because performance is fast.

Figure 3: Select System Image

But keep in mind that x86 emulators are needed HAXM accelerator to get better performance. Therefore, install it from the SDK Manager window.

Figure 4: Installing HAXM to improve emulator performance

You can use the _ “Show Advanced Settings _” button to edit the configuration of the emulator, i.e. Memory, SD card, etc.

Figure 5: AVD Configuration Window

When your Wearable Virtual Device is ready, it will appear in the AVD Manager window. Click the start button marked in red to start the simulator.

Figure 6: List of AVDs

Depending on your PC performance and available RAM, the emulator will start in a time range of 15 seconds to 1 minute. When ready, it will look like this.

Figure 7: Android Wear Emulator

Deploy the project to the Wear Emulator

The wear simulator you created is now ready to run your project. Press the green “Run” button at the top center of the Studio window. Once the gradle build is complete, a window called “_ Device Choose R _” will appear and you will see the created wear simulator listed there. Click the OK button to continue.

Figure 1: Device Selector Window

After the project runs successfully, you will see the output in the simulator, as shown in the following figure.

Figure 2: Output of the deployed project

Change Text Value

Let’s change the text value to something like Hello Round Android Wear! Return to the project tree on the left panel and values select the _ strings. XML _ under the folder. Change the string value labeled “hello \ _ round” to “Hello Round Android Wear!” 。

Figure 1: Changing text values in a string. XML.

Now run the project. You will find the following output. Exit the application by swiping the screen. It completes our “Hello Android Wear” app.

Figure 2: Output after changing the text

Quite a few facts.

Before going any further, there are some important factors to consider.

Switch between circular and rectangular shapes

While creating the project, we found 2 different layout names for the rectangular and circular wear devices. In the project structure, you will find these two layout files and a main XML layout file under the layout folder. The file named “” defines the layout for a square wearable screen, while “” defines the layout for a round wearable screen. _rect_activity_main.xml_ _round_activity_main.xml_

When we make another emulator for the square screen and run the same project we did before, the output looks similar, but the text value is not, because we didn’t change the textview string value for the square screen in the file. _string.xml_

Figure: Comparison of the output of the circle and square wear emulators

When creating a layout for a wear application, you need to consider the different mechanisms of square and round wear devices. Because the same layout or design may be cropped near the corner of the device’s screen or may not look good. There are 2 solutions to overcome this situation, one is and the other is.

Introduction to WatchView Stub

Go to the file, and you’ll probably find the XML code with the opening and closing tags named, right? _activity_main.xml_ _WatchViewStub_

Detects screen shape and inflates rectangular or circular layouts _WatchViewStub_ at runtime. You need to create and populate UI views for the rectangular and circular layouts, respectively.

<android.support.wearable.view.WatchViewStub 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    ...

    app:rectLayout="@layout/rect_activity_main"
    app:roundLayout="@layout/round_activity_main"
    ...>    

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

XML Layout name should be the same as app: rectLayout and. Based on the example we did earlier, they should be named and, respectively. _app:roundLayou_t``_activity_main.xml_`` _rect_activity_main.xml_ _round_activity_main.xml_

Now, from JAVA the perspective of, you can’t access any of the child views until the inflation is complete. You should implement this interface to detect when layout inflation is complete. This method is called when the correct view is inflated, using the required reference to get the child view. ** _OnLayoutInflatedListener_ _WatchViewStub_ _onLayoutInflated_ _findViewById_ **

final WatchViewStub stub = (WatchViewStub) findViewById(R.id.watch_view_stub);

stub.setOnLayoutInflatedListener(new WatchViewStub.OnLayoutInflatedListener() {
    @Override
    public void onLayoutInflated(WatchViewStub stub) {
        mTextView = (TextView) stub.findViewById(R.id.text);
    }
});

BoxInsetLayout

BoxInsetLayout allows you to define a single layout for both square and round screens. To be displayed in this area, a subview in the layout is assigned the attribute of _ with top _, _ bottom _, _ left _ and _ right _ or a combination of _ all _. _layout_box_

Image: BoxInsetLayout on a circular screen

Build something cool.

Let’s expand our work and make something cool. We will make a math game that will generate random equations over a 60-second time horizon, so the user will get a score result.

Design

First, we need to design a master layout file that will fit both round and square devices. We will use WatchViewStub to complete the job.

We will design our application like the following. Let’s use.. xml

Figure 1: Application Layout

<?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:background="@drawable/back"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="2">

        <TextView
            android:id="@+id/textTimer"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fontFamily="sans-serif-condensed"
            android:gravity="center"
            android:text="0:59"
            android:textColor="@android:color/holo_blue_bright"
            android:textSize="22sp" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1.5"
        android:orientation="vertical"
        android:weightSum="2">

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="0.8">

            <TextView
                android:id="@+id/gameEquation"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fontFamily="sans-serif-light"
                android:gravity="center"
                android:text="22*82 = ?"
                android:textColor="@android:color/white"
                android:textSize="35sp" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.2"
            android:orientation="horizontal"
            android:weightSum="3">

            <EditText
                android:id="@+id/answer"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="20dp"
                android:layout_weight="1" />

            <ImageView
                android:id="@+id/next"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center"
                android:layout_marginLeft="15dp"
                android:layout_marginRight="15dp"
                android:layout_weight="2"
                android:background="@drawable/next"
                android:scaleType="fitXY" />

        </LinearLayout>

    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_marginBottom="10dp"
        android:layout_marginLeft="50dp"
        android:layout_marginRight="50dp"
        android:layout_weight="1.5"
        android:orientation="vertical"
        android:weightSum="3">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="horizontal"
            android:weightSum="4">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:text="1"
                android:textSize="18sp"
                android:onClick="onText1_Click"
                android:clickable="true"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:text="2"
                android:textSize="18sp"
                android:onClick="onText2_Click"
                android:clickable="true"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:text="3"
                android:textSize="18sp"
                android:onClick="onText3_Click"
                android:clickable="true"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:background="@drawable/backspace"
                android:layout_margin="2dp"
                android:onClick="onTextBackSpace_Click"
                android:clickable="true"/>

        </LinearLayout>

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:orientation="horizontal"
            android:weightSum="4">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:text="4"
                android:textSize="18sp"
                android:onClick="onText4_Click"
                android:clickable="true"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:text="5"
                android:textSize="18sp"
                android:onClick="onText5_Click"
                android:clickable="true"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:text="6"
                android:textSize="18sp"
                android:onClick="onText6_Click"
                android:clickable="true"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:text="-"
                android:textSize="18sp"
                android:onClick="onTextMinus_Click"
                android:clickable="true"/>

        </LinearLayout>

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:orientation="horizontal"
            android:weightSum="4">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:text="7"
                android:textSize="18sp"
                android:onClick="onText7_Click"
                android:clickable="true"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:text="8"
                android:textSize="18sp"
                android:onClick="onText8_Click"
                android:clickable="true"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:text="9"
                android:textSize="18sp"
                android:onClick="onText9_Click"
                android:clickable="true"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:text="0"
                android:textSize="18sp"
                android:onClick="onText0_Click"
                android:clickable="true"/>

        </LinearLayout>
    </LinearLayout>
</LinearLayout>

Functionality

To calculate the game time, we need a control and some variables to keep track of the time. _CountDownTimer_

private long timeRemaining = 0;
private final int gameLengthInMillis = 60000;
private final int countDownInterval = 1000;

public CountDownTimer timer;

We will now take advantage of the event ot and print the remaining time value to the textview. ** _onTick_ _CountDownTimer_ **

// Set countdown

timer = new CountDownTimer(gameLengthInMillis, countDownInterval) {
    @Override
    public void onTick(long millisUntilFinished) {

        if (isPaused || isCanceled) {

            timer.cancel();
            Log.d("GameActivity:", "Timer >>1st timer cancled. remaining time:" + millisUntilFinished);

        } else {

            timeRemaining = millisUntilFinished;
            mTextView.setText(Long.toString(timeRemaining / 1000));
        }
    }

To generate stochastic equations, we will use a separate class to randomly generate operators and numbers.

private char[] operators = new char[] { '+', '-', '*', '/' };  // generate operator

int firstNumber = random.nextInt(10); // generate first random number
int secondNumber = random.nextInt(10); // generate second random number

After generating all 3 random things, we will concatenate them to generate an equation.

String equation = first + " " + operator + " " + second + " = ?" ;

Next, we need to throw a button event that will refresh this random equation on each click. In addition, we need to compare the answers entered by users with their real answers. In addition, we need to keep track of the right and wrong answers and count them. To solve the mathematical equations, we can use a third-party open source project called.

buttonNext.setOnClickListener(new View.OnClickListener() {

                            public void onClick(View v) {

                                if (editTextAns.getText().toString().isEmpty()) {
                                    Toast.makeText(getApplicationContext(), "Please write some answer first", Toast.LENGTH_SHORT).show();
                                } else {
                                    total += 1;
                                    int ans = Integer.parseInt(editTextAns.getText().toString());
                                    if (ans == randomEquation.answer) {
                                        correct += 1;
                                    } else {
                                    }
                                    editTextAns.setText("");
                                    refreshEquation();
                                }
                            }
                        }
);

Once the timer completes, we need to navigate to the Results page to display the user performance. Therefore, we will use the method. _onFinish()_ _CountDownTimer_

@Override

public void onFinish() {

    Intent intent = new Intent(MainActivity.this, ResultsActivity.class);
    intent.putExtra("correct", correct);
    intent.putExtra("total", total);
    startActivity(intent);
    finish();

    Log.d("GameActivity:", "Timer >> finished 1 min");
}

In, we will print the value passed to this activity and keep track of the highest score by saving it in. _ResultsActivity.class_ SharedPreferences

final SharedPreferences sharedPreferences = getSharedPreferences("prefs", 0);
int currentHighScore = sharedPreferences.getInt("highscore", 0);

if (score > currentHighScore) {
    isHighScore = true;
    SharedPreferences.Editor sharedPreferencesEditor = sharedPreferences.edit();
    sharedPreferencesEditor.putInt("highscore", score);
    sharedPreferencesEditor.commit();
    highScoreTextView.setText("New High score !!!");
} else {
 highScoreTextView.setText("High score of this level is " + currentHighScore);
}

After successfully setting up all these components, when we build the project, we will get a cool math application that is sure to entertain you in your free time!

Figure 2: Final output of the math game

In addition

Connect the wear simulator to your Android device

Let’s connect our wear simulator with our real Android device (phone/tablet). To do this, go to “Settings ” for the device _ and check if the USB _Debugging Developer options is not selected before.

Figure 1: Leave USB Debugging On

Download the Android Wear app from Google Play and install it on your device now. After installation, connect the device to the computer and open a command window. Write Command adb devices

Figure 2: List of connected devices available in the ADB command

Next, write this command “adb -d forward tcp：5601 tcp：5601 ” to open the connection port.

Turn on the device’s Bluetooth connection and pair it with the wear simulator. Once the pairing process is complete, you will see this window on the device wear app.

Figure 3: Devices connected to the emulator.

To check if your device is connected to the wear simulator, you can try a number of methods, and here we are checking Watch notification. Select it and you will find a window with several options. Select the “Incoming call ” option from there and you will be directly notified of the call from the wear simulator. Voila, your device and wear simulator are now connected. You can control the device’s music player from a wear simulator, etc.

Figure 4: Sending a call notification from the device to the wear simulator.

Points of interest

As mentioned earlier in this article, it is a long process to cover the entire wearable platform into one article. But we have seen the most important factor in developing applications on this platform. We created a sample Hello Wear application, created the wear simulator and built the application. We then created a complete math game for the watch. There are a thousand scopes that can upgrade this application to an enterprise application. On some logical level, it might be more enjoyable. There are many more interesting wearable app developments in the area of Google maps, WatchFace etc., and hopefully I’ll be back with these great topics in the near future. Until then, have fun with Android Wear. Happy Droiding!