TP Android 1 - prise en main
Premier lancement
-
À la boite de dialogue vous demandant d’importer des paramètres, choisissez de "ne rien importer".
-
Pour l’assistant de configuration qui se lance, ne changez que le thème si vous le souhaitez, ne changez pas les options relatives au SDK ou autre.
-
Une fois l’assistant de configuration terminé, créez un nouveau projet Android.
Lors de la creation du nouveau projet, choisissez bien Empty Views Activity
comme ci-dessous:
Sélectionnez bien le langage Java pour la création de votre activité.
Pour le "Minimum SDK", vous pouvez choisir un niveau d’API supérieur ou égal à 24 (Android 7.0). Si vous comptez utiliser votre téléphone, assurez vous de prendre une API inférieure ou égale à celle de votre téléphone.
Le premier démarrage est souvent looong : L’IDE indexe toutes les librairies Android, vérifie les mises à jour des outils de compilation, etc, etc, etc, etc, etc. Cela peut prendre jusqu’à 3-4 minutes. Patience.
Les lancements suivants sont beaucoup plus rapides.
Vous rencontrerez peut-être les problèmes suivants :
Si les problèmes persistent, fermez Android Studio, supprimez tous les fichiers de configuration :
-
~/.android
-
.AndroidStudio
-
.gradle
Puis refaites le premier lancement.
Première application
À ce stade vous devriez avoir quelque chose qui ressemble à ça :
Ouvrez le fichier "activity_main.xml". Cherchez le bouton carré bleu "Select Design Surface", et choisissez la vue que vous préférez. Vous devriez obtenir quelque chose comme ça :
Premier lancement
Pour tester votre application vous pouvez le faire sur votre téléphone ou sur un émulateur.
Emulateur
Pour tester avec un émulateur, vous devez en créer un nouveau en utilisant une des images système déjà présente dans l’installation Android de votre poste.
Pour créer un émulateur :
-
Choisissez un modèle de téléphone (Device definition). Ne prenez pas un téléphone avec un écran trop grand, cela ralenti l’émulateur.
-
Choisissez une image système déjà téléchargée. C’est-à-dire une qui n’a pas le symbole de téléchargement à côté de son nom, comme l’image "Tiramisu" dans l’exemple ci-dessous :
Téléphone
Pour pouvoir tester votre application sur un téléphone (ou une tablette) vous devez activer le débogage USB. L’activation de cette option est accessible dans les paramètres développeur. Il vous faudra donc activer ce mode sur le téléphone.
Vous trouverez la procédure spécifique au téléphone sur internet.
Une fois le débogage USB activé, le téléphone devrait être détecté par Android Studio quand vous le connectez à l’ordinateur.
Si tout se passe bien, le téléphone va vous demander d’autoriser l’ordinateur à utiliser le téléphone.
Lancement
Dans les deux cas, émulateur et téléphone, une fois la configuration réalisée, vous n’avez plus qu’à lancer votre application avec le bouton "play" vert en haut à droite.
Premier bouton
Pour rendre votre application un peu interactive, vous allez ajouter un bouton et faire en sorte que le texte affiché soit modifié lors d’un click sur ce bouton.
Ajouter un bouton
Dans le designer qui affiche le fichier "activity_main.xml" ajoutez un bouton à l’interface. Ajoutez les contraintes nécessaires à son positionnement.
Vous pouvez vérifier que le bouton apparaît quand vous relancez votre application.
Associer une fonction à un click
Afin de modifier le texte affiché au centre lors d’un click sur le bouton, vous allez associer une fonction au click. Pour ce faire, il existe différentes solutions. Les deux principales sont :
-
En utilisant l’attribut "onClick" du bouton dans le fichier de layout (activity_main.xml).
-
En attribuant un
onClickListener
au bouton à l’initialisation de l’activité.
Attribut "onClick"
Pour associer une fonction à un click sur votre bouton, vous pouvez donner le nom d’une fonction à son attribut "onClick". Pour cela, remplissez la valeur de l’attribut "onClick" dans le designer ou ouvrez la vue xml du fichier et ajoutez cet attribut en lui donnant comme valeur le nom de la fonction qui doit être appelée :
android:onClick="buttonClicked"
Une fois cet attribut ajouté, ouvrez la vue xml du fichier puis laissez votre souris sur le nom de la fonction. Une popup vous propose de créer la fonction pour vous.
Une fois cette fonction créée, elle sera appelée lors d’un click sur le bouton.
Solution onClickListener
Une solution alternative et plus flexible pour associer une fonction à un click bouton est d’associer un objet onClickListener
à ce bouton.
Pour cela il faudra :
-
Récupérer l’objet correspondant au bouton,
-
appeler sa méthode
setOnClickListener
-
lui passer un objet de type
onClickListener
en argument, -
définir la fonction
onClick
de cet objet.
En bref cela donne :
Button b = findViewById(R.id.button);
b.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
// Actions to take in response to a click
}
});
Modification du texte
Pour modifier le texte affiché lors du click bouton, il faudra :
-
Récupérer l’objet correspondant au bouton,
-
Modifier son texte
La récupération de l’objet se fait avec la fonction findViewById
.
Il faudra lui passer le champ id
du texte à modifier. Pour accéder à cet id
il faudra passer par la classe R
qui contient toutes les ressources de votre application.
Ainsi pour avoir l’id d’un champ de texte qui s’appelle hello
dans le fichier activity_main.xml
vous devez utiliser R.id.hello
.
Il se peut que le champ de texte n’ai pas d'`id`. Il faudra en ajouter un, soit dans la vue designer, soit dans la vue xml du fichier activity_main.xml
.
Une fois l’objet récupéré, vous pouvez appeler la fonction setText
dessus.
Exploration
Si tout s’est bien passé jusque là, imaginez une petite application et réalisez le layout correspondant.
N’hésitez pas à explorer le designer en vous appuyant sur l’introduction qui lui est consacrée.
Le Constraint Layout est le mécanisme recommandé pour organiser les éléments graphiques les uns par rapport aux autres.
Ajouter une image
Afin de personnaliser l’aspect de votre première application, ajoutez une image au layout que vous avez créé.
Pour ajouter une image aux ressources de votre application, suivez ces indications.
Les chaînes
Pour ceux qui manqueraient d’inspiration pour explorer le designer, vous pouvez réaliser le layout ci-dessous en combinant 3 chaînes horizontales dans une chaîne verticale :
Les chaînes sont expliquées dans la section correspondante de la page d’introduction au constraint layout.