Generalidades

#100DaysOfCode Día 44.Hoy aprendí a agregar Material Design… | Por Kushagra Kesav | Marzo 2022

100DaysOfCode Dia 34Hoy aprendi Mas conceptos Por Kushagra Kesav
Día #CodeTogether 44/100

Hola chicos 🙌

Hoy aprendí a agregar componentes e íconos de Material Design a nuestra aplicación.

Ruta 2: Obtención de la entrada del usuario en la aplicación – Parte 2

recurso: https://developer.android.com/courses/android-basics-kotlin/curso

Cree una experiencia de usuario más refinada

Así que primero agregaremos las dependencias a app/build.gradle

dependencies {
...
implementation 'com.google.android.material:material:'
}

Después de esto, reemplazaremos la tarifa de servicio. EditText con un campo de texto Material (por TextInputLayout y TextInputEditText) en el interior activity.xml documento.

android:id="@+id/cost_of_service"
android:layout_width="160dp"
android:layout_height="wrap_content"
android:hint="@string/cost_of_service"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">

android:id="@+id/cost_of_service_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="numberDecimal" />

Ahora modificaremos nuestro mainActivity.kt Al cambiar el archivo ingresado por el usuario TextInputEditText elemento con ID de recurso cost_of_service_edit_text.

private fun calculateTip() {
// Get the decimal value from the cost of service text field
val stringInTextField = binding.costOfServiceEditText.text.toString()
val cost = stringInTextField.toDoubleOrNull()

...
}

Ahora la aplicación se ve así:

100DaysOfCode Dia 44Hoy aprendi a agregar Material Design Por

entonces en activity_main.xml diseño, vamos a empezar Switch llegar com.google.android.material.switchmaterial.SwitchMaterial.

...android:id="@+id/round_up_switch"
android:layout_width="0dp"
android:layout_height="wrap_content" ... />
...

Después de eso, agregaremos íconos a la aplicación desde Material Icons. Insertaremos elementos de icono y ubicación en la aplicación.

La vista de diseño debería verse así. Los tres iconos están colocados correctamente.

1647969310 146 100DaysOfCode Dia 44Hoy aprendi a agregar Material Design Por

agregaremos OutlinedBox Los campos de texto de la aplicación tienen estilo, ¡todo el texto ahora se ve consistente!

1647969310 18 100DaysOfCode Dia 44Hoy aprendi a agregar Material Design Por
  • utilizar ConstraintLayout Coloque el elemento en nuestro diseño.
  • Probamos nuestra aplicación para casos extremos (como rotar su aplicación en modo horizontal) y realizamos mejoras cuando corresponde.

Eso es todo por el día 44✅

gracias por leer, ¡Nos vemos mañana!

LEER  ¿Cómo conecto mis palabras clave y mi mouse inalámbrico a mi teléfono?

Publicaciones relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba