Android Bottom Sheet (Kotlin)

     DESCRIPTION     

This tutorial is about:
 How to create bottom sheet using Fragment
 How to handle bottom sheet item/option clicks

     VIDEO     

     SOURCE CODE     

Step 1: Create a new Project or open new project

Step 2: Add following library in build.gradle(Module:app) 

          implementation 'com.android.support:design:27.1.1'

Step 3: Create a fragment name it as "BottomSheetEx".

Step 4: Code

build.gradle(Module:app)

apply plugin: 'com.android.application'

apply plugin: 'kotlin-android'

apply plugin: 'kotlin-android-extensions'

android {
    compileSdkVersion 27
    defaultConfig {
        applicationId "com.blogspot.devofandroid.bottomsheet_kotlin"
        minSdkVersion 16
        targetSdkVersion 27
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jre7:$kotlin_version"
    implementation 'com.android.support:appcompat-v7:27.1.1'
    //add design library to support Bottom Sheet
    implementation 'com.android.support:design:27.1.1'

    implementation 'com.android.support.constraint:constraint-layout:1.1.0'
    implementation 'com.android.support:support-v4:27.1.1'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
}

BottomSheetEx.kt

package com.blogspot.devofandroid.bottomsheet_kotlin


import android.content.Context
import android.os.Bundle
import android.support.design.widget.BottomSheetDialogFragment
import android.support.v4.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import kotlinx.android.synthetic.main.fragment_bottom_sheet_ex.*
import kotlinx.android.synthetic.main.fragment_bottom_sheet_ex.view.*


// TODO: Rename parameter arguments, choose names that match
// the fragment initialization parameters, e.g. ARG_ITEM_NUMBER
private const val ARG_PARAM1 = "param1"
private const val ARG_PARAM2 = "param2"

/**
 * A simple [Fragment] subclass.
 *
 */
class BottomSheetEx : BottomSheetDialogFragment() {

    private var mBottomSheetListener: BottomSheetListener?=null

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                              savedInstanceState: Bundle?): View? {
        // Inflate the layout for this fragment
        val v = inflater.inflate(R.layout.fragment_bottom_sheet_ex, container, false)

        //handle clicks
        v.callTv.setOnClickListener {
            mBottomSheetListener!!.onOptionClick("Call clicked...")
            dismiss() //dismiss bottom sheet when item click
        }
        v.smsTv.setOnClickListener {
            mBottomSheetListener!!.onOptionClick("Send message clicked...")
            dismiss()
        }
        v.blockTv.setOnClickListener {
            mBottomSheetListener!!.onOptionClick("Block clicked...")
            dismiss()
        }

        return v
    }

    interface BottomSheetListener{
        fun onOptionClick(text: String)
    }

    override fun onAttach(context: Context?) {
        super.onAttach(context)

        try {
            mBottomSheetListener = context as BottomSheetListener?
        }
        catch (e: ClassCastException){
            throw ClassCastException(context!!.toString())
        }

    }


}

fragment_bottom_sheet_ex.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="5dp"
    tools:context=".BottomSheetEx">

    <TextView
        android:text="Choose action..."
        style="@style/TextAppearance.AppCompat.Headline"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/callTv"
        android:layout_marginLeft="5dp"
        android:drawableLeft="@drawable/call"
        android:drawablePadding="10dp"
        android:text="Call"
        android:textSize="18sp"
        android:gravity="center_vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/smsTv"
        android:layout_marginLeft="5dp"
        android:drawableLeft="@drawable/sms"
        android:drawablePadding="10dp"
        android:text="Send message"
        android:textSize="18sp"
        android:gravity="center_vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/blockTv"
        android:layout_marginLeft="5dp"
        android:drawableLeft="@drawable/block"
        android:drawablePadding="10dp"
        android:text="Block Number"
        android:textSize="18sp"
        android:gravity="center_vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">

    <TextView
        android:id="@+id/textView"
        style="@style/TextAppearance.AppCompat.Headline"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="030123323421"
        android:textAlignment="center"/>

    <Button
        android:id="@+id/showSheetBtn"
        android:text="Show Bottom Sheet"
        style="@style/Base.Widget.AppCompat.Button.Colored"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</RelativeLayout>

MainActivity.kt

package com.blogspot.devofandroid.bottomsheet_kotlin

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity(), BottomSheetEx.BottomSheetListener {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        //button click to show bottom sheet
        showSheetBtn.setOnClickListener {
            val bottomSheet = BottomSheetEx()
            bottomSheet.show(supportFragmentManager, "BottomSheetEx")
        }
    }

    override fun onOptionClick(text: String) {
        //change text on each item click
        textView.text = text
    }

}

Step 5:Run Project

Output