Le document présente une formation sur la gestion des interfaces Android, abordant des layouts tels que LinearLayout, RelativeLayout, FrameLayout et TableLayout, ainsi que des composants simples et complexes comme EditText et ListView. Il décrit aussi les drawables et leur gestion, ainsi que d'autres ressources comme colors.xml et strings.xml pour définir les styles et stocker les couleurs et chaînes de caractères de l'application. Enfin, il fournit des exemples de code XML pour illustrer la création et la personnalisation des interfaces.

1. Android
Gestion des
Interfaces
Formation Enseignants ISET
Rades

2. 2
Partie 1 - Layout
LinearLayout, RelativeLayout, FrameLayout, Table
Layout
Y. BEN TLILI

3. 3
LinearLayout


Le LinearLayout est un Layout qui repose sur une idée
de boite, c’est-à-dire que les conteneurs ou les widgets
appartenant à ce Layout sont soit alignés en ligne
horizontale ou verticale.
Plusieurs éléments sont disponibles pour permettre aux
développeurs de personnaliser ce Layout.
Y. BEN TLILI

4. 

Orientation de layout : Verticale vs Horizontale
Tailles des éléments :
android:layout_width
android:layout_height
XML :
<LinearLayout
xmlns:android="http://schemas.android.com/apk/
res/android"
android:orientation="vertical"
android:layout_width=“match_parent"
android:layout_height=“wrap_content"
></LinearLayout>

Y. BEN TLILI

5. 5
RelativeLayout


-
-
Le principe du RelativeLayout est de placer les éléments
selon d’ autres éléments du conteneur.
Positionnement relatif au conteneur :
android:layout_alignParentTop (true / false) : Cette
option permet de préciser si le haut de l’élément doit
être aligné avec celui de son conteneur.
De même pour :
android:layout_alignParentBottom, android:layout_align
ParentLeft et android:layout_alignParentRight.
Y. BEN TLILI
Y. BEN TLILI

6. 
Position relative aux autres éléments :Afin de
pouvoir référencer le positionnement d’un élément par rapport
à un autre, vous disposez d’un moyen simple et efficace, il
s’agit des identificateurs (ID) :
* A la déclaration d’un élément : android:id= “@+id/idElem”
* A l’utilisation : @id/idElem





android:layout_above : Indique que l’élément sera placé au-dessus
de celui indiqué par son id.
android:layout_below : Indique que l’élément sera placé en dessous
de celui indiqué par son id.
android:layout_toLeftOf : Indique que l’élément sera placé à gauche
de celui indiqué par son id.
android:layout_toRightOf : Indique que l’élément sera placé à droite
de celui indiqué par son id.
android:layout_alignTop : Indique que le haut de notre élément est
aligné avec le haut de l’élément indiqué.
Y. BEN TLILI

7. 



android:layout_alignBottom : Indique que le bas de notre
élément est aligné avec le bas de l’élément indiqué.
android:layout_alignLeft : Indique que le côté gauche de notre
élément est aligné avec le côté gauche de l’élément indiqué.
android:layout_alignRight : Indique que le côté droit de notre
élément est aligné avec le côté droit de l’élément indiqué.
android:layout_alignBaseLine : Indique que les lignes de base
des 2 éléments sont alignées.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/andr
oid" android:layout_width=“match_parent"
android:layout_height=“wrap_content" ></RelativeLayout>
Y. BEN TLILI

8. FrameLayout
 Le
FrameLayout est utilisé généralement
pour superposer des views ensembles.
Y. BEN TLILI

9. <FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height=“wrap_content"></FrameLayout>
Y. BEN TLILI

10. TableLayout
 Arranger
les éléments dans des linges et
colonnes sous forme d’un tableau.
Y. BEN TLILI

11. <TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff">
<TableRow
android:layout_height="wrap_content"
android:layout_width="fill_parent""></ TableRow>
</ TableLayout>
Y. BEN TLILI

12. 12
Partie 2 - Objets Simples,
composés
EditText, Button, TextView, ListView…
Y. BEN TLILI

13.  Il
existe plusieurs composants simples
Android afin de construire des interfaces
attirantes.




EditText : Champ Text de Saisie
TextView : Label
CheckBox
Button : un bouton pour gérer des clicks
Y. BEN TLILI

14.  EditText
:
<EditText
android:id="@+id/email_address"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="@string/email_hint"
android:inputType="textEmailAddress" />
Y. BEN TLILI

15.  TextView
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Enter your name:"
android:textSize="25sp"
android:textColor="#660000"/>
Y. BEN TLILI

16.  Checkbox
<CheckBox
android:id="@+id/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Android" />
Y. BEN TLILI

17.  Il
existe plusieurs types des objets
complexes dans Android. Le plus utilisés
sont :
 ListView : afficher un ensemble
Des données sous forme une liste
déroulante
 GridView: afficher un ensemble
Des données sous forme une
Gride
Y. BEN TLILI

18.  ListView
<ListView
android:id="@+id/list"
android:layout_height="wrap_content"
android:layout_width="match_parent">
Y. BEN TLILI

19.  GridView
<GridView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/gridView1"
android:numColumns="auto_fit"
android:columnWidth="50dp"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
</GridView>
Y. BEN TLILI

20. 20
Partie 3 - Drawables
Y. BEN TLILI

21.  Les
drawables sont les images utilisées
dans toute l’application.
 Il existe plusieurs catégories des
drawables
Y. BEN TLILI

22. 



LDPI : Low Density Per Inch : c’est un dossier dédié pour les
images pour les small smartphones avec une densité 120dp
MDPI : Medium Density Per Inech : c’est un dossier dédié
pour les images pour les medium smartphones avec une
densité 160dp .
HDPI : High Density Per Inech : c’est un dossier dédié pour
les images pour les high smartphones avec une densité
240dp .
XHDPI : Extra High Density Per Inech : c’est un dossier dédié
pour les images pour les extra high smartphones avec une
densité 320dp .
Remarque : les extensions utilisées sont .png, .gif, .jpg et
.9.png
Y. BEN TLILI

23. 

On peut construire des images à base fichier XML. Le
fichier doit être créer dans un dossier drawable.
Pour créer le fichier, nous pouvons définir les balises
suivantes : <shape> (format : oval, rectangle..),
<gradient>(background,startColor,endColor..)..
Y. BEN TLILI

24. <selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" >
<shape>
<solid
android:color="#ef4444" />
<stroke
android:width="1dp"
android:color="#992f2f" />
<corners
android:radius="6dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
Y. BEN TLILI

25. <item>
<shape android:shape="oval"><!-- format de bouton -->
<!-- background --> <gradient
android:startColor="#ef4444"
android:endColor="#FFFFFF"
android:angle="45" /><!-- must be multiple of 45° -->
<!-- ligne autour de format --><stroke
android:width="1dp"
android:color="#0000FF" />
<!-- rayon --> <corners
android:radius="60dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" /> </shape> </item></selector>
Y. BEN TLILI

26. 26
Partie 4 - Autres
ressources
Colors.xml, Strings.xml…
Y. BEN TLILI

27. 



Styles.xml : c ’est un fichier pour définir un style pour un
ensemble des composants.
Strings.xml : c’est un fichier pour stocker tous les Strings
de votre applications
Colors.xml : c’est un fichier pour stocker les couleurs
utilisés dans votre application.
Le dossier menu pour définir les items de menu dans
l’application s’ils existent.
Y. BEN TLILI