Introducción al 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. El diseño de materiales en Android es una de las características clave que atrae y atrae al cliente hacia la aplicación. Este es un tipo especial de diseño, que está guiado por Google. Entonces, en este artículo, se han presentado las cosas básicas que deben tenerse en cuenta antes de diseñar o desarrollar cualquier aplicación materialista de Android.

Los temas tratados en estos artículos son

1. Color y tematización
2. Tipografía (Eligiendo la fuente correcta)
3. componentes de diseño de materiales
4. Dando forma a los componentes de Material Design

1. Colores y tematización

Al elegir el tipo correcto de combinación de colores, se refleja la marca y el estilo de la aplicación. Por ejemplo, el color principal o primario de la aplicación es el Verde, entonces en toda la aplicación se mostrará frecuentemente el color verde. Al elegir el color para la aplicación, hay tres tipos de colores para elegir para desarrollar la aplicación de Android.

• Color primario: este color se debe elegir con mucha precaución porque este color es visible con frecuencia en los componentes de la aplicación, como los botones de alto énfasis o el color de los botones, y también en la barra de navegación superior e inferior.
• Color Secundario: Este color debe elegirse solo cuando el nivel de complejidad de la aplicación sea bajo. Este color se aplicará a aquellos elementos que necesitan un poco de acento de color, como el color de fondo de los botones de acción flotante (FAB), controles deslizantes, botones de alternancia, fichas (estado activo), barras de progreso, etc.
• Variantes claras y oscuras: estos colores son las variantes del color primario. La variante oscura del color primario se establece para la barra de estado y la variante clara del color primario se establece para el botón de acción flotante, el contorno para los textos de edición, y donde los elementos necesitan algunos acentos de color, la variante clara de los colores primarios se establecerá para ellos. Eche un vistazo a la siguiente imagen cuando solo se establece el color primario para el tema de la aplicación.

Pero según la complejidad de la aplicación, se pueden elegir varios tipos de color.

• Fíjate en la siguiente imagen, habiendo seleccionado el color primario, con eso se puede elegir el color Complementario o se puede elegir el color Análogo o se puede elegir el color Triádico o se puede elegir el color Secundario para cumplir con el estilo requerido.

• Para hacer sus propias muestras de color puede visitar aquí .

2. Tipografía (Eligiendo la Fuente Correcta)

• En android, sin embargo, la fuente Roboto cumple con todos los requisitos. Pero también, si el desarrollador quiere personalizar más la aplicación con la fuente, debe elegir la fuente donde tiene todas sus variantes. Las variantes son el rostro claro, el rostro normal, el rostro medio y, a veces, el rostro oscuro.
• Se recomienda elegir la fuente de Google Font . Como ofrece una variedad de familias de fuentes, y casi todas las fuentes contienen todas las variantes.
• Hay algunas pautas que deben seguirse al elegir la fuente. En este caso, el Roboto se elige solo con fines de demostración. Mirando la siguiente imagen, que es el gráfico de escala de tipo para aplicar los estilos de las fuentes para varios contextos.
• Los diversos contextos incluyen subtítulos, cuerpo, subtítulos, botón, subtítulos, etc.
• En la imagen de abajo, la columna del lado izquierdo contiene la fuente elegida, el estilo de fuente y el tamaño de fuente. La segunda columna contiene la vista previa del contexto seleccionado de la fuente.

• Para seleccionar el tipo de fuente adecuado para la aplicación, puede visitar este .

3. Componentes de diseño de materiales

• Los componentes de Material Design son los componentes que permiten muchas características para los usuarios y fáciles de implementar para los desarrolladores.
• Eche un vistazo a la siguiente imagen para ver cómo los componentes de diseño de materiales se destacan en términos de personalización, estilo y apariencia de los componentes normales de la interfaz de usuario.

• Las características que ofrecen los componentes de Material Design se pueden implementar en varios contextos. Uno puede notar en la imagen de arriba cómo el botón normal y editar texto se ha adaptado al tema de la aplicación y cómo el botón de diseño de materiales se ha adaptado al tema de la aplicación.
• Estos componentes pueden incluso adaptarse al tema oscuro y cambiar sus estilos cuando el usuario los alterna. Mire la siguiente imagen para diferenciar los comportamientos entre los componentes de diseño de materiales y los componentes normales de la interfaz de usuario.

• Para las implementaciones paso a paso de algunos de los componentes de Material Design y su tematización, se pueden encontrar en los siguientes artículos.

1. Botones de diseño de materiales en Android con ejemplo
2. Botones de diseño de materiales temáticos en Android con ejemplos
3. Botón de acción flotante (FAB) en Android con ejemplo
4. Botón de acción flotante extendido en Android con ejemplo
5. Temas de botones de acción flotantes en Android con ejemplo
6. Selector de fecha de diseño de materiales en Android
7. Más Funcionalidades de Material Design Date Picker en Android
8. Material Design EditText en Android con ejemplos

• Para varios materiales, los componentes de diseño se pueden encontrar aquí .

4. Dar forma a los componentes

• En el diseño de materiales, hay tres tipos de métodos de modelado.

1. Esquina cortada
2. Esquina redondeada
3. Borde triangular

• Estos métodos también se pueden aplicar para los botones de diseño de materiales, campos de texto, fichas, botones de acción flotantes, tarjetas, barras de navegación, hojas inferiores, etc.
• Estas características están disponibles con los componentes de diseño de materiales fuera de la caja proverbial. Solo necesita agregar la dependencia de los componentes de diseño de materiales y comenzar a implementar el estilo para los componentes de diseño de materiales.
• Para obtener más información sobre la codificación, la personalización se refiere a this .