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

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í:

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.

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

• 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!