Selector de tiempo de diseño de materiales en Android

Material Design Components (MDC Android) ofrece a los diseñadores y desarrolladores una forma de implementar Material Design en su aplicación 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 Google Material Design Components 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 Time Picker. No es lo mismo que el selector de tiempo regular en Android y permite mucha personalización para mejorar la experiencia del usuario. Da una experiencia inmensa para el usuario. Entonces, en este artículo, se discutió cómo implementar el Selector de tiempo de diseño de materiales en Android.

Pasos para implementar el selector de tiempo de Material Design

Paso 1: crear un proyecto de actividad vacío

Cree un proyecto de estudio de Android de actividad vacío. Consulte Cómo crear/iniciar un nuevo proyecto en Android Studio .

Paso 2: Agrega las dependencias requeridas

Hay una necesidad de dependencias de Material Design. Al archivo Gradle de nivel de aplicación, agregue la siguiente dependencia.

// La versión 1.3.0-alpha04 puede variar

implementación ‘com.google.android.material:material:1.3.0-alpha04’

Paso 3: trabajar con el archivo activity_main.xml

• El diseño principal de la aplicación contiene un botón y un TextView . El botón abre el selector de tiempo de Material Design y TextView muestra una vista previa del tiempo elegido.
• Para implementar la misma interfaz de usuario, invoque el siguiente código dentro del archivo activity_main.xml .

<?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"
    tools:ignore="HardcodedText">
  
    <Button
        android:id="@+id/pick_time_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="128dp"
        android:text="PICK TIME"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
  
    <TextView
        android:id="@+id/preview_picked_time_textView"
        style="@style/TextAppearance.MaterialComponents.Headline6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:text="Preview picked time here"
        app:layout_constraintEnd_toEndOf="@+id/pick_time_button"
        app:layout_constraintStart_toStartOf="@+id/pick_time_button"
        app:layout_constraintTop_toBottomOf="@+id/pick_time_button" />
  
</androidx.constraintlayout.widget.ConstraintLayout>

Interfaz de usuario de salida:

Antes de dirigirse a interactuar con la interfaz de diálogo, es importante comprender la anatomía del diálogo.

• Anatomía del selector de tiempo de MDC (diálogo inmersivo).

• Anatomía del selector de tiempo de MDC (compacto).

Paso 4: trabajar con el archivo MainActivity.kt

• En el archivo MainActivity.kt , haga clic en el botón para abrir el cuadro de diálogo Selector de temporizador de diseño de materiales, busque una hora y un minuto de un solo dígito y actualice el texto de vista previa.
• Para implementar lo mismo, invoque el siguiente código dentro del archivo MainAtivity.kt .

import android.os.Bundle
import android.widget.Button
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import com.google.android.material.timepicker.MaterialTimePicker
import com.google.android.material.timepicker.TimeFormat
  
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
  
        // create instance of the UI elements
        val pickTimeButton: Button = findViewById(R.id.pick_time_button)
        val previewPickedTimeTextView: TextView = findViewById(R.id.preview_picked_time_textView)
  
        // handle the pick time button to open
        pickTimeButton.setOnClickListener {
  
            // instance of MDC time picker
            val materialTimePicker: MaterialTimePicker = MaterialTimePicker.Builder()
                // set the title for the alert dialog
                .setTitleText("SELECT YOUR TIMING")
                // set the default hour for the 
                  // dialog when the dialog opens
                .setHour(12)
                // set the default minute for the
                  // dialog when the dialog opens
                .setMinute(10)
                // set the time format 
                  // according to the region
                .setTimeFormat(TimeFormat.CLOCK_12H)
                .build()
  
            materialTimePicker.show(supportFragmentManager, "MainActivity")
  
            // on clicking the positive button of the time picker 
              // dialog update the TextView accordingly
            materialTimePicker.addOnPositiveButtonClickListener {
  
                val pickedHour: Int = materialTimePicker.hour
                val pickedMinute: Int = materialTimePicker.minute
  
                // check for single digit hour hour and minute
                  // and update TextView accordingly
                val formattedTime: String = when {
                    pickedHour > 12 -> {
                        if (pickedMinute < 10) {
                            "${materialTimePicker.hour - 12}:0${materialTimePicker.minute} pm"
                        } else {
                            "${materialTimePicker.hour - 12}:${materialTimePicker.minute} pm"
                        }
                    }
                    pickedHour == 12 -> {
                        if (pickedMinute < 10) {
                            "${materialTimePicker.hour}:0${materialTimePicker.minute} pm"
                        } else {
                            "${materialTimePicker.hour}:${materialTimePicker.minute} pm"
                        }
                    }
                    pickedHour == 0 -> {
                        if (pickedMinute < 10) {
                            "${materialTimePicker.hour + 12}:0${materialTimePicker.minute} am"
                        } else {
                            "${materialTimePicker.hour + 12}:${materialTimePicker.minute} am"
                        }
                    }
                    else -> {
                        if (pickedMinute < 10) {
                            "${materialTimePicker.hour}:0${materialTimePicker.minute} am"
                        } else {
                            "${materialTimePicker.hour}:${materialTimePicker.minute} am"
                        }
                    }
                }
  
                // then update the preview TextView
                previewPickedTimeTextView.text = formattedTime
            }
        }
    }
}

Producción: