Persistent Bottom Sheet


Un autre composant que met à disposition Google pour intégrer le material design dans son application est une Bottom Sheet. Il s’agit d’ un composant qui glisse du bas de l’écran pour révéler plus de contenu.Ce contenu peut être un menu, des informations complémentaires, des liens vers des contenus d’autres applications.

Il existe deux types de Bottom Sheet: une appelée Persistent Bottom Sheet et l’autre appelée Modal Bottom Sheet.

Table des matières

Modal bottom sheets

Cette Bottom Sheet glisse du bas de l’écran lorsque l’utilisateur effectue une action.Elle est souvent utiliser pour présenter un menu à l’utilisateur avec lequel il peut interagir ,pour présenter des informations complémentaires.Par exemple elle permet de présenter des liens vers des contenus d’autres applications.

Persistent bottom sheet:

Il s’agit d’une vue contenue dans la vue de l’activité ou du fragment, qui glisse aussi du bas de l’écran et est surélevé par rapport au contenu principale.Elle peut être glisser verticalement pour exposer plus ou moins le contenu qu’elle contient.Une persistent bottom sheet fonctionne avec un CoordinatorLayout.

La différence entre une modal bottom sheet et une persistent bottom sheet est que: une modal bottom sheet est un peu plus élevéé qu’une persistant bottom sheet et présent une ombre dans l’espace de l’écran où elle n’est pas afficher.Et dès que l’utilisateur clique sur l’ombre elle disparaît ou devient invisible;.

BottomSheetBehavior

C’est un objet de type layout_behavior utilisé pour une persistent bottom sheet. Elle est appliquée à un enfant du CoodinatorLayout pour faire de cet enfant une persistent bottom sheet. Elle fonctionne ensemble avec le CordinatorLayout pour afficher le contenue, pour exécuter les animations d’entrée et sorti,pour répondre au geste de glisser et de balayage de la persistent bottom sheet.

Dans ce tutoriel nous allons voir comment intégrer une persistent bottom sheet dans son application android puis dans un autre tutoriel nous verrons comment intégrer une modal bottom sheet. 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 PersistentBottomSheet , choisissez le langage de programmation avec lequel vous souhaitez travailler puis cliquez sur Finish.

Ajouter la librairie des composants material comme dépendance

Avant de pouvoir utiliser une bottomsheetbehavior , utilisé pour une persistent bottom sheet, vous devez ajouter la librairie des composant material comme dépendance.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

Faites hériter le thème de votre application par l’un des thèmes de la librairie des composants material comme suit

<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

Voici les chaines de caractère utilisées

<resources>
    <string name="app_name">PersistentBottomSheet</string>
    <string name="btn_text_open_sheet">Ouvrir la feuille</string>
    <string name="btn_text_close_sheet">Fermer la fueille</string>
    <string name="sheetbehavior">com.google.android.material.bottomsheet.BottomSheetBehavior</string>
    <string name="tv_sheet_header">Choisir vos options</string>
    <string name="btn_text_sheet1">Lancer </string>
    <string name="btn_text_sheet2">Ouvrir </string>
    <string name="btn_text_sheet3">Commencer </string>
</resources>

Les couleurs utilisées

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#008577</color>
    <color name="colorPrimaryDark">#00574B</color>
    <color name="colorAccent">#D81B60</color>
</resources>

Créer la vue utilisé comme persistent bottom sheet

Ouvrez le fichier res/layout/activity_main.xml et ajoutez le contenue suivant

<?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"
    tools:context=".MainActivity">

    <RelativeLayout
        android:layout_width="match_parent"
        android:padding="8dp"
        android:layout_height="wrap_content">
        <com.google.android.material.button.MaterialButton
            android:id="@+id/btn_open_sheet"
            android:text="@string/btn_text_open_sheet"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
        <com.google.android.material.button.MaterialButton
            android:id="@+id/btn_close_sheet"
            android:text="@string/btn_text_close_sheet"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/btn_open_sheet"
            />
    </RelativeLayout>

    <LinearLayout
        android:id="@+id/bottomsheet"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:behavior_peekHeight="60dp"
        app:behavior_hideable="false"
        app:layout_behavior="@string/sheetbehavior"
        android:paddingBottom="50dp"
        >
        <TextView
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:background="@color/colorAccent"
            android:textColor="@android:color/white"
            android:layout_marginBottom="8dp"
            android:text="@string/tv_sheet_header"
            android:textSize="16sp"
            android:gravity="center"
            />

       <com.google.android.material.button.MaterialButton
           android:text="@string/btn_text_sheet1"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           style="@style/Widget.MaterialComponents.Button.OutlinedButton"
           android:layout_marginLeft="16dp"
           android:layout_marginRight="16dp"
           />
        <com.google.android.material.button.MaterialButton
            android:text="@string/btn_text_sheet2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="8dp"
            style="@style/Widget.MaterialComponents.Button"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            />
        <com.google.android.material.button.MaterialButton
            android:text="@string/btn_text_sheet3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            style="@style/Widget.MaterialComponents.Button.OutlinedButton"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            />

    </LinearLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Dans cette vue de l’activité, nous avons un LinearLayout qui représente la bottom Sheet et le RelativeLayout qui représente le contenu principale de l’activité.

Dans le contenu principale de l’activité,nous avons deux boutons pour révéler ou cacher le contenu de la bottom sheet.

Nous avons exploiter plusieurs attributs dans la vue pour représenter et faire fonctionner la bottom sheet.

  • app:behavior_peekHeight= »60dp »: Cette attribut permet de garder une partie de la bottom sheet toujours visible lorsque la bottom sheet passe à sont etat COLLAPSED dans lequel elle est invsible. Dans cette exemple nous avons défini la valeur de cet attribut à 60 pour rendre une partie de la bottom sheet visible.60 correspond aussi à la hauteur du textview dans la bottom sheet..Donc seul cette textview sera visible lorsque la bottom sheet sera caché.
  • app:behavior_hideable= »false » Lorsque cet attribut est à true, il permet de rendre complètement invisible la bottom sheet même si une valeur supérieur à zéeo est définit pour l’attribut app:behavior_peekHeight .Lorsque sa valeur est à false,la bottom sheet reste visible à une hauteur égal à la valeur défini dans l’attribut app:behavior_peekHeight . Vous pouvez aussi complètement cacher la bottom sheet en définissant la valeur de l’attribut app:behavior_peekHeight à 0.
  • app:layout_behavior= »@string/sheetbehavior »:Il s’agit de l’attribut qui permet à la vue de se comporter comme une bottom sheet.

Associer la vue au bottomsheetbehavior

package com.example.persistentbottomsheetkotlin

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.Button
import com.google.android.material.bottomsheet.BottomSheetBehavior

import com.google.android.material.button.MaterialButton

class MainActivity : AppCompatActivity() {

    private lateinit var bottomSheetBehavior:BottomSheetBehavior<View>
    private lateinit var btnOpen:MaterialButton
    private lateinit var btnClose: MaterialButton
    private lateinit var view:View
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        btnOpen=findViewById(R.id.btn_open_sheet)
        btnClose=findViewById(R.id.btn_close_sheet)
        view=findViewById(R.id.bottomsheet)
        bottomSheetBehavior=BottomSheetBehavior.from(view)
        btnOpen.setOnClickListener {
            bottomSheetBehavior.state=BottomSheetBehavior.STATE_EXPANDED
        }
        btnClose.setOnClickListener(object :View.OnClickListener{

            override fun onClick(p0: View?) {
                bottomSheetBehavior.state=BottomSheetBehavior.STATE_COLLAPSED
            }
        })

    }
}
package com.example.persistentbottomsheet;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;

import com.google.android.material.bottomsheet.BottomSheetBehavior;
import com.google.android.material.button.MaterialButton;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {


   private BottomSheetBehavior bottomSheetBehavior;
   private MaterialButton btnOpen,btnClose;
   private View view;
   @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        btnOpen=findViewById(R.id.btn_open_sheet);
       btnClose=findViewById(R.id.btn_close_sheet);
       btnOpen.setOnClickListener(this);
       btnClose.setOnClickListener(this);
       view=findViewById(R.id.bottomsheet);
        bottomSheetBehavior=BottomSheetBehavior.from(view);

    }

    @Override
    public void onClick(View view) {
        switch (view.getId()){

            case R.id.btn_open_sheet:
                bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
             return;
            case R.id.btn_close_sheet:
                bottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
              return;
        }
    }
}

Dans l’activité, nous référençons les deux boutons de la vue principale auquel nous ajoutons des gestionnaires d’événement pour cacher ou rendre visible la bottom sheet.

Ensuite on référence aussi la vu qui représente la bottom sheet à la quel on associer au bottom sheet behavior pour créer le bottom sheet behavior et permettre à la vue de se comporter comme une bottom sheet.

Nous révélons ou cachons le contenue de la bottom sheet en changeant son état grâce à la méthode setState de la bottom sheet behavior.

La bottom sheet peut avoir plusieurs état tel que: BottomSheetBehavior.STATE_EXPANDED,BottomSheetBehavior.STATE_COLLAPSED,BottomSheetBehavior.STATE_DRAGGING,BottomSheetBehavior.STATE_HALF_EXPANDED,BottomSheetBehavior.STATE_HIDDEN,BottomSheetBehavior.STATE_SETTLING.

Après exécution voici ci-dessous le résultat que vous devez obtenir

persistent bottomsheet

Ecoutez le changement d’état de la bottom sheet

Vous pouvez écoutez les changements d’état de la bottom sheet comme suit

 bottomSheetBehavior.bottomSheetCallback=object: BottomSheetBehavior.BottomSheetCallback(){
            override fun onStateChanged(bottomSheet: View, newState: Int) {
                val state: String= when(newState){
                    BottomSheetBehavior.STATE_COLLAPSED ->"Collapse"
                    BottomSheetBehavior.STATE_DRAGGING -> "Dragging"
                    BottomSheetBehavior.STATE_EXPANDED -> "Expanded"
                    BottomSheetBehavior.STATE_HALF_EXPANDED -> "Halp_expanded"
                    BottomSheetBehavior.STATE_HIDDEN -> "Hidden"
                    BottomSheetBehavior.STATE_SETTLING -> "Settling"
                    else ->""
                }
                Toast.makeText(applicationContext,state,Toast.LENGTH_SHORT).show()
            }

            override fun onSlide(bottomSheet: View, slideOffset: Float) {

            }
        }
  bottomSheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
            @Override
            public void onStateChanged(@NonNull View bottomSheet, int newState) {
                String state="";
                switch (newState){
                    case BottomSheetBehavior.STATE_COLLAPSED:
                        state="Collapse";
                       break;
                    case BottomSheetBehavior.STATE_DRAGGING:
                        state="Dragging";
                        break;
                    case BottomSheetBehavior.STATE_EXPANDED:
                        state="Expanded";
                        break;
                    case BottomSheetBehavior.STATE_HALF_EXPANDED:
                        state="Halp_expanded";
                        break;
                    case BottomSheetBehavior.STATE_HIDDEN:
                        state="Hidden";
                        break;
                    case BottomSheetBehavior.STATE_SETTLING:
                        state="Settling";
                        break;

                }

                Toast.makeText(getApplicationContext(),state,Toast.LENGTH_SHORT).show(); 
            }

            @Override
            public void onSlide(@NonNull View bottomSheet, float slideOffset) {

            }
        });

Autres ressources

https://material.io/components/sheets-bottom/#bottom-sheets-persistent-bottom-sheets

https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/bottomsheet/BottomSheetBehavior.java

http://developer.android.com/reference/com/google/android/material/bottomsheet/BottomSheetBehavior

Conclusion

Nous sommes à la fin de ce tutoriel sur la persistent bottom sheet sur android. J’espère que ce tutoriel vous aidera à débuter avec ce concept du material design.


Laisser un commentaire

Résoudre : *
30 + 3 =


%d