Topics to be covered
Android expands whole of its scopes and possibilities through expansion of future generation application development concept in various electronic modules like TV, wear and auto. This article is all about the brief summary and overview of application development in Android Wear, the emerging application development platform of future.
The article presents a clear concept on android wearable devices and their features. A high-level overview of android application development in wear platform is discussed here. If you are an Android enthusiastic, like to play with code and would love to make amazing apps with it, let’s build something cool for our wrist watches!
Technically it is a version of Android operating system designed for wearable smartwatch and computers. Requires a mobile device running Android version 4.3 or higher, Or, iOS version 8.2 or newer with limited support to pair with those watches. It was introduced since API level 20 which code name was KITKAT_WATCH.
Android Wear (Source: tech.thaivisa.com)
Wearable platform for android was first introduced on March 18, 2014 along with the release of developer preview. Let’s roll back history to get some key points about the platform.
- Samsung Gear Live and LG G Watch were launched at Google I/O on June 25, 2014.
- Motorola's Moto 360 was released on September 5, 2014.
- On December 10, 2014 update regarding Android 5.0 Lollipop started to roll out for wear.
- Google launched pairing application for iOS version 8.2 or newer on August 31, 2015.
Currently Motorola, Samsung, LG, HTC and ASUS are producing wearable smart watches for android.
Google introduces some cool features for this smartwatch platform which is still absent on its mobile platform. Let’s take a look-
- Google Now : Possibly the most important feature in terms of a smartwatch. It is great to get answers from your watch when you ask "OK Google, what's my heart rate" or “Where is the nearest fire station?”, kind of like J.A.R.V.I.S. from the “Iron Man” films.
- Notifications : Stay in touch with your watch and see messages at a glance.
- Weather Updates : Get updated weather reports time-to-time.
- Travel : Receive your travel information at a glance.
- Reminders : Never miss a thing. Get calendar and other reminders.
- Interaction with Mobile Device : Play music of your mobile from your watch!
- Google Fit : Supports ride and run tracking. Just say “Ok Google, start a run”.
- Supports Google Map, Sleep tracking, Find your phone feature and so on!
This article is a brief explanation of the application development procedure which targets the wear platform. So either for development or having a sound knowledge on code structure, you need to have some knowledge on Android application development things, also need to have knowledge in JAVA. If you feel you don’t have enough knowledge, no problem, take some time to learn JAVA and OOP. In order to make apps we will use Android Studio. If your computer has 4GB ram and JDK 7 or higher you are ready to go. To set up all development environments correctly along with studio you can follow this YouTube video. Be careful about version (32/64 bit) matching between your OS & JDK.
As watches are more tiny screens than your mobile devices so design principles in this platform are quite different from traditional android apps. Before having brief explanation from official site you can take a look of key design guidelines-
- Follow 5 seconds rule which means anything in your app should use this typical time for interacting with its user. Your user shouldn’t keep his/her concentration beyond this time. If it exceeds that time you should re-think about your app function and design!
- Design remembering your big thumb rule! Consider when you are walking or eating it’s tough to slow down these activities and concentrate to do a job on your watch. So while designing put up enough space for your thumb on the screen to do that job. Don’t design your app in such way that the items are too adjacent, always design for big gestures.
- If there are too many things to display in your app split them into multiple pages (cards).
- Avoid traditional input system from your user, be glanceable and keep it to a minimum, easy to read at a glance, use smarter solution for your watch, say hello to “Google Now”.
At first, we will keep our concentration to make a “Hello Wear” app that will demonstrate the steps of making a basic wear app and running the app into the wear emulator. Next, we will polish the app and make something cool!
SDK Requirements
Before building the wearable apps, check 2 things first. You must-
- Update your Android SDK tools to version 23.0.0 or higher &
- Update your Android SDK with Android 4.4W.2 (API 20) or higher.
Select mentioned tools from your SDK Manager and update those to latest version.
Fig 1: Android SDK Tools
Fig 2: Minimum Android SDK Version Required for Wearable Apps
If you don’t have a real android watch, then don’t forget to install listed Android Wear System Images, they are required to build wear emulators.
Create a New Project
Open Android Studio and select “New Project” option. Give your app a name, we used here “Hello Android Wear” as app name along with company domain name.
Fig 1: Create a new project for Android wear
Select minimum SDK version for your wear app, here we selected API 20 which code name is KitKat Wear.
Fig 2: Select targeting SDK version
Wear supports various types of specialized activities including watch face, Google map etc. But we have selected “Blank Wear Activity” in our case.
Fig 3: Select Blank Wear Activity
Now set your activity and layout file name, there are different rectangle and round layout file along with a main layout file. Keep the default names up to now, we will discuss them later. Click Finish button, and wait sometime to build your wear app’s Gradle project info.
Fig 4: Set Layout and Activity Name
When all the process completes successfully you will find the studio window as like as below.
Fig 5: Project Window after successful build
Create Wear Virtual Device
To create wear emulator, click AVD Manager button on top right corner of your Studio Window. Then click “Create Virtual Device” button of AVD Manager Window which lays bottom left of the window.
Fig 1: Select AVD Manager
Next, select Wear from Category list of left panel. There are few devices listed on right side based on screen size and shape (round/square), you can choose as per your choice. For now, we choose a round wear which screen size is 1.65” and resolution 320*320.
Fig 2: Select a wear for your emulator
Available system images will be seen on the next window. We selected a x86 one which targets Android 4.4. Always give a preference to an x86 emulator rather than an armeabi-v7a emulator because of quick performance.
Fig 3: Select System Image
But remember x86 emulators requires HAXM accelerator for better performance. So install it from your SDK Manager window.
Fig 4: Install HAXM to boost up emulator performance
You can use Show Advanced Settings button to edit configuration of your emulator i.e. ram, SD card etc.
Fig 5: AVD Configuration Window
When your wear virtual device is ready, it will appear in AVD Manager window. Click red marked launch button to start the emulator.
Fig 6: AVD Listing
Based on your PC performance and available RAM the emulator will start within 15 seconds to 1 minute time range. When it is ready it will look like as below.
Fig 7: Android Wear Emulator
Deploying Your Project to Wear Emulator
Now created wear emulator is ready to run your project. Press green colored “Run” button on top middle of your studio window. When gradle build finished, a window named “Device Chooser” will appear and you will see the created wear emulator are listed there. Click ok button to proceed.
Fig 1: Device Chooser Window
When the project runs successfully, you will see the output in the emulator like below image.
Fig 2: Output after deploying the project
Changing Text values
Let’s change the text values to make it like “Hello Round Android Wear!” Look back the project tree on left side panel and select strings.xml under values folder. Change the string value which tag is “hello_round” to “Hello Round Android Wear!”.
Fig 1: Change text values from string.xml
Now run the project. You will find the output as below. Swipe the screen to get out from the app. It completes our “Hello Android Wear” app.
Fig 2: Output after changing text
Some important factors need to be considered before going further from here.
Switching between round and rectangle shape
While creating projects we had find 2 different layout names for rectangle and round shaped wear devices. In project structure, you will find those 2 layout files under layout folder along with a main xml layout file. The file named “rect_activity_main.xml” defines layout for square wear screens whereas “round_activity_main.xml” defines layout for round wear screens.
When we make another emulator targeted for square screens and run the same project we did earlier the output looks similar but the text value isn’t as we haven’t changed the string value of textview for square screens in string.xml file.
Fig : Output comparison of round and square wear emulator
When you create layouts for wear applications, you need to consider different mechanism for square and round shaped wear devices. Because same layout or design either may be cropped near the corners of the device screen or may be don’t look good. There are 2 solutions to overcome the situation, one is WatchViewStub and the other is BoxInsetLayout.
Introducing WatchViewStub
Go to activity_main.xml file and probably you will find the xml code which has a starting and closing tag named WatchViewStub, right?
WatchViewStub detects the screen shape at runtime and inflate a rectangular or round layout. You need to create and fill-out your UI views for both the rectangular and round layouts respectively.
<android.support.wearable.view.WatchViewStub
xmlns:android="http: xmlns:app="http: xmlns:tools="http: ...
app:rectLayout="@layout/rect_activity_main"
app:roundLayout="@layout/round_activity_main"
...>
</android.support.wearable.view.WatchViewStub>
The XML layout names should match the values defined in the app:rectLayout and app:roundLayout of your activity_main.xml. Based on the example we did earlier, they should be named as rect_activity_main.xml and round_activity_main.xml respectively.
Now from the perspective of JAVA, you cannot access any child views until inflation has been completed. You should implement the OnLayoutInflatedListener interface to detect when layout inflation has completed. When the right views are inflated, WatchViewStub will invoke the onLayoutInflated method which gets the required reference of a child view using 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 lets you define a single layout that works for both square and round screens. To be displayed inside this area, children views inside the layout specify the layout_box attribute with the combination of top, bottom, left and right or all.
Fig : BoxInsetLayout on a round screen
Let’s extend our work and make something cool. We will make a math game that will generate random equations in a 60s time frame and hence user will get a result of score.
Design
At first, we need to design our main layout file that will fit on both round and square devices. We will use WatchViewStub to do the job.
We will design our app like below. Let’s design with xml.
Fig 1: App 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 count game time we will need a CountDownTimer control and some variables to track down the time.
private long timeRemaining = 0;
private final int gameLengthInMillis = 60000;
private final int countDownInterval = 1000;
public CountDownTimer timer;
Now we will take advantage of onTick event ot CountDownTimer, and will print the remaining time value to a textview.
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));
}
}
In order to generate random equations we will use a separate class that will randomly produce operators and digits.
private char[] operators = new char[] { '+', '-', '*', '/' };
int firstNumber = random.nextInt(10); int secondNumber = random.nextInt(10);
After generating all these 3 random things we will concatenate those to generate an equation.
String equation = first + " " + operator + " " + second + " = ?" ;
Next we need to throw a button event that will refresh this randomized equation on per click. Also we need to compare user input answer with its real answer. Moreover, we need to keep track of right and wrong answer and calculate their number. For solving math equation we can use a 3rd party open source project named evalex.
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();
}
}
}
);
When timer will be finished we need to navigate to Result page for showing user performance. Hence we will use onFinish() method of 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 ResultsActivity.class we will print the values passed to this activity and keep track of highest score by saving it in 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 successful setup of all of these components when we build the project we will get a cool math app that will surely entertain you in your free time!
Fig 2: Final Output of Math Game
Connecting wear emulator with Android Device
Let’s connect our wear emulator with our real android devices (Phone/Tablet). To do this, go to the Settings of your device and check USB Debugging from Developer Options if it wasn’t selected earlier.
Fig 1: Keep USB Debugging ON
Now download Android Wear app from Google Play and install it to your device. After installation, connect your device to your computer and open command window. Write the command “adb devices”
Fig 2: Available connected device list from adb command
Next write this command “adb -d forward tcp:5601 tcp:5601” to open ports for connection.
Open Bluetooth connection of your device and pair it with your wear emulator. When the pairing process is done you will see this window on your device wear app.
Fig 3: Device connected with emulator.
To check whether your device connects with wear emulator you can try many ways, here we are checking Watch Notifications. Select it and you will find a window having few options. From there select “Incoming Phone Call” option and you will get a call notification to your wear emulator straight. Voila!, your device and wear emulator are now connected. You can control music player of your device from wear emulator and so on.
Fig 4: Sending call notification from device to wear emulator.
As stated earlier in this article, it is a long journey to cover the entire Wearable platform into a single article. But already we have seen most important factors to develop applications in this platform. We had created a sample Hello Wear app, create wear emulators and build the app. Then we had created a complete Math Game for our wrist watch. There are thousand scopes to upgrade this app into a business class application. With some logical levels it could be more enjoyable. There are still more interesting scopes of wearable application development available regarding Google Map, WatchFace etc. Hopefully I will come back with those awesome topics in near future. Until then, have fun with Android Wear. Happy Droiding!
17.10.2015 - Formatting issue solved
16.10.2015 - Main Article posted
