Collapsing Toolbar

Partager

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

collapse

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

collapse

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

collapse

Autres ressources

https://material.io/design/layout/responsive-layout-grid.html#ui-regions

https://material.io/components/app-bars-top/#behavior

https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/appbar/CollapsingToolbarLayout.java

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.


Partager

2 réflexions au sujet de “Collapsing Toolbar”

Laisser un commentaire

Résoudre : *
21 − 3 =


%d