modal bottom sheet sur android

Modal Bottom Sheet

Partager
  • 5
  •  
  •  
  • 1
  •  
  •  
    6
    Partages

Dans le tutoriel précédent, nous avons découvert comment intégrer une persistent bottom sheet dans son application.Nous allons maintenant découvrir comment intégrer une modal bottom sheet dans son application.

Avant la nouvelle version du material design, la bottom sheet etait uniquement présente dans la librairie de support d’android. Elle est maintenant disponible dans la librairie des composants material .Donc avant de pouvoir intégrer une bottom sheet dans votre application, vous devez ajouter cette librairie.

Modal Bottom sheet:

Il s’agit d’une Bottom Sheet qui 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.

Une modal bottom sheet est utilisée comme alternative à une boite de dialogue à cause des nouveautés qu’elle apporte tel qu’une animation d’entrer ou de fermeture ,la possibilité d’être moins envahissant pour l’utilisateur.

Une modal bottom sheet affiche une ombre sur le contenu ou elle n’est pas afficher pour indiquer qu’elle est modal .Si l’utilisateur touche le contenu où est affiché l’ombre ,la bottom sheet se ferme.

Vous pouvez glisser verticalement une modal bottom sheet ou la fermer en la glissant complètement vers le bas.

C’est la classe BottomSheetDialogFragment qui est utilisé pour créer une modal bottom sheet.

Nous allons à présent voir comment intégrer une modal bottom sheet dans une application android. 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 ModalBottomSheet , choisissez le langage de programmation avec lequel vous souhaitez travailler puis cliquez sur Finish.

Ajouter la librairie des composants material comme dépendance

Comme nous l’avons dit précédemment, la modal bottom sheet est à présent 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

Créer une modal bottom sheet

Nous commencons par créer la vue de la bottom sheet comme suit

Tout d’abord ,voici ci-dessous le chaines de caractère et couleurs que nous avons utilisé dans cet exemple

Les chaines de caractères

<resources>
    <string name="app_name">ModalBottomSheet</string>
    <string name="btn_open">Cliquez ici</string>
    <string name="btn_add">Ajouter</string>
    <string name="btn_modifier">Modifier</string>
    <string name="btn_close">Fermer la feuille modal</string>

</resources>

Les couleurs

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

La vue de la bottom sheet

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:paddingBottom="8dp"
    android:paddingTop="16dp"
    android:layout_height="match_parent">

    <com.google.android.material.button.MaterialButton
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/Widget.MaterialComponents.Button"
        app:backgroundTint="@color/colorPrimary"
        android:text="@string/btn_add"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
       />
    <com.google.android.material.button.MaterialButton
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/Widget.MaterialComponents.Button.OutlinedButton"
        app:backgroundTint="@color/colorBackground"
        android:text="@string/btn_modifier"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:textColor="@android:color/white"
        />

    <com.google.android.material.button.MaterialButton
        android:id="@+id/btn_close"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/Widget.MaterialComponents.Button"
        app:backgroundTint="@color/colorAccent"
        android:text="@string/btn_close"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        />

</LinearLayout>

Dans cette vue nous avons définis trois boutons avec lesquels l’utilisateur peut interagir.Le dernier bouton permettra de fermer la bottom sheet..

Pour créer une modal bottom sheet, nous devons créer une classe qui hérite de la classe BottomSheetDialogFragment comme suit.

package com.example.modalbottomsheetkotlin

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import com.google.android.material.bottomsheet.BottomSheetDialogFragment
import com.google.android.material.button.MaterialButton

class ModalBottomSheetFragmentMenu:BottomSheetDialogFragment() {

    companion object{
       @JvmField val TAG = "ModalBottomSheetFragmentMenu"

      @JvmStatic fun getInstance():ModalBottomSheetFragmentMenu{
       val bottomSheetMenu: ModalBottomSheetFragmentMenu= ModalBottomSheetFragmentMenu()
       return bottomSheetMenu
      }
    }
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {

        val view=inflater.inflate(R.layout.modal_fragment_menu,container,false)
        val btn: MaterialButton=view.findViewById(R.id.btn_close)
        btn.setOnClickListener {
            dismiss()
        }
        return view
    }
}
package com.example.modalbottomsheet;

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

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;

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

public class ModalBottomSheetFragmentMenu extends BottomSheetDialogFragment {

    public static   final String TAG="ModalBottomSheetFragmentMenu";

    public static ModalBottomSheetFragmentMenu getInstance(){

        ModalBottomSheetFragmentMenu bottomSheetMenu=new ModalBottomSheetFragmentMenu();

       return bottomSheetMenu;
    }

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view=inflater.inflate(R.layout.modal_fragment_menu,container,false);
        MaterialButton btn=view.findViewById(R.id.btn_close);
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                dismiss();
            }
        });
        return view;
    }
}

Dans cette classe, nous avons définis une méthode static getInstance() pour créer une instance de la classe ModalBottomSheetFragmentMenu et dans la méthode onCreateView, nous faisons référence au bouton permettant de fermer la feuille modal.

Nous ajoutons ensuite un gestionnaire d’événement au bouton pour fermer la bottom sheet avec la méthode dismiss();.

Nous allons à présent ajouter un bouton dans l’activité principale pour lancer la feuille.

Voici la vue de l’activité

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


    <Button
        android:id="@+id/btn_open"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        app:backgroundTint="@color/colorAccent"
        android:text="@string/btn_open"
        android:textColor="@android:color/white"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.19999999" />

</androidx.constraintlayout.widget.ConstraintLayout>

Ensuite nous ajoutons un gestionnaire d’événement au bouton dans la vue de l’activité pour lancer la modale bottom sheet .Voir le code

package com.example.modalbottomsheetkotlin

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.Button

class MainActivity : AppCompatActivity() {

    private lateinit var btnOpen: Button
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        btnOpen=findViewById(R.id.btn_open)
        btnOpen.setOnClickListener(object:View.OnClickListener{
            override fun onClick(p0: View?) {
                val bottomSheetFragmentMenu: ModalBottomSheetFragmentMenu= ModalBottomSheetFragmentMenu.getInstance()
                 bottomSheetFragmentMenu.show(supportFragmentManager,ModalBottomSheetFragmentMenu.TAG)
            }
        })
    }
}
package com.example.modalbottomsheet;

import androidx.appcompat.app.AppCompatActivity;

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


public class MainActivity extends AppCompatActivity {

    private Button btnOpen;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        btnOpen=findViewById(R.id.btn_open);
        btnOpen.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
            ModalBottomSheetFragmentMenu bottomSheetFragmentMenu=ModalBottomSheetFragmentMenu.getInstance();
            bottomSheetFragmentMenu.showNow(getSupportFragmentManager(),ModalBottomSheetFragmentMenu.TAG);
            }
        });
    }
}

Après exécution vous devez avoir le résultat suivant

modal bottom sheet

Créer des formes

Créer une forme arrondi pour les coins haut de la bottom sheet.

Pour créer une apparence personnalisée, vous devez définir une apparence appelé shapeAppearanceOverlay qui se superpose à l’apparence de base définit pour la bottom sheet .

Ajoutez la shapeAppearanceOverlay suivant dans le fichier style.xml

  <style name="MyBottomSheet.ShapeAppearanceOverlay" parent="">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSizeTopLeft">8dp</item>
        <item name="cornerSizeTopRight">8dp</item>
        <item name="cornerSizeBottomLeft">0dp</item>
        <item name="cornerSizeBottomRight">0dp</item>
    </style>

Vous devez ensuite créer un nouveau style personnalisé pour la bottom sheet dans lequel vous allez définir la nouvelle apparence de la bottom sheet. Pour changer l’apparence de la bottom sheet, vous allez définir la valeur de l’attribut shapeAppearanceOverlay au style d’apparence que vous avez créer précédemment.

<style name="MyModalBottomSheet.Style" parent="Widget.MaterialComponents.BottomSheet.Modal">
    <item name="shapeAppearanceOverlay">@style/MyBottomSheet.ShapeAppearanceOverlay</item>
 </style>

Vous devez ensuite créer un thème appelé ThemeOverlay qui se superpose au thème définir par défaut pour la bottom sheet.

C’est dans ce ThemeOverlay que vous devez définir la style de la bottom sheet à travers la propriété bottomSheetStyle.

  <style name="MyBottomSheet.ThemeOverlay" parent="ThemeOverlay.MaterialComponents.BottomSheetDialog">
        <item name="bottomSheetStyle">@style/MyModalBottomSheet.Style</item>
    </style>

Ensuite vous devez définir ce ThemeOverlay comme thème de la bottom sheet dans le thème de votre application avec la propriété bottomSheetDialogTheme.

<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
    ...
    <item name="bottomSheetDialogTheme">@style/MyBottomSheet.ThemeOverlay</item>
</style>

Après exécution ,vous devez avoir le résultat suivant

modal bottom sheet arrondi

Créer une forme coupé pour les coins haut de la bottom sheet

Pour avoir des coins haut coupés pour la modal bottom sheet,il suffit juste de changer la valeur de l’attribut cornerFamily à cut.

 <style name="MyBottomSheet.ShapeAppearanceOverlay" parent="">
        <item name="cornerFamily">cut</item>
         ...
    </style>

Après exécutions, vous devez avoir le résultat suivant

modal bottom sheet coupée

Ressources

https://material.io/go/design-sheets-bottom#bottom-sheets-modal-bottom-sheets

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

https://developer.android.com/reference/com/google/android/material/bottomsheet/BottomSheetDialogFragment

Conclusion

Nous sommes à la fin de ce tutoriel sur la modal bottom sheet. J’espère que ce tutoriel vous aidera à utiliser une modal bottom sheet dans votre application.A bientôt pour un nouveau tutoriel.

ABONNEZ-VOUS A LA NEWSLETTER
Rejoignez la communauté de développeur Android pour apprendre encore plus sur le dévéloppement d'application Android.
Nous détestons les spam. Votre adresse email ne sera ni vendue ni partagée avec qui que ce soit.

Partager
  • 5
  •  
  •  
  • 1
  •  
  •  
    6
    Partages
  • 6
    Partages

Laisser un commentaire

Résoudre : *
15 − 5 =


%d blogueurs aiment cette page :