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
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
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.
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.