Développement Android/Interfaces Graphiques
Deuxième Partie:
Les Interfaces et Les Widgets
27/11/2021 FST/ FES SICOM/S3 2020/2021 1
Développement Android/Interfaces Graphiques
❑ Les Vues (View)
27/11/2021 FST/ FES SICOM/S3 2020/2021 2
Développement Android/Interfaces Graphiques
❑ Vues et gabarits/(Layout)
❑ Les éléments graphiques héritent de la classe View. On peut regrouper des éléments graphiques
dans une ViewGroup.
❑ Des ViewGroup particuliers sont prédéfinis: ce sont des gabarits ( layout) qui proposent une
prédispositions des objets graphiques:
•Constraint Layout: la disposition des éléments dépend du Layout de l’activité parent
•LinearLayout: dispose les éléments de gauche à droite ou du haut vers le bas
•RelativeLayout: les éléments enfants sont placés les uns par rapport aux autres
•TableLayout: disposition matricielle
•FrameLayout: disposition en haut à gauche en empilant les éléments
•GridLayout: disposition matricielle avec N colonnes et un nombre infini de lignes
Les déclarations se font principalement en XML, ce qui évite de passer par les instanciations Java.
27/11/2021 FST/ FES SICOM/S3 2020/2021 3
Développement Android/Interfaces Graphiques
❑ ConstraintLayout
27/11/2021 FST/ FES SICOM/S3 2020/2021 4
Développement Android/Interfaces Graphiques
❑ LinearLayout
27/11/2021 FST/ FES SICOM/S3 2020/2021 5
Développement Android/Interfaces Graphiques
❑ LinearLayout
<LinearLayout xmlns:android="[Link]
xmlns:app="[Link]
xmlns:tools="[Link]
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ActivityView">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/nam_text1"
android:text="@string/nam_text1"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/image1"
android:src="@drawable/image1"/>
27/11/2021
</LinearLayout> FST/ FES SICOM/S3 2020/2021 6
Développement Android/Interfaces Graphiques
❑ RelativLayout
27/11/2021 FST/ FES SICOM/S3 2020/2021 7
Développement Android/Interfaces Graphiques
❑ RelativLayout
27/11/2021 FST/ FES SICOM/S3 2020/2021 8
Développement Android/Interfaces Graphiques
❑ Absolute Layout
<AbsoluteLayout xmlns:android="[Link]
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Absolute Layout"
android:textSize="25sp"
android:layout_x="200px"
android:layout_y="200px" />
</AbsoluteLayout>
27/11/2021 FST/ FES SICOM/S3 2020/2021 9
Développement Android/Interfaces Graphiques
❑ TableLayout
<TableRow></ TableRow >
stretchColumns: 1, (0,1), *
shrinkColumns: 1,(0,1), *
27/11/2021 FST/ FES SICOM/S3 2020/2021 10
Développement Android/Interfaces Graphiques
❑ Les Ressources/les Widgets
Les labels de texte
Les zones de texte
Les images
Les boutons
Autres(audio, vidéo,…)
27/11/2021 FST/ FES SICOM/S3 2020/2021 11
Développement Android/Interfaces Graphiques
❑ Les Ressources/ label (TextView)
<TextView
android:id="@+id/Text" ▪ id
android:layout_width="wrap_content" ▪ gravity
android:layout_height="wrap_content" ▪ text
android:text= "Bonjour" ▪ textColor
android:layout_centerInParent="true« ▪ textSize
android:textSize="40sp" ▪ textStyle
android:padding="10dp" ▪ background
android:textColor="#fff" ▪ padding
android:background="#000"/>
27/11/2021 FST/ FES SICOM/S3 2020/2021 12
Développement Android/Interfaces Graphiques
❑ Les Ressources/ TextView
▪ id
TextView code in JAVA: ▪ gravity
TextView textView = new TextView(this); ▪ text
▪ textColor
TextView textView = (TextView) findViewById([Link]); ▪ textSize
[Link]([Link]); ▪ textStyle
▪ background
[Link](8); ▪ padding
[Link](0x112233);
27/11/2021 FST/ FES SICOM/S3 2020/2021 13
Développement Android/Interfaces Graphiques
❑ Les Ressources/ EditText
▪ id
▪ gravity
▪ text
▪ textColor
▪ textSize
▪ textStyle
▪ background
▪ padding
27/11/2021 FST/ FES SICOM/S3 2020/2021 14
Développement Android/Interfaces Graphiques
❑ Les Ressources/ EditText
EditText code in XML: ➢ Les attributs
<EditText ▪ id
android:id="@+id/simpleEditText" ▪ gravity
android:layout_width="fill_parent" ▪ text
android:layout_height="wrap_content" ▪ textColor
android:layout_centerInParent="true" ▪ textSize
android:hint="Enter Your Name Here" ▪ textStyle
android:padding="15dp" ▪ background
android:textColorHint="#fff" ▪ padding
android:textStyle="bold|italic" ▪ hint
android:background="#000"/> ▪ textColorhint
Manipilation de EditText en java:
EditText simpleEditText = (EditText) findViewById([Link]);
String editTextValue = [Link]().toString();
27/11/2021 FST/ FES SICOM/S3 2020/2021 15
Développement Android/Interfaces Graphiques
❑ Les Ressources/ Button
Button code in XML: ➢ Les attributs
<Button ▪ id
android:id="@+id/simpleButton" ▪ gravity
android:layout_width="fill_parent" ▪ text
android:layout_height="wrap_content"
android:layout_centerInParent="true"
▪ textColor
android:background="#147D03" ▪ textSize
android:text="Download Code" ▪ textStyle
android:textSize="20sp" ▪ background
android:padding="15dp" ▪ padding
android:textStyle="bold|italic" ▪ drawableBottom
android:drawableRight="@drawable/ic_launcher"/
Manipilation de button en java:
Button button = (Button) findViewById([Link]);
[Link](« bouton android");
27/11/2021 FST/ FES SICOM/S3 2020/2021 16
Développement Android/Interfaces Graphiques
❑ Les Ressources/ ImageView
ImageView code in XML: ➢ Les attributs
▪ id
<ImageView ▪ src
android:id="@+id/ImageLion" ▪ background
android:layout_width="fill_parent" ▪ padding
android:layout_height="wrap_content" ▪ scaleType
android:background="#000"
android:src="@drawable/lion"
android:padding="30dp"/ >
Manipilation de ImageView en java:
ImageView ImageLion = (ImageView) findViewById([Link]);
public void onClick(View view) { [Link](getApplicationContext(), "Lion", Toast.LENGTH_LONG).show();}
27/11/2021 FST/ FES SICOM/S3 2020/2021 17
Développement Android/Interfaces Graphiques
❑ Les Ressources/ CheckBox
CheckBox code in XML: ➢ Les attributs
<CheckBox android:id="@+id/simpleCheckBox" ▪ id
android:layout_width="wrap_content" ▪ checked
android:layout_height="wrap_content" ▪ text
android:checked="true" ▪ textColor
▪ textSize
android:text="Text Attribute Of Check Box"/> ▪ textStyle
▪ background
▪ padding
Manipilation de CheckBox en java: ▪ textOn And testOff
/*Add in Oncreate() funtion after setContentView()*/ ▪ gravity
CheckBox simpleCheckBox = (CheckBox) findViewById([Link]);
[Link]("Text Attribute Of Check Box");
27/11/2021 FST/ FES SICOM/S3 2020/2021 18
Développement Android/Interfaces Graphiques
❑ Les Ressources/ RadioGroup/RadioButton
RadioButton code in XML: ➢ Les attributs
▪ id
<RadioButton ▪ checked
android:id="@+id/simpleRadioButton"/ ▪ text
android:layout_width="wrap_content" ▪ textColor
▪ textSize
android:layout_height="wrap_content"/> ▪ textStyle
Manipilation de RadioButton en java: ▪ background
▪ padding
RadioButton simpleRadioButton = (RadioButton) findViewById([Link]); ▪ gravity
[Link]([Link]);
▪ drawableBottom, drawableTop, drawableLeft And drawableRight:
27/11/2021 FST/ FES SICOM/S3 2020/2021 19
Troisième Partie
▪ Les styles
▪ Récupération de ressources en java
▪ Les animations
▪ Les Listeners
▪ Les adaptateurs
▪ Concepts avancées
▪ Les Intents
27/11/2021 FST/ FES SICOM/S3 2020/2021 20
Développement Android/Animations
Style de ressources
➢Un style est un ensemble de critères esthétiques dont l'objectif est de pouvoir définir
plusieurs règles à différents éléments graphiques distincts.
➢Les styles sont des values à définir au même endroit que les chaînes de caractères.
➢ règles à respecter :
• Définir un nom unique pour le style, puisqu'il y aura une variable pour y accéder.
•Il est possible d'ajouter des propriétés physiques à l'aide d'<item>.
•Le nom de l'<item> correspond à un des attributs destinés aux Vues.
Par exemple pour changer la couleur d'un texte,
<item name="android:color">#D81900</item>
•Il est possible d’hériter notre style d'un autre style qu'il ait été défini par Android ou par vous-
mêmes — et ainsi récupérer ou écraser les attributs d'un parent.
FST/ FES SICOM/S3 2020/2021 21
Développement Android/Animations
Style de ressources
<style name="texte_cyan">
<item name="android:textColor">#00FFFF</item>
</style>
Les deux styles suivants héritent du style précédent en rajoutant d'autres attributs :
<style name="texte_cyan_grand" parent="texte_cyan">
<!-- On récupère la couleur du texte définie par le parent -->
<item name="android:textSize">20sp</item>
</style>
<style name="texte_rouge_grand" parent="texte_cyan_grand">
<!-- On écrase la couleur du texte définie par le parent, mais on garde la taille -->
<item name="android:textColor">#FF0000</item>
</style>
FST/ FES SICOM/S3 2020/2021 22
Développement Android/Animations
Style de ressources/Attribuer un style
➢ attribuer un style à une vue en XML avec l'attribut
style="identifiant_du_style".
➢ Cependant, un style ne s'applique pas de manière dynamique en Java.
➢ il faut alors préciser le style à utiliser dans le constructeur.
public View (Context contexte, AttributeSet attrs).
➢ Le paramètre attrs est facultatif, et c'est lui qui permet d'attribuer un style à une
vue.
exemple :
Button bouton = new Button (this, [Link].texte_rouge_grand);
FST/ FES SICOM/S3 2020/2021 23
Développement Android/Animations
Récupération de ressources en java
➢ TextView
▪ TextView textView = new TextView(this);
▪ [Link]([Link]);
▪ [Link](8);
▪ [Link](0x112233);
➢ EditText: Il s'agit en fait d'un TextView éditable, il hérite de TextView.
▪ EditText editText = new EditText(this);
▪ [Link]([Link]);
▪ [Link](InputType.TYPE_TEXT_FLAG_MULTI_LINE);
▪ [Link](5);
➢ Button: Un simple bouton, même s'il s'agit en fait d'un TextViewcliquable.
▪ Button button = new Button(this);
▪ [Link]([Link]);
FST/ FES SICOM/S3 2020/2021 24
Développement Android/Animations
Récupération de ressources en java
CheckBox:
Une case qui peut être dans deux états : cochée ou pas. Elle hérite du button.
▪ CheckBox checkBox = new CheckBox(this);
▪ [Link]([Link]);
▪ [Link](true)
▪ if([Link]())
// Faire quelque chose si le bouton est coché
FST/ FES SICOM/S3 2020/2021 25
Développement Android/Animations
Récupération de ressources en java
➢ RadioButton et RadioGroup: ils héritent de button.
<RadioGroup
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<RadioButton Fichier XML
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true" />
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RadioGroup>
FST/ FES SICOM/S3 2020/2021 26
Développement Android/Animations
Récupération de ressources en java
➢ RadioButton et RadioGroup: ils héritent de button.
RadioGroup radioGroup = new RadioGroup(this);
RadioButton radioButton1 = new RadioButton(this);
RadioButton radioButton2 = new RadioButton(this);
RadioButton radioButton3 = new RadioButton(this);
[Link](radioButton1, 0);
// On ajoute les boutons au RadioGroup
[Link](radioButton2, 1);
[Link](radioButton3, 2);
[Link](0); // On sélectionne le premier bouton
int id = [Link](); // On récupère l'identifiant du bouton qui est coché
FST/ FES SICOM/S3 2020/2021 27
Développement Android/Animations
Animation de ressources
➢ C’est de faire bouger, faire tourner, agrandir ou faire disparaître une vue ou un ensemble de
vues.
➢ Pour exprimer une coordonnée, on utilise la notation (X, Y).
➢ L'unité est le pixel.
➢ Le point en haut à gauche a pour coordonnées (0, 0).
➢ Le point en bas à droite a pour coordonnées (largeur de l'écran, hauteur
de l'écran).
➢ les animations ne sont pas des données mais des ressources indépendantes, comme l'étaient les
drawables. Elles doivent être définies dans le répertoire Res/anim/
FST/ FES SICOM/S3 2020/2021 28
Développement Android/Animations
Quatre Animations pour un widget
1. Transparence
✓ <alpha>: permet de faire apparaître ou disparaître une vue.
✓ Android:fromAlpha est la transparence de départ avec 0.0 pour une vue totalement
transparente et 1.0 pour une vue totalement visible.
✓ Android:toAlpha est la transparence finale voulue avec 0.0 pour une vue totalement
transparente et 1.0 pour une vue totalement visible.
Exemple:
<alpha
android:fromAlpha="1.0"
android:toAlpha="0.0" />
FST/ FES SICOM/S3 2020/2021 29
Développement Android/Animations
4 Animations pour un widget (2/4)
2. Rotation
✓ <rotae>: permet de faire tourner une vue autour d'un axe.
✓ android:fromDegrees est l'angle de départ.
✓ android:pivotX est la coordonnée du centre de rotation sur l'axe X (en pourcentages par
rapport à la gauche de la vue, par exemple 50% correspond au milieu de la vue et 100% au
bord droit).
✓ android:pivotY est la coordonnée du centre de rotation sur l'axe Y (en pourcentages par
rapport au plafond de la vue).
✓ android:toDegrees: est l'angle voulu à la fin.
Exemple:
android:pivotX="50%" et android:pivotY="50%" permettent de placer le centre d'application de l'animation
au milieu de la vue.
FST/ FES SICOM/S3 2020/2021 30
Développement Android/Animations
4 Animations pour un widget (3/4)
3. Taille
<scale> permet d'agrandir ou de réduire une vue.
•android:fromXScale est la taille de départ sur l'axe X (1.0 pour la valeur actuelle).
•android:fromYScale est la taille de départ sur l'axe Y (1.0 pour la valeur actuelle).
•android:pivotX (identique à <rotate>).
•android:pivotY (identique à <rotate>).
•android:toXScale est la taille voulue sur l'axe X (1.0 pour la valeur de départ).
•android:toYScale est la taille voulue sur l'axe Y (1.0 pour la valeur de départ).
FST/ FES SICOM/S3 2020/2021 31
Développement Android/Animations
Regroupement d’animations pour un widget
Exemple
<set xmlns:android="[Link]
<scale
android:fromXScale="1.0"
android:fromYScale="1.0"
android:toXScale="2.0"
android:toYScale="2.5dp"
android:pivotX="50%"
android:pivotY="50%"
android:duration="300"/>
<alpha
android:fromAlpha="1.0"
android:toAlpha="0.0"
android:startOffset="300"
android:duration="2000"/>
</set>
FST/ FES SICOM/S3 2020/2021 32
Développement Android/Animations
Manipulation de l’animation en java
// instanciation de l’animation
Animation animation = [Link](contexte_dans_lequel_se_situe_la_vue,
identifiant_de_l_animation);
// On l'affecte au widget désiré, et on démarre l'animation
le_widget.startAnimation(animation);
exemple
[Link](new [Link]() {
@Override
public boolean onLongClick(View view) {
Animation
animation2=[Link](getApplicationContext(),[Link].
anima2);
[Link](animation2);
return true;
FST/ FES SICOM/S3 2020/2021 33
Développement Android/Animations
4 Animations pour un widget (4/4)
4. Mouvement
<translate> permet de faire subir une translation à une vue (mouvement rectiligne).
• android:fromXDelta est le point de départ sur l'axe X (en pourcentages).
• android:fromYDelta est le point de départ sur l'axe Y (en pourcentages).
• android:toXDelta est le point d'arrivée sur l'axe X (en pourcentages).
• android:toYDelta est le point d'arrivée sur l'axe Y (en pourcentages).
FST/ FES SICOM/S3 2020/2021 34
Développement Android/Animations
Regroupement d’animations pour un widget
Exemple
<set
xmlns:android="[Link]
<rotate
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="90"
android:duration="3000" />
<translate
android:fromXDelta="5%"
android:toXDelta="90%"
android:fromYDelta="5%"
android:toYDelta="90%"
android:duration="3000"/>
</set>
FST/ FES SICOM/S3 2020/2021 35
Développement Android/Animations
L'évènementiel dans les animations
❑ Trois évènements qui peuvent être gérés dans le code : le lancement de
l'animation, la fin de l'animation, et chaque début d'une répétition.
[Link](new AnimationListener() {
public void onAnimationEnd(Animation _animation) {
// Que faire quand l'animation se termine ? (n'est pas lancé à la fin d'une répétition)
}
public void onAnimationRepeat(Animation _animation) { // Que faire quand l'animation se
répète ?
}
public void onAnimationStart(Animation _animation) { // Que faire au premier lancement de
l'animation ?
}});
FST/ FES SICOM/S3 2020/2021 36
Développement Android/Les Listeners
Gérer les évènements sur les widgets
Les Listeners
27/11/2021 FST/ FES SICOM/S3 2020/2021 37
Développement Android/Les Listeners
Gérer les évènements sur les widgets
➢ Il existe plusieurs façons d'interagir avec une interface graphique. Par
exemple cliquer sur un bouton, entrer un texte, sélectionner une portion de texte,
etc.
➢Ces interactions s'appellent des évènements.
➢Pour pouvoir réagir à l'apparition d'un évènement, il faut utiliser un objet qui va
détecter l'évènement et afin de vous permettre le traiter. Ce type d'objet
s'appelle un listener.
➢Un listener est une interface qui vous oblige à redéfinir des méthodes
de callback et chaque méthode sera appelée au moment où se produira
l'évènement associé
27/11/2021 FST/ FES SICOM/S3 2020/2021 38
Développement Android/Les Listeners
Gérer les évènements sur les widgets
➢ Exemple 1,
pour intercepter l'évènement clic sur un Button, on appliquera l'interface
[Link] sur ce bouton.
➢Cette interface contient la méthode de callback void onClick(View vue)
le paramètre de type View étant la vue sur laquelle le clic a été effectué, qui
sera appelée à chaque clic et qu'il faudra implémenter pour déterminer que
faire en cas de clic (liste de méthode non exhaustive) :
27/11/2021 FST/ FES SICOM/S3 2020/2021 39
Développement Android/Les Listeners
Gérer les évènements sur les widgets
➢ Exemple 2
[Link],
avec la méthode
boolean onLongClick(View vue).
Cette méthode doit retourner true une fois que l'action associée a été
effectuée.
27/11/2021 FST/ FES SICOM/S3 2020/2021 40
Développement Android/Les Listeners
Gérer les évènements sur les widgets
❑ Associer un Listener à une vue
pour associer un listener à une vue, on utilisera une méthode du type
setOn[Evenement]Listener(On[Evenenement]Listener listener)
avec Evenement l'évènement concerné,
27/11/2021 FST/ FES SICOM/S3 2020/2021 41
Développement Android/Les Listeners
Gérer les évènements sur les widgets
❑ Associer un listener à une vue
Exemple:
[Link](new [Link]() {
@Override
public boolean onLongClick(View view) {
Animation
animation2=[Link](getApplicationContext(),R.
anim.anima2);
[Link](animation2);
return true;
}});
27/11/2021 FST/ FES SICOM/S3 2020/2021 42
