background preloader

Tutos Android GUI (User Interface)

Facebook Twitter

ActionBar sous Android (Partie 1) La version 3.0 d’Android (Honeycomb) à introduit un nouveau composant essentiel dans une application, il s’agit de la barre d’action (ActionBar). Ce composant remplace les menus disponibles dans les anciennes version d’Android et permet à l’utilisateur d’accéder facilement aux fonctionnalités les plus importantes d’une application.

Voici l’exemple de l’ActionBar dans l’application Google + : Principe Une ActionBar peut se composer de 4 parties : L’icone de l’application : Etablie l’identité visuelle de l’application et permet aussi de naviguer dans l’application (remonter à la vue mère par exemple). L’implémentation d’une ActionBar s’effectue dans le dossier menu (situé dans le dossier res de votre projet) et ressemble énormément à l’implémentation d’un menu. Exemple L’exemple abordé dans cette partie servira à implémenter une ActionBar pour les appareils 3.x et supérieur et un menu pour les autres. RechercheRafraichirAideA proposParamètres values/styles.xml values-v11/styles.xml Android 2.3. ActionBar sous Android (Partie 2) Voici la suite du tutoriel sur l’ActionBar. Dans cette partie, nous allons reprendre le projet crée lors du tutoriel précédant afin d’aborder les points suivants : La navigation à l’aide de l’icone de votre application (présente sur l’ActionBar)La séparation de l’ActionBar en deux Séparer l’ActionBar en deux Si vous possédez plusieurs actions importantes dans votre application, vous pouvez séparer votre barre d’action en deux : La première ActionBar contiendra l’icone de votre application, le titre et la navigation de votre application (Dropdown menu)La deuxième ActionBar contiendra les différentes actions disponibles via votre application Cette fonctionnalité est disponible qu’à partir de l’API 14 d’Android donc à partir de la version 4.0 d’Android.

Ce qui donnera sur un appareil Android (4.0 ou supérieur) Navigation via l’icone de votre application La méthode setDisplayHomeAsUpEnabled est disponible qu’a partir d’Android 3.0 (Honeycomb). Ce qui donnera : Ce qui donnera :Android 3.0 Android 4.0. Créer un Live Wallpaper sous Android. Utilisation du clavier sous Android. Ce tutoriel va aborder le clavier sur Android. Le sujet peut paraître simple et pas très intéressant mais c’est un sujet très important dans le développement d’applications, qui rajoute un plus à votre application et qui est souvent négligé par les développeurs. Donc cet article regroupera des astuces pour améliorer l’expérience utilisateur de votre application. Comment adapter le clavier à vos besoins Dans votre application, l’utilisateur aura peut être besoin de saisir quelques données de types différents.

Dans ce cas, il faut faciliter le travail à l’utilisateur en faisant apparaître un clavier en fonction du type de champ à remplir (adresse mail, numéro de téléphone etc…). Pour cela dans votre “EditText”, il faut simplement spécifier l’option android:inputType. Vous pouvez mettre plusieurs valeurs en les séparant simplement par des “|”. où est le champ suivant ? Mon clavier cache ma vue Conclusion.

Gestion de la rotation sous Android. Le but de ce tutoriel est d’expliquer comment gérer la rotation de l’écran dans vos applications Android. Philosophie de la rotation Lors d’une rotation de l’écran, Android supprimera et recréera toutes les activités en cours d’exécution ou en pause. Ce comportement est celui par défaut, vous pouvez adapter la réponse de vos activités aux changements d’orientation. Finalement c’est aux développeurs de vérifier et corriger l’affichage de votre application dans le mode portrait et landscape.

Création des nouvelles vues Pour créer vos nouvelles vues qui seront affichées en monde landscape, il suffit de créer un nouveau dossier dans le dossier res. Tester sur l’émulateur Pour simuler la rotation de l’écran sur l’émulateur, il faut utiliser le raccourci CTRL + F12. Sauvegarde de l’état Comme précisé plus haut, Android détruit votre vue en cas de changement d’orientation pour construire la nouvelle vue. Limitation Surcharger la rotation Bloquer la vue Best Practice – Gérer les tablettes Conclusion. TextWatcher sous Android. Ce tutoriel a pour but d’introduire un événement peut connu des développeurs Android, il s’agit du TextWatcher. Cet événement sert à surveiller les changements dans la saisie d’un texte dans un EditText par exemple.

Nous allons prendre l’exemple d’une zone texte qui servirait à publier un message possédant une contrainte : Le message ne doit pas dépasser 20 caractères Nous allons mettre à jour un indicateur au fur à mesure du remplissage de cet EditText. Création du projet Nous allons créer un projet qu’on nommera TextWatcherProjet, avec les données suivantes SDK Version : 2.3.1Nom de l’application : TextWatcherNom du package : com.tuto.android.textwatcherCréation d’activité : TextWatcherActivity Création de la vue Nous allons créer notre vue XML qui sera composé d’un EditText et d’un TextView.

Voici le code de notre main.xml ainsi que le code de notre fichier strings.xml <? Le code JAVA Pour utiliser le TextWatcher, il suffit : Ce qui donnera : Ecran d’acceuil 14 caractères restants Conclusion. Multi-touch et fragments: Geste de "rotation" Bonjour à tous! Ce nouveau tutoriel orienté algorithmique va tenter d’expliquer la manière de gérer le geste de rotation multitouch. Peu de code Java dans ce tutoriel, juste de quoi illustrer mes propos et donner des pistes de réflexion.

La fonction principale sera détaillée mais exceptionnellement, je ne mettrai pas de projet en téléchargement par manque de temps pour l’implémenter proprement. Pour les gestes simple-touch, l’implémentation est très facile grâce au Gesture Builder (tutoriel en anglais ici), mais pour le multi-touch, c’est un peu plus compliqué car aucune library n’existe. Principe global On souhaite reconnaître un mouvement de rotation effectué avec 2 doigts pour par exemple inverser 2 fragments positionnés l’un en dessous de l’autre comme indiqué sur l’image ci dessous.

Concrètement, nous allons enregistrer les coordonnées de départ et d’arrivée de nos deux doigts puis calculer l’angle formé par ceux-ci, comme indiqué dans le schéma ci-dessous. Algorithme Conclusion. Introduction à la création de vues sous Android. Comprendre le LinearLayout sous Android. Ce tutoriel va vous permettre de tout comprendre sur le LinearLayout et vous facilitera la création de vos vues en utilisant ce Layout.

LinearLayout Le LinearLayout est un Layout qui repose sur une idée de boite, c’est-à-dire que les conteneurs ou les widgets appartenant à ce Layout sont soit alignés en ligne horizontale ou verticale. Comment configurer mon LinearLayout Plusieurs éléments sont disponibles pour permettre aux développeurs de personnaliser ce Layout. 1. Orientation du Layout C’est la première chose que vous précisez quand vous créez votre LinearLayout (android:orientation). Verticale : Oriente les éléments sur une ligne verticale.Horizontale : Oriente les éléments sur une ligne horizontale. 2. Le LinearLayout ainsi que tous les widgets qui le composent doivent fournir une taille (hauteur et largeur).

Android:layout_widthandroid:layout_height Ces deux propriétés peuvent prendre 3 types de valeur : Une taille fixe : par exemple 50px (pixels). 3. Alignement à gauche center 4. 5. Passage d'une vue à une autre sous Android. Ce tutoriel va pousser un peu plus loin la création et la gestion des vues sous Android. Dans ce dernier, vous allez apprendre à gérer le passage d’une vue à une autre dans votre application. Un passage d’une vue à une autre signifie un changement d’activité avec passage de données si nécessaire entre les deux activités pré-requis Pour bien comprendre cette partie, nous allons partir du tutoriel “Introduction aux vues sous Android”, donc du code de ce tutoriel.

Pour ceux n’ayant pas fait ce tutoriel, voici le code source ici Et voici ce que vous devez obtenir juste en compilant le code Nous allons faire en sorte que lorsqu’un utilisateur clique sur le bouton “Se connecter”, il soit redirigé vers une autre vue. Création de la deuxième activité Nous allons commencer par créer une deuxième activité (vue), cette dernière va afficher l’adresse mail et mot de passe saisie dans la vue de login. Une création de vue débute toujours par la création du fichier XML. Ce qui donnera comme fichier : News | Tuto Mobile. Depuis le début des tuto Android, nous faisons des mini-applications qui n’utilisent qu’un seul écran, qu’une seule page, en résumé qu’une seule Activity.

Pour débuter, c’est très bien mais pour faire une véritable application, il serait utile de savoir comment passer d’une page à une autre, autrement dit d’une Activity à une autre. Pour cela nous allons réutiliser une application que l’on a déjà faite auparavant. Il s’agit du tutoriel n°7 : Personnaliser une ListView. Si vous ne l’avez pas faite, il est indispensable de la réaliser pour pouvoir faire ce tutoriel Android. Comme d’habitude, nous allons commencer par un petit peut de code XML. Code XML Qui dit nouvel écran, dit nouvelle vue donc nouveau layout. Voici donc le code XML pour réaliser cette vue (cf. ci-dessus) Si vous avez des difficultés n’hésitez pas à poser des questions en commentaire. Passons maintenant au code JAVA, soyez attentif, c’est à partir d’ici que commence la petite subtilité du jour.

Code JAVA. User Interface. ViewPager sous Android : Comment slider d'un fragment à un autre. Nous revoici pour un nouveau tutoriel, le premier à aborder la notion de Fragment. Les Fragments ont été introduits dans la version Android 3.0 (également utilisable avec des versions antérieures) avec pour objectif de permettre une plus grande flexibilité pour les écrans larges tel que les tablettes tactiles (ce que nous verrons dans un prochain tutoriel). Notre objectif aujourd’hui est simplement de créer un joli effet “slide” entre des pages. Qu’est-ce qu’un Fragment ? C’est certainement la question que vous devez vous poser. On peut voir un Fragment comme une “mini-Activity” ou une portion d’une activité qui ne peut pas vivre en dehors d’une Activity. Un des aspects pratiques du Fragment est qu’il peut être facilement réutilisé d’une Activity à l’autre. Notre projet Comme d’habitude, je vous invite à créer un projet dédié à ce tutoriel, que j’ai baptisé TutoFragment.

Ajoutons ensuite cette librairie au projet. Les fichiers xml Le code Java Rendu final: Conclusion. ActionBar sous Android (Partie 1) ActionBar sous Android (Partie 2)