DFMirouf
Membre VIP
- Inscrit
- 17 Juillet 2012
- Messages
- 11 128
- Points
- 38
- #1
Ultimate Custom Clock Widget
Version d'Android requise : 2.2 et plus récente
Tuto par DFMirouf
Avertissement : Cette opération comporte des risques. Ni Phonandroid ni l'auteur de ce Tuto ne peuvent être tenus responsables des éventuels problèmes rencontrés.
========================================================================================================
Les widgets standards android vous lassent ?
Vous voudriez que votre mobile ou votre tablette ne ressemble qu'à vous ?
Alors cette application est faite pour vous : Créez vos propres widgets calendrier, météo, batterie, etc...
Nul besoin de connaissance en développement ni d'équipement de haute technologie ni même d'être ROOT....
Armez vous de patience et customisez VOTRE Android...
Vous voudriez que votre mobile ou votre tablette ne ressemble qu'à vous ?
Alors cette application est faite pour vous : Créez vos propres widgets calendrier, météo, batterie, etc...
Nul besoin de connaissance en développement ni d'équipement de haute technologie ni même d'être ROOT....
Armez vous de patience et customisez VOTRE Android...
PRE-REQUIS
- Etre sous Android 2.2 ou ultérieur
- Télécharger et installer S'il vous plaît, Connexion ou S'inscrire pour voir le contenu ou les urls !
- Avoir quelques notions d'anglais
- Savoir manipuler et retoucher les images est un plis appréciable :mrgreen:
- Avoir du temps et de la patience :mrgreen:
C'EST PARTI !
Nous allons commencer par créer notre premier widget.
Assurez vous d'avoir de l'espace disponible sur un écran d'accueil pour accueillir votre nouveau widget. Appuyez sur cet espace libre et maintenez comme pour ajouter un widget. Sélectionnez Widget et dirigez vous vers le widget UCCW de la taille que vous souhaitez (exprimé en largeur x hauteur d’icônes) - UCCW va s'ouvrir, cliquez sur Create a new skin - Votre écran d'accueil va s'afficher avec l'icone UCCW Touch here, donc...touchez le pour ouvrir l'interface UCCW :
Nous voici dans l'interface UCCW :
- 1 Espace de travail (votre widget va prendre vie ici)
- 2 Le menu qui permet de sélectionner l'objet actif
- 3 Object actif
- 4 Menu permettant d'ajouter ou de supprimer des objets
- 5 Menu permettant d'organiser l'ordre des objets superposés (premier plan / arrière plan)
- 6 Liste défilante permettant de passer d'une série de contrôles à une autre concernant l'objet actif
- 7 Liste des contrôles de la série de contrôles active
Liste des contrôles arrière-plan :
Nous allons définir une image d'arrière-plan pour notre widget :
Dans un premier temps, il faut définir la taille de l'arrière-plan, donc du widget.
et limitée à 160000 pixels (Nb de pixels H x Nb de pixels V)
Nous allons dans la série controls #3 pour définir la taille de notre arrière-plan à 536 x 298 (soit 536x298=159 728 pixels) puis dans la série controls #2 pour sélectionner l'image d'arrière-plan.
pour des images comportant des zones de transparence.
Nous allons ajouter du texte à notre widget :
Pour commencer, nous allons ajouter le jour de la semaine en cliquant sur +/-, choisir l'élément (il est possible d'en ajouter plusieurs à la fois), ici Day of the week, cliquer sur Close. Il nous faut maintenant le rendre actif en le sélectionnant dans le menu qui apparait en cliquant sur select object
Liste des contrôles pour les textes :
Nous allons maintenant définir la couleur, la police, l'ombre, la taille, la position et l'alignement de notre texte :
dans le répertoire \fonts à la racine de votre terminal.
Nous allons répéter ces opérations avec les éléments jour du mois et mois, heure et minute puis location, température et enfin des éléments de contrôle du niveau de batterie...
Comme on peut le constater ci-dessus, j'ai également modifié la transparence de l'image de fond
Nous allons maintenant ajouter des images à notre widget :
Nous allons ajouter notre première image en cliquant sur +/-, sélectionner image dans le menu déroulant, cliquer sur Close puis la sélectionner en cliquant sur select object
Cette première image est une icône de rafraichissement qui nous servira plus tard à réactualiser notre widget....
Et pour se (me) faire plaisir, je vais rajouter une petite touche perso avec une image représentant mon avatar du moment :mrgreen:
Nous allons finalement ajouter des images météorologiques à ce widget :
Pour cela, il nous faut cliquer sur +/-, sélectionner Icon - Current conditions dans le menu déroulant, cliquer sur Close , puis sélectionner cet icône en cliquant sur select object
L’icône météo apparait en haut à gauche de notre widget, nous allons le déplacer et le redimensionner :
Nous voyons que cet icône masque une partie de l'heure et la température. Il faut donc la passer en arrière plan. Pour cela nous allons cliquer sur SORT, ce qui va afficher le menu ci dessous reprenant l'ensemble des éléments de notre widget dans l'ordre de superposition. Il convient de placer en haut les éléments devant être en arrière plan et en bas de la liste ceux devant apparaitre au dessus des autres en faisant glisser l'onglet en regard de l'élément choisi. Une fois l'ordre défini, cliquer sur Save.
Les icônes météo par défaut n'étant pas très esthétiques, nous allons cliquer sur Weather icons afin de choisir une autre collection d’icônes plus appropriés et plus complète.
Les dossiers contenant ces icônes doivent être stockés dans le répertoire
\UltimateCustomClockWidget\weather sur votre terminal.
Pour terminer nous allons rendre notre widget interactif :
Kézako ?
Il s'agit d'ajouter des zones tactiles au widget qui, lorsqu'on cliquera dessus vont déclencher des actions (Raccourci, applications, évenements, etc...)
Pour cela nous allons y ajouter des Hotspots.
Dans le menu select objects, nous allons sélectionner Hotspots. (Ce sont des éléments qu'il n'y a pas besoin d'ajouter via le menu +/-)
Nous allons sélectionner le menu Select object la rubrique Hotspots puis cliquer dans les contrôles sur #1 pour créer notre premier Hotspot. Celui ci apparait alors à l'écran. Il nous reste à le positionner puis le dimensionner à l'aide des contrôles Position, Width & Height de la même façon que les images ou le texte.
J'ai créé, dimensionné et positionné de la même façon les quatre hotspots suivants :
- Positionné sur la date qui ouvrira l'application calendrier
- Positionné sur l'heure qui ouvrira l'application horloge
- Positionné sur la jauge de batterie qui ouvrira mon application de gestion de batterie
- Positionné sur mon icône de rafraichissement qui réactualisera à la demande les données météo du widget.
Pour attribuer les différentes actions aux hotspots, il faut cliquer sur le bouton Hotspot, ce qui ouvrira le menu ci-dessous :
- Clear Hotspot : supprimera l'action assignée au hotspot
- APP : permettra de lancer n'importe quelle application installée
- UCCW : permettra d'effectuer des actions particulières (réactualisation du widget, émettre un appel, etc...)
- Shortcut : permet d'avoir un accès rapide à certaines fonctions des applications le permettant (Varie en fonction des applis installées sur votre terminal)
Finalisation du widget
Il nous reste maintenant à sauvegarder ce widget. Plusieurs options sont alors disponibles.
Depuis le bouton menu, nous ouvrons le menu principal de l'application. Puis en cliquant sur Save / export skin nous obtenons le menu permettant différentes options de sauvegarde :
- Save skin : Sauvegarde votre skin sur votre terminal pour votre usage personnel
- Export skin : Exporte l'intégralité de votre Widget. Cela vous permettra de le réimporter sur un autre terminal ou de le partager avec d'autres. Le fichier est stocké au format .UZIP à la racine de votre terminal, dans un dossier nommé uccwOutput. A l'import, un widget exporté de cette manière restera complètement modifiable.
- Export for APK skin : Est une option plus poussée de l'exportation puisqu'elle vous permettra de verrouiller certains éléments et d'en laisser d'autres modifiables. Cette option est utilisée pour commercialiser les widgets par exemple, ou laisser votre signature apparente sur le widget. C'est sous cette forme que se trouvent la plupart des skins téléchargeables sur le market.
- Save as image : Sauvegarde votre skin au format image, pour en avoir une représentation graphique.
Menu principal de l'application
Principales options disponibles dans le menu principal sont :
- New skin : pour créer un nouveau widget
- Open / import / manage skins : ouvrir un skin / importer (fichier .UZIP) / supprimer un skin
- Save / export skin : [Voir plus haut]
- Hotspot mode : active ou désactive les hotspots sur les widgets. Lorsque cette option est sur Off, si l'on clique sur un widget, on ouvre ce dernier en mode édition dans UCCW. Pour réactiver les hotspots et les actions associées, il faut mettre ce paramètre sur ON
- Settings : divers réglages propres à l'application et aux widgets qui en sont issus
Rendu final du widget
Lorsque l'on quitte l'application, notre widget apparait à l'endroit désiré, tel que nous l'avons imaginé et créé :
lorsque vous toucherez votre widget, il s'ouvrira enmode édition dans UCCW
au lieu d'exécuter la fonction que vous avez assignée.
Il est possible de gérer des comptes Gmail, les appels en absence, les messages,
il est même possible d'interfacer les widgets avec l'application tasker
(ce que je n'ai pas testé car je n'utilise pas Tasker).
Je vous laisse le soin d'explorer par vous même
ces fonctionnalités supplémentaires
notamment au niveau des polices de caractères et des icones météo.
========================================================================================================
Vous l'avez compris, UCCW est une application aussi complète que complexe. Ce tutoriel n'a pas la prétention de faire une démonstration exhaustive des possibilités de UCCW mais a juste pour but de vous donner envie et de vous mettre le pied à l'étrier pour franchir un pas dans la personnalisation de votre terminal Androïd.
UCCW n'a qu'une seule limite : VOTRE IMAGINATION !
Alors laissez vous porter...
Enjoy
wink
UCCW n'a qu'une seule limite : VOTRE IMAGINATION !
Alors laissez vous porter...
Enjoy
wink
========================================================================================================
Quelques exemples de ce qu'il est possible de faire avec UCCW :
========================================================================================================
EDIT DU 30/03/2013
========================================================================================================
Nouvelle interface :
Changements :
- Les skins peuvent avoir une résolution plus élevée (921 600 pixels contre 160 000 auparavant !!!)
- Possibilité d'ajouter des ombres aux formes
- Gestion météo améliorée
- Changements mineurs
Mots clés : Ultimate Custom Widget, UCCW, customisation, personnalisation, widget, création
Mot clé : TUTOByDFMirouf
