Aller au contenu

Ajouter des layouts XML pour l'interface utilisateur

Ensuite, vous devez ajouter la mise en page XML pour la liste et les éléments.

Ce codelab suppose que vous êtes familier avec la création de mises en page en XML, nous vous fournissons donc simplement le code.

8.1 Ajouter des styles

Ajoutez un style pour les vues de texte dans le fichier values/styles.xml :

values/styles.xml
1
2
3
4
5
6
7
8
9
<style name="word_title">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_marginBottom">8dp</item>
        <item name="android:padding">16dp</item>
        <item name="android:layout_gravity">center</item>
        <item name="android:background">@android:color/holo_orange_light</item>
        <item name="android:textAppearance">@android:style/TextAppearance.Large</item>
</style>

8.2 Ajouter la mise en page (layout) d'un élément

Ajoutez une mise en page layout/recyclerview_item.xml :

layout/recyclerview_item.xml
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/textView"
        style="@style/word_title" />
</LinearLayout>

8.3 Ajouter le RecyclerView

Ajoutez un élément RecyclerView au fichier layout/content_main.xml :

layout/content_main.xml
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerview"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:padding="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:listitem="@layout/recyclerview_item"
        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
        android:scrollbars="vertical"/>

</androidx.constraintlayout.widget.ConstraintLayout>

8.4 Changer l'icône du FAB

L'apparence du bouton d'action flottant (FAB) doit correspondre à l'action disponible, nous allons donc remplacer l'icône par un symbole +.

Tout d'abord, nous devons ajouter un nouvel asset vectoriel :

  1. Sélectionnez File > New > Vector Asset.
  2. Cliquez sur l'icône du robot Android dans Icon.
  3. Recherchez "add" et sélectionnez l'élément "+". Cliquez sur OK.
  4. Après cela, cliquez sur Next.
  5. Confirmez le chemin de l'icône comme main > drawable et cliquez sur Finish pour ajouter l'asset.
  6. Toujours dans layout/activity_main.xml, mettez à jour le FAB pour inclure la nouvelle icône :
layout/activity_main.xml
1
 app:srcCompat="@drawable/baseline_add_24"