Diseño de interfaz de usuario receptivo en Android

Hoy en día, todos los diseñadores de UI de Android se toman muy en serio su diseño de UI. El camino de cada proyecto pasa por el diseño de la interfaz de usuario. El diseño de la interfaz de usuario es la cara de cada proyecto y cada sitio web, aplicación y aplicación de escritorio. La interfaz de usuario es el muro entre el usuario y el back-end donde los usuarios pueden interactuar con el servidor a través del diseño de la interfaz de usuario. Hay varios aspectos en los que el diseñador de UI debe tener en cuenta al diseñar cualquier producto de software, como ¿ Cuál es el tema del proyecto? ¿Cuál es el público objetivo? ya sea para mayores de 18 años o mayores, ¿esta interfaz de usuario es compatible con todos los tipos de pantallas o no?, y surgen muchas más preguntas en la mente del diseñador de interfaz de usuario. En este artículo, hablaremos sobre el futuro de la interfaz de usuario en Android.

En Android, hay varias plataformas donde los desarrolladores desarrollaron su aplicación de Android, como Android Studio , Eclipse, React Native , etc. La mayoría de los desarrolladores prefieren. Para que la aplicación de Android responda, debemos crear cada pantalla individual para cada tipo de tamaño de pantalla, como Grande , Extragrande , Normal . Veamos estas imágenes.

Pantalla Normal

Tamaño de pantalla grande

Tamaño de pantalla extragrande

Tamaño de pantalla pequeño

Estos son pasos muy preocupantes para que cada diseñador los rediseñe para cada pantalla individual. Debido a este tiempo del proyecto también se incrementará. Para superar este tipo de problema, Google presenta el componente material para el diseño de Android, supera la capacidad de respuesta tanto como sea posible. Material Components admite todos los tamaños de pantalla. 

Uso de componentes de material en aplicaciones de Android

Al agregar un componente de material, necesita simplemente agregar esta dependencia en su archivo Gradle

implementación ‘com.google.android.material:material:1.2.1’

Después de agregar esta dependencia, podrá usar el componente material en su proyecto de Android.

<com.google.android.material.button.MaterialButton
            android:layout_width="150dp"
            android:layout_height="60dp"
            android:backgroundTint="#5874FF"
            android:layout_below="@id/desc"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="20dp"
            app:cornerRadius="0dp"
            android:textSize="16sp"
            android:padding="10dp"
            android:id="@+id/btn1"
            android:fontFamily="@font/ubuntu_m"
            android:text="Learn More"
            android:textAllCaps="false"/>

Para hacer que nuestro diseño sea más elegante y atractivo, así como receptivo, debe usar Material Card View en su diseño.

<com.google.android.material.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:id="@+id/card1"
        android:backgroundTint="@color/bottom"/>
  
    <com.google.android.material.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:id="@+id/card2"
        android:layout_below="@id/card1"
        android:layout_marginTop="20dp"
        android:backgroundTint="@color/bottom">
          
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
  
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="40sp"
                android:layout_centerInParent="true"
                android:textAlignment="center"
                android:textColor="#fff"
                android:textStyle="bold"
                android:text="Text"/>
              
        </RelativeLayout>
          
</com.google.android.material.card.MaterialCardView>

Material Card View administra automáticamente el relleno y el margen, así como los tamaños a veces. Puede agregar un degradado de color dentro de la tarjeta mediante el uso de una biblioteca de terceros, se ve increíble. Puede agregar un menú dentro del bloque de la tarjeta, puede agregar un control deslizante en la tarjeta.

Ejemplo

Tomemos un ejemplo con Android Studio. Ahora podemos diseñar un diseño de Android usando XML. Primero podemos diseñar un componente de vista de tarjeta de material. Vista de tarjeta de material con relleno principal.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="wrap_content"
    android:background="#fff"
    android:padding="30dp"
    tools:context=".customer.Find_Farmer">
  
    <com.google.android.material.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="200dp"
        app:cardCornerRadius="20dp"
        android:elevation="8dp"
        android:backgroundTint="@color/bottom">
  
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
  
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Text Here"
                android:textStyle="bold"
                android:layout_centerInParent="true"
                android:textColor="#fff"
                android:textSize="28sp"/>
  
        </RelativeLayout>
  
    </com.google.android.material.card.MaterialCardView>
  
</RelativeLayout>

Interfaz de usuario de salida:

Vista de tarjeta de material sin relleno:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="wrap_content"
    android:background="#fff"
    tools:context=".customer.Find_Farmer">
  
    <com.google.android.material.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="200dp"
        app:cardCornerRadius="20dp"
        android:elevation="8dp"
        android:backgroundTint="@color/bottom">
  
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
  
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Text Here"
                android:textStyle="bold"
                android:layout_centerInParent="true"
                android:textColor="#fff"
                android:textSize="28sp"/>
  
        </RelativeLayout>
  
    </com.google.android.material.card.MaterialCardView>
  
</RelativeLayout>

Si usa la vista de tarjeta de material sin relleno, el componente de material puede agregar automáticamente relleno y color predeterminados. Esto también puede ser útil para el diseño de interfaz de usuario receptivo. 

Si usa la vista de tarjeta normal, entonces no puede proporcionar ninguna capacidad de respuesta en el diseño. Además, los componentes normales no se ven tan elegantes como otros componentes materiales.

Hay muchos aspectos en los que el componente material es más fácil y flexible que los componentes normales, como la sombra, el borde, etc.

Ventajas del componente material

• Los componentes materiales son ligeros.
• El componente material se ve muy bien en comparación con otros.
• Componente material muy sensible.

Desventajas del componente material

• Algunas veces el componente no funciona correctamente en un dispositivo real.