Astuce : Icônes qui se touchent sur un Thème

Bonjour

Ayant vu des Thèmes avec les Icônes qui se collaient, j'ai cherché à comprendre comment ils étaient fait

Voilà un exemple d'une bannière d'icône sur le bureau d'un joli thème fait par Thibaut-style




En fait, c'est facile ! (Pour celui qui s'y connait comme moi )

Par défaut, sur les Thèmes pour Wave 8500 et 8530, les icônes sont définis à 104x107 pixels

Il suffit tout simplement de mettre des icônes plus large dans le dossier ThemeData et d'indiquer les dimensions dans le fichier theme.xml qui se trouve dans le dossier ThemeData de votre Thème

Si vous passez par STD, si vous lui proposez des icônes plus large, vous allez avoir l'avertissement suivant



STD va vous proposer de redimensionner votre icône car il n'est pas conforme à la dimension par défaut
Si vous cliquez sur OUI, il va redimensionner votre icône, si vous cliquez sur NON, il ne chargera pas l'icône

Alors il faut fermer STD, et aller dans le dossier ThemeData, copier vos icônes agrandis
et ouvrir le fichier theme.xml

Vous pouvez ouvrir ce fichier soit avec l'éditeur de texte Windows

Vous pouvez aussi utiliser Notepad++
Mais dans Notepad++, pour afficher le fichier, il vous faudra aller dans Encodage dans la barre Menu
puis cliquer sur Encodage ANSI

Si vous ne l'avez pas et si vous bidouillez souvent, je vous conseille d'installer Notepad++
C'est un logiciel pratique pour ouvrir beaucoup de fichier, dont notamment des pages PHP, HTML, etc...

Site officiel : http://notepad-plus-plus.org/fr/

Lien de téléchargement de la version 5.9.3
http://download.tuxfamily.org/notepadplus/5.9.3/npp.5.9.3.Installer.exe

Revenons à notre fichier theme.xml

Quand vous l'ouvrez, vous avez des lignes de code qui définissent les icônes et leurs dimensions
C'est ce fichier qui définit les dimensions des icônes

Les lignes qui nous intéressent sont les suivantes :

Code:

<MainMenuIcon01_Keypad src="MainMenu01.png" width="104" height="107"/>
<MainMenuIcon02_Phonebook src="MainMenu02.png" width="104" height="107"/>
<MainMenuIcon03_Message src="MainMenu03.png" width="104" height="107"/>
<MainMenuIcon04_Calllog src="MainMenu04.png" width="104" height="107"/>
<MainMenuIcon05_MusicPlayer src="MainMenu05.png" width="104" height="107"/>
<MainMenuIcon06_Browser src="MainMenu06.png" width="104" height="107"/>
<MainMenuIcon07_VideoPlayer src="MainMenu07.png" width="104" height="107"/>
<MainMenuIcon08_Mx src="MainMenu08.png" width="104" height="107"/>
<MainMenuIcon09_Calendar src="MainMenu09.png" width="104" height="107"/>
<MainMenuIcon10_Camera src="MainMenu10.png" width="104" height="107"/>
<MainMenuIcon11_PhotoBrowser src="MainMenu11.png" width="104" height="107"/>
<MainMenuIcon12_Setting src="MainMenu12.png" width="104" height="107"/>
<MainMenuIcon13_Fmradio src="MainMenu13.png" width="104" height="107"/>
<MainMenuIcon14_Gamenmore src="MainMenu14.png" width="104" height="107"/>
<MainMenuIcon15_VoiceRecorder src="MainMenu15.png" width="104" height="107"/>
<MainMenuIcon16_Memo src="MainMenu16.png" width="104" height="107"/>
<MainMenuIcon17_Task src="MainMenu17.png" width="104" height="107"/>
<MainMenuIcon18_Calculator src="MainMenu18.png" width="104" height="107"/>
<MainMenuIcon19_Navigation src="MainMenu19.png" width="104" height="107"/>
<MainMenuIcon20_SmartSearch src="MainMenu20.png" width="104" height="107"/>
<MainMenuIcon21_Email src="MainMenu21.png" width="104" height="107"/>
<MainMenuIcon22_AccountManager src="MainMenu22.png" width="104" height="107"/>
<MainMenuIcon23_Clock src="MainMenu23.png" width="104" height="107"/>
<MainMenuIcon24_SocialHub src="MainMenu24.png" width="104" height="107"/>
<MainMenuIcon25_Youtube src="MainMenu25.png" width="104" height="107"/>
<MainMenuIcon26_Facebook src="MainMenu26.png" width="104" height="107"/>
<MainMenuIcon27_Twitter src="MainMenu27.png" width="104" height="107"/>
<MainMenuIcon28_Minidiary src="MainMenu28.png" width="104" height="107"/>
<MainMenuIcon29_Dailybriefing src="MainMenu29.png" width="104" height="107"/>
<MainMenuIcon30_IM src="MainMenu30.png" width="104" height="107"/>
<MainMenuIcon31_SamsungApps src="MainMenu31.png" width="104" height="107"/>
<MainMenuIcon32_Dmb src="MainMenu32.png" width="104" height="107"/>
<MainMenuIcon33_Anycall src="MainMenu33.png" width="104" height="107"/>

En fait, pour chaque ligne de code, il faut changer le nom et la taille

Par exemple, pour la première ligne de code

Code:

<MainMenuIcon01_Keypad src="MainMenu01.png" width="104" height="107"/>

Il suffit de modifier le nom par défaut "MainMenu01.png" par le nom de l'cône que vous souhaitez afficher
et il faudra indiquer ces dimensions en remplaçant la largeur dans width et la hauteur dans height

ATTENTION : le nombre de pixel que vous renseignez devront être les même que votre icône sinon vous aurez une erreur dans STD (Main Menu Icon Error)

Mes Test sur les différentes tailles

J'ai fait des tests avec des carrés colorés fait sous Paint

Pour la largeur, on peut aller jusqu'à 160 pixels
> L'écran fait 480 de largeur sur le 8500, il y a 3 colonnes d'icônes, 480 / 3 = 160

Pour la hauteur, j'ai essayé plusieurs tailles mais on ne peut pas faire un écran complet

Les écritures des noms des icônes n'apparaissent pas par dessus mais sont masqués lorsque l'icône est trop grand

Voilà des screens de différentes tailles

Sur cette image, j'ai pris des icônes de 160x150 (160x160 donnait le même résultat)



On voit que les noms des icônes n'apparaissent plus, ils sont masqués, les noms ne sont pas par dessus
Il n'y a que pour la ligne du bas que les noms des icônes apparaissent par dessus
Mais dans le menu principal, ce n'est pas le cas

Sur cette image, j'ai descendu la hauteur à 140, j'ai donc essayé avec des icônes de 160x140



On voit encore que les noms des icônes sont masqués, il n'y a qu'en bas qu'ils commencent à apparaître

Sur cette image, j'ai descendu la hauteur à 130, les icônes font 160x130



On voit que les noms commencent à apparaître mais les noms sont encore tronqués


Sur cette image, j'ai descendu la hauteur à 120, les icônes font 160x120



On voit que les noms apparaissent mais c'est juste et ça ne fait pas très joli

Conclusion

Si vous souhaitez mettre de grand icônes partout, la dimension maximale en hauteur sera de 110 pixels

Il vous faudra refaire les lignes de code dans le fichier theme.xml comme cela

Code:

<MainMenuIcon01_Keypad src="Le_Nom_de_votre_icone.png" width="160" height="110"/>

Sinon, vous pouvez laissez la hauteur à 107 et mettre la largeur à 160

Une fois les modifications faite, n'oubliez pas d'enregistrer le fichier theme.xml
Allez ensuite dans STD puis exporter votre thème

Si vous avez une erreur de Main Menu Icon comme ci



C'est que vous avez fait une erreur entre les dimensions décrites dans le fichier theme.xml et les dimensions de l'icône ou qu'un icône est absent, que vous avez oublié un icône


Amusez vous bien

Exemple Bannière

Voilà un exemple avec une bannière que j'ai trouvé sur Internet, et qui fait 480x110



Il suffit de découper cette bannière en 3 parts égales de 160 pixels, comme cela







Vous mettez chacun des parties pour MainMenu01, MainMenu02 et MainMenu03

Et cela vous donne cela dans STD

En fait je n'ai même pas touché au fichier theme.xml pour faire ma barre d'icone. Ma technique est plus rudimentaire xD Je la donne tout de même à titre d'information (celle de Frere Loup étant mieux) :

Tout d'abord je charge trois icônes de taille normale pour les trois boutons de menu du bas. On va nommer ces fichiers a1.png, a2.png et a3.png. Je clique ensuite sur "Export Theme" comme si j'allais enregistrer mon thème normalement. Je choisis donc l'emplacement où ira mon Fichier smt. Cependant je ne vais pas cliquer directement sur "Export" pour valider l'exportation. Je vais d'abord me rendre dans le dossier ThemeData de mon thème et remplacer les images a1, a2 et a3.png par des images portant le même nom mais ayant une taille différente (plus grande que la normale donc). A présent que j'ai des fichiers plus grand que la norme je finis de valider l'exportation en cliquant sur "Export". Aucun message d'erreur, mon thème est créé sans encombre.

Le message d'erreur se lance lorsque l'on clique sur "Theme Export" mais pas lorsque l'on a déjà la fenêtre d'exportation ouverte ! C'est donc une façon de contourner le message d'erreur.

Toutefois cette méthode a ses défauts. Tout d'abord le mode de prévisualisation fonctionne mal. C'est à dire que vous pourrez travailler avec vos icônes plus grand tant que vous n'exportez pas mais que la fenêtre de prévisualisation n'affichera pas la position réelle des icônes comme ils apparaitront sur votre téléphone. Alors que tout s'aligne parfaitement dans mon téléphone, je retrouve mes images chevauchées ou pas dans l'axe dans la fenêtre de prévisualisation de Theme Designer. Pour trouver la bonne taille pour aligner les icones il m'a ainsi fallu continuellement tester le thème sur mon téléphone. J'ai finalement réussis à faire ma banderole avec deux images de 147 x 115 (115 car à droite et à gauche ça dépasse à côté du texte) et une (celle du milieu) de 167 x115.

A priori la méthode de Frere Loup ne fais donc pas buger le mode de prévisualisation. Et celui ci a trouvé la taille idéale d'icone : 160 pixels de large. (Qui ne convient peut être pas avec ma méthode ?)

Salut bande de petits malins
Le seul problème avec cette "bande collante !!!" c'est qu'il ne faut pas changer l'ordre " Keypad - Contatcs - Messages " comme Louloup aime le faire ! Hein !!!!
Sinon c'est un bon moyen d'avoir toutes les icones dans un autre format , ce qui m'a bloqué sur certains themes car les icones étaient trop larges et une fois redimensionnées ca ne ressemblait plus à rien
Ca peut etre intéressant aussi pour modifier la taille des SoftKeys et des MorePanel , qui sont biens chiants avec leurs formats
Merci les gars je teste tout ca et je vous tiens au jus

Je suis en train de m'amuser à faire un nouveau thème avec ce principe

On n'est pas obligé de faire une bande collante comme tu dis

Tu peux très bien imaginer, des icônes en 160x110, qui se tiennent, un format répétitif, une forme de puzzle ou tu dessines un lien au milieu, une forme symétrique, qui fait que les icônes peuvent se connecter entre eux

C'est ce que je suis en train de faire avec un Thème Marin

Tu peux faire par exemple comme ceci

J'ai trouvé un exemple de noeud marin sur Google, voila un noeud plat




Comme c'était un noeud symétrique, je l'ai coupé au milieu
Je n'ai gardé que la partie de gauche comme ceci




Avec mon logiciel Photo Editor, j'ai fait une symétrie horizontale




Et en regroupant les 2, ça redonne le noeud plat




Mais tout cela pour dire que sur une partie droite d'un icône, en réduit, tu peux mettre au milieu l'image du noeud coupé à gauche




Sur la partie gauche de l'icône, au milieu, en réduit, tu mets la partie droite de l'icône




Et quand 2 icônes se toucheront, quelque soit leur place, quelque soit l'ordre, que tu changes de place ou d'endroit, tu auras le même motif symétrique, et tu reviendras au noeud suivant




En résumé, tu auras un icône qui ressemblera à cela



Et avec ce genre de dessin symétrique, ils pourront tous se connecter ensemble


Voilà

Effectivement c'est une solution qui se tien
J'avais pensé à autre chose qui pourrait etre sympa aussi :
Si on fait les icones en 160 *160 , ca masque les écritures !!! mais il suffit juste de les re marquer sous l'icone ! non? et en plus on peut les mettres dans la couleur que l'on veux et le style d'écriture aussi !!

Pour ma part je ne change pas l'ordre de base de rangement des icones car je change presque tous les jours de thème !! et à chaque fois que l'on change de theme elles se remettent dans l'ordre qu'il y a sur STD !
Aprés c'est une question d'habitude et on sait ou se trouve les icones que l'on utilise flanquement

Je suis en train de faire un thème avec le principe des noeuds mais effectivement, c'est pas con ton idée
J'ai trouvé ce truc d'icône qui se touche dans la nuit, je n'arrivais pas trop à dormir alors je m'y suis penché dessus
Je n'ai pas tout expérimenté les possibilités mais je n'y avais pas pensé à celle là ! A essayer pour voir ce que cela fait !
Je ferai un thème comme tu dis pour essayer
En attendant, je finis le mien pour tester et te montrer

OK !
De mon coté je vais essayer de voir ce que je peu faire pour mon systhème mais en ce moment j'ai pas beaucoup de temps
Je pensait à autre chose aussi !( Whaou ! j’arrête pas de penser en ce moment )
Es ce que avec ce fichier XML on ne peut pas aussi changer les couleurs de la palette proposée sur STd

Il y a une partie consacré à la couleur mais faudra que je vois à quoi correspond les lignes
Je verrai ça en temps voulu et j'essayerai de chercher, je l'ai marqué dans ma petite tête

Bon ! Je viens de télécharger NotePad avec le lien que tu a mis et .......... ca marche pas
Ton lien est bon mais dés que j'éssaye un truc , ca foire et ca commence à me gonfler grave je suis nul ! je le sait
Alors mon tres cher Louloup si tu pouvait mettre en téléchargement le ficier déja corrigé en 160 que tu as utilisé pour faire l'exemple dans le post ca serait super cool
PS : Arrête de râler en lisant se post ( comme un bon Francais ) même si je te désespère , j'y peu rien j'y arrive pas

Avec Notepad++, j'ai dit qu'il fallait aller dans Menu et utiliser Endosage et ANSI

Sinon, essaye avec le Bloc notes de Windows, ça marche à tout les coups, ça sera plus facile

Tu fais un double clic sur le fichier theme.xml et ça devrait l'ouvrir avec le Bloc notes
Si ça ne le fait pas, s'il te demande avec quoi l'ouvrir, tu indiques Ouvrir avec Bloc-notes

Je ne peux pas t'envoyer le fichier theme.xml car il faut qu'il soit paramétré pour chaque thème, il faut indiquer le nom du thème dans le fichier theme.xml

Bon courage, tu vas y arriver petit scarabée

J'y suis arrivééééééééééééééé
Merci Louloup

2 R'1, G Séyeré la pro chén foi 2 voir pour lé code Kouleur é voir à koi sa korespon

Le thème Legendora sur Samsung Apps possède un fond de menu d'une autre couleur que le noir. :o De même pour le fond des trois boutons du bas dans le menu qui n'est pas gris.
Je suppose qu'il faut modifier l'une de ces valeurs dans le fichier theme.xml.

Code:

<Style_B021 color="0x000000" opacity="100"/>
    <Style_B031L1 color="0x444750" opacity="100"/>
    <Style_B043L1 color="0x8b919d" opacity="100"/>
    <Style_B043L1P color="0x24ad15" opacity="100"/>
    <Style_B043L2 color="0xffffff" opacity="100"/>
    <Style_B043L2P color="0xffffff" opacity="100"/>
    <Style_B043L3P color="0xffffff" opacity="100"/>
    <Style_B043L4P color="0x187010" opacity="100"/>
    <Style_B043L5P color="0xfffbf0" opacity="100"/>
    <Style_B043L6P color="0xc7c7c7" opacity="100"/>
    <Style_B082L1 color="0x0099ff" opacity="100"/>
    <Style_B083L1 color="0x69baef" opacity="100"/>
    <Style_B084L1 color="0x3b7a98" opacity="100"/>
    <Style_B095L1 color="0xffffff" opacity="100"/>
    <Style_B095L2 color="0xb9e6e6" opacity="30"/>
    <Style_B095L3 color="0xb9e6e6" opacity="50"/>
    <Style_B095L4 color="0x6496AA" opacity="100"/>
    <Style_B097L1 color="0x000000" opacity="50"/>
    <Style_W283L1 color="0x1DE6FF" opacity="100"/>
    <Style_W284L1 color="0x193953" opacity="100"/>
    <Style_W284L2 color="0x799CBD" opacity="100"/>

A priori le fond du menu devrait être une valeur à 0x000000 (couleur du noir).

Je vais faire un Thème Test en utilisant des couleurs flashy pour les repérer
La couleur noire dont tu parles, c'est surement la ligne avec Style B097L1
Le noir en alphanumérique étant les signes 000000

Sinon voilà un aperçu d'un test avec mes noeuds, ça ne rend pas trop bien
mais c'était pour faire un essai

Frere Loup a écrit:2 R'1, G Séyeré la pro chén foi 2 voir pour lé code Kouleur é voir à koi sa korespon

T'es fada ou quoi
Si tu continue à écrire comme ça y'a mon Maxounet qui va te radier du forum !!!

J'ai modifié à peu près toutes les valeurs de couleurs et ça n'a rien fais... Ni dans la prévisualisation samsung theme designer ni dans le phone, je comprends pas vraiment.

Je vais essayer et je te dirai, j'en ai déjà trouvé une !

Je vais créer un sujet à coté pour ces tests

Je n'arrive pas à faire fonctionner ta technique. Dès que je modifie le fichier thème.xml j'ai un message d'erreur à l'enregistrement. Un truc du genre "check you theme data. Main menuicon image". Et le seul moyen de revenir à la normal est de... Supprimer mon thème pour démarrer un nouveau projet.

Cette erreur de check you theme data. Main menuicon image
Je l'ai déjà eu et je l'ai décrite dans mes posts différents

Va voir la rédaction de mon post
http://www.fosamobi.fr/t877-astuce-icones-qui-se-touchent-sur-un-theme#7652

Tu as eu cette erreur car tu as donné une dimension qui n'était pas la même que tes icônes. Tu as mis un icône qui faisait par exemple 150x150 et dans ton fichier theme.xml, tu lui dis qu'il fait 140x150

Vérifie que la correspondance se fasse bien entre les dimensions de tes icônes et la définition que tu en fais dans le fichier theme.xml

Il faut être méthodique, minutieux, car à la moindre erreur de frappe, tu as une erreur

pour le blanc autour des noeuds c'est surement du au png true-color ou indexed