Android Academy · Leçon

Notions de base de Material Design

Utilisez les composants Material : MaterialButton, TextInputLayout, MaterialCardView, FloatingActionButton, Snackbar, Chip, BottomSheetDialog et Dynamic Color.

Notions de base de Material Design est une leçon Android Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 5. 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 5 leçons au total.

Qu'est-ce que Material Design ?

Material Design est le système de conception de Google pour créer de belles applications Android cohérentes. Il fournit :

Un riche ensemble de composants d'interface prédéfinis
Des règles cohérentes concernant l'espacement, la typographie et les couleurs
Des composants accessibles et adaptatifs
Des animations et transitions intégrées

La bibliothèque Material Components for Android (MDC) apporte Material 3 à Jetpack.

Ajouter des composants Material

Ajoutez la dépendance et définissez le thème de votre application sur un thème Material :

// app/build.gradle:
dependencies {
    implementation 'com.google.android.material:material:1.12.0'
}

// res/values/themes.xml:
<style name="Theme.MyApp" parent="Theme.Material3.DayNight.NoActionBar">
    <item name="colorPrimary">@color/primary</item>
    <item name="colorSecondary">@color/secondary</item>
    <!-- ... -->
</style>

MaterialButton

Remplacez le Button standard par MaterialButton pour bénéficier de coins arrondis, d'effets d'ondulation et de la prise en charge des icônes :

<!-- Filled (default) -->
<com.google.android.material.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Save"
    app:icon="@drawable/ic_save" />

<!-- Outlined style -->
<com.google.android.material.button.MaterialButton
    style="@style/Widget.Material3.Button.OutlinedButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Cancel" />

<!-- Text button -->
<com.google.android.material.button.MaterialButton
    style="@style/Widget.Material3.Button.TextButton"
    android:text="Learn more" />

TextInputLayout et TextInputEditText

TextInputLayout enveloppe un EditText pour fournir des libellés flottants, des messages d'erreur et des compteurs de caractères :

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/tilEmail"
    style="@style/Widget.Material3.TextInputLayout.OutlinedBox"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Email address"
    app:helperText="We will never share your email">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textEmailAddress" />

</com.google.android.material.textfield.TextInputLayout>

MaterialCardView

MaterialCardView ajoute une élévation, des coins arrondis et un contour à un conteneur :

<com.google.android.material.card.MaterialCardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    app:cardCornerRadius="12dp"
    app:cardElevation="4dp"
    app:strokeColor="@color/outline"
    app:strokeWidth="1dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="16dp"
        android:orientation="vertical">

        <TextView android:text="Card Title" />
        <TextView android:text="Card content goes here" />

    </LinearLayout>
</com.google.android.material.card.MaterialCardView>

FloatingActionButton (FAB)

Les FAB mettent en évidence l'action principale d'un écran. Material 3 propose trois tailles :

<!-- Standard FAB -->
<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="16dp"
    android:contentDescription="Add item"
    app:srcCompat="@drawable/ic_add" />

<!-- Extended FAB (icon + text) -->
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
    android:text="New Note"
    app:icon="@drawable/ic_edit"
    android:layout_gravity="bottom|end" />

MaterialToolbar

Remplacez l'ActionBar par défaut par MaterialToolbar pour appliquer le style Material 3 :

<!-- In layout XML -->
<com.google.android.material.appbar.MaterialToolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorSurface"
    app:title="My App"
    app:navigationIcon="@drawable/ic_menu" />

// In Activity:
setSupportActionBar(binding.toolbar)
binding.toolbar.setNavigationOnClickListener {
    onBackPressedDispatcher.onBackPressed()
}

Barre de message

Snackbar affiche de brefs messages proposant une action en bas de l'écran. Préférez-le à Toast :

// Simple message:
Snackbar.make(binding.root, "Item deleted", Snackbar.LENGTH_SHORT).show()

// With action:
Snackbar.make(binding.root, "Item deleted", Snackbar.LENGTH_LONG)
    .setAction("Undo") {
        viewModel.undoDelete()
    }
    .setAnchorView(binding.fab)   // appears above the FAB
    .show()

Puce et ChipGroup

Les puces sont des éléments compacts utilisés pour les filtres, les étiquettes et les sélections :

<com.google.android.material.chip.ChipGroup
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:singleSelection="true">

    <com.google.android.material.chip.Chip
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Kotlin"
        style="@style/Widget.Material3.Chip.Filter" />

    <com.google.android.material.chip.Chip
        android:text="Android"
        style="@style/Widget.Material3.Chip.Filter" />

    <com.google.android.material.chip.Chip
        android:text="Jetpack"
        style="@style/Widget.Material3.Chip.Filter" />

</com.google.android.material.chip.ChipGroup>

BottomSheetDialog

Une feuille inférieure modale glisse depuis le bas et contient du contenu ou des actions :

class OptionsBottomSheet : BottomSheetDialogFragment() {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?
    ): View {
        return inflater.inflate(R.layout.bottom_sheet_options, container, false)
    }
}

// Show it from a Fragment:
val sheet = OptionsBottomSheet()
sheet.show(parentFragmentManager, "options")

Material You — Couleurs dynamiques

Android 12 et versions ultérieures prennent en charge les couleurs dynamiques : la palette de couleurs de l'application s'adapte automatiquement au fond d'écran de l'utilisateur :

// In Application.onCreate():
override fun onCreate() {
    super.onCreate()
    DynamicColors.applyToActivitiesIfAvailable(this)
}

// That's it! Colors automatically extract from wallpaper on Android 12+
// On older Android, fallback colors from your theme are used.

Vérification rapide

Quel composant Material devez-vous utiliser pour envelopper un EditText afin d'obtenir des libellés flottants et des messages d'erreur intégrés ?

Récapitulatif : notions de base de Material Design

Les composants Material facilitent la création de belles applications :

MaterialButton — styles plein, contour et texte
TextInputLayout + TextInputEditText — libellés flottants, erreurs
MaterialCardView — cartes avec élévation et contour
FloatingActionButton — bouton d'action principale
Snackbar — messages pouvant être fermés, avec actions
Chip — étiquettes, filtres, sélections
Couleurs dynamiques — adaptation au fond d'écran sur Android 12 et versions ultérieures

Ensuite : thèmes, styles et mode sombre.

Questions Fréquemment Posées

La leçon « Notions de base de Material Design » est-elle gratuite ?

Oui — le texte complet de « Notions de base de Material Design » 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 5 leçons au total.

Qu'est-ce que j'apprendrai dans « Notions de base de Material Design » ?

Utilisez les composants Material : MaterialButton, TextInputLayout, MaterialCardView, FloatingActionButton, Snackbar, Chip, BottomSheetDialog et Dynamic Color. 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 1 sur 5.

Combien de temps prend la leçon « Notions de base de Material Design » ?

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