Date Picker Using Kotlin in Android Studio | DatePickerDialog — Android Studio Tutorial | Kotlin

Hello, and Welcome to the #CodingWithDev​ channel! In this tutorial, you will learn how to create a Date Picker in an Android app using Kotlin.

The tutorial covers the following key points:

• Implementing Date Picker: You will learn how to add a Date Picker widget to your app’s layout XML file and how to reference it in your Kotlin code.

• Showing the Date Picker dialog: The tutorial will show you how to display a Date Picker dialog when a button is clicked. The dialog will allow the user to pick a date from a calendar.

• Handling date selection: You will understand how to capture the date selected by the user in the Date Picker dialog and display it on the Text View or perform other actions with the selected date.

1. First, create a new Android project in Android Studio.
2. Open the activity_main.xml layout file and add the following code:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/btnDatePicker"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Select Date" />

    <TextView
        android:id="@+id/tvSelectedDate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/btnDatePicker"
        android:layout_centerHorizontal="true"
        android:padding="16dp"
        android:textSize="18sp" />
</RelativeLayout>

3. Open the MainActivity.kt file and add the following code:

import android.app.DatePickerDialog
import android.os.Bundle
import android.widget.Button
import android.widget.DatePicker
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import java.text.SimpleDateFormat
import java.util.*

class MainActivity : AppCompatActivity() {

    private lateinit var btnDatePicker: Button
    private lateinit var tvSelectedDate: TextView
    private val calendar = Calendar.getInstance()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
      
     // Initialize views
        btnDatePicker = findViewById(R.id.btnDatePicker)
        tvSelectedDate = findViewById(R.id.tvSelectedDate)
       
      // Set a click listener on the "Select Date" button
        btnDatePicker.setOnClickListener {
           // Show the DatePicker dialog
           showDatePicker()
        }
    }

    private fun showDatePicker() {
 // Create a DatePickerDialog
        val datePickerDialog = DatePickerDialog(
            this, {DatePicker, year: Int, monthOfYear: Int, dayOfMonth: Int ->
                // Create a new Calendar instance to hold the selected date
                val selectedDate = Calendar.getInstance()
                // Set the selected date using the values received from the DatePicker dialog
                selectedDate.set(year, monthOfYear, dayOfMonth)
                // Create a SimpleDateFormat to format the date as "dd/MM/yyyy"
                val dateFormat = SimpleDateFormat("dd/MM/yyyy", Locale.getDefault())
                // Format the selected date into a string
                val formattedDate = dateFormat.format(selectedDate.time)
                // Update the TextView to display the selected date with the "Selected Date: " prefix
                tvSelectedDate.text = "Selected Date: $formattedDate"
            },
            calendar.get(Calendar.YEAR),
            calendar.get(Calendar.MONTH),
            calendar.get(Calendar.DAY_OF_MONTH)
        )
        // Show the DatePicker dialog
         datePickerDialog.show()
    }
}

In this code, we define a showDatePicker() function that creates a DatePickerDialog with the current date as the default selection. When the user selects a date, the DatePickerDialog.OnDateSetListener sets the selected date in the TextView as "Selected Date: dd/MM/yyyy" format.

That’s it! Run the app, and when you click the “Select Date” button, a DatePicker dialog will appear, allowing you to pick a date, and the selected date will be displayed below the button.

Coding with Dev