How to implement Bottom Sheet Dialog in Kotlin - Simple Guide

Sam

 Well, at some point in an exploration of a random app, you might have met this kind of a Dialog where some solid sheet pops up from the bottom of the screen to some heights over the main screen of you phone. I personally have met this in a Pinterest app on the account fragment of the MainActivity. It's a very cool feature to implement on your app and also very easy to implement. So follow me as i take you through an in-depth simplified illustration on how to implement the UI component.

First thing should be obvious as you need to have your android project all set up, and by this i mean you only need to create a new project (i suggest you use an empty activity one) i happen to look at it as a good practice. And in there you wanna have an extra layout where you design the appearance of your bottom sheet stuff. You take a look at mine below.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <LinearLayout
        android:id="@+id/success"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_marginTop="8dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:contentDescription="@string/app_name"
            android:src="@drawable/ic_baseline_check_circle_outline_24"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="14sp"
            android:layout_gravity="center"
            android:textStyle="bold"
            android:text="@string/selectionSuccess"/>

    </LinearLayout>

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/subject"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/subject"
        android:layout_marginTop="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/success">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:inputType="text"
            android:textSize="14sp"/>

    </com.google.android.material.textfield.TextInputLayout>
    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/year"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/year"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_marginTop="8dp"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/subject">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:inputType="number"
            android:textSize="14sp"/>

    </com.google.android.material.textfield.TextInputLayout>
    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/description"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/description"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_marginTop="8dp"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/year">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:inputType="number"
            android:textSize="14sp"/>

    </com.google.android.material.textfield.TextInputLayout>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/submit"
        android:layout_marginTop="8dp"
        android:layout_marginStart="16dp"
        android:textColor="@color/white"
        android:backgroundTint="@color/purple_500"
        android:textAllCaps="false"
        android:layout_marginEnd="16dp"
        android:layout_marginBottom="32dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/description"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Pretty random xml, you might wanna design yours so it fits more precisely with you requirements. That there is a simple app am making for students to share exam papers online, so that means, i have to collect some data about the shared papers, which would explain about the input layout you just looked at. In completion of this app, i will have to ask run time permissions to read storage and please i have written an article about this, check it here. I will also need to validate the data that is being provided by the user (i have an article about this too)

Let's move to this part when we actually make the whole fancy pop-up movement of the  dialog happen. How do we do this?. Well am not going to insult your memory into asking whether if you recall where the onCreate method of your MainActivity can be found. That's the exact place i need you to look at, only that i need you to focus with the global region right above it and initialize a late init variable of the type BottomSheetDialog as follows  

private lateinit var dialog: BottomSheetDialog
Having that kotlin variable in place, we are cleared to go ahead and instantiate the BottomSheetDialog and use it thereafter. Remember we had really lengthy lines of xml just above there. That there is the layout we use to setContentView of our Dialog. To do this in a more cleaner way, we need a create our own function where we do all the messy stuff in there.
 
private fun poper(){
    dialog = BottomSheetDialog(this)
    dialog.setContentView(R.layout.prompt)
    dialog.show()
}

funny i named the method poper, coz i thought you know the BottomSheetDialog pops from the bottom and therefore the name. To this point, all you are left with is to create a mechanism when you call the function to trigger the whole process. For my case i had a menu on the actionbar where if one clicks on one specific menu item, i call the function and the Bottom poper pops. I have as well written an article on how you can implement a menu on an ActionBar

Don't wanna make this super lengthy, but am gonna write next on how you can implement click events on the Dialog. So keep in touch, thanks for having me and for your time.

#Sam 

 

0 Comments