Android Wear — Design + Code [#1]
Hi fellow developer!
I want to share with you a series of insights and tutorials about design and code for Android Wear. The idea behind these articles is to get you up and running with the most common UI elements supported by the platform and why not, the upcoming ones on Android Wear 2.0.
I have picked Android Wear because the design specs are almost minimal and the code is really easy to understand. So hopefully when you get to work with other developers, designers or on your own you’ll remember some tips from here and start working harder better faster stronger. Yeah, coding doesn't need to be more stressful.
Disclaimer: If you are looking at Android Wear, I assume that at least you know the basics of Android development and you know your way using Android Studio. The tutorial is step-by-step like, but I wanted to give you a heads up :)
With no more; let’s jump into the good ol’ HELLO WORLD.
A simple app displaying Hello World
1 - Open Android Studio and create a new project, name it Hello Wearable World, 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 - Add No Activity to our project (because I know you want to build it yourself and be proud of it), click finish and wait until the building process is done.
4 - Now that our project is built let’s add the activity we are going to use, and for this tutorial the fastest way is going to the root folder of your project and right click; New > Activity > Empty Activity.
You’ll see how Android Studio will create the Java class and the XML layout, and if nothing went wrong it should look something like this.
5 - Let’s tackle the XML first so open the activity_main.xml file and delete everything but first line. Should look like this.
This layout is really simple since all the action happens inside the Java class, but in simple word the BoxInsetLayout is just a layout that works for round and square screens. This is the entire code for this layout:
<?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>6 - Now open the Java class and let’s add the code. I’ll be adding it line by line and explain what is happening in each line we add. The code in bold style is the one that we are writing on each step.
A) Here in FragmentManager is where we obtain an instance of the CardFragment in order to add it to the activity.
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
FragmentManager fragmentManager = getFragmentManager();
}
}B) And here we need to use the FragmentTransaction to handle…guess what…yes, the transactions haha.
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();
}
}C) Here is basically where we create an instance of the CardFragment and we put the content to display inside the card; a title, the card content and the icon.
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();
CardFragment cardFragment = CardFragment.create("Title", "Hello World", R.mipmap.ic_launcher);
}
}D) So we’ll add all the content specified in the CardFragment to the container created in our XML layout.
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();
CardFragment cardFragment = CardFragment.create("Title", "Hello World", R.mipmap.ic_launcher);
fragmentTransaction.add(R.id.frame_layout, cardFragment);
}
}E) And just like in GitHub commit your changes.
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();
CardFragment cardFragment = CardFragment.create("Title", "Hello World", R.mipmap.ic_launcher);
fragmentTransaction.add(R.id.frame_layout, cardFragment);
fragmentTransaction.commit();
}
}7 - Don’t forget to declare the activity on your manifest. Should look something like this:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.nelmer.hellowearableworld">
<uses-feature android:name="android.hardware.type.watch" />
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:supportsRtl="true"
android:theme="@android:style/Theme.DeviceDefault">
<activity
android:name=".MainActivity"
android:label="@string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>NOW RUN YOUR APP AND BE PROUD OF YOUR CREATION
If you ever need to reference the full code of the app, check it in my GitHub.
