Help content

BLOC 2 Programmation

TP Java-Android : premier programme

(Hello Moi)

1- Présentation de l'application à développer

2- Création du projet sous Android Studio

3- Première exécution

4- Création des fichiers ressources

5- Création de l'interface graphique

6- Programmation Java

7- Modification à effectuer

Ce TP est une adaptation du tutoriel Android n°3 du site www.tutomobile.fr !

1- Présentation de l'application à développer

Cette application très simple propose de saisir un prénom dans un objet TextView, puis de cliquer sur un objet Button (le bouton Envoyer) ; le programme construit alors un petit message de bienvenue, et l'affiche de 2 façons :

· avec un message de type pop-up qui s'affiche quelques seconde en bas d'écran

· de façon durable dans l'objet TextView placé sous la zone de saisie

Rectangle: Affichage de type pop-up pendant quelques secondes Rectangle: Affichage durable dans un objet TextView

2- Création du projet sous Android Studio

Créez le projet avec la commande File / New / New Project.. :

Choisir le graphisme de l'activité (activity) sur l'écran suivant, exemple "Empty Activity".

et indiquez les paramètres suivants :

Choisir le SDK minimum, s'assurer que l'on dispose de cette version.

En cliquant sur le bouton Finish, on obtient l'arborescence et la classe suivantes :

3- Première exécution

Avant d'exécuter une application, il faut d'abord installer et exécuter un émulateur d'appareil sous Android : Tools et "Device Manager".

Pour exécuter le projet, choisir le menu Run puis Run App ou

Il faut choisir un émulateur compatible avec la version SDK de l'application ou choisir l'appareil connecté physiquement (téléphone, tablette…).

Créer un émulateur (AVD)

Rectangle: Cliquer sur ce bouton Choisir le menu Tools, Device Manager

Choisir le type d'appareil, la version d'Android (attention à la compatibilité avec votre projet). L'installation d'Intel X86 Atom System Image est parfois demandée.

Ne rien changer sur l'écran suivant puis <Finish>

Pour lancer l'application Menu Run puis le nom de l'émulateur créé préalablement.

4- Création des fichiers ressources

4-1 Modification du fichier res/values/strings.xml

Le répertoire res/values contient un fichier strings.xml contenant différentes chaines utilisées par l'application (il contient initialement une chaine app_name) ; double-cliquez sur ce fichier puis open Editor pour obtenir l'écran suivant :

Sélectionnez la chaine app_name et modifiez sa valeur (value) en "Ma première application".

Ce qui donne lors de l'exécution :

On pourrait, avec le bouton + ajoutez quelques chaines (type String), pour chaque chaine saisir un nom et une valeur et les utiliser dans les activités "activity….xml".

Sans passer par l'éditeur et en cliquant sur l'onglet strings.xml situé en haut, on peut accéder au codage XML du fichier généré (il est bien sûr possible de modifier directement le contenu en XML et de supprimer certaines clés) :

4-2 Modification du fichier res/values/colors.xml

Il est juste situé au-dessus du fichier String.xml.

On pourrait ajouter la couleur "couleurTitre" de cette façon :

5- Création de l'interface graphique

Un layout correspond à une disposition d'objets graphiques.

Le fichier res/layout/activity_main.xml contient la description de l'interface graphique.

Faites un double-clic sur ce fichier pour l'ouvrir avec l'Android layout editor.

En sélectionnant un objet de l'interface, on peut vérifier ou régler ses propriétés dans l'onglet Attributes situé à droite.

On peut aussi visualiser le contenu xml en cliquant sur l'onglet "Code" , situé au-dessus de la palette Attributes.

Dès la création d'un nouveau projet, l'interface comporte un objet ConstraintLayout et un objet TextView :

Le Layout permet de définir le modèle de disposition des composants choisi.

Il est plus pratique d'utiliser des LinearLayout pour gérer la disposition => Clic droit sur ConstraintLayout dans "Component tree" et choisir "Convert View". Choisir LinearLayout et appliquer.

Modifier la propriété orientation et choisir Vertical. Choisir également Match_parent dans layout_width et layout_height pour que ce layout couvre l'intégralité de l'activité, comme ci-dessous :

On pourrait aussi modifier directement le fichier XML en cliquant sur l'onglet code situé au-dessus des attributs, mais cette méthode est plus laborieuse :

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Hello World!" />

</LinearLayout>

Restez dans l'onglet design, sélectionnez l'objet TextView (étiquette), et modifiez sa propriété Text en remplaçant la chaine "hello world" par "Entrez votre prénom".

Modifier également la propriété ID... pour nommer l'objet avec l'ID txtViewPrenom.

Dans la palette, ouvrez le groupe Layouts, choisissez l'objet LinearLayout (Horizontal) et placez le sous le TextView. Puis réglez ses propriétés :

· Orientation = horizontal

· Layout width= match_parent prendre tout l'espace disponible en largeur

· Layout height= wrap_content ajuster la hauteur du layout à son contenu

Le Layout vertical va au final contenir des Layout horizontaux dans lesquels on va mettre les différents composants, ce qui va donner le xml suivant :

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/txtViewPrenom"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Entrez votre prénom"
            android:textColor="?attr/colorOnPrimary" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <EditText
            android:id="@+id/editTextPrenom"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="2"
            android:background="@color/white"
            android:ems="10"
            android:hint="Saisir votre prénom"
            android:inputType="textPersonName" />

        <Button
            android:id="@+id/boutonEnvoyer"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Button" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/txtViewMessage"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textColor="?android:attr/colorActivatedHighlight" />
    </LinearLayout>

</LinearLayout>

Lancez l'exécution de l'application dans l'AVD, puis suivre le déroulement, et quand l'application est prête, saisissez un prénom :

Pour l'instant, il ne se passe rien quand on clique sur le bouton Envoyer ; il va falloir ajouter de la programmation.

Pour continuer le développement de l'application, n'arrêtez pas l'AVD

6- Programmation Java

La phase suivante consiste à programmer en Java.

Il va falloir mettre un écouteur d’évènement sur le bouton « Envoyer » pour récupérer le texte entré préalablement dans l’objet EditText, et afficher « Hello lePrenomSaisi » de deux manières :

· Avec un message de type pop-up qui s'affiche quelques secondes en bas d'écran

· De façon durable dans l'objet TextView placé sous la zone de saisie

package com.example.helloapplication;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity
{
    private EditText editTextPrenom; // l'EditText utilisé pour la saisie du prénom
    private Button boutonEnvoyer; // le Button pour envoyer
    private TextView txtViewMessage; // le TextView pour afficher le message de bienvenue

    private String prenom; // le prénom saisi

    /** Fonction appelée lors de la création de l'activité. */
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initialisations();
    }

    public void initialisations()
    {
        // récupération de l'EditText grâce à son ID
        editTextPrenom = (EditText) findViewById(R.id.editTextPrenom);
        // récupération du Button grâce à son ID
        boutonEnvoyer = (Button) findViewById(R.id.boutonEnvoyer);
        // récupération du TextView grâce à son ID
        txtViewMessage = (TextView) findViewById(R.id.txtViewMessage);
        // association d'un écouteur à l'évènement clic sur le bouton boutonEnvoyer
        boutonEnvoyer.setOnClickListener ( new EcouteurDuBoutonEnvoyer());
    }

    /** classe interne pour gérer le clic sur le bouton boutonEnvoyer. */
    private class EcouteurDuBoutonEnvoyer implements View.OnClickListener
    {
        public void onClick(View v)
        {
            // on récupère le texte écrit dans l'objet EditText
            prenom = editTextPrenom.getText().toString();
            // on affiche "Hello prénomSaisi ! " dans une pop-up qui s'affiche quelques secondes en bas d'écran
            Toast.makeText(getApplicationContext(), "Hello " + prenom + " !", Toast.LENGTH_LONG).show();
            // on affiche "Hello votrePrenom ! " dans l'objet TextView placé sous la zone de saisie
            txtViewMessage.setText("Hello " + prenom + " !");
        }
    }
}

Lancez l'exécution de l'application dans l'AVD, puis suivre le déroulement, et quand l'application est prête, saisissez un prénom ; on doit obtenir un résultat similaire à celui-ci :

7- Modification à effectuer

· Modifiez la disposition des éléments de l'interface graphique et ajoutez un autre EditText pour saisir le nom (dans un autre Layout horizontal)

· Construisez un message du type Hello Anna-Lyse DURINE, dans lequel :

o le nom est transformé en majuscules

o le prénom est transformé en minuscules, sauf la première lettre et la lettre qui suit un tiret dans le cas d'un prénom composé (utilisez la fonction "nomCompose" que vous créerez).