Dans ce tutoriel vous allez découvrir un autre composant de la librairie des composants material. Il s’agit du Collapsing Toolbar, qui permet d’enchérir la bar d’une application android en ajoutant un espace flexible ou un image qui pourra défiler, s’afficher et disparaître lors du défilement d’un widget qui peut défiler tel que un widget RecyclerView ou un wdiget NestedScrollView.
Si vous n’avez pas encore lu le tutoriel sur l’AppBarLayout, cliquez sur ce lien.
Table des matières
Collapsing Toolbar
Dans le tutoriel précédent sur l’appBarLayout, nous avons vu que l’appBarlayout permettait de révéler ou de cacher la toolbar lorsqu’il défile. En utilisant le Collapsing Toolbar avec l’appBarLayout cela permettra de créer une entête plus large que la Toolbar et vous permettra de définir comment s’affichera la Toolbar lorsque la barre de l’application se réduira pour révéler la toollbar.
Pour créer une barre d’application qui se réduit pour révéler la Toolbar, vous aurez besoin en plus du CollapsingToolbarLayout , l’appBarLayout, le CoordinatorLayout
,une Toolbar et une vue qui défile tel qu’un widget recyclerview ou un widget Nestedscrollview.
Positionnement du CollapsingToolbarLayout
Vous devez ajouter le CollapsingToolbarLayout comme enfant direct de l’appBarLayout puis ajoutez la toolbar dans le CollapsingToolbarLayout .Dans le tutoriel précédent nous avons vu que lorsque l’appBarLayout défile, nous devons définir comment devrait se comporté la toolbar lors du défilement avec l’attribut app:layout_scrollFlags.
Dans le tutoriel précédent sur l’appBarLayout, nous avons déjà découvert la signification de quelques valeurs que nous pouvons définir à l’attribut app:layout_scrollFlags .Cet attribut peut prendre des valeurs tels que scroll , enterAlways et snap, enterAlwaysCollapsed , exitUntilCollapsed .
- scroll : Défiler la barre d’application(tout le contenu de la barre) lorsque le contenu qui défile(Recyclerview ou NestedScrollView) défilera
- enterAlways: Lorsque l’utilisateur défile le contenu du haut vers le bas il faut immédiatement afficher la barre de l’application.
- enterAlwaysCollapsed: Cette valeur vient renchérie le comportement de la valeur enterAlways. Lorsque l’utilisateur défile le contenu du haut vers le bas, la vue réduite de la barre(Toolbar) devient visible puis commence à défiler et s’entend complètement après que le contenu qui défile s’est complètement affiché .
- exitUntilCollapsed :Cette valeur permet à la toolbar de rester visible lors du défilement du contenu du bas vers le haut.Et lors du défilement du haut vers le base la vue de la barre s’étend complètement après que le contenu qui défile s’est complètement affiché .
- snap :Cette valeur permet de rapidement cacher ou afficher la toolbar en fonction du niveau de défilement par rapport à la moitié de la hauteur de la toolbar. C’est à dire lorsque l’utilisateur défile à la moitié de la toolbar,et qu’il défile encore un peu plus haut,la bar d’application va rapidement se caché par contre lorsque qu’il défile un peu plus vers le bas, la barre d’application devient immédiatement visible.
Lorsque vous ajoutez le CollapsingToolbarLayout à une vue de votre application c’est le CollapsingToolbarLayout qui doit définir l’attribut app:layout_scrollFlags puisque c’est lui qui devient l’enfant direct de l’appBarLayout. Ensuite. vous devez définir avec l’attribut app:layout_collapseMode comment vous souhaitez que la toolbar s’affiche lorsque la barre de l’application sera réduit .Cette attribut peut prendre plusieurs valeurs tels que pin,parallax,none.
- pin:Lors du défilement lorsque la barre d’application se réduit pour révéler la toolbar, la toolbar défilera jusqu’à s’accrocher à l’entête de la fenêtre de l’application.
- parallax: correspond au déplacement de plusieurs éléments à des vitesses différents.Ce effet est souvent bien exprimer lorsque vous utiliser une image dans la barre de l’application.On observe avec une barre d’application, lors du défilement l’image de la barre qui commence à se cacher sous le contenu au delà de l’entête de la fenêtre principale
Note:Vous pouvez ajouter autant de vues que vous le souhaiter au CollapsingToolbarLayout, mais assurez-vous que la toolbar est le dernier enfant du CollapsingToolbarLayout.
Vous devez aussi définir le titre de la toolbar dans le code avec la méthode setTitle()
du CollapsingToolbarLayout au lieu de celle de la toolbar. Cela permet au CollapsingToolbarLayout de redimensionner le titre lors du défilement.
Le CollapsingToolbarLayout dispose de plusieurs autres attributs tels que
- app:expandedTitleGravity: Vous permet de définir la position du titre lorsque la barre est réduite à la toolbar. Cet attribut peut prendre plusieurs valeurs tels que: end|center|bottom|start|center_vertical|center_horizontal|right|top|fill_vertical|left
- app:expandedTitleMargin: Vous permet de définir la marge du titre lorsque la barre est étendu
- app:contentScrim: Il s’agit de la surface sur laquelle s’affiche le titre de la toolbar lorsque le titre commence par défiler et que la barre est encore réduit à la toolbar. Généralement la valeur est défini à @color/colorPrimary pour que la couleur soit celle de la toolbar pour que l’utilisateur ne voit pas de changement de couleur lorsque la barre s’étant
A présent, nous allons voir comment intégrer le CollapsingToolbarLayout dans une application.Pour cela nous allons créer un nouveau projet
Créer un nouveau projet
Créez un nouveau projet dans android studio en cliquant sur File dans le menu principale d’android studio puis sur New->New Project.Dans la fenêtre qui s’affiche sélectionnez Empty Activity puis cliquez sur Next .Dans la nouvelle fenêtre qui apparaît, nommez le projet CollapseToolbar, choisissez le langage de programmation avec lequel vous souhaitez travailler puis cliquez sur Finish.
Ajouter la librairie des composants material comme dépendance
Toute comme l’AppBarLayout, le CollapsingToolbarLayout est disponible dans la librairie des composants material. Avant de pouvoir l’utiliser, vous devez ajouter la librairie des composant material comme dépendance dans votre projet.Pour cela ouvrez le fichier build.gradle(Module:app) de votre projet puis ajoutez la dépendance suivante
implementation 'com.google.android.material:material:1.1.0-alpha10'
Note:Pour utilisez la librairie des composants material, vous devez migrer vers AndroidX
Pour commencer, votre application doit utiliser un thème sans ActionBar en héritant d’un thème sans ActionBar comme suit
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> ... ... ... </style>
Créer une bar d’application avec un espace
Lorsque vous créez la barre de votre application, vous pouvez créer un espace qui pourra se réduire pou révéler la toolbar. Le titre peut se réduire ou agrandir progressivement selon que l’utilisateur défile le contenu vers le haut ou vers le base.
Ouvrez le fichier res/layout/activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <androidx.coordinatorlayout.widget.CoordinatorLayout 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" android:fitsSystemWindows="true" tools:context=".MainActivity"> <com.google.android.material.appbar.AppBarLayout android:layout_width="match_parent" android:layout_height="250dp" android:fitsSystemWindows="true" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <com.google.android.material.appbar.CollapsingToolbarLayout android:id="@+id/collapseLayout" android:layout_width="match_parent" android:layout_height="match_parent" app:contentScrim="@color/colorPrimary" android:fitsSystemWindows="true" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <androidx.appcompat.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_collapseMode="pin" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> </com.google.android.material.appbar.CollapsingToolbarLayout> </com.google.android.material.appbar.AppBarLayout> <androidx.core.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior" > <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:padding="8dp" android:text="@string/str" android:layout_width="match_parent" android:layout_height="wrap_content" /> </LinearLayout> </androidx.core.widget.NestedScrollView> </androidx.coordinatorlayout.widget.CoordinatorLayout>
Ouvrez ensuite le fichier Mainactivity Java ou kotlin
Dans ce fichier nous allons définir la toolbar comme action bar.Ensuite pour permettre au titre de la toolbar de défiler, de se réduire et de s’agrandir,nous allons définir le titre à partir du CollapsingToolbarLayout au lieu de le définir à partir de la toolbar
package com.example.collapsetoolbarkotlin import androidx.appcompat.app.AppCompatActivity import android.os.Bundle import androidx.appcompat.widget.Toolbar import com.google.android.material.appbar.CollapsingToolbarLayout class MainActivity : AppCompatActivity() { private lateinit var toolbar: Toolbar private lateinit var collapsingToolbarLayout: CollapsingToolbarLayout override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) toolbar=findViewById(R.id.toolbar) collapsingToolbarLayout=findViewById(R.id.collapseLayout) setSupportActionBar(toolbar) } }
package com.example.collapsetoolbar; import androidx.appcompat.app.AppCompatActivity; import androidx.appcompat.widget.Toolbar; import android.os.Bundle; import com.google.android.material.appbar.CollapsingToolbarLayout; public class MainActivity extends AppCompatActivity { private Toolbar toolbar; private CollapsingToolbarLayout collapsingToolbarLayout; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); toolbar=findViewById(R.id.toolbar); collapsingToolbarLayout=findViewById(R.id.collapseLayout); setSupportActionBar(toolbar); collapsingToolbarLayout.setTitle("Titre"); } }
Après exécution vous devez avoir le résultat suivant
Créer une bar avec une image en entête
Voici le lien de l’image utilisé dans cet exemple. https://unsplash.com/photos/wI6o8OwUwdw
Un autre mode de conception de la barre d’application lorsque vous ajoutez le CollapsingToolbarLayout à votre vue est d’ajouter une image parallaxe dans le CollapsingToolbarLayout en plus de la toolbar dans lequel toutes les vue à l’intérieur du CollapsingToolbarLayout défile à des vitesse différente.Lors du défilement du contenu du bas vers le haut, la barre se réduit et l’image se réduit jusqu’à ce que la toolbar se révèle.
<?xml version="1.0" encoding="utf-8"?> <androidx.coordinatorlayout.widget.CoordinatorLayout 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" android:fitsSystemWindows="true" tools:context=".MainActivity"> <com.google.android.material.appbar.AppBarLayout android:layout_width="match_parent" android:layout_height="250dp" android:fitsSystemWindows="true" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <com.google.android.material.appbar.CollapsingToolbarLayout android:id="@+id/collapseLayout" android:layout_width="match_parent" android:layout_height="match_parent" app:contentScrim="@color/colorPrimary" android:fitsSystemWindows="true" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <ImageView android:layout_width="match_parent" android:layout_height="250dp" android:src="@drawable/img" android:scaleType="centerCrop" app:layout_collapseMode="parallax" /> <androidx.appcompat.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_collapseMode="pin" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> </com.google.android.material.appbar.CollapsingToolbarLayout> </com.google.android.material.appbar.AppBarLayout> <androidx.core.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior" > <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:padding="8dp" android:text="@string/str" android:layout_width="match_parent" android:layout_height="wrap_content" /> </LinearLayout> </androidx.core.widget.NestedScrollView> </androidx.coordinatorlayout.widget.CoordinatorLayout>
Après exécution, vous devez avoir le résultat suivant
Contenu superposé avec la barre de l’application
Avec ce mode de conception ,une partie du contenu principale se superpose à la barre de l’application.dès que le contenu commence à défiler la barre défile et se réduit à la toolbar et le contenu principale défile ensuite en dessous .Lorsque l’utilisateur commence à défiler le contenu du haut vers le base, la bar s’étant rapidement pour laisser le contenu le superposé.
<?xml version="1.0" encoding="utf-8"?> <androidx.coordinatorlayout.widget.CoordinatorLayout 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" android:fitsSystemWindows="true" android:background="#f1f1f1" tools:context=".MainActivity"> <com.google.android.material.appbar.AppBarLayout android:layout_width="match_parent" android:layout_height="250dp" android:fitsSystemWindows="true" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <com.google.android.material.appbar.CollapsingToolbarLayout android:id="@+id/collapseLayout" android:layout_width="match_parent" android:layout_height="match_parent" app:contentScrim="@color/colorPrimary" android:fitsSystemWindows="true" app:titleEnabled="false" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <ImageView android:layout_width="match_parent" android:layout_height="250dp" android:src="@drawable/img" android:scaleType="centerCrop" app:layout_collapseMode="parallax" /> <androidx.appcompat.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_collapseMode="pin" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> </com.google.android.material.appbar.CollapsingToolbarLayout> </com.google.android.material.appbar.AppBarLayout> <androidx.core.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="match_parent" app:behavior_overlapTop="80dp" android:layout_marginRight="10dp" android:layout_marginLeft="10dp" app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior" > <LinearLayout android:layout_width="match_parent" android:background="@android:color/white" android:layout_height="match_parent"> <androidx.cardview.widget.CardView android:layout_width="match_parent" app:cardPreventCornerOverlap="true" app:cardElevation="6dp" app:cardUseCompatPadding="false" android:layout_height="wrap_content"> <TextView android:padding="8dp" android:text="@string/str" android:layout_width="match_parent" android:layout_height="wrap_content" /> </androidx.cardview.widget.CardView> </LinearLayout> </androidx.core.widget.NestedScrollView> </androidx.coordinatorlayout.widget.CoordinatorLayout>
Après exécution, vous devez avoir le résultat suivant
Autres ressources
https://material.io/design/layout/responsive-layout-grid.html#ui-regions
https://material.io/components/app-bars-top/#behavior
https://developer.android.com/reference/com/google/android/material/appbar/CollapsingToolbarLayout
conclusion
Nous sommes à la fin de ce tutoriel sur le CollapsingToolbarLayout. J’espère que ce tutoriel vous aidera à utiliser ce composant dans votre application.A bientôt pour un prochain tutoriel.
Noe Joel Vigan, auteur de ce blog, est passionné par la programmation Android. Il a créé ce blog pour partager ses connaissances sur le développement d’application android. Il est Développeur Android Fullstack, ce qui lui permet de complètement mettre en place le Backend de ses applications sur Google Cloud à défaut d’utiliser FireBase.
Bonjour
Bon tuto mais je rencontre un soucis car en fait je n’ai la collapsing tool que sur une des activités du projet….
Bonjour. Vous devez simplement l’ajouter dans les autres activités où il n’est pas présent.