Welcome to XDA

Search to go directly to your device's forum

Register an account

Unlock full posting privileges

Ask a question

No registration required
Post Reply

[TUT]Make your own watchface

OP naheel azawy

1st July 2014, 10:50 PM   |  #1  
Quote:

Please do not take everything and say it's you'r own job. It's enough to say thanks to me on your app. There's something in this world called google removal

Hello everyone, I've made a simplified tutorial to make your own watchface widget

Quote:

xda Portal

Quote:

Requirements:
-Eclipse
-Android SDK
-Sony Add-on SDK

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


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-To rename the app go to: res/values/strings.xml


15-And give it any name you want


16-This text is the details on the interface of the app, you can change it to anything you want. if you need to make new line type "\n"


17-Press Ctrl+S to save it.

18-To change the email of "Contact me" button go to: "src/-the package name-/ClockWidgetPreferncesActivity.java" and change this:


19-If you don't need that button and you want to remove it, first delete this on "src/-the package name-/ClockWidgetPreferncesActivity.java":

and this on "res/layout/activity_prefernces.xml":


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

21-Connect you device to the pc

22-Enable USB debugging on your phone

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


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

25-Enjoy


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

How To Resize:

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

2-Edit the marked in red below:
Code:
@Override
    public int getWidth() {
        return getCellWidth() * 5;
    }

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




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

How To Add Date:

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


2-Add this:
Code:
<?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" >

<com.sonyericsson.extras.liveware.aef.widget.TimeLayout
        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="@android:color/white"
            widgets:textSize="25px"
            widgets:timeType="days_of_month" />
    </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.TimeL ayout" 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:

Code:
<?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" />

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

    <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:
Code:
<?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" />

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

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

    <!-- 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/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:
Code:
<string name="name_1">Analog 1</string>
    <string name="name_2">Analog 2</string>
To be like this:
Code:
<?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>
    <string name="name_1">Analog 1</string>
    <string name="name_2">Analog 2</string>

</resources>


5-Edit "AnalogClock2.java" in src/-package name-.widgets from:
Code:
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.clock_widget_analog;
    }

    @Override
    public int getName() {
        return R.string.app_name;
    }

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

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

    @Override
    public int getPreviewUri() {
        return R.drawable.watchface_analog_preview;
    }
}
To:
Code:
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.clock_widget_analog_2;
    }

    @Override
    public int getName() {
        return R.string.name_2;
    }

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

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

    @Override
    public int getPreviewUri() {
        return R.drawable.watchface_analog_preview_2;
    }
}


6-Edit "clock_widget_analog_2.xml" on res/layout from:
Code:
<?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" />

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

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

    <!-- 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/analog_clock_hand_seconds" />

</RelativeLayout>
To:
Code:
<?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_2" />

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

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

    <!-- 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/analog_clock_hand_seconds_2" />

</RelativeLayout>


7-Edit "analog_clock_hand_seconds_2.xml" from:
Code:
<?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/second_00"
        widgets:timeType="seconds" />

</com.sonyericsson.extras.liveware.aef.widget.TimeLayout>
To:
Code:
<?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/second_00_2"
        widgets:timeType="seconds" />

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


8-Edit "analog_clock_hand_minutes_border_2.xml" from:
Code:
<?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/minute_border_00"
        widgets:timeType="minutes" />

</com.sonyericsson.extras.liveware.aef.widget.TimeLayout>
To:
Code:
<?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/minute_border_00_2"
        widgets:timeType="minutes" />

</com.sonyericsson.extras.liveware.aef.widget.TimeLayout>
9-Edit "analog_clock_hand_hours_border_2.xml" from:
Code:
<?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/hour_border_00"
        widgets:timeType="hours_fine" />

</com.sonyericsson.extras.liveware.aef.widget.TimeLayout>
To:
Code:
<?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/hour_border_00_2"
        widgets:timeType="hours_fine" />

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






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

If you made a watch, post it here and I'll add it to the collection
Attached Files
File Type: zip ClockWidgets.zip - [Click for QR Code] (85.7 KB, 839 views)
Last edited by naheel azawy; 10th August 2014 at 08:42 PM.
The Following 44 Users Say Thank You to naheel azawy For This Useful Post: [ View ]
1st July 2014, 11:52 PM   |  #2  
DeadlyDazza's Avatar
Senior Member
Thanks Meter: 85
 
642 posts
Join Date:Joined: Jul 2010
You sir, are a legend.
The Following User Says Thank You to DeadlyDazza For This Useful Post: [ View ]
2nd July 2014, 02:31 AM   |  #3  
Shawtyq's Avatar
Junior Member
Thanks Meter: 7
 
23 posts
Join Date:Joined: Jan 2013
I love you!!!

Thanks so much
2nd July 2014, 03:17 AM   |  #4  
Senior Member
Thanks Meter: 132
 
445 posts
Join Date:Joined: Mar 2007
Donate to Me
More
Dumb question - after you run the Android application via Eclipse and it installs the APK onto the phone, how do you view the watchface? Should it show as a new watchface clock in the customise watchface editor?

Edit: Answered my own question - yes
Last edited by julz; 2nd July 2014 at 03:20 AM.
2nd July 2014, 08:45 AM   |  #5  
Senior Member
Thanks Meter: 132
 
445 posts
Join Date:Joined: Mar 2007
Donate to Me
More
Are you able to explain how to add a date to the analog clock (e.g. day of the month) and also maybe the month (e.g. Jul for July)

Thanks in advance!
2nd July 2014, 02:34 PM   |  #6  
Quote:
Originally Posted by julz

Are you able to explain how to add a date to the analog clock (e.g. day of the month) and also maybe the month (e.g. Jul for July)

Thanks in advance!

I will
The Following 2 Users Say Thank You to naheel azawy For This Useful Post: [ View ]
4th July 2014, 06:41 AM   |  #7  
Senior Member
Thanks Meter: 132
 
445 posts
Join Date:Joined: Mar 2007
Donate to Me
More
Quote:
Originally Posted by naheel azawy

I will

Hi Naheel,

I've tried adding the date but without any luck. Nothing is showing up on the watchface. Do I have to add some other code to include the new XML as part of the build? Will the date show above the watch background image or is there the chance that it is on the bottom layer? Also I'm guessing that the text will be white as per the sample code you posted. Any help is appreciated!
4th July 2014, 02:53 PM   |  #8  
Quote:
Originally Posted by julz

Hi Naheel,

I've tried adding the date but without any luck. Nothing is showing up on the watchface. Do I have to add some other code to include the new XML as part of the build? Will the date show above the watch background image or is there the chance that it is on the bottom layer? Also I'm guessing that the text will be white as per the sample code you posted. Any help is appreciated!

Sorry, I forget one last step.
edited
The Following 3 Users Say Thank You to naheel azawy For This Useful Post: [ View ]
4th July 2014, 04:08 PM   |  #9  
Senior Member
Thanks Meter: 132
 
445 posts
Join Date:Joined: Mar 2007
Donate to Me
More
Thumbs up
Quote:
Originally Posted by naheel azawy

Sorry, I forget one last step.
edited

Thanks mate! I'll give it a go!


EDIT: Awesome it works!! Thanks once again! Time to update my watchfaces to include dates
Last edited by julz; 4th July 2014 at 11:42 PM.
The Following User Says Thank You to julz For This Useful Post: [ View ]
6th July 2014, 02:16 AM   |  #10  
Mohamed Hashem's Avatar
Senior Member
Flag Zagazig
Thanks Meter: 783
 
738 posts
Join Date:Joined: Mar 2013
More
I'm glad, Great work

Post Reply Subscribe to Thread
Previous Thread Next Thread
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes