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 27defaultConfig {applicationId "com.blogspot.devofandroid.bottomsheet_kotlin"minSdkVersion 16targetSdkVersion 27versionCode 1versionName "1.0"testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"}buildTypes {release {minifyEnabled falseproguardFiles 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 Sheetimplementation '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_kotlinimport android.content.Contextimport android.os.Bundleimport android.support.design.widget.BottomSheetDialogFragmentimport android.support.v4.app.Fragmentimport android.view.LayoutInflaterimport android.view.Viewimport android.view.ViewGroupimport 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_NUMBERprivate const val ARG_PARAM1 = "param1"private const val ARG_PARAM2 = "param2"/** * A simple [Fragment] subclass. * */class BottomSheetEx : BottomSheetDialogFragment() {private var mBottomSheetListener: BottomSheetListener?=nulloverride fun onCreateView(inflater: LayoutInflater , container: ViewGroup? ,savedInstanceState: Bundle?): View? {// Inflate the layout for this fragmentval v = inflater.inflate(R.layout.fragment_bottom_sheet_ex , container , false)//handle clicksv.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"><TextViewandroid:text="Choose action..."style="@style/TextAppearance.AppCompat.Headline"android:layout_width="match_parent"android:layout_height="wrap_content" /><TextViewandroid: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" /><TextViewandroid: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" /><TextViewandroid: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"><TextViewandroid:id="@+id/textView"style="@style/TextAppearance.AppCompat.Headline"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="030123323421"android:textAlignment="center"/><Buttonandroid: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_kotlinimport android.support.v7.app.AppCompatActivityimport android.os.Bundleimport 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 sheetshowSheetBtn.setOnClickListener {val bottomSheet = BottomSheetEx()bottomSheet.show(supportFragmentManager , "BottomSheetEx")}}override fun onOptionClick(text: String) {//change text on each item clicktextView.text = text}}
Step 5:Run Project
Output
0 Response to "Android Bottom Sheet (Kotlin)"