Pour faciliter la lecture, voici l’ensemble des articles dans l’ordre de lecture plutôt qu’en ordre réverse par défaut.
Vous pouvez sauver l’article au format pdf (voir en fin d’article).
Cet article a été écrit à l’origine pour jbmm.fr.
================================================================
Le bureau par défaut offert par Google vous ennuie ? Vous rêvez de construire le votre, selon votre bon vouloir ? Vous rêvez du même genre d’interface qu’on voit sur des photos ? Vous voulez passer directement d’un bureau à l’autre via de simples boutons ?
Voici le début d’une série d’articles ayant pour objectif de montrer ce qu’on peut apporter comme modifications : présentation d’applications dédiées et mini-tutoriel pour chacune.
- Adw Launcher EX (certaines fonctions)
- MultiPicture Live Wallpaper
- Simple texte
- Minimalistic Text
Il y aura bon nombre de photos et vidéos mais … mon but ne sera pas de faire immédiatement beau mais de faire comprendre le fonctionnement, ce qui m’a pris un petit paquet d’heures. Les artistes, ce sera vous.
Un “HUB Layout”, c’est quoi ? Il s’agit
- de rendre chaque page du bureau personnalisée et originale,
- d’implémenter un système de navigation pour changer de page en un clic.
Vous aussi vous voulez faire ça ?
Dans quelques jours … et quelques heures de boulot, ce sera chose faite.
================================================================
Comme annoncé ici, nous verrons dans ce tutoriel comment modifier radicalement l’apparence de l’interface honeycomb de nos Gen9.
Il y a deux principales méthodes de navigation : via icônes ou via des barres. Nous verrons les deux.
J’utilise ADWLauncher EX et l’ensemble sera basé sur lui même si Launcher Pro Plus peut aussi être utilisé.
Nous n’utiliserons pas le dock d’ADWLauncher qui peut être bien pratique pour certains pour avoir toujours les apks principales sous la main.
NOTA : j’ai utilisé des images fournies par Orkcreation, créateur de fonds pour androphones et tablettes.
Je rappelle ce que j’ai dit en préambule : ce tutoriel se veut didactique. Vous saurez faire bien plus beau/ergonomique que moi.
Sommaire :
I- ADWLauncher EX
II- MultiPicture Live Wallpaper
III- Navigation
IV- Simple text
V- Minimalistic Text
================================================================
I- ADWLAUNCHER EX
ADWLauncher EX est un logiciel payant (3,32$) permettant la modification de l’interface d’Android : augmentation du nombre de pages, utilisation d’un dock regroupant les principales applications, effets de changement de pages, regroupement d’applications en dossiers, modification du look et des icônes, des centaines de thèmes téléchargeables, extension jusqu’à 7 bureaux, définir une couleur lors du clic…
On ne verra pas l’ensemble des fonctionnalités (il faudrait plusieurs pages).
Regroupement des apks les plus utilisées dans le dock qui supporte aussi bien des apks que des dossiers. L’icône de ses derniers est modifiable.
En déplaçant les icônes des apks les unes sur les autres elle fusionnent en un dossier dont l’icône montre 2 des apks incluses (on peut modifier cette icône). Ici : musique, anglais, cuisine. Cet effet est apparu avec la dernière maj.
Après ce petit tour, ce qui nous intéresse spécifiquement pour réaliser notre hub.
- Démarrer l’application »Paramètres ADWLauncher EX ».
Pour ceux qui découvrent : « préférences de l’interface » et « comportement général » sont les menus nous permettant de modifier le comportement du launcher, « Préférences des thème » de gérer les thèmes téléchargés, « Sauvegarde et restauration » de sauvegarder son travail : configuration et état des bureaux.
- – Cliquer sur « Préférences de l’interface » puis sur « Préférences de l’écran ».
- « Colonnes de bureau » et «Lignes de bureau » permettent de définir le nombre de colonnes et lignes de chaque pages et donc le nombre d’icônes affichables. C’est important pour notre hub car c’est un moyen de gérer l’espacement entre nos icônes de menu : l’espacement entre chaque ligne/icône et le nombre de lignes de menus affichables.
- « L’indicateur de bureau » a une fonction purement visuelle : afficher sur quelle page on se trouve par un visuel : petits points en haut, barre … Je préfère retirer : peu m’importe sur quelle page je me trouve vu que je me déplace par un menu (exemple : le bouton « Home » peut me conduire page 1, 2 ou 6, peut m’importe).
- « Chevauchement des widgets » : il est important de le cocher. on le verra par la suite en utilisant Minimalistic Text. C’est ce qui permet d’afficher des widgets les uns sur les autres.
- Revenir au menu général puis « Comportement général » > « Animations et effets ».
- Cocher « Défilement du fond d’écran » sinon MultiPicture Live Wallpaper ne fonctionne pas.
- Infinite scroll permet de passer de l’écran extrême gauche à l’écran extrême droite en slidant vers la gauche (pour ceux qui continuent à utiliser l’ancienne méthode de déplacement).
- Je désactive « menu animé », « animate icons », « desktop zoom », je minimise « rebondissement des bureaux », je maximise « vitesse de défilement des bureaux » : je n’ai plus besoin de ces effets puisque je cherche le déplacement immédiat d’une page à l’autre. C’est selon les goûts de chacun.
Pour cacher la ligne supérieure (photo 3) qui fait très vilain : clic long sur le bureau => “Action du lanceur” => “Show/Hide statusbar”.
==> Je n’ai pas de ralentissement même vers des pages chargées en widgets.
================================================================
II- MULTIPICTURE LIVE WALLPAPER
La base d’un “hub layout” est une personnalisation des pages de l’interface Android. Elle commence par un personnalisation du fond de chaque page.
Tutoriel pour
- Android 3.2 honeycomb
- Bureau par défaut ou ADWLauncher EX (que j’utilise) ou Launcher Pro Plus
- Matériel utilisé : Archos 80G9.
MultiPicture Live Wallpaper est une application gratuite ou en donation (1$) permettant d’afficher un fond différent par page de bureau et/ou de modifier ces fonds à une fréquence définie ou par double tap. Nous retiendrons la possibilité d’affichage de fonds différents pour chaque page.
Après installation, on peut éliminer l’icône apparue sur le bureau, elle ne servira à rien, l’application étant un widget.
MultiPicture Live Wallpaper fonctionne aussi bien avec l’interface par défaut d’Android honeycomb qu’avec ADW Launcher EX ou Launcher Pro Plus.
- Cliquer sur le bureau.
- Cliquer sur “fonds d’écran.”
- Cliquer sur “fonds d’écrans animés.”
- Choisir “MultiPicture Live Wallpaper”.
- Cliquer sur “Paramètres”.
- Pour ajouter une page de bureau (0 par défaut) cliquer sur “Add individual settings”.
On le voit ici, j’ai prévu 6 pages de bureau.
- Pour chaque page du bureau, cliquer sur Screen x settings.
- Cliquer sur “Picture source”.
- Choisir selon ses préférences. “Single picture” pour une seule image, “Picture folder” pour un répertoire, ce qui donnera la possibilité de modifier ensuite le fond (par double tap ou périodiquement).
Aller cherche l’image/répertoire via le gestionnaire de fichier qui s’ouvre.
- Cocher “Use lock screen settings” permet de choisir le fond qui s’affiche quand la tablette est verrouillée.
- Transition type permet de choisir l’effet de transition lors du passage d’un bureau à l’autre. Attention, avec ADW Launcher EX ou Launcher Pro Plus, il vaut mieux désactiver leur gestion de l’animation et la laisser à MultiPicture Live Wallpaper, ça évitera que le système rame le temps du déroulement des multiples animations.
J’ai personnellement tout désactivé dans ADWLauncher EX (y compris le rebond de bureau, les menus animés, les icônes animées, placé la vitesse de changement au maximum) pour un changement de bureau immédiat.
- Pour ceux qui ont choisi un répertoire, “Double Tap to change picture”, quand il est activé permet de changer de fond d’un double tap.
RESULTAT :
NOTA : j’ai utilisé des images fournies par Orkcreation, créateur de fonds pour androphones et tablettes.
ASTUCE :
Créer un répertoire par page du bureau : ça permet de facilement s’y retrouver lors du choix de l’image et ça permet de placer plusieurs images différentes pour chaque bureau si on veut faire varier le fond de chaque bureau de façon différente : images de jeux pour la page jeux, images de films pour la page Vidéo, par exemple.
IMPORTANT pour ADW Launcher EX :
Un détail qui m’a pris beaucoup d’heures.
Avec ADWLauncher EX cocher dans “Comportement général” > “Animations et effets” > “Défilement du fond d’écran” sinon on obtient jamais le multi-affichage.
Au passage, cocher “infinite scroll” pour boucler les bureaux.
================================================================
III – NAVIGATION
La dernière étape pour terminer le fonctionnement. Ensuite, ce ne sera que du peaufinage et de la mise en forme.
Cette étape est importante à comprendre : elle est à la fois la méthode n°1 de navigation et sert à la méthode n°2 de navigation.
ATTENTION : ADWLauncher EX ou Launcher Pro Plus OBLIGATOIRES à partir de maintenant.
- Cliquer long sur une zone vide du bureau,
- Cliquer sur « Action du lanceur ».
Choisir un Screen x. Il faudra recommencer l’opération autant de fois qu’il y a de pages (jusqu’à 7 avec ADWLauncher EX).
Ainsi, on créé une icône qui envoie vers la page correspondante quand on clique dessus.
Le n° de la page est défini ainsi : n°1 : la plus à gauche, puis n°2, etc…
- RESULTAT
Ce n’est pas encore beau mais ça fonctionne parfaitement.
A partir de cette page, on peut aller vers toutes les autres mais il faudra bien revenir.
==> Faire la même opération pour CHAQUE page.
Attendez !!! On va décorer nos icônes avant !
Il existe deux méthodes :
- Avec Simple Text,
- Avec Simple Text + Minimalistic text.
================================================================
IV- SIMPLE TEXT
OBJECTIF : créer un menu d’icônes nous transférant à la page souhaitée.
Simple Text est une application permettant de créer ses propres icônes pour modifier l’icône d’un widget. Simple Text permet simplement des icônes en mode texte. Il permet aussi de créer des icônes simples via un effet de gradient. C’est tout.
On peut remplacer Simple Text par un simple pack d’icônes si on en a.
Avantages / inconvénients :
- + il s’agit d’une simple icône qui, contrairement à un widget ne consomme aucune ressource,
- + l’icône est clickable,
- - il s’agit d’une icône : non redimensionnable (on utilisera Minimalistic Text pour ça, mais lui est non-clickable),
- Il s’agit d’un simple texte, éventuellement avec un gradient, pas d’une icône complexe.
Il existe deux versions : Simple Text gratuit et la version donate (une simple clé) à 0,99$ (obligatoire pour les effets gradients).
Simple Text permet ce genre d’effet :
- Cliquer long sur une icône puis sur « Editer ».
- Effacer le texte qui s’affiche sous l’icône. « Screen 1″ ici.
- Cliquer sur la visualisation de l’icône.
- Choisir « Pack d’icônes d’ADWTheme ».
- Choisir « Simple Text ».
C’est là que, si on possède un pack d’icônes, on peut choisir directement des icônes toutes faites.
- Je triche, j’ai déjà fait mes icônes. A la première utilisation, il n’y a que les 4 premières.
- Simple Text : texte seul sans effet.
- Simple : texte avec effets (ombre …)
- Simple bleu : texte sans effet, icône colorée sans effet.
- Simple orange : texte avec effets sur icône avec effets.
- Choisir « Simple ».
- Écrire le texte qu’on souhaite voir apparaitre.
Les 3 icônes en haut à droite permette de changer la police, les effets de texte, la couleur.
J’ai modifié la taille du texte.
« Auto-ajustement » permet d’ajuster la taille du texte pour que ça entre dans l’icône. Pas très beau car les icônes sont écrites en textes de taille différente.
- Clic sur l’icône quadrillée tout en bas.
- « Sauvegarder le style » : Pour les autres écrans, il suffira de choisir l’icône enregistrée pour que les régalages soit tous les même.
- « Sauvegarder l’icône » quand on a fini.
Pour savoir sur quelle page je suis, j’utilise une icône colorée par par page.
- Choisir « Simple » orange. le reste est identique.
Penser à changer la couleur de l’icône si vous ne voulez pas du orange.
RESULTAT :
On a maintenant une belle page.
A partir de cette page, on peut aller vers toutes les autres fait il faut bien revenir.
==> Faire la même opération pour CHAQUE page. Je vous vois déjà vous effondrer. Rassurez-vous, ça va très vite ! Souvenez-vous, toutes vos icônes sont déjà enregistrées, à l’exception de l’icône colorée de chaque page.
Il ne reste qu’à trouver un nom pour chaque page et vous pouvez naviguer.
On en est maintenant quasi au résultat de la vidéo au début du tutoriel.
C’EST TERMINE !!!!
On va voir maintenant comment ajouter des titres aux pages, quelques effets d’embellissement et la méthode n°2 de navigation avec Minimalistic text.
================================================================
V- MINIMALISTIC TEXT
Minimalistic text est une application dont l’objectif est d’afficher du texte à l’écran sous forme de widget. Par défaut on peut afficher l’heure, la météo sous forme de texte (en anglais).
On va l’utiliser pour écrire nos propres textes, voire ne rien écrire du tout.
Minimalistic text est distribué sous forme gratuite ou donate (1,99 €).
S’il est très puissant, il n’est pas du tout convivial d’utilisation et les débuts sont ardus. Il est hautement configurable mais il faut se battre.
IMPORTANT :
Pour comprendre le fonctionnement, il faut savoir que, avec ADWLauncher EX :
- On ne peut pas mettre un widget par dessus une icône ou un autre widget,
- On peut REDIMENSIONNER un widget par dessus une icône ou un autre widget, A CONDITION d’avoir coché la case « chevauchement de widgets » dans les paramètres d’ADWLauncher EX.
- Tout mouvement d’une icône sous un widget après son redimensionnement éjecte ce widget ailleurs (exemple, je déplace une icône sous l’emplacement d’un texte de Minimalistic text, celui-ci est déplacé). Il ne pourra être replacé que par redimensionnement.
C’est avec Minimalistic Text que vous pouvez faire ce genre d’effet :
- L’affichage par défaut ne nous intéresse pas du tout dans ce tutoriel. Voilà ce que ça donnerait :
- Commençons simplement à le prendre en main en insérant un titre à chacune de nos pages.
- Il s’agit d’un widget donc : appui long sur le bureau > Widgets > « Minimalistic Text 4×2 (hor)« . Pourquoi cette taille ? 4 de large pour être sûr d’entrer tout son texte, 2 de haut pour ne pas se faire couper en hauteur. De toutes façons, on redimensionnera.
1) Effacer le texte par défaut :
- Cliquer sur « Affichage prédéfini ».
- Cliquer sur « personnalisé… ».
- Cliquer sur « Affichage personnalisé ».
- Faire glisser chacune des 3 cases vers la corbeille qui apparait dès qu’on sélectionne une case.
2) Ajouter son texte :
- Cliquer sur le « + » à droite pour ajouter une case. (les deux cases en dessous servent à ajouter ou éliminer une ligne, si on veut ajouter plusieurs fonctions l’une sur l’autre).
- Cliquer sur « Divers ».
- Faire glisser « Texte statique » vers la case vide au dessus.
- Cliquer plusieurs fois sur « Texte statique »dans la case du dessus pour faire apparaître le formulaire de texte.
- Entrer son texte (nom de la page). Choisir le style (Normal, accentué … C’est juste pour avoir un nom de style à modifier plus tard). Ici, j’ai choisi « accentué » qui est un texte.
- Fermer le clavier.
- cliquer sur retour arrière en bas à gauche.
- On peut peaufiner :
Bloc horizontal / bloc vertical : centré, aligné …
Format : modifier la police, la taille …
Modifier la couleur du fond…
- Cliquer sur OK.
- Passer la fenêtre « Taille de widget » en cliquant sur OK.
ASTUCE : Sauvegarder. Pour la prochaine page il suffira de restaurer pour tout retrouver tel qu’on la voulu.
Voilà ! On aurait pu enlever le fond maintenant, mais ça permet de montrer comment le widget s’est placé.
- Clic long sur le widget-> « Editer » -> Modifier la taille.
- Clic sur le widget pour réouvrir le menu -> décocher « Montrer l’arrière-plan » pour éliminer le fond.
3) Ajouter une bande
L’ajout d’une bande sans texte peut donner un effet de style. D’autres utilisations sont, par exemple de recouvrir des « Simple text » pour ne pas voir les icônes et donner l’impression d’une bande cliquable ou pour uniformiser la couleur si les menus n’occupent pas toute la hauteur/largeur de la page. On le verra plus tard.
- Souvenez-vous de la règle énoncée au début de cette page : on ne peut pas glisser un widget par dessus autre chose, il faut le faire par redimensionnement.
- Créer un widget Minmalistic Text de 1×1 sans texte. Vous devriez savoir faire maintenant.
- Redimensionner par dessus ce qu’on veut couvrir (attention ! On ne peut plus rien ajouter ou déplacer ensuite).
ASTUCE : Pour cacher la ligne supérieure (photo 3) qui fait très vilain : clic long sur le bureau => “Action du lanceur” => “Show/Hide statusbar”.
- Ce qui donne, avec deux fonds différents (barre bleutée à gauche) :
4) Deuxième méthode de navigation : Minimalist Text + Simple Text
Maintenant que vous êtes experts de Minimalist Text, on peut enfin aborder cette partie.
L’exemple sera fait avec un menu vertical. On peut le faire sous forme de menu horizontal.
- Préparer son menu : un widget par page, un widget différent pour la page en cours. Facile !
- L’astuce : avec Simple text, créer une icône invisible qui servira pour le clic et la recouvrir par notre menu Minimalist Text (par redimensionnement bien sûr).
- 2ème astuce : si le menu est un peu large, cacher deux icônes Simple Text invisibles identiques en dessous.
Attention à ne pas perdre vos icônes invisibles, vous seriez embêtés ensuite !
Rappel : Cliquer long sur une zone vide du bureau, cliquer sur « Action du lanceur », cliquer sur « Screen x », effacer le texte, cliquer sur l’icône, cliquer sur « Simple », effacer le texte, sauvegarder le style, sauvegarder l’icône.
Dans mes exemples, j’ai laissé un texte pour l’exemple. il faudra bien sûr le retirer, mais j’ai du mal à prendre des photos d’icônes invisibles !
Résultat : (l’exemple de droite peut être fait avec du Minimalistic Text + icônes cachées ou avec du Simple Text + une bande noire recouvrant l’ensemble des icônes).
N’oubliez pas de faire ça pour toutes les pages.
================================================================
Sources :
Forum archosfans
Forum xdadeveloppers (51 pages !) par fliparsenal
vidéo icône invisible par trekkie0927
Tutoriel original
================================================================
BON COURAGE
POSTEZ DES SCREENSHOTS
THE END
Enregistrer le billet au format pdf
Derniers commentaires