Let's get started.
Things you'll need
- Android Studio installed and configured.
- Android Wear emulator configured (Either square or rounded).
- Basic knowledge in Java.
First steps:
First of all you're gonna need to open a new Android Studio Project. And select Wear OS tab and open up a Blank Wear Activity.
Then you need to configure your new project. Give a name you like for your project. Im using the default name. Then a suitable package name, a save location to save all the files of your project.
Select a minimum API level for your app to work and click on Finish.
After finishing the configuration you'll see your Android Studio workspace.
I'm going to switch to Wear OS layout by clicking on the default device Pixel, and then you can select Wear OS device from the dropdown list.
After that you can see your WearOS workspace.
Congratulations you've just set up your first WearOS app. Android Studio gives you a sample Hello World app here. You can run the app by clicking on the play icon on the top right section. And the emulator will popup and It'll show your hello world text.
So that's pretty much it for the first steps. Now let's see how can we add some extra functionalities to this app. In this case let's make a counter app.
So Im gonna remove all the default text views and stuff and now I have a clean workspace.
First Im gonna change the Frame Layout to a Constraint Layout. And then select Button from components menu and drag and drop on to your layout. Change the text into "Click". Use constraints to position the button to the bottom of the layout. And then drag and drop a TextView. Change the label to 0 and use constraints to position the TextView above the button. Do the same thing again and place another TextView above previous TextView and label it as "Times Clicked". So your final layout will look like this.
Make sure you provide the Click button and the TextView containing number of times with suitable IDs. Select the element and in the attributes panel, you can give them an ID. Im gonna name the button to btnClick and the TextView to times.
Okay now that the layout is done, let's move on to some code. Open MainActivity.java file.
Declaring Variables
What we need here is to display number of times that the button get clicked. So we need to interact with a button and a TextView. Above the @override declare which components we are interacting with. And also create an integer variable to store the number of clicks.
TextView times;
Button click;
int clicks = 0;
So we have one variable names times for the TextView and another variable named clicked for the button. Now we can point variables to out layout.
So inside the onCreate method do the following.
times = (TextView) findViewById(R.id.times);
click = (Button) findViewById(R.id.btnClick);
Now we need to set up an on click listener to catch the click event of the button.
click.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
}
});
Now inside the method, do the following.
clicks = clicks +1;
times.setText(String.valueOf(clicks));
So each time user clicks on the button, the value stored in the variable clicks get incremented by one. And then the TextView is updated accordingly. Make sure you cast the integer to a String when setting the TextView because setText only accepts String data.
So your whole code should look like this.
package yourdomain.dev.myapplication;
import android.os.Bundle;
import android.support.wearable.activity.WearableActivity;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
public class MainActivity extends WearableActivity {
TextView times;
Button click;
int clicks = 0;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
times = (TextView) findViewById(R.id.times);
click = (Button) findViewById(R.id.btnClick);
click.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
clicks = clicks +1;
times.setText(String.valueOf(clicks));
}
});
// Enables Always-on
setAmbientEnabled();
}
}
Thats it! Go ahead and run your app. Mine looks like this!
So hope you all learned something! See you!
Top comments (1)
Youre welcome 😃