Post
Ask Question

How‌ ‌To‌ C‌reate A BottomSheet Picker Using Kotlin‌

Introduction

 
Android is an open-source operating system based on Linux with a Java programming interface for mobile devices such as Smartphone (touch screen devices which support Android OS) as well for Tablets. With over 85% of the market share worldwide, Android Operating System dominates the mobile platform market. Today, I will show you how to create a BottomSheet using Kotlin.
 
Requirements
Steps to be followed,
 
Follow these steps to create a bottom sheet picker In Kotlin. I have included the source code in the attachment.
 
Step 1
 
Open Android Studio and start a new Android Studio Project.
 
How‌ ‌To‌ C‌reate A BottomSheet Picker Using Kotlin‌
 
Step 2
 
Now, add the activity and click the "Next" button.
 
How‌ ‌To‌ C‌reate A BottomSheet Picker Using Kotlin‌
 
Step 3
 
You can choose your application name and choose where your project is to be stored and choose Kotlin language for coding the project, Now, select the version of Android and select the target Android devices, and click the "Finish" button.
 
How‌ ‌To‌ C‌reate A BottomSheet Picker Using Kotlin‌
 
Step 4
 
Go to activity_main.xml. This XML file contains the designing code for your Android app.
 
How‌ ‌To‌ C‌reate A BottomSheet Picker Using Kotlin‌
 
The XML code is given below,
  1. <?xml version="1.0" encoding="utf-8"?>      
  2. <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"    
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"      
  4.     xmlns:tools="http://schemas.android.com/tools"      
  5.     android:layout_width="match_parent"      
  6.     android:layout_height="match_parent"      
  7.     tools:context=".MainActivity">        
  8.     <androidx.appcompat.widget.AppCompatButton      
  9.         android:layout_width="wrap_content"      
  10.         android:layout_height="wrap_content"      
  11.         android:text="Bottom Sheet"      
  12.         android:id="@+id/sortby"      
  13.         app:layout_constraintBottom_toBottomOf="parent"      
  14.         app:layout_constraintLeft_toLeftOf="parent"      
  15.         app:layout_constraintRight_toRightOf="parent"      
  16.         app:layout_constraintTop_toTopOf="parent" />    
  17. </androidx.constraintlayout.widget.ConstraintLayout>     
Step 5
 
Create a bootom_sheet.xml. This XML file contains the Designing code of Bottom Sheet.
 
How‌ ‌To‌ C‌reate A BottomSheet Picker Using Kotlin‌
 
The XML code is given below,
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout  
  3.     xmlns:android="http://schemas.android.com/apk/res/android"  
  4.     xmlns:app="http://schemas.android.com/apk/res-auto"      
  5.     android:orientation="vertical"      
  6.     android:layout_width="match_parent"      
  7.     android:layout_height="match_parent">    <com.google.android.material.appbar.AppBarLayout    
  8.         android:id="@+id/appBar"      
  9.         android:layout_width="match_parent"      
  10.         android:layout_height="wrap_content">  
  11.         <androidx.appcompat.widget.Toolbar    
  12.             android:id="@+id/toolbar"      
  13.             android:background="@color/colorPrimary"      
  14.             android:layout_width="match_parent"      
  15.             android:layout_height="?attr/actionBarSize"      
  16.             >  
  17.             <androidx.appcompat.widget.AppCompatTextView      
  18.                 android:text="SORT BY"      
  19.                 android:paddingStart="12sp"      
  20.                 android:layout_marginTop="12dp"      
  21.                 android:layout_gravity="center"      
  22.                 android:textColor="#A9A9A9"      
  23.                 android:textSize="20sp"      
  24.                 android:textStyle="bold"    
  25.                 android:layout_width="match_parent"      
  26.                 android:layout_height="match_parent"      
  27.                 android:paddingLeft="12sp"></androidx.appcompat.widget.AppCompatTextView>  
  28.         </androidx.appcompat.widget.Toolbar>  
  29.     </com.google.android.material.appbar.AppBarLayout>  
  30.     <LinearLayout      
  31.         android:layout_width="match_parent"      
  32.         android:layout_height="wrap_content"      
  33.         android:orientation="vertical"      
  34.         android:id="@+id/shareLinearLayout"      
  35.         android:background="?android:attr/selectableItemBackground"  
  36.         android:padding="8dp"      
  37.         >        <RadioGroup    
  38.             android:layout_width="match_parent"      
  39.             android:layout_height="wrap_content">  
  40.             <RadioButton      
  41.                 android:layout_width="match_parent"      
  42.                 android:layout_height="wrap_content"      
  43.                 android:button="@null"      
  44.                 android:drawableRight="?android:attr/listChoiceIndicatorSingle"    
  45.                 android:background="?android:selectableItemBackground"    
  46.                 android:layoutDirection="rtl"    
  47.                 android:layout_gravity="start"    
  48.                 android:textAlignment="textStart"    
  49.                 android:paddingBottom="10dp"    
  50.                 android:paddingLeft="20dp"    
  51.                 android:paddingRight="20dp"    
  52.                 android:paddingTop="10dp"    
  53.                 android:text="Popularity"    
  54.                 android:textSize="14sp"></RadioButton>  
  55.             <RadioButton      
  56.                 android:layout_width="match_parent"      
  57.                 android:layout_height="wrap_content"      
  58.                 android:button="@null"      
  59.                 android:drawableRight="?android:attr/listChoiceIndicatorSingle"     
  60.                 android:background="?android:selectableItemBackground"     
  61.                 android:layoutDirection="rtl"      
  62.                 android:layout_gravity="start"      
  63.                 android:textAlignment="textStart"      
  64.                 android:paddingBottom="10dp"      
  65.                 android:paddingLeft="20dp"      
  66.                 android:paddingRight="20dp"      
  67.                 android:paddingTop="10dp"      
  68.                 android:text="Price -- Low to High"      
  69.                 android:textSize="14sp"></RadioButton>  
  70.             <RadioButton      
  71.                 android:layout_width="match_parent"     
  72.                 android:layout_height="wrap_content"      
  73.                 android:button="@null"      
  74.                 android:drawableRight="?android:attr/listChoiceIndicatorSingle"     
  75.                 android:background="?android:selectableItemBackground"      
  76.                 android:layoutDirection="rtl"      
  77.                 android:layout_gravity="start"      
  78.                 android:textAlignment="textStart"      
  79.                 android:paddingBottom="10dp"      
  80.                 android:paddingLeft="20dp"      
  81.                 android:paddingRight="20dp"      
  82.                 android:paddingTop="10dp"       
  83.                 android:text="Price -- High to  Low"    
  84.                 ></RadioButton>  
  85.             <RadioButton      
  86.                 android:layout_width="match_parent"      
  87.                 android:layout_height="wrap_content"     
  88.                 android:button="@null"      
  89.                 android:drawableRight="?android:attr/listChoiceIndicatorSingle"      
  90.                 android:background="?android:selectableItemBackground"      
  91.                 android:layoutDirection="rtl"      
  92.                 android:layout_gravity="start"      
  93.                 android:textAlignment="textStart"      
  94.                 android:paddingBottom="10dp"      
  95.                 android:paddingLeft="20dp"      
  96.                 android:paddingRight="20dp"      
  97.                 android:paddingTop="10dp"      
  98.                 android:text="What's New ?"      
  99.                 android:textSize="14sp"></RadioButton>  
  100.         </RadioGroup>  
  101.     </LinearLayout>  
  102. </LinearLayout>    
Step 6
 
Go to Main Activity.kt. This Kotlin program is the back-end language for your app
 
How‌ ‌To‌ C‌reate A BottomSheet Picker Using Kotlin‌
 
The Kotlin code is given below,
  1. package com.example.myapplication  
  2. import androidx.appcompat.app.AppCompatActivity  
  3. import android.os.Bundle  
  4. import android.view.View  
  5. import com.google.android.material.bottomsheet.BottomSheetBehavior  
  6. import com.google.android.material.bottomsheet.BottomSheetDialog  
  7. import kotlinx.android.synthetic.main.activity_main.*class MainActivity: AppCompatActivity() {  
  8.     override fun onCreate(savedInstanceState: Bundle ? ) {  
  9.         super.onCreate(savedInstanceState)  
  10.         setContentView(R.layout.activity_main)  
  11.         val bottomSheetCallback = object: BottomSheetBehavior.BottomSheetCallback() {  
  12.             override fun onSlide(p0: View, p1: Float) {}  
  13.             override fun onStateChanged(p0: View, p1: Int) {}  
  14.         }  
  15.         val bottomSheetView = layoutInflater.inflate(R.layout.bottom_sheet, null)  
  16.         val bottomSheetDialog = BottomSheetDialog(this)  
  17.         bottomSheetDialog.setContentView(bottomSheetView)  
  18.         val bottomSheetBehavior = BottomSheetBehavior.from(bottomSheetView.parent as View)  
  19.         bottomSheetBehavior.setBottomSheetCallback(bottomSheetCallback)  
  20.         sortby.setOnClickListener {  
  21.             bottomSheetBehavior.state = BottomSheetBehavior.STATE_EXPANDED  
  22.             bottomSheetDialog.show()  
  23.         }  
  24.     }  
  25. }   
Step 7
 
Then, click the "Run" button or press shift+f10 to finally run the project. And, choose the "virtual machine" option and click OK.
 

Conclusion

 
How‌ ‌To‌ C‌reate A BottomSheet Picker Using Kotlin‌
 
How‌ ‌To‌ C‌reate A BottomSheet Picker Using Kotlin‌


Similar Articles