Guía para construir una interfaz de usuario cercana a WhatsApp

Un desafío de diseño que fue parte del Programa de Becas de Google 2018. En esta competencia tuvimos que seleccionar cualquier aplicación popular como Whatsapp, Gmail, Instagram y tratar de recrear una réplica exacta del diseño. El código backend no era necesario. Solo la clonación sería suficiente.

1 W6Lum3jxVcPq03ZKhSbGSw.png

¡Esta es la única pantalla que vamos a construir!

Recuerde que definitivamente le daré un enlace al repositorio de github, pero intente aplicar estos pasos usted mismo. Puede usar el repositorio de github si está atascado, pero nuevamente, PRUÉBELO USTED MISMO primero siguiendo los pasos. Hice los siguientes pasos mientras construía la interfaz de usuario como la anterior.

requisitos previos:

  1. Descargue esta extensión: https://chrome.google.com/webstore/detail/eye-dropper/hmdcmlfkchdmnmnmheododdhjedfccka?hl=en. Esta extensión te permite elegir colores de la página que navegas. Es fácil de usar y lo usaremos para obtener esos hermosos tonos verdes que se usan en WhatsApp.
  2. Utilice la plantilla de actividad básica para este tutorial. Te ahorra tiempo. Lo uso en cada proyecto y lo edito según sea necesario. Vaya a Archivos>Nuevo>Nuevo proyecto>Hacer cambios hasta que llegue a esta pantalla:

1 tZN2TjxwJhhC6im1fV56BA.png

Pasos:

  1. En su archivo colors.xml agregue los colores. Puede obtener estos colores abriendo una imagen de WhatsApp como esta y luego eligiendo los colores usando la extensión que di en el paso 1. [Google search “whatsapp layout android” if you want some other image]
  2. Lo primero en la captura de pantalla de arriba es obtener las pestañas. Ahora, en caso de que no sepas cómo hacerlos, sigue este tutorial. Aquí es donde aprendí a hacer pestañas por primera vez. Todavía me refiero a él porque sigo olvidando los pasos. Cada vez que haga referencia a un tutorial, será más rápido en la implementación de los conceptos cubiertos en ese tutorial, siempre que lo practique muchas veces, lo que sucederá cuando comience a crear proyectos pequeños.[Google search “how to make tabs in android”]
  3. Ahora puede notar que necesita hacer el ícono de búsqueda, así como los tres puntos en el lado derecho.

1 TwN_uazXvKudDcmQqhHoTg.png

Haga clic en Activo vectorial

1 0_iTPCYH6Ys75wHSgeK5oA.png

Busque el icono “buscar” y haga clic en Aceptar. Nómbralo como quieras.

Para que el ícono de búsqueda aparezca en la esquina superior derecha, debe agregarlo como un elemento en el archivo menu.xml como este:

<menu 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"
    tools:context="com.example.scholars.whatsappclone.MainActivity">
    <item
        android:id="@+id/action_settings"
        android:orderInCategory="100"
        android:title="@string/action_settings"
        app:showAsAction="never" />
    <item
        android:orderInCategory="100"
        android:title="Search"
        android:icon="@drawable/ic_search"
        app:showAsAction="ifRoom" />
</menu>
  1. Así que ahora la aplicación se ve así:

1 pfhyuq_eJaO6UgmeR4vOLQ.png

Intente encontrar el ícono en el FAB (botón de acción flotante) usted mismo siguiendo los mismos pasos en el paso 3. Recuerde que siempre hay un FAB en la plantilla de diseño básico. Por lo tanto, solo necesita editar un poco. Simplemente cambie el fondo y los atributos src y listo.

  1. Ahora necesitas agregar los contenidos. Esto se puede hacer con la ayuda de Custom Adapter y ListView para este tutorial en particular. Sin embargo, RecyclerView hubiera sido una mejor opción. Ya que nos estamos concentrando en la interfaz de usuario, aprendamos cómo hacerlo con la ayuda de ListView.

  2. Como queremos mostrar una lista de chats con textos variados, echa un vistazo a este tutorial e implementa el adaptador tú mismo. Simplemente necesita leer hasta el cuarto tema. Aquí es donde aprendí a hacer un adaptador personalizado por primera vez y tuve éxito. Puedes ir más allá si lo encuentras interesante y quieres saciar tu hambre de conocimiento en este concepto.

1 MuVAENIms02QKr8Y8oufnQ.png

4 TextViews, una imagen y ¿qué más?

  1. Ahora necesita hacer el diseño de cada elemento en ListView. Hay muchas maneras de hacerlo. Tome 3 matrices de tipo Cadena: los nombres de chat, las descripciones de chat y las fechas de chat. (El resto de las cosas pueden codificarse de forma rígida a menos que esté creando una aplicación de nivel de producción completa. Eso requiere pasos como conectarse a la base de datos, obtener cosas de una API, crear clases POJO, etc.)

  2. Tienes que prestar atención a los detalles aquí ahora. Mira de cerca. Verá un divisor (sombra muy clara). También observe que cuando se selecciona una pestaña en particular, tiene un indicador debajo. Experimente y use su mejor juicio en cuanto a cuánto ancho y qué atributo se pueden usar para generar la misma dimensión. Vaya a la pestaña de diseño si no puede recordar el atributo. Una vez que esté allí, vaya a la lista de atributos a la derecha y vea cuál debe usar. En general, los usuarios tienden a perder cosas como estas, pero una vez que las vea, hará una gran diferencia. Adquirirás el hábito de detectar estas pequeñas cosas con la práctica. Luego, comenzará a usarlos para hacer que su aplicación se destaque o, más bien, para promocionar su aplicación como si usara logotipos personalizados.

Siempre son las pequeñas cosas las que importan mucho

Puede usar el enlace de github proporcionado al final de este artículo para ver el código. Pero nuevamente, primero intente usar diseños básicos como Relativo y Lineal que, por cierto, son los únicos diseños que necesita para este diseño. Piense en los márgenes de cada vista de texto. Piensa en los colores de cada vista de texto. Piensa cómo puedes dibujar el divisor. Si fallas, busca en Google. Si vuelve a fallar, vaya al enlace que le he dado.

  1. Por último, para hacer las fechas y la notificación de mensajes pequeños, puede usar su propia lógica usando la clase Random. Con respecto a la marca y la imagen de la cámara junto a la descripción del chat, debe usar el atributo drawableLeft (o drawableStart) en la vista de texto de la descripción. Puede configurarlo mediante programación de esta manera:
TextView chatDescriptionText =(TextView)rowView.findViewById(R.id.chat_description);chatDescriptionText.setCompoundDrawablesWithIntrinsicBounds(R.drawable.ic_photo_camera, 0, 0, 0);
  1. Eso es todo. Intente implementar las otras pantallas también. Ganarás más confianza. Llegará un momento en el que creerás que realmente puedes buscar y aplicar lo que quieras.

¡Feliz codificación!

https://github.com/knightcube/WhatsappUIDesign/tree/masterStart 

Similar Posts

Leave a Reply

Your email address will not be published.