[TUT]Make your own watchface

Search This thread
By:
Advanced…
A

Ally153

Senior Member
Dec 26, 2007
57
1
naheel azawy said:
I tried to make this in drawable:
Code: 
<?xml version="1.0" encoding="utf-8"?>
<!-- Defines the least significant hour number using a level-list of drawables
that can be referenced when creating clocks. -->
<level-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:text="one" android:textSize="20px" />
    <item android:text="two" android:textSize="20px" />
    <item android:text="three" android:textSize="20px" />
    <item android:text="four" android:textSize="20px" />
    <item android:text="five" android:textSize="20px" />
    <item android:text="six" android:textSize="20px" />
    <item android:text="seven" android:textSize="20px" />
    <item android:text="eight" android:textSize="20px" />
    <item android:text="nine" android:textSize="20px" />
    <item android:text="ten" android:textSize="20px" />
    <item android:text="eleven" android:textSize="20px" />
    <item android:text="twelve" android:textSize="20px" />
</level-list>

that had to be the hours but it didn't worked on the watch.
however, you can write what ever you want on png files and use it as a level list
Click to expand...
Click to collapse

Cheers naheel, I had thought of doing that too, the problem is it's far less adaptable if I want to create variations on themes and tweaking sizes etc to fit. It'll also make it hard in the future if I wanted to localize to other languages. It's frustrating for Sony to put in a tutorial you can do this but not properly explain how it's done! I felt their api documentation was a bit light too.

Oh well, we'll be releasing a binary watch face in the mean time when I get round to it :)

Sent from my HTC One using XDA Premium 4 mobile app
 
  • Like
Reactions: naheel azawy
naheel azawy

naheel azawy

Senior Member
Mar 10, 2012
627
962
27
doha/qatar
Sapindersandhu said:


7KhsgwHi80eI5PHk9p_2vUd6RxaWQ18HxQ7_idlgqf-H0m7_raApZENhQDzi0V7yYpN2=w300


​
Click to expand...
Click to collapse

can you please tell me what about this:
"A Link!"
and this:
"A link!"

you are stealing my work and @ceeso work
I've reported before about somebody else before little days for steeling my moto watchfaces and now you ...
that's really boring

Sorry xda for putting payed apps' links. But I'm not sharing it. I'm telling people not to by it
 
Last edited:
  • Like
Reactions: julz and ceeso
J

julz

Senior Member
Mar 17, 2007
519
151
www.julianjwong.com
Hey Naheel,
This is terrible behavior. I can't believe someone else again stole your exact watchface and put them up for sale. I've also reported them to XDA moderators and Google.


Edit: just realized that guy also stole my app description. He's definitely asking for a ban...
 
Last edited:
  • Like
Reactions: safariking and naheel azawy
Naddict

Naddict

Senior Member
Nov 23, 2011
8,510
13,862
28.2S, 92.1W
Thread lightly cleaned, lets not start anything in here, take it where it rightfully needs to go. And I saw the links..please edit your post and remove them. Thanks
 
  • Like
Reactions: naheel azawy
M

MpB907

Guest
Malformed digital clock?

The digital clock seems to be malformed. The widget shown in the preview doesn't at all look like the one in the preview. (Without editing any files)
 
M

Megatastic

Member
May 19, 2014
18
5
Hi all,

After this tute was released there has been an amazing amount of really awesome analogue clocks created. Personally I'm a fan of digital clocks but they are very few in number compared to analogue. I can envisage that someone with some artistic flare for design and using this tute could make an awesome digital clock that could take the world by storm :D
 
  • Like
Reactions: naheel azawy
O

olagaton

Member
Jun 20, 2011
30
2
Corpus Christi
Will this tutorial work for Sony Smartwatch 1 watchfaces?

I'm looking for a watchface with a second-hand, but am having a lot of difficulty finding one compatible with the MN2. Any suggestions?
 
sandhu4

sandhu4

Senior Member
Aug 21, 2014
62
26
Helo naheel, thanks for great tutorial .. i want to know that how can i change the fonts of date in watch face..???
 
C

Chillout

Senior Member
Jul 15, 2008
243
176
Great tutorial! I made a nice clock with it :)

Only 1 problem: adding a second (analog) clock doesn't seem to go too well... Any ideas? It will just not show up in the widget selection screen.


edit:
I guess
Code: 
widgetList.add(AnalogClock2.class);

and
Code: 
import com.naheel.sw2.widget.example.analog.widgets.AnalogClock2;
is missing from com.naheel.sw2.widget.example.analog.ClockWidgetRegistrationInformation
 
Last edited:
J

joe.stone

Senior Member
Jul 28, 2010
502
908
Hi !

Thanks for the great tutorial ! I have some notices , according to http://developer.android.com/sdk/installing/installing-adt.html jdk is needed , which i cant find in the guide , maybe you can put it in.

I played with my sw2 , creating watchface . I used the Clockwidget sample coming with the sdk . It contains two digital clocks, analog clock , and date widgets too. I modified clock_widget_roboto.xml and created my digital clock . I would like to ask for your help , as I have no idea how can I put separator " : " between hours and minutes and between minutes and seconds. Here is my xml :
Code: 
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:baselineAligned="false"
    android:gravity="center"
    android:orientation="horizontal"
    android:weightSum="1" >

    <!-- This layout contain components that displays a digital watch with a
    white background for the hours and no set background for the minutes.
    Use TimeLayout components to place TimeViews showing e.g. hours and minutes
    when building up the clock UI. -->

    <com.sonyericsson.extras.liveware.aef.widget.TimeLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="0.5"
        widgets:gravity="center" >
        

        <!-- Defines the hour digits by using a TimeView the timeType to
        hours. -->
        <com.sonyericsson.extras.liveware.aef.widget.TimeView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:includeFontPadding="false"
            android:textColor="#ff00FF00"
            widgets:textSize="match_parent"
            widgets:timeType="hours" />
    </com.sonyericsson.extras.liveware.aef.widget.TimeLayout>

    <com.sonyericsson.extras.liveware.aef.widget.TimeLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="0.5"
        widgets:gravity="center" >

        <!-- Defines the hour digits by using a TimeView the timeType to
        minutes. -->
        <com.sonyericsson.extras.liveware.aef.widget.TimeView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:includeFontPadding="false"
            android:textColor="#ff00FF00"
            widgets:textSize="70px"
            widgets:timeType="minutes" />
        

        <com.sonyericsson.extras.liveware.aef.widget.TimeView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:includeFontPadding="false"
            android:textColor="#ffFFFF00"
            widgets:textSize="25px"
            widgets:timeType="seconds" />
    </com.sonyericsson.extras.liveware.aef.widget.TimeLayout>

</LinearLayout>
Nothing realy special , just changed the color and size of digits , added seconds, removed the white background from hours digit. Later I plan to change the font , as now uses system default font.
attachment.php

Edit : Font change is working fine.
attachment.php
 

Attachments

  • sw2_wf1_1.jpg
    sw2_wf1_1.jpg
    21.6 KB · Views: 4,397
  • sw2_wf2_1.jpg
    sw2_wf2_1.jpg
    25.1 KB · Views: 1,811
Last edited:
nwg

nwg

Senior Member
Nov 30, 2012
380
167
dev.nwg.pl
Naheel, thank you very much for the excellent tutorial!

I've been trying to make a bunch of Ingress watchfaces. Everything works well until I try to make 'Multiple WatchFace In One App' according to your guidance. At the time my app contains two watchfaces, 'Enlighted' and 'Resistance', but the second one is invisible after I install the app.

My question is: did anyone follow the 'Multiple WatchFace In One App' section successfully? I know that the most probably I'm doing something wrong, but I keep on checking step by step, and it seems everything was done according to instructions.
 

Attachments

  • ClockWidgetsIngress.apk
    189.8 KB · Views: 97
sandhu4

sandhu4

Senior Member
Aug 21, 2014
62
26
joe.stone said:
Hi !

Thanks for the great tutorial ! I have some notices , according to http://developer.android.com/sdk/installing/installing-adt.html jdk is needed , which i cant find in the guide , maybe you can put it in.

I played with my sw2 , creating watchface . I used the Clockwidget sample coming with the sdk . It contains two digital clocks, analog clock , and date widgets too. I modified clock_widget_roboto.xml and created my digital clock . I would like to ask for your help , as I have no idea how can I put separator " : " between hours and minutes and between minutes and seconds. Here is my xml :
Code: 
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:baselineAligned="false"
    android:gravity="center"
    android:orientation="horizontal"
    android:weightSum="1" >

    <!-- This layout contain components that displays a digital watch with a
    white background for the hours and no set background for the minutes.
    Use TimeLayout components to place TimeViews showing e.g. hours and minutes
    when building up the clock UI. -->

    <com.sonyericsson.extras.liveware.aef.widget.TimeLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="0.5"
        widgets:gravity="center" >
        

        <!-- Defines the hour digits by using a TimeView the timeType to
        hours. -->
        <com.sonyericsson.extras.liveware.aef.widget.TimeView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:includeFontPadding="false"
            android:textColor="#ff00FF00"
            widgets:textSize="match_parent"
            widgets:timeType="hours" />
    </com.sonyericsson.extras.liveware.aef.widget.TimeLayout>

    <com.sonyericsson.extras.liveware.aef.widget.TimeLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="0.5"
        widgets:gravity="center" >

        <!-- Defines the hour digits by using a TimeView the timeType to
        minutes. -->
        <com.sonyericsson.extras.liveware.aef.widget.TimeView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:includeFontPadding="false"
            android:textColor="#ff00FF00"
            widgets:textSize="70px"
            widgets:timeType="minutes" />
        

        <com.sonyericsson.extras.liveware.aef.widget.TimeView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:includeFontPadding="false"
            android:textColor="#ffFFFF00"
            widgets:textSize="25px"
            widgets:timeType="seconds" />
    </com.sonyericsson.extras.liveware.aef.widget.TimeLayout>

</LinearLayout>
Nothing realy special , just changed the color and size of digits , added seconds, removed the white background from hours digit. Later I plan to change the font , as now uses system default font.
attachment.php

Edit : Font change is working fine.
attachment.php
Click to expand...
Click to collapse

its nice.. did you change fonts with .png files..???
 
J

joe.stone

Senior Member
Jul 28, 2010
502
908
nwg said:
Naheel, thank you very much for the excellent tutorial!

I've been trying to make a bunch of Ingress watchfaces. Everything works well until I try to make 'Multiple WatchFace In One App' according to your guidance. At the time my app contains two watchfaces, 'Enlighted' and 'Resistance', but the second one is invisible after I install the app.

My question is: did anyone follow the 'Multiple WatchFace In One App' section successfully? I know that the most probably I'm doing something wrong, but I keep on checking step by step, and it seems everything was done according to instructions.
Click to expand...
Click to collapse

Try to make a clean in eclipse. In project menu there is clean. Select your project only and click to clean selected project only too. Finaly click ok . When clean is complete , recompile the app selecting run as and android application.
I had same issues after adding my third digital clock to my app and this solved the problem.
 
  • Like
Reactions: nwg
naheel azawy

naheel azawy

Senior Member
Mar 10, 2012
627
962
27
doha/qatar
joe.stone said:
Hi !

Thanks for the great tutorial ! I have some notices , according to http://developer.android.com/sdk/installing/installing-adt.html jdk is needed , which i cant find in the guide , maybe you can put it in.

I played with my sw2 , creating watchface . I used the Clockwidget sample coming with the sdk . It contains two digital clocks, analog clock , and date widgets too. I modified clock_widget_roboto.xml and created my digital clock . I would like to ask for your help , as I have no idea how can I put separator " : " between hours and minutes and between minutes and seconds. Here is my xml :
Code: 
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:baselineAligned="false"
    android:gravity="center"
    android:orientation="horizontal"
    android:weightSum="1" >

    <!-- This layout contain components that displays a digital watch with a
    white background for the hours and no set background for the minutes.
    Use TimeLayout components to place TimeViews showing e.g. hours and minutes
    when building up the clock UI. -->

    <com.sonyericsson.extras.liveware.aef.widget.TimeLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="0.5"
        widgets:gravity="center" >
        

        <!-- Defines the hour digits by using a TimeView the timeType to
        hours. -->
        <com.sonyericsson.extras.liveware.aef.widget.TimeView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:includeFontPadding="false"
            android:textColor="#ff00FF00"
            widgets:textSize="match_parent"
            widgets:timeType="hours" />
    </com.sonyericsson.extras.liveware.aef.widget.TimeLayout>

    <com.sonyericsson.extras.liveware.aef.widget.TimeLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="0.5"
        widgets:gravity="center" >

        <!-- Defines the hour digits by using a TimeView the timeType to
        minutes. -->
        <com.sonyericsson.extras.liveware.aef.widget.TimeView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:includeFontPadding="false"
            android:textColor="#ff00FF00"
            widgets:textSize="70px"
            widgets:timeType="minutes" />
        

        <com.sonyericsson.extras.liveware.aef.widget.TimeView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:includeFontPadding="false"
            android:textColor="#ffFFFF00"
            widgets:textSize="25px"
            widgets:timeType="seconds" />
    </com.sonyericsson.extras.liveware.aef.widget.TimeLayout>

</LinearLayout>
Nothing realy special , just changed the color and size of digits , added seconds, removed the white background from hours digit. Later I plan to change the font , as now uses system default font.
attachment.php

Edit : Font change is working fine.
attachment.php
Click to expand...
Click to collapse

You can add separator by adding new text view and the text will be ":". Check this sample from a moto watch:

Code: 
<TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="100px"
        android:layout_marginTop="94px"
        android:text=":"
        android:textSize="60px"
        android:textColor="@android:color/white"/>

and set the margin, textSize and textColor as you like :good:
 
naheel azawy

naheel azawy

Senior Member
Mar 10, 2012
627
962
27
doha/qatar
Chillout said:
Great tutorial! I made a nice clock with it :)

Only 1 problem: adding a second (analog) clock doesn't seem to go too well... Any ideas? It will just not show up in the widget selection screen.


edit:
I guess
Code: 
widgetList.add(AnalogClock2.class);

and
Code: 
import com.naheel.sw2.widget.example.analog.widgets.AnalogClock2;
is missing from com.naheel.sw2.widget.example.analog.ClockWidgetRegistrationInformation
Click to expand...
Click to collapse

that's true, I forgot to add this on the second example. But I said that on the first example.
However, thanks for sharing this. It helped others :good:

nwg said:
Thank you. Just missed what Chillout had written in post #30. After adding these two lines everything works well.

I wonder if it's possible to add any other info than just date to analog watchfaces. They're beautiful, but I miss battery level, and notification icon. :)
Click to expand...
Click to collapse

Sorry for my late answer, I just came back to home.
 
  • Like
Reactions: Chillout
You must log in or register to reply here.

Similar threads

adrianmignogna
Show us your Watchface!
Replies
217
Views
87K
JawadEly
JawadEly
naheel azawy
WatchFaces Collection [Moved]
Replies
30
Views
99K
str8spir
str8spir
C
Big SmartWatch 2 update coming (1.0.B.4.80); brings new Watchfaces and customization
Replies
382
Views
79K
yomiguy
yomiguy
naheel azawy
[watchface][SW2]moto360 watchfaces style [Update V2.0/2-7]
Replies
57
Views
30K
S
sav25
A
when someone makes cutom watchface widgets post here
Replies
133
Views
23K
A
arkboy4ever

Top Liked Posts

24 Hours All time
  • There are no posts matching your filters.
  • 49
    naheel azawy
    naheel azawy
    View
    6
    nwg
    nwg
    Who wanted an LCARS styled clock?

    lcars_preview.png


    Download from Google Play
    View
    5
    naheel azawy
    naheel azawy
    julz said:
    I've been busy making new analog watchfaces and figured out how to offset the dials. Edit the code within \res\layout\clock_widget_analog.xml

    How to offset dials

    As an example the following code will use a square second hands PNG file, resize it to 45x45px and offset it 82px from the top and 70px from the left. It will continue to rotate around the centre of the PNG file (i.e. around pixel x=23,y=23)
    Code: 
    <include layout="@layout/analog_clock_hand_seconds"
        android:gravity="left"
        android:layout_marginTop="82px"
        android:layout_marginLeft="70px"
        android:layout_width="45px"
        android:layout_height="45px" 
        />
    Click to expand...
    Click to collapse

    good notice :good:
    also you can do that on the "analog_clock_hand_seconds.xml" it self.

    Coming soon;
    11.png
    View
    3
    nwg
    nwg
    naheel azawy said:
    Sorry for my late answer, I just came back to home.
    Click to expand...
    Click to collapse
    Welcome back :)

    I'm not yet really happy with them, but here you are my first watchfaces. They are related to Ingress (game logo, Resistance faction logo, Enlightened faction logo), the only game I play.

    ingress_watchfaces.png
    View
    3
    T
    tash78
    black and white analog examples

    Hello all,
    Here enclosed is what I have made for my sw2. My contribution is minimal, just followed Naheel's guide.
    View

New posts