Comment créer vos premiers composants graphiques ?

Maintenant que vous avez vu, l’article  “2 outils et 3 interfaces pour débuter avec Android studio” et l’article “Le point de départ avant de se lancer”. Je vais vous présenter, comment vous allez pouvoir créer vos premiers composants graphiques Android. Pour créer une application toute basique, il n’y a rien de bien sorcier. Si vous avez bien configuré votre projet, vous pouvez déjà lancer votre application avec le bouton bouton play et choisir votre appareil (virtuel ou physique).

Quoi déjà ? Eh oui  ! Winking smile Pas besoin de coder, Android studio lors de la configuration de votre projet, va s’occuper de générer les fichiers java et XML. L’application n’a rien de bien compliquer, elle affiche au centre de l’écran “hello word”. Maintenant, si vous souhaitez lui ajouter plus de détail, vous êtes au bon endroit, c’est ici que je vais présenter comment ajouter d’autre composants graphiques.

Quand j’ai débuté Android à l’école, notre premier objectif était de réaliser en 1 mois une calculatrice.  Ambitieux, peut-être compliqué au départ pour un novice, mais très fun pour moi . J’allais réaliser la toute première application mobile de ma vie ! Fascinant ! au moment du rendu, mon application fonctionnait à moitié mais j’étais fière. (Lorsqu’on tournait l’écran en mode paysage , l’application se mettait à planter).

Lorsque j’ai réalisé mon application pour le groupe de musique d’un groupe d’amis à moi , j’ai mis 4 mois à la réaliser (et encore elle est loin d’être terminé). Maintenant en réfléchissant, avec l’expérience, je pense que je peux réduire le temps par 3,46. Pourquoi 3,46 ? Un chiffre, un peu sortie de mon chapeau je vous l’avoue Winking smile. C’est pour vous avertir, que dans la programmation on à toujours un moment, où on perd du temps à trouver une erreur toute bête. Cette erreur prend moins de temps a être corrigé qu’a être trouvé (pour ceux qui connaissent, le fameux oublie de point-virgule en fin de ligne).

Quelle sont les raisons qui peuvent vous pousser à créer une application

  • Pour le fun : si vous avez envie de vous amuser, explorer une nouvelle activité. Quand on commence à programmer, on s’attend à qu’une chose, voir le résultat de votre travail. C’est tellement gratifiant de réaliser son application. Après votre première application, vous aurez envie de continuer. Envie de l’améliorer où envie de faire d’autre application, peu importe ! ce n’est pas l’imagination qui manque.

  • Pour rendre service à quelqu’un :  Vous êtes une âme charitable, qui aime simplifier la vie des autres. Pourquoi n’avez-vous pas pensé à réaliser une application pour eux ? Une application qui répond à leurs besoins. Ils vous en seront reconnaissants et fières, qu’ils en parlerons aux gens autour d’eux.
  • Pour épater vos amis : La programmation est une chose simple. C’est comme quand vous démarrer une activité, au début vous allez vous améliorer en pratiquant. L’expérience s’acquiert très rapidement. Et pourtant, quand vous parlerez de votre application à votre entourage, une grande majorité de vos amis seront ébahies. Tout simplement, car beaucoup de personnes pensent que vous êtes déjà un expert, alors que vous avez simplement un peu plus d’expérience qu’eux .

  • Pour un business : une grande proportion d’entreprise n’a pas encore fait le choix de créer leurs applications pour ce type de marché. Vous commencez déjà avec un grand avantage, si vous y mettez . De plus avec l’arrivée du langage “kotlink” sur Android, les applications vont voir apparaître un renouveau. Les développeurs mobiles vont devoir s’approprier ce langage. C’est la meilleure période, pour commencer. De nos jours le nombre de personnes qui possède un smartphone ne fait qu’augmenter et le nombre de périphériques mobiles Android n’en fait pas exception. Une étude de App Annie montre que le pourcentage d’augmentation de périphérique mobile à augmenter de 56% en 2017 et va continuer d’augmenter jusqu’en 2020.

LinearLayout

Maintenant que vous maitrisez votre environnement du moins l’essentielle, que vous savez configurer votre premier projet. je vais vous présenter quelques composants graphiques et vous montrez comment les implémenter dans votre application.

Le fichier layout est un fichier XML, donc un format texte sous forme de balise. Une balise commence par  <> et  se termine </>. À l’intérieur d’une balise, on peut avoir plusieurs paramètres et d’autres balises. Un LinearLayout est une balise XML avec plusieurs paramètres, comme une taille et une orientation. Un layout va jouer le rôle de conteneur , il va contenir des composants graphiques ou d’autres conteneurs.

Par défaut Android-studio met en en place le contraint-layout, mais pour débuter je recommande le LinearLayout. Il va permettre de créer vos couches de composant graphique facilement . L’avantage de cette balise c’est qu’elle va vous permettre de créer un tableau de couche où placer vos composants graphiques simplement.

 

Pour  mettre en place un LinearLayout rien de plus simple, mettez-vous dans la vue “text”, changer la balise contrainteLayout par LinearLayout. (exemple ci-dessous).

LinearLayout

<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout
xmlns:android=”http://schemas.android.com/apk/res/android”
xmlns:tools=”http://schemas.android.com/tools”
xmlns:app=”http://schemas.android.com/apk/res-auto”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:orientation=”vertical”
tools:context=”.MainActivity”>

</LinearLayout>

Maintenant il faut définir les paramètres de votre LineareLayout, dans l’onglet “design” dans la fenêtre attributes où dans l’onglet “Text” à l’intérieur de la balise <LinearLayout >. Peu importe dans l’article “2 outils et 3 interfaces pour débuter avec Android studio” on a vu que la modification se rapporte sur les deux onglets.

Les paramètres importants à définir sur LinearLayout sont le layout_width, le layout_height et l’orientation

  • layout_width : Ce paramètre définit la largeur du LinearLayout. Vous pouvez lui définir
    • une taille fixe en pixel (dp),
    • une taille “match_parent” qui correspond à la largeur du composant parent (si c’est votre premier LineareLayout il prendra la largeur de l’écran).
    • une taille “wrap_content” qui correspond à la largeur que prendra en matière de largeur le contenue de votre LinearLayout (si vous ajouter des composants graphiques sa taille va augmenter).

 

  • layout_height : Ce paramètre définit la hauteur du LinearLayout. Pareil, vous pouvez lui définir les mêmes formats de taille (fixe en pixel, “match_parent”, “wrap_content”).

 

  • orientation : Ce paramètre définit l’orientation du LinearLayout, dans quel sens vont être ranger les autres composants qu’il contient. L’orientation peut-être définie de façon verticale ou horizontale.

Vous pouvez essayer de jouer et tester les autres paramètres. Je ne les connais pas tous je vous ai présenté seulement les plus importants.

Le textView

Le TextView est un composant graphique qui doit être placé dans un conteneur (layout). Il vous permet d’écrire du texte affichable à l’écran. Vous pouvez l’implementer avec un simple cliquer-déplacer depuis la palette (sur l’onglet design) où l’ajouter directement en balise XML.

TextView

<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout
xmlns:android=”http://schemas.android.com/apk/res/android”
xmlns:tools=”http://schemas.android.com/tools”
xmlns:app=”http://schemas.android.com/apk/res-auto”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:orientation=”vertical”
tools:context=”.MainActivity”>
<TextView
android:text=”Mon TextView”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:id=”@+id/textView2″
android:gravity=”center”
android:textSize=”30sp”
android:textStyle=”bold”
android:textColor=”@color/colorNoir” />
</LinearLayout>

Les paramètres importants à définir dans un textView sont l’id, le  layout_width, le layout_height.

  • l’id : Correspond à l’identifiant unique de votre composant, il vous permettra ensuite d’interagir avec lui quand vous lui ajouterez des actions dans le code.

  • layout_width et layout_height : Ces paramètres sont les mêmes. Ils définissent la taille en largeur et en hauteur de votre composant.
  • Text: Ce paramètre est tout de moins important si vous souhaitez inscrire du text.

Vous avez également beaucoup d’autres paramètres, que vous pouvez tester sur TextView.

Le Button

Le Button est un composant graphique classique souvent utilisé (bouton). IL se place aussi dans un conteneur. Il jouera le rôle de déclencheur d’événement. Pareil un simple cliquer-déplacer depuis la palette (sur l’onglet design) où l’ajouter directement en balise XML, permettra de l’implémenter.

Button

<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout
xmlns:android=”http://schemas.android.com/apk/res/android”
xmlns:tools=”http://schemas.android.com/tools”
xmlns:app=”http://schemas.android.com/apk/res-auto”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:orientation=”vertical”
tools:context=”.MainActivity”>
<Button
android:text=”Button”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:textColor=”@color/colorblue”
android:textSize=”30sp”
android:textStyle=”italic”
android:paddingRight=”10dp”
android:paddingLeft=”10dp”
android:id=”@+id/button”/>
</LinearLayout>

Les paramètres importants sont les mêmes que le textView donc à savoir l’id, le  layout_width et le layout_height.

Pour les autres composants

Je vous invite à faire la même procédure pour implémenter les autres composants des catégories “Common”, “Text” et ”buttons”. Ils s’implémentent pour la plupart de la même façon.

Je vous remercie d’avoir lu cet article. Je vous invite à me laisser un commentaire sur ce vous aimez dans cet article. Si vous rencontrez des difficultés faite le moi savoir, je verrai avec vous comment les résoudre.

crédit : photo de David Stacey, photo de Steve Walker, photo de bestpicko.com

Partager l'article :
  •  
  •  
  •  
  •  
  • 13
    Partages

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *