Cómo adaptar diseños

El diseño adaptable es la práctica de crear diseños que se adapten a puntos de interrupción y dispositivos específicos.

Para implementar diseños adaptables de manera eficaz, haz lo siguiente:

  • Primero, considera el ancho de la clase de ventana del dispositivo para determinar los cambios de diseño y, luego, ajústalo según la altura.
  • Android aprovecha los conceptos de diseño adaptable, de manera similar al desarrollo web, y emplea imágenes y cuadrículas flexibles para crear diseños que responden de manera eficaz a su contexto.

Pantalla de la app de productividad en tamaños de dispositivos móviles y tablets.

Para obtener instrucciones de diseño sobre cómo adaptar diseños a tamaños de pantalla expandidos, consulta la guía para desarrolladores Cómo brindar compatibilidad con diferentes tamaños de pantalla en Compose y la página Aplicación de diseño de M3. También puedes consultar la galería de diseños canónicos para pantallas grandes de Android para inspirarte y ver cómo implementar diseños para pantallas grandes.

Piensa de forma adaptable

El diseño adaptable debe ser el predeterminado cuando diseñes tu app. El mercado de dispositivos móviles de Android evoluciona constantemente, por lo que no puedes pensar en los dispositivos móviles solo como teléfonos celulares. En cambio, debería incluir todo, desde teléfonos celulares, dispositivos plegables y tablets hasta todo lo que se encuentre en el medio.

Si bien ciertas funciones y casos de uso pueden no tener sentido en todos los tamaños de pantalla o factores de forma. El diseño adaptable brinda a los usuarios más libertad en cuanto a ergonomía, usabilidad y calidad de la app.

Métodos y calidad

Puedes comenzar diseñando pantallas clave (que comuniquen los conceptos esenciales o tu app) con tamaños de clase como puntos de interrupción para que sirvan como guía para el resto de tu app. Estas experiencias heroicas pueden destacar las cualidades diferenciadas de adaptación y factor de forma. También puedes diseñar contenido que sea responsivo a nivel fundamental anotando cómo se debe restringir, expandir o reorganizar el contenido.

Establece un ancho máximo en el contenido y los componentes para evitar que se estiren a todo el ancho.

Permite que el contenido se extienda a todo el ancho.

Piensa en términos de contención o paneles.

Usa contenedores intrínsecos y visuales para agrupar elementos. Los paneles pueden aparecer, ocultarse, expandirse, restringirse o mostrarse. Pensar en términos de paneles facilita el diseño en todos los dispositivos móviles.

Permite que los elementos se desplacen y se reorganicen enfocándose en cómo se adaptan a la cuadrícula. Considera el cambio vertical para los elementos y combínalo con restricciones y cambios de presentación.

Una app de alta calidad debe cumplir con el nivel diferenciado en los lineamientos de calidad de las apps básicas y de calidad para pantallas grandes.

Para obtener más información sobre los diseños, consulta la página de Material Design 3 (M3) sobre cómo comprender el diseño.