Android DatePicker Dialog In Koltin

Android DatePicker Dialog is a sub class of AlertDialog , containing an datepicker Widget for selecting date  , the date can be selected using year, month, and day.

DatePicker Dialog has two mode spinner and calender , Lets see an example .

XML Layout

  1. Create XML Layout activity_main.xml , this will be set as content view for launcher Activity (MainActivity.kt) .
  2. Add Button to your layout file 
file : activity_main.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"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context=".MainActivity"
        android:gravity="center_horizontal">

    <TextView android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:textSize="22sp"
              android:id="@+id/selectedDate"/>

    <Button android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="select date"
            android:id="@+id/selectDate"/>

</LinearLayout>

DatePicker Dialog

  1. DatePickerDialog  Creates a new date picker dialog for the given date.
  2. DatePickerDialog.OnDateSetListener is used to listen date select event .when user selects date onDateSet callback is called 
val mcurrentTime = Calendar.getInstance()
val year = mcurrentTime.get(Calendar.YEAR)
val month = mcurrentTime.get(Calendar.MONTH)
val day = mcurrentTime.get(Calendar.DAY_OF_MONTH)

val datePicker = DatePickerDialog(this, object : DatePickerDialog.OnDateSetListener {
 override fun onDateSet(view: DatePicker?, year: Int, month: Int, dayOfMonth: Int) {
  selectedDate.setText(String.format("%d / %d / %d", dayOfMonth, month + 1, year))
 }
}, year, month, day);

Dialog Style .
accentColor of basetheme is applied to DialogHeader and button .

DatePicker Dialog Mode .
DatePicker Dialog has two mode spinner and calender. use android:datePickerMode property to set the mode .

file : style.xml
<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:datePickerStyle">@style/MyDatePicker</item>
    </style>

    <style name="MyDatePicker" parent="android:Widget.Material.Light.DatePicker">
        <item name="android:datePickerMode">spinner</item>
    </style>
</resources>

1. Calendar Mode
<item name="android:datePickerMode">calendar</item>
2. Spinner Mode
 <item name="android:datePickerMode">spinner</item>

Activity 

  1.  Create a koltin class MainActivity.kt and extend it to AppCompatActivity class .
  2.  Override onCreate function and set the content of this MainActivity with above defined xml layout (activity_main.xml). 
  3.  On Button Click show DatePickerDialog.
file : MainActivity.kt
package com.tutorialsbuzz.androiddatepicker

import android.app.DatePickerDialog
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.DatePicker
import kotlinx.android.synthetic.main.activity_main.*
import java.util.*

class MainActivity : AppCompatActivity() {

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

        val mcurrentTime = Calendar.getInstance()
        val year = mcurrentTime.get(Calendar.YEAR)
        val month = mcurrentTime.get(Calendar.MONTH)
        val day = mcurrentTime.get(Calendar.DAY_OF_MONTH)

        val datePicker = DatePickerDialog(this, object : DatePickerDialog.OnDateSetListener {
            override fun onDateSet(view: DatePicker?, year: Int, month: Int, dayOfMonth: Int) {
                selectedDate.setText(String.format("%d / %d / %d", dayOfMonth, month + 1, year))
            }
        }, year, month, day);


        selectDate.setOnClickListener({ v ->
            datePicker.show()
        })
    }
}



No comments:

Post a comment