Selector de fecha de diseño de materiales en Android usando Kotlin

Material Design Components (MDC Android) ofrece a los diseñadores y desarrolladores una forma de implementar Material Design en sus aplicaciones de Android. Desarrollados por un equipo central de ingenieros y diseñadores de UX en Google, estos componentes permiten un flujo de trabajo de desarrollo confiable para crear aplicaciones de Android atractivas y funcionales. Si le gusta la forma en que los elementos de la interfaz de usuario de los componentes de diseño de materiales de Google para Android que están diseñados por Google son bastante impresionantes, aquí hay algunos pasos que deben seguirse para obtenerlos, y uno de ellos es Componentes de diseño de materiales de Google (MDC ) Selector de fechas. Hay muchos selectores de fechas disponibles para Android que son de código abierto. Pero los selectores de fecha de Material Design ofrecen más funcionalidad al usuario y son fáciles de implementar para los desarrolladores. Eche un vistazo a las siguientes imágenes sobre qué tipo de selectores de fechas de diseño de materiales se discutirán en esta discusión. Tenga en cuenta que vamos a implementar este proyecto utilizando el lenguaje Java. En este artículo, vamos a implementar dos tipos de selectores de fechas de diseño de materiales, como se puede ver en las imágenes a continuación.

• Selector de fecha normal de diseño de material
• Selector de intervalo de fechas de diseño de material

Estructura del cuadro de diálogo Selector de fecha

Antes de implementar el selector de fecha de diseño de material, es necesario comprender las partes del cuadro de diálogo para que pueda ser más fácil al tratar con partes del cuadro de diálogo en el código Kotlin.

Implementación paso a paso

Paso 1 : Cree un nuevo proyecto en Android Studio usando kotlin.

Paso 2 : agregue componentes de material de dependencia para la biblioteca de Android en el archivo build.gradle.

implementation 'com.google.android.material:material:1.4.0'

Nota : en la última versión de Android Studio, la dependencia del material ya está incluida en el archivo build.gradle.

Paso 3 : trabajar con el archivo activity_main.xml

Vaya a la aplicación > res > diseño > actividad_principal.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo activity_main.xml . Puede personalizar la parte de diseño. 

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    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"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="GeeksForGeeks"
        android:textColor="#28AE2E"
        android:textSize="23sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.276" />
  
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/ic_geeksforgeeks"
        app:layout_constraintBottom_toTopOf="@+id/textView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
  
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/floatingActionButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:clickable="true"
        android:layout_margin="15dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:src="@drawable/ic_date_range"
        />
  
</androidx.constraintlayout.widget.ConstraintLayout>

Nota : también hemos incluido imágenes vectoriales en la carpeta dibujable, si desea utilizar ImageView, debe agregar una imagen vectorial para eso.

Paso 4 : trabajar con el archivo MainActivity.kt

Vaya al archivo MainActivity.kt y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.kt. Se agregan comentarios dentro del código para comprender el código con más detalle.

package com.ayush.datepicker
  
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Toast
import com.google.android.material.datepicker.MaterialDatePicker
import com.google.android.material.floatingactionbutton.FloatingActionButton
import java.text.SimpleDateFormat
import java.util.*
  
class MainActivity : AppCompatActivity() {
    lateinit var btnDatePicker: FloatingActionButton
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
          
        // setting up the views
        btnDatePicker = findViewById(R.id.floatingActionButton)
          
        // when floationg acition button is clicked
        btnDatePicker.setOnClickListener {
            // Initiation date picker with 
            // MaterialDatePicker.Builder.datePicker()
            // and building it using build()
            val datePicker = MaterialDatePicker.Builder.datePicker().build()
            datePicker.show(supportFragmentManager, "DatePicker")
              
            // Setting up the event for when ok is clicked
            datePicker.addOnPositiveButtonClickListener {
                // formatting date in dd-mm-yyyy format.
                val dateFormatter = SimpleDateFormat("dd-MM-yyyy")
                val date = dateFormatter.format(Date(it))
                Toast.makeText(this, "$date is selected", Toast.LENGTH_LONG).show()
                
            }
              
            // Setting up the event for when cancelled is clicked
            datePicker.addOnNegativeButtonClickListener {
                Toast.makeText(this, "${datePicker.headerText} is cancelled", Toast.LENGTH_LONG).show()
            }
              
            // Setting up the event for when back button is pressed
            datePicker.addOnCancelListener {
                Toast.makeText(this, "Date Picker Cancelled", Toast.LENGTH_LONG).show()
            }
        }
    }
}

Entonces nuestra aplicación está lista y podemos ver el resultado.

Producción: