DÉVELOPPEMENT MOBILE ET

EMBARQUE

Par : Dr. Slim BEN ABDELBARI

Auditoire cible : 3ème Année en Licence Télécom
SOMMAIRE
 Chapitre 1: Etat de l'art sur le développement
d'applications mobiles

 Chapitre 2 : Notions de base de la programmation sous

android : Notions de Layout

 Chapitre 3: View & Widgets

 Chapitre 4: Cycle de vie d’une application ANDROID

 Cours Développement Mobile et Embarqué
3LT

CHAPITRE 2
NOTIONS DE BASE DE LA
PROGRAMMATION SOUS ANDROID :
NOTIONS DE LAYOUT
ETUDE VIA UNE APPLICATION BASIQUE
APPLICATION 1 : LES BASIQUES,
« HELLO WORLD » 

• Objectif de l’application : afficher le très fameux et

tant difficile message « hello world » via la
programmation sous ANDROID !!

• IDE utilisé : ANDROID STUDIO.

• Pré requis : Notions intermédiaires en JAVA, XML.

APPLICATION 1 : LES BASIQUES,
« HELLO WORLD » 
 Etape 1 : Créer un
nouveau projet sous AS.

Nom de l’app. sur Play Store

Package final
généré par
l’application (cf.
notation JAVA)
APPLICATION 1 : LES BASIQUES,
« HELLO WORLD » 

Version
minimale de
l’API
(Application
Programming
Interface)
Android pour
faire fonctionner
l’application !
Versions API
Android ??
APPLICATION 1 : LES BASIQUES,
« HELLO WORLD » 

API référenciée
précédemment !!
APPLICATION 1 : LES BASIQUES,
« HELLO WORLD » 

Volet d’ajout d’une

activité

Une activité ? On
y reviendra au
moment opportun

 APPLICATION 1 : LES BASIQUES,
« HELLO WORLD » 
Q : mais au fait, quelle
est la différence entre
Activity et Layout ?
Nom de l’activité


N.B : Cette interface

n’apparait plus au niveau de Nom du Layout
la conf. À partir d’AS v 3.5.
L’activité de démarrage ainsi
que le Layout associé sont
crées par défaut.
APPLICATION 1 : LES BASIQUES,
« HELLO WORLD » 
 Pour faire simple………………..
APPLICATION 1 : LES BASIQUES, « HELLO WORLD » 
APPLICATION 1 : LES BASIQUES, « HELLO WORLD » 
APPLICATION 1 : LES BASIQUES, « HELLO WORLD » 
XML : notions de base

XML: eXtensible Markup Langage, est un langage basé sur le

concept de balises (tag)
1/ En XML, une balise est définie par un texte délimité par < et >.
APPLICATION 1 : LES BASIQUES, « HELLO WORLD » 
XML : notions de base

2/ Trois types de balises peuvent exister : start tags, empty

element tags, end tags.

Start tag <………..>

Empty element tag

<………../>

End tag </……….. >

APPLICATION 1 : LES BASIQUES, « HELLO WORLD » 
XML : notions de base

3/ Un élément XML contient éventuellement les balises de début et de fin. Le

cas échéant, il sera de type empty element tag.

Élément XML :
android.support.con
straint.ConstraintL
ayout.

Élément XML : TextView.

End tag </……….. >

 APPLICATION 1 : LES BASIQUES, « HELLO WORLD » 
XML : notions de base
4/ Chaque fichier XML contient un élément particulier appelé racine (root
element) dans lequel tous les autres éléments sont imbriqués.

5/ Les textes dans un fichier XML sont sensibles à la casse (distinction

majuscule/minuscule).

6/ Les éléments start tags et empty element tags peuvent contenir des
attributs ( propriété = ‘’valeur’’)

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />

Propriété Valeur
APPLICATION 1 : LES BASIQUES, « HELLO WORLD » 
 NOTES SUR LES OBJETS « INTENTS »
Pour faire simple, un objet de type Intent matérialise un
système de messagerie traduisant des intentions.

https://google-developer-training.github.io/android-developer-fundamentals-course-
concepts/en/Unit%201/23_c_activities_and_implicit_intents.html
 NOTES SUR LES OBJETS « INTENTS »
Permet de spécifier quelle application (en
plus précis l’activité ou le service y
afférent) doit être utilisée pour résoudre
l’objet de l’intent. Il est généralement
utilisé pour l’échange de requêtes au
sein de l’application développée par
l’utilisateur
https://developer.android.com/guide/components/intents-filters.html#Types
Implicit Intent : principe
Permet l’envoi d’un intent mais sans
savoir au préalable l’activité (et donc
l’application) cible. Dans ce cas de figure,
la gestion de l’intent est totalement prise
en charge par ANDROID.
Remarque :
l’expression
<intent-filter> permet de
spécifier le type d’intent
susceptible d’être reçu par
l’application.
APPLICATION 1 : LES BASIQUES, « HELLO WORLD » 
APPLICATION 1 : LES BASIQUES, « HELLO WORLD » 

Contient les ressources de l’application en termes d’images

Layout  Interfaces utilisateurs

multum in parvo  copie des images éditées en différentes

résolutions

Des fichiers XML contenant diverses informations de

configuration.
APPLICATION 1 : LES BASIQUES,
« HELLO WORLD » 

MainActivity . JAVA

Activity_Main . XML

On fait les
présentations ? 
 APPLICATION 1 : LES BASIQUES,
« HELLO WORLD » 
<?xml version="1.0" encoding="utf-8"?>
Les Layouts facilitent l’organisation
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"

des différents éléments qui composent

android:id="@+id/activity_main"
android:layout_width="match_parent" Spec. Du
android:layout_height="match_parent" layout en
une interface graphique. Ils jouent le
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
général
android:paddingRight="@dimen/activity_horizontal_margin"
rôle de conteneur (container) des
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.lt3.hellowoldapp.MainActivity">

composants de la vue.
<TextView
android:layout_width="wrap_content" Spec. L’élément TextView
android:layout_height="wrap_content"
android:text="Hello World!" />
</RelativeLayout>

Activity_Main . XML
APPLICATION 1 : LES BASIQUES,
« HELLO WORLD » 

Vue « Design », Activity_Main . XML

APPLICATION 1 : LES BASIQUES,
« HELLO WORLD » 
android:text="Hello World!"

Spécifie la propriété « Hardcoding » !!

texte de l’élément
TextView hardcoding

D’accord, mais…………penser que l’application

développée sera déployée sous différentes
langues……comment faire ??
APPLICATION 1 : LES BASIQUES,
« HELLO WORLD » 
<resources>
<string
name="app_name">HelloWoldApp</string>
</resources>

Les ressources
Indique un
du fichier
fichier
XML sont de
« ressources »
type string

Syntaxe générale
<string
name="string_name">string_value</string>
APPLICATION 1 : LES BASIQUES,
« HELLO WORLD » 
 Par la suite, on peut remplacer toutes les occurrences de
string_value par
"@string/string_name"

<resources>
<string name="app_name">HelloWoldApp</string>
<string name="hello_world">Hello world!</string>
</resources>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world" />

Pour basculer en Fr, ajouter un nouveau dossier de ressources Values-fr………

APPLICATION 1 : LES BASIQUES,
« HELLO WORLD » 

package com.example.lt3.hellowoldapp;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}

MainActivity . JAVA
APPLICATION 1 : LES BASIQUES,
« HELLO WORLD » 
package com.example.lt3.hellowoldapp;
Package final regroupant les méthodes et variables de l’application (cf.
définit au début au niveau de AS.

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
Classes importées automatiquement par AS.

public class MainActivity extends AppCompatActivity

La classe MainActivity est une extension de la classe de base AppCompatActivity
(gestion des ActionBar entre autres) !
N.B : Pour la gestion des activités, on aurait également pu faire appel à la classe
.Activity (issue de import android.app.Activity)
APPLICATION 1 : LES BASIQUES,
« HELLO WORLD » 
setContentView(R.layout.activity_main);

Demande à ANDROID R.JAVA est une

d’afficher le layout classe (ayant des Nom du layout qui
sous classes sera affiché lors de
dont le nom est donné
emboitées tels que la création de
dans la liste des l’activité.
layout, string, etc)
paramètres générée durant le
processus de
construction
permettant de créer
des références aux
ressources utilisées
dans l’application.

setContentView(activity_main);
APPLICATION 1 : LES BASIQUES, « HELLO WORLD »

DIPOSITION DES VIEWs AU NIVEAU DES LAYOUTs

Principaux éléments Conteneurs des éléments

d’une interface visuels permettant
utilisateur disposés au d’obtenir les interfaces
sein des Layouts graphiques
APPLICATION 1 : LES BASIQUES, « HELLO WORLD »

Plusieurs ’types ’ de Layouts: Linear, Relative, Grid, etc.
Quelque soit le type du Layout considéré, deux propriétés
doivent obligatoirement être spécifiées :

android:layout_height

android:layout_width
 DIFFÉRENTS CAS PROPRIÉTÉS = VALEURS

android:layout_width="match_parent"
La largeur du Layout est aussi grande que l’espace conteneur (en
l’occurrence la largeur de l’écran).
Remarque: dans ce cas spécifique, les marges (padding) sont pris en
considération.
android:layout_width=“wrap_content"
La largeur du Layout est suffisamment grande pour contenir les views
contenants.

android:layout_width=“10dp"
La largeur du Layout est égale à 10 density independant pixels.
 Une histoire de dimensions ?
Unité Détails

Px (pixel) Nombre de pixels réels à l’écran.

mm millimètre

in Pouce (2,54 cm)

pt Point (1/72 pouce)

Dp (dip) Density Independant Pixel. Cette

unité est purement « virtuelle ».
Elle correspond à 1 px sur un écran
de 160 dpi.
Sp Scale Independant Pixel. Idem que
dip même spécifique à la tailles des
textes.
 RELATIVE LAYOUT
Ce type de Layout permet de placer les Views de façon relative i.e.
les uns par rapports aux autres et les uns par rapport au conteneur

<RelativeLayout
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" Attributs nécessaires qui doivent être configurés
android:layout_height="match_parent" quelque soit le type du Layout
android:elevation="13dp"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="licencetelecom.application.MainActivity">

<textview
......
</RelativeLayout>
Début de la balise permettant
de déclarer un
RelativeLayout
(Fichier XML associé à
l’activité
RELATIVE LAYOUT
POSITIONNER LES VIEWS PAR RAPPORT AU LAYOUT PARENT

<TextView View considéré

android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="Hello World!"
/> alignParentTop

Hello World

layout_alignParentRight
RELATIVE LAYOUT
POSITIONNER LES VIEWS PAR RAPPORT AU LAYOUT PARENT

android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_centerInParent="true"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"

Hello World Hello World Hello World

RELATIVE LAYOUT
POSITIONNER LES VIEWS PAR RAPPORTS AUX AUTRES VIEWS
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="Hello World!" />

<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_below="@+id/textView"
android:layout_marginTop="70dp"
android:text="Premier bouton" />

<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Deuxieme bouton"
android:layout_below="@+id/button"
android:layout_marginTop="20dp"

android:layout_centerHorizontal="true" />
RELATIVE LAYOUT
POSITIONNER LES VIEWS PAR RAPPORTS AUX AUTRES VIEWS

Syntaxe générale
android:attribut ="@+id/View_Id”
android:layout_below="@+id/View_Id”
android:layout_above="@+id/View_Id”
android:layout_alignTop="@+id/View_Id”
android:layout_alignBottom="@+id/View_Id”
android:layout_alignLeft="@+id/View_Id”
android:layout_toLeftOf="@+id/View_Id”
android:layout_toRightOf="@+id/View_Id”

Hello World Hello World

RELATIVE LAYOUT
POSITIONNER LES VIEWS PAR RAPPORTS AUX AUTRES VIEWS
AJOUTER DES MARGES

android:layout_marginTop

android:layout_marginBottom

android:layout_marginLeft

android:layout_marginRight
RELATIVE LAYOUT (INSERTION DES MARGES)
android:paddingBottom=“50dp"
android:paddingLeft=“60dp"
android:paddingRight=“60dp" Eviter au maximum
android:paddingTop=“50dp"
la programmation
de type Hardcoding
paddingTop

paddingLeft Layout paddingRight

paddingBottom
LINEAR LAYOUT
Permet de placer les Views de façon linéaire (les uns après les autres)
selon un sens d’orientation, horizontalement ou verticalement.
<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"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="licencetelecom.application.MainActivity">

<textview
......
</LinearLayout>
Début de la balise permettant
de déclarer un LinearLayout
(Fichier XML associé à
l’activité)
Détermine la façon selon
laquelle les Views seront
disposés dans le Layout,
« horizontal »/  »vertical »
LINEAR LAYOUT
<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:elevation="13dp"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="licencetelecom.application.MainActivity">

<TextView
………
/>

<Button
………………
/>

<Button
……………….
/>

<ToggleButton
…………………..
/>

</LinearLayout>

Apparition dans le Layout selon leur ordre de déclaration

au niveau du fichier .XML
LINEAR LAYOUT : RAFFINEMENTS

Objectif désiré
 android:layout_weight=“Nombre“1,2

<EditText <EditText
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:hint="Email" /> android:hint="Email" />

<EditText <EditText
android:id="@+id/editText" android:id="@+id/editText"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_height="0dp"
android:text="Message" /> android:layout_weight="1"
android:text="Message" />
<Button
android:id="@+id/button" <Button
android:layout_width="match_parent" android:id="@+id/button"
android:layout_height="wrap_content" android:layout_width="match_parent"
android:text="Envoyer" /> android:layout_height="wrap_content"
android:text="Envoyer" />

Résultat =========

1. Cette propriété n'est pas valable au niveau des Layouts de type

Relative
2. Si nombre = 0, alors le View considéré va occuper au niveau du
Layout un espace réduit au strict minimum pour qu’il soit affiché.
android:gravity="top"
Permet de spécifier le contenu du View à l’intérieur de
View lui même

<EditText
android:id="@+id/editText"

android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="top"
android:text="Message" />

android:gravity="top"
android:gravity=“bottom"
android:gravity=“left"
android:gravity=“right"
android:gravity=“center"
android:gravity=“fill"
 android:layout_gravity="right"
Permet de spécifier la position du View dans l’espace
encapsulant.

Button
android:id="@+id/button"
android:layout_width=“wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="Envoyer" />

android:layout_gravity=“top"
android:layout_gravity=“bottom"
android:layout_gravity="right"
android:layout_gravity=“center_horizontal"
android:layout_gravity=“fill"
 GRID LAYOUT
<GridLayout 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:elevation="13dp"
Indique la disposition en
android:columnCount="2" colonnes au niveau du
tools:context="licencetelecom.application.MainActivity">
Layout.
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Email" />

<EditText
android:id="@+id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Message" />

<Button
android:id="@+id/button"
android:layout_width="wrap_content" Début de la balise permettant
android:layout_height="wrap_content"
android:layout_gravity="right"
de déclarer un GridLayout
android:text="Envoyer" /> (Fichier XML associé à
l’activité)
</GridLayout>
 Colonne 0 Colonne 1

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="0"
android:layout_column="0" Ligne 0
android:text="Destinataire" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="fill_horizontal"
android:layout_row="0"
android:layout_column="1" Ligne 1
android:hint="Adresse" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="fill"
android:gravity="top"
android:layout_row="1"
android:layout_column="0"
android:layout_columnSpan="2" Ligne 2
android:hint="message" />

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="2"
android:layout_column="0"
android:layout_gravity="center_horizontal"
android:layout_columnSpan="2"
android:text="Envoyer" />
Les propriétés left, top, right, bottom, center_horizontal,
center_vertical, center, fill_horizontal, fill_vertical et fill
demeurent valables dans ce type de Layout.
Création d’une interface utilisateur via la programmation
JAVA
Cas d’étude: répéter les mêmes étapes du projet « Hello World » mais en
choisissant de ne pas insérer d’activité dans la hiérarchie du projet.

Pas de répertoire Layout !

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.ViewGroup;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// Créer un objet de type LinearLayout

LinearLayout Activity_Main = new LinearLayout(this);

// Définir l'orientation du (Linear)Layout

Activity_Main.setOrientation(LinearLayout.VERTICAL);

// Créer un objet spécifiant les paramètres

LinearLayout.LayoutParams ActivityParams = new LinearLayout.LayoutParams(

ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.WRAP_CONTENT);

// Pour affichage

setContentView(Activity_Main,ActivityParams);

}
}
Création d’une interface utilisateur via la programmation
JAVA
Ajout dynamique d’un objet view
public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// Créer un objet de type LinearLayout
LinearLayout Activity_Main = new LinearLayout(this);
// Définir l'orientation du (Linear)Layout
Activity_Main.setOrientation(LinearLayout.VERTICAL);
// Créer un objet spécifiant les paramètres
LinearLayout.LayoutParams ActivityParams = new LinearLayout.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.WRAP_CONTENT);

// Création d'un view du type TextView

TextView txtView = new TextView(this);

// Définition de la propriété text à afficher

txtView.setText("Bonjour");

// Ajout du textView à l'activité défini préalablement

Activity_Main.addView(txtView);

// Pour affichage
setContentView(Activity_Main,ActivityParams);

}
}
APPLICATION 1 : LES BASIQUES,
« HELLO WORLD » 

Au revoir « HELLO WORLD » !!

………Que doit-on retenir ?