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.
Table des matières
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
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
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
Ressources
https://material.io/go/design-sheets-bottom#bottom-sheets-modal-bottom-sheets
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.
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.