Creating mobile applications for the Android Wear is quite easy than earlier.

Your wear apps can run independently on the android wear without any phone dependency. For example: watch face (Users can install these apps directly from their Android wear play store application)

Here is the step by step process to create an android wear application.

Assuming that you have minimum knowledge of Android development earlier.

In this tutorial, we are going to create an app called Temple Runner. This small android wear app helps to keep a track of their running track count. By end of this post, you will create an app which looks the below screenshot

Step 1: Firstly, Launch the Android studio ( either in Mac or Windows-powered machines)

Click on File-> New – > New Project and you will be a dialog where you will provide the details about your application name, bundle ID etc..

 

Step 2: Since watch faces run independently on the wear un-check the phone and Tablet option in-case if you want to create watch face.  In this tutorial, I was trying to create an app for wear only.

 

Step 3: We can create different kinds of apps for wear like Google maps apps, watch face and blank wear. Here I`ll go with Blank wear Activity

Step 4: Copy the below XML code and paste it into activity_main.xml.

It will create a layout with 2 buttons and 1 TextView to show the number increment.

<?xml version="1.0" encoding="utf-8"?>
<android.support.wear.widget.BoxInsetLayout 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"
    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.driftycode.templatecounter.MainActivity"
    tools:deviceIds="wear">

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

        <LinearLayout
            android:layout_width="match_parent"
            android:orientation="vertical"
            android:gravity="center"
            android:weightSum="3"
            android:layout_height="match_parent">

        <Button
            android:id="@+id/btn_minus"
            android:layout_weight="0.5"
            android:gravity="center"
            android:background="@drawable/button_shape"
            android:layout_width="50dp"
            android:textSize="28sp"
            android:layout_height="wrap_content"
            android:text="-" />

        <TextView
            android:id="@+id/tv_counter"
            android:layout_weight="2"
            android:gravity="center"
            android:textSize="22sp"
            android:textStyle="bold"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="108" />

        <Button
            android:id="@+id/btn_plus"
            android:layout_weight="0.5"
            android:gravity="center"
            android:background="@drawable/button_shape"
            android:layout_width="50dp"
            android:textSize="28sp"
            android:layout_height="wrap_content"
            android:text="+" />

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

Step 5: Copy the below JAVA code and paste it into Activity file (MainActivity.java).

package com.driftycode.templatecounter;

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.support.wearable.activity.WearableActivity;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

import butterknife.BindView;
import butterknife.ButterKnife;
import butterknife.OnClick;

public class MainActivity extends WearableActivity {

    private static final String TAG = "MainActivity";
    TextView mTextView;
    @BindView(R.id.btn_minus)
    Button btnMinus;
    @BindView(R.id.btn_plus)
    Button btnPlus;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
        mTextView = findViewById(R.id.tv_counter);
        // Enables Always-on
        setAmbientEnabled();
    }

    @SuppressLint("SetTextI18n")
    @OnClick(R.id.btn_minus)
    public void countDecrement(View view) {
        // TODO submit data to server...
        int count = Integer.parseInt(mTextView.getText().toString());
        Log.d(TAG, "count " + count);
        if(count != 0 && !(count < 0)){
            count = count - 1;
            mTextView.setText(count + "");
        } else {
            Log.d(TAG, "Count is already 0 ");
        }
    }

    @SuppressLint("SetTextI18n")
    @OnClick(R.id.btn_plus)
    public void countIncrement(View view) {
        int count = Integer.parseInt(mTextView.getText().toString());
        Log.d(TAG, "count " + count);
        if(count >= 0){
            count = count + 1;
            mTextView.setText(count + "");
        } else {
            Log.d(TAG, "Count is already 0 ");
        }
    }
}

In this example, I was using Butterknife library to inject the views and click actions for the buttons.
In case, if you don`t want to use the above library please follow the traditional way to inflate the view by using findViewById

Add butterknife dependency in build.gradle file

<br />
compile 'com.jakewharton:butterknife:8.8.1'<br />
annotationProcessor 'com.jakewharton:butterknife-compiler:8.8.1'<br />

For button cosmetic changes, I created xml shape file for the button to make it look round change. Create a file under drawable folder with the name button_shape.xml

 

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"   >
    <solid
        android:color="@color/colorAccent" >
    </solid>
    <corners
        android:radius="25dp"   >
    </corners>
</shape>

Step 6: Build the files and run on the android wear emulator. Hope it works.

Download source code GitHub
Please post your comments for any queries.

Leave a comment

Your email address will not be published. Required fields are marked *

%d bloggers like this: