Android Academy · Leçon

Mises en page et vues

Concevez des interfaces utilisateur avec des mises en page XML. Utilisez ConstraintLayout, LinearLayout et des vues courantes comme TextView, Button, ImageView et EditText.

Mises en page et vues est une leçon Android Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 7. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Android Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Android Academy comprend 7 leçons au total.

Créer des interfaces utilisateur avec XML

Les interfaces utilisateur Android sont définies dans des fichiers de mise en page XML stockés dans res/layout/. La mise en page décrit la structure et l'apparence de votre écran — les vues affichées et leur emplacement.

Votre code Kotlin gonfle ensuite cette mise en page et interagit avec les vues lors de l'exécution.

Types de vues courants

Les widgets View les plus utilisés :

TextView — affiche du texte
EditText — champ de saisie de texte
Button — bouton cliquable
ImageView — affiche une image
CheckBox — active ou désactive une option
Switch — interrupteur marche/arrêt (Material)

ConstraintLayout

ConstraintLayout est la mise en page recommandée pour la plupart des écrans. Elle vous permet de positionner les vues les unes par rapport aux autres ou par rapport à leur parent à l'aide de contraintes — comme si vous reliiez des points d'ancrage.

Hiérarchie plate — aucune mise en page imbriquée nécessaire
Flexible — s'adapte à toutes les tailles d'écran
Utilisée par défaut dans les nouveaux projets Android Studio

XML de ConstraintLayout

Un TextView centré à l'écran dans ConstraintLayout :

<!-- res/layout/activity_main.xml -->
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/tvTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello Android!"
        android:textSize="24sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

LinearLayout

LinearLayout dispose les vues sur une seule ligne ou dans une seule colonne :

android:orientation="vertical" — empile les vues de haut en bas
android:orientation="horizontal" — dispose les vues côte à côte
android:layout_weight — répartit proportionnellement l'espace restant

Cette solution est simple et prévisible, mais évitez les imbrications trop profondes.

Attributs essentiels des mises en page

Chaque vue possède ces attributs essentiels :

layout_width / layout_height : match_parent, wrap_content ou une valeur fixe en dp
id : permet de référencer la vue dans Kotlin
margin : espace à l'extérieur de la vue
padding : espace à l'intérieur de la vue

Utilisez dp pour les dimensions (pixels indépendants de la densité) et sp pour les tailles de texte.

ScrollView

Lorsque le contenu est plus haut que l'écran, placez-le dans un ScrollView :

Ne peut contenir qu'un seul enfant direct (généralement un LinearLayout)
Défilement vertical par défaut
Utilisez HorizontalScrollView pour le défilement horizontal

Pour les longues listes dynamiques, utilisez plutôt RecyclerView : cette solution est plus performante.

Rechercher des vues dans le code

Il existe deux façons d'accéder aux vues dans votre code Kotlin :

findViewById(R.id.tvTitle) — méthode classique, renvoie la vue correspondant à l'ID
ViewBinding — approche moderne : génère une classe de liaison à partir du XML et fournit un accès aux vues vérifié par le typage

ViewBinding est vivement recommandé — vous l'apprendrez dans la prochaine leçon.

Utiliser findViewById

Accédez aux vues et modifiez-les depuis onCreate :

import android.os.Bundle
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val tvTitle = findViewById<TextView>(R.id.tvTitle)
        tvTitle.text = "Welcome!"
        tvTitle.textSize = 20f
    }
}

Vérification rapide

Quelle unité devez-vous utiliser pour la taille du texte dans les mises en page Android ?

Récapitulatif : mises en page et vues

Vous pouvez maintenant concevoir des écrans Android :

Les interfaces utilisateur sont définies dans des fichiers de mise en page XML situés dans res/layout/
Vues courantes : TextView, EditText, bouton, ImageView
ConstraintLayout — flexible, plat et recommandé
LinearLayout — disposition simple en ligne ou en colonne
Utilisez dp pour les dimensions et sp pour le texte
Accédez aux vues dans Kotlin avec findViewById

Ensuite : rendez votre interface interactive en gérant les saisies de l'utilisateur.

Questions Fréquemment Posées

La leçon « Mises en page et vues » est-elle gratuite ?

Oui — le texte complet de « Mises en page et vues » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Android Academy, passe à CoddyKit PRO. Le cours Android Academy comprend 7 leçons au total.

Qu'est-ce que j'apprendrai dans « Mises en page et vues » ?

Concevez des interfaces utilisateur avec des mises en page XML. Utilisez ConstraintLayout, LinearLayout et des vues courantes comme TextView, Button, ImageView et EditText. Tu pratiques Android Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Android Academy ?

Aucune expérience préalable n'est requise. Android Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 7.

Combien de temps prend la leçon « Mises en page et vues » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Android Academy ?

Oui. Chaque leçon Android Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à Android Academy