[Sony Smartwatch 2] naheel azawy:
Hello everyone, I've made a simplified tutorial to make your own watchface widget.

In this update I made simpler source code that simplified some steps.

Thanks to xda for posting it in xda Portal

-----------------------------------------------------------------------------------------------------------------------

[YOUTUBE]M-WqPOqoRa0[/YOUTUBE]

-----------------------------------------------------------------------------------------------------------------------​

1-Download the samples.

2-Extract the zip.

3-Copy the both extracted folders to: "android-sdks\add-ons\addon-sony_add-on_sdk_3_0-sony-19\samples\SmartExtensions".

4-Open Eclipse and press Ctrl+N, open "Android" and choose "Android Sample Project".

5-Choose "Sony Add-on SDK 3.0".

6-Choose "SmartExtensions > SmartExtensionAPI" and press Finish.

7-Repeat step 4 to 5, choose "SmartExtensions > SmartExtensionUtils" and press Finish.

8-Repeat step 4 to 5, choose "SmartExtensions > ClockWidgetAnalog" if you wanna make an analog clock. or "SmartExtensions > ClockWidgetDigitalList" if you need to make a digital clock. For example, I'll choose the analog clock.

9-Press Finish

10-Now your workspace should looks like this:

11-To rename the project right click on it like this image:

12-Give it any name you want

13-To rename application package right click like this image:

14-Go to: res/values/strings.xml

15-Change these strings and press Ctrl+S to save it.

-You can keep the 'more apps" link if you want. It go to the watch faces collection thread.

-It's optional to add your email, and here's how to remove "Contact me" button:

-Go to res/layout/activity_preference.xml and find this:

<Button
android:id="@+id/emailBtn"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:visibility="[COLOR="Red"]visible[/COLOR]"
android:text="@string/email_btn"/>

-Then change the text marked with red above to "gone". So it will be like this:

<Button
android:id="@+id/emailBtn"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:visibility="[COLOR="Red"]gone[/COLOR]"
android:text="@string/email_btn"/>

16-Change the graphical resources change files in res/drawable-nodpi

17-Connect you device to the pc

18-Enable USB debugging on your phone

19-Right click on the project > Run As > Android application

20-If you want to share the apk you'll find it in the project bin

21-Enjoy :)

-----------------------------------------------------------------------------------------------------------------------​

How To Resize:

1-Go to "AnalogClock.java" or "DigitalClockLevelList.java in src/-package name-.widgets

2-Edit the marked in red below:

@Override
public int getWidth() {
return getCellWidth() * [COLOR="Red"]5[/COLOR];
}

@Override
public int getHeight() {
return getCellHeight() * [COLOR="Red"]5[/COLOR];
}

-----------------------------------------------------------------------------------------------------------------------​

How To Add Date:

1-Create new xml file in "res/layout" and give it any name you want

2-Add this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:widgets="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="1" >

[COLOR="RoyalBlue"]<com.sonyericsson.extras.liveware.aef.widget.TimeLayout[/COLOR]
android:layout_width="wrap_content"
android:layout_height="wrap_content" >

<com.sonyericsson.extras.liveware.aef.widget.TimeView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:includeFontPadding="false"
android:textColor="[COLOR="DarkOrange"]@android:color/white[/COLOR]"
widgets:textSize="[COLOR="Lime"]25[/COLOR]px"
widgets:timeType="[COLOR="Red"]days_of_month[/COLOR]" />
</com.sonyericsson.extras.liveware.aef.widget.TimeLayout>

</RelativeLayout>

3-You can change the text marked in red above to:

-"days_of_week"

-"days_of_month"

-"days_of_year"

-"months"

4-You can change the number marked in green above to any number you want, to set the font size. Please notice that the unit must be "px" and do not use "dp".

5-You can change on the text marked in orange "white" to "black", or you can remove all the text in orange and put any hex color code. For example:

android:textColor="#ffbf00"

6-To change the position of it, add under "<com.sonyericsson.extras.liveware.aef.widget.TimeLayout" which is marked in blue above:

-android:layout_centerInParent="true" to put it in the center.

-android:layout_centerHorizontal="true" to put it center in horizontal.

-android:layout_centerVertical="true" to put it center in vertical.

-android:layout_alignParentRight="true" to move it to right side.

-android:layout_alignParentLeft="true" to move it to left side.

-android:layout_alignParentTop="true" to move it to to the top.

-android:layout_alignParentBottom="true" to move it to the buttom.

-android:layout_marginRight="10px" change "10" to any number.

-android:layout_marginLeft="10px" change "10" to any number.

-android:layout_marginTop="10px" change "10" to any number.

-android:layout_marginBotton="10px" change "10" to any number.

7-At last, we must include the date xml on the main watch layout xml which is called on my samples "clock_widget_analog.xml" on analog and "clock_widget_levellists.xml" on the digital clock. For example, if you named the xml you made "date.xml" we will add the text marked in red below:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:widgets="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/apk/res/com.sonymobile.smartconnect.extension.testclock"
android:layout_width="215px"
android:layout_height="170px"
android:background="@android:color/transparent"
android:baselineAligned="false" >

<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="@drawable/watchface_bg" />

[COLOR="Red"]<include layout="@layout/date" />[/COLOR]

<include layout="@layout/analog_clock_hand_hours_border" />

<include layout="@layout/analog_clock_hand_minutes_border" />

<include layout="@layout/analog_clock_hand_seconds" />

</RelativeLayout>

-----------------------------------------------------------------------------------------------------------------------​

How To Reorder:

1-Open the main layout xml, -"clock_widget_analog.xml" on analog and "clock_widget_levellists.xml" on the digital clock-. For example, I'll work on analog.

2-You can remove text that start with "<!--" and end with "-->" like the marked in red . it's just notes from sony.This will make it easier:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:widgets="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/apk/res/com.sonymobile.smartconnect.extension.testclock"
android:layout_width="215px"
android:layout_height="170px"
android:background="@android:color/transparent"
android:baselineAligned="false" >

<!-- We set a background on containing the base for a watch face. -->
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="@drawable/watchface_bg" />

[COLOR="Red"]<!-- Here we reference a TimeLayout using a single drawable for displaying
the hour hand. -->[/COLOR]
<include layout="@layout/analog_clock_hand_hours_border" />

[COLOR="Red"]<!-- Here we reference a TimeLayout using a single drawable for displaying
the minute hand. -->[/COLOR]
<include layout="@layout/analog_clock_hand_minutes_border" />

[COLOR="Red"]<!-- Here we reference a TimeLayout using a single drawable for displaying
the second hand. Note: Seconds will not be shown when the backlight is off
on the SmartWatch 2. -->[/COLOR]
<include layout="@layout/analog_clock_hand_seconds" />

</RelativeLayout>

3-Now you can reorder lines that start with "<include layout="

-----------------------------------------------------------------------------------------------------------------------​

Multiple WatchFace In One App:

-First example is to add digital clock to analog:

1-Copy xml and png files in res/layout and res/drawable-nodpi from digital to analog

2-Copy "DigitalClockLevelList.java" on src/-package name-.widgets from digital to analog

3-Open "ClockWidgetRegistrationInformation" in src/-package name-/ and search for: WidgetClassList widgetList = new WidgetClassList();

4-Add this under WidgetClassList widgetList = new WidgetClassList();:

widgetList.add(DigitalClockLevelList.class);

The text marked in red is same file name you've copied in step 2

5-Now Eclipse will underline it in red as error, it will give you a list of fixes, choose first fix

-Second example if you want to make 2 or more analog watchfaces:

1-Go to res/layout and duplicate all except "activity_preferences.xml", you can rename the duplicated xmls for example by adding "2"

2-Duplicate "AnalogClock.java" in src/-package name-.widgets

3-Add graphical resources on res/drawable-nodpi/ and give it the same names but with "_2"

4-Add the following lines to res/values/strings.xml:

<string name="name_1">Analog 1</string>
<string name="name_2">Analog 2</string>

To be like this:

<?xml version="1.0" encoding="utf-8"?>
<!-- No translation of sample extensions -->
<resources xmlns:tools="http://schemas.android.com/tools" tools:ignore="MissingTranslation">

<string name="app_name">Analog clock widget</string>
<string name="preference_info">Analog clock watchface widget for Sony SmartWatch2\nDeveloped by Naheel Azawy\nVersion 1.0</string>
[COLOR="Red"]<string name="name_1">Analog 1</string>
<string name="name_2">Analog 2</string>[/COLOR]

</resources>

5-Edit "AnalogClock2.java" in src/-package name-.widgets from:

package com.naheel.sw2.widget.example.analog.widgets;

import com.naheel.sw2.widget.example.analog.R;

/**
* This widget displays an analog clock providing resources which will be
* automatically rotated by the accessory firmware to reflect the time.
*/
public class AnalogClock2 extends SmartWatch2ClockWidget {
public AnalogClock2(WidgetBundle widgetBundle) {
super(widgetBundle);
}

@Override
int getWidgetLayout() {
return R.layout.[COLOR="Red"]clock_widget_analog[/COLOR];
}

@Override
public int getName() {
return R.string.[COLOR="Red"]app_name[/COLOR];
}

@Override
public int getWidth() {
return getCellWidth() * 5;
}

@Override
public int getHeight() {
return getCellHeight() * 5;
}

@Override
public int getPreviewUri() {
return R.drawable.[COLOR="Red"]watchface_analog_preview[/COLOR];
}
}

To:

package com.naheel.sw2.widget.example.analog.widgets;

import com.naheel.sw2.widget.example.analog.R;

/**
* This widget displays an analog clock providing resources which will be
* automatically rotated by the accessory firmware to reflect the time.
*/
public class AnalogClock2 extends SmartWatch2ClockWidget {
public AnalogClock2(WidgetBundle widgetBundle) {
super(widgetBundle);
}

@Override
int getWidgetLayout() {
return R.layout.[COLOR="Red"]clock_widget_analog_2[/COLOR];
}

@Override
public int getName() {
return R.string.[COLOR="Red"]name_2[/COLOR];
}

@Override
public int getWidth() {
return getCellWidth() * 5;
}

@Override
public int getHeight() {
return getCellHeight() * 5;
}

@Override
public int getPreviewUri() {
return R.drawable.[COLOR="Red"]watchface_analog_preview_2[/COLOR];
}
}

6-Edit "clock_widget_analog_2.xml" on res/layout from:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:widgets="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/apk/res/com.sonymobile.smartconnect.extension.testclock"
android:layout_width="215px"
android:layout_height="170px"
android:background="@android:color/transparent"
android:baselineAligned="false" >

<!-- We set a background on containing the base for a watch face. -->
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="@drawable/[COLOR="Red"]watchface_bg[/COLOR]" />

<!-- Here we reference a TimeLayout using a single drawable for displaying
the hour hand. -->
<include layout="@layout/[COLOR="Red"]analog_clock_hand_hours_border[/COLOR]" />

<!-- Here we reference a TimeLayout using a single drawable for displaying
the minute hand. -->
<include layout="@layout/[COLOR="Red"]analog_clock_hand_minutes_border[/COLOR]" />

<!-- Here we reference a TimeLayout using a single drawable for displaying
the second hand. Note: Seconds will not be shown when the backlight is off
on the SmartWatch 2. -->
<include layout="@layout/[COLOR="Red"]analog_clock_hand_seconds[/COLOR]" />

</RelativeLayout>

To:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:widgets="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/apk/res/com.sonymobile.smartconnect.extension.testclock"
android:layout_width="215px"
android:layout_height="170px"
android:background="@android:color/transparent"
android:baselineAligned="false" >

<!-- We set a background on containing the base for a watch face. -->
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="@drawable/[COLOR="Red"]watchface_bg_2[/COLOR]" />

<!-- Here we reference a TimeLayout using a single drawable for displaying
the hour hand. -->
<include layout="@layout/[COLOR="Red"]analog_clock_hand_hours_border_2[/COLOR]" />

<!-- Here we reference a TimeLayout using a single drawable for displaying
the minute hand. -->
<include layout="@layout/[COLOR="Red"]analog_clock_hand_minutes_border_2[/COLOR]" />

<!-- Here we reference a TimeLayout using a single drawable for displaying
the second hand. Note: Seconds will not be shown when the backlight is off
on the SmartWatch 2. -->
<include layout="@layout/[COLOR="Red"]analog_clock_hand_seconds_2[/COLOR]" />

</RelativeLayout>

7-Edit "analog_clock_hand_seconds_2.xml" from:

<?xml version="1.0" encoding="utf-8"?>
<!-- Use TimeLayout components to place TimeViews showing e.g. hours or minutes
when building up the UI. -->
<com.sonyericsson.extras.liveware.aef.widget.TimeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:widgets="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/transparent"
widgets:gravity="center" >

<!-- Defines a second hand using a drawable and setting the timeType to
seconds. The second hand will be automatically rotated by the accessory
firmware. Note: Seconds will not be shown when the backlight is off
on the SmartWatch 2. -->
<com.sonyericsson.extras.liveware.aef.widget.TimeView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/[COLOR="Red"]second_00[/COLOR]"
widgets:timeType="seconds" />

</com.sonyericsson.extras.liveware.aef.widget.TimeLayout>

To:

<?xml version="1.0" encoding="utf-8"?>
<!-- Use TimeLayout components to place TimeViews showing e.g. hours or minutes
when building up the UI. -->
<com.sonyericsson.extras.liveware.aef.widget.TimeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:widgets="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/transparent"
widgets:gravity="center" >

<!-- Defines a second hand using a drawable and setting the timeType to
seconds. The second hand will be automatically rotated by the accessory
firmware. Note: Seconds will not be shown when the backlight is off
on the SmartWatch 2. -->
<com.sonyericsson.extras.liveware.aef.widget.TimeView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/[COLOR="Red"]second_00_2[/COLOR]"
widgets:timeType="seconds" />

</com.sonyericsson.extras.liveware.aef.widget.TimeLayout>

8-Edit "analog_clock_hand_minutes_border_2.xml" from:

<?xml version="1.0" encoding="utf-8"?>
<!-- Use TimeLayout components to place TimeViews showing e.g. hours or minutes
when building up the UI. -->
<com.sonyericsson.extras.liveware.aef.widget.TimeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:widgets="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/transparent"
widgets:gravity="center" >

<!-- Defines a minute hand using a drawable and setting the timeType to
minutes. The minute hand will be automatically rotated by the accessory
firmware. -->
<com.sonyericsson.extras.liveware.aef.widget.TimeView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/[COLOR="Red"]minute_border_00[/COLOR]"
widgets:timeType="minutes" />

</com.sonyericsson.extras.liveware.aef.widget.TimeLayout>

To:

<?xml version="1.0" encoding="utf-8"?>
<!-- Use TimeLayout components to place TimeViews showing e.g. hours or minutes
when building up the UI. -->
<com.sonyericsson.extras.liveware.aef.widget.TimeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:widgets="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/transparent"
widgets:gravity="center" >

<!-- Defines a minute hand using a drawable and setting the timeType to
minutes. The minute hand will be automatically rotated by the accessory
firmware. -->
<com.sonyericsson.extras.liveware.aef.widget.TimeView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/[COLOR="Red"]minute_border_00_2[/COLOR]"
widgets:timeType="minutes" />

</com.sonyericsson.extras.liveware.aef.widget.TimeLayout>

9-Edit "analog_clock_hand_hours_border_2.xml" from:

<?xml version="1.0" encoding="utf-8"?>
<!-- Use TimeLayout components to place TimeViews showing e.g. hours or minutes
when building up the UI. -->
<com.sonyericsson.extras.liveware.aef.widget.TimeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:widgets="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/transparent"
widgets:gravity="center" >

<!-- Defines an hour hand using a drawable and setting the timeType to
hours_fine. The hour hand will be automatically rotated by the accessory
firmware. -->
<com.sonyericsson.extras.liveware.aef.widget.TimeView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/[COLOR="Red"]hour_border_00[/COLOR]"
widgets:timeType="hours_fine" />

</com.sonyericsson.extras.liveware.aef.widget.TimeLayout>

To:

<?xml version="1.0" encoding="utf-8"?>
<!-- Use TimeLayout components to place TimeViews showing e.g. hours or minutes
when building up the UI. -->
<com.sonyericsson.extras.liveware.aef.widget.TimeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:widgets="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/transparent"
widgets:gravity="center" >

<!-- Defines an hour hand using a drawable and setting the timeType to
hours_fine. The hour hand will be automatically rotated by the accessory
firmware. -->
<com.sonyericsson.extras.liveware.aef.widget.TimeView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/[COLOR="Red"]hour_border_00_2[/COLOR]"
widgets:timeType="hours_fine" />

</com.sonyericsson.extras.liveware.aef.widget.TimeLayout>

-----------------------------------------------------------------------------------------------------------------------

---Old thread---

-----------------------------------------------------------------------------------------------------------------------

If you made a watch, post it here and I'll add it to the collection​