Los diseños responsivos o adaptables proporcionan una experiencia del usuario optimizada independientemente de el tamaño de la pantalla. Implementa diseños responsivos o adaptables para permitir que tus app basada en vistas para admitir todos los tamaños de visualización, las orientaciones y configuraciones, incluidas aquellas que pueden cambiar de tamaño, por ejemplo, multiventana automático.
Diseño responsivo
El primer paso para admitir una variedad de factores de forma de dispositivos es crear un que responda a las variaciones en la cantidad de espacio de visualización disponible a tu app.
ConstraintLayout
La mejor manera de crear un diseño adaptable es usar
ConstraintLayout
como el diseño base para tu IU. ConstraintLayout
te permite especificar la
posición y tamaño de cada vista de acuerdo con las relaciones espaciales con otras
en el diseño. Todas las vistas pueden moverse y cambiar de tamaño a la vez como
los cambios en el espacio de visualización.
La forma más fácil de compilar un diseño con ConstraintLayout
es usar el editor de diseño de Android Studio, El editor de diseño te permite arrastrar nuevas vistas a la
aplicar restricciones relativas a las vistas superiores y del mismo nivel, y establecer la vista
sin la necesidad de editar ningún archivo XML manualmente.
![](https://developer.android.com/static/images/screens_support/layout-editor_2x.png?authuser=9&hl=es)
ConstraintLayout
.
Para obtener más información, consulta Cómo crear una IU responsiva con ConstraintLayout.
Ancho y altura responsivos
Para asegurarte de que tu diseño sea responsivo en diferentes tamaños de visualización, usa
wrap_content
, match_parent
o 0dp (match constraint)
para el ancho y
la altura de los componentes de la vista en lugar de valores hard-coded:
wrap_content
: La vista establece su tamaño para que se adapte al contenido que incluye.match_parent
: La vista se expande lo más posible dentro de la vista superior.0dp (match constraint)
: En unConstraintLayout
, similar amatch_parent
La vista ocupa todo el espacio disponible restricciones.
Por ejemplo:
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/lorem_ipsum" />
En la Figura 4, se muestra cómo se ajustan el ancho y la altura de TextView
como pantalla
cambia de ancho con la orientación del dispositivo.
![](https://developer.android.com/static/images/screens_support/layout-match-parent_2x.png?authuser=9&hl=es)
TextView
responsiva
TextView
establece su ancho para llenar todo el espacio disponible (match_parent
).
su altura exactamente al mismo espacio que se requiere por la altura de la superficie
texto (wrap_content
), lo que permite que la vista se adapte a diferentes pantallas
dimensiones y diferentes cantidades de texto.
Si usas un LinearLayout
,
también puede expandir las vistas secundarias según el diseño
weight para que las vistas se rellenen de forma proporcional
el espacio disponible. Sin embargo, usar ponderaciones en un LinearLayout
anidado requiere
que el sistema realice varios pases de diseño para determinar el tamaño de cada uno
lo que ralentiza el rendimiento de la IU.
ConstraintLayout
puede crear casi todos los diseños posibles con
LinearLayout
sin afectar el rendimiento, por lo que debes convertir tus recursos anidados
LinearLayout
a
ConstraintLayout
Luego,
puede definir diseños ponderados con restricciones
cadenas.
Diseño adaptable
El diseño de tu app siempre debe ser responsivo en diferentes tamaños de visualización. Sin embargo, incluso un diseño adaptable no puede proporcionar la mejor experiencia del usuario en en todos los dispositivos o en el modo multiventana. Por ejemplo, la IU que diseñado para un teléfono, probablemente no brinde una experiencia del usuario óptima en un tablet. El diseño adaptable ofrece diseños alternativos optimizados para diferentes y las dimensiones de visualización.
SlidingPaneLayout para IUs de lista-detalles
Por lo general, una IU de lista-detalles proporciona una experiencia del usuario diferente en pantallas de diferentes tamaños. En pantallas grandes, los paneles de lista y de detalles están por lo general, una al lado de la otra. Cuando se selecciona un elemento de la lista, la información del elemento que se muestra en el panel de detalles sin cambiar la IU; los dos paneles permanecen en paralelo. Sin embargo, en pantallas pequeñas, los dos paneles se muestran por separado, cada panel que ocupa toda el área de visualización. Cuando un elemento del panel de lista seleccionado, el panel de detalles (que contiene la información del elemento seleccionado) reemplaza el panel de lista. La navegación hacia atrás reemplaza al panel de detalles por la lista.
SlidingPaneLayout
administra la lógica para determinar cuál de las dos experiencias del usuario es
apropiado para el tamaño actual de la ventana:
<?xml version="1.0" encoding="utf-8"?>
<androidx.slidingpanelayout.widget.SlidingPaneLayout
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="match_parent"
tools:context=".MainActivity">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="280dp"
android:layout_height="match_parent"
android:layout_gravity="start" />
<androidx.fragment.app.FragmentContainerView
android:id="@+id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="300dp"
android:layout_height="match_parent"
android:layout_weight="1"
app:defaultNavHost="true"
app:navGraph="@navigation/item_navigation" />
</androidx.slidingpanelayout.widget.SlidingPaneLayout>
Los atributos layout_width
y layout_weight
de las dos vistas que se incluyen en
SlidingPaneLayout
determinan el comportamiento de SlidingPaneLayout
. En el ejemplo,
si la ventana es lo suficientemente grande (al menos 580 dp de ancho) para mostrar ambas vistas, la
paneles se muestran uno al lado del otro. Pero, si el ancho de la ventana es menor que
580 dp, los paneles se deslizan uno sobre otro para ocupar toda la app de forma individual
en la ventana modal.
Si el ancho de la ventana es mayor que el ancho mínimo total especificado (580 dp),
Los valores layout_weight
se pueden usar para ajustar el tamaño de los dos paneles de forma proporcional. En la
Por ejemplo, el panel de lista siempre es de 280 dp de ancho porque no tiene un grosor.
Sin embargo, el panel de detalles siempre llena cualquier espacio horizontal que supere los 580 dp porque
del parámetro de configuración layout_weight
de la vista.
Recursos de diseño alternativos
Para adaptar el diseño de tu IU a una gran variedad de tamaños de pantalla, usa diseños alternativos. identificados por resource calificadores.
![](https://developer.android.com/static/images/screens_support/sizes-phone-tablet_2x.png?authuser=9&hl=es)
Puedes proporcionar diseños adaptables y específicos para cada pantalla creando
Directorios res/layout/
en el código fuente de la app. Crea un directorio para cada
configuración de pantalla que requiera un diseño diferente. Luego, agrega una pantalla
de configuración de Terraform al nombre del directorio layout
(por ejemplo,
layout-w600dp
para pantallas que tienen 600 dp de ancho disponible.
Los calificadores de configuración representan el espacio de visualización visible disponible para la IU de tu app. El sistema tiene en cuenta cualquier decoración (por ejemplo, el la barra de navegación) ni los cambios en la configuración de las ventanas (como las funciones multiventana ) cuando selecciones el diseño para tu app.
Para crear diseños alternativos en Android Studio, consulta Cómo usar variantes de diseño para optimizar para diferentes pantallas en Desarrolla una IU con objetos View.
Calificador de ancho mínimo
El calificador de tamaño de pantalla de ancho mínimo te permite ofrecer una diseños para pantallas que tienen un ancho mínimo medido en según la densidad píxeles (dp).
Al describir el tamaño de la pantalla como una medida de dp, Android te permite crear diseñados para dimensiones de pantalla específicas sin tener en cuenta diferentes densidades de píxeles.
Por ejemplo, puedes crear un diseño llamado main_activity
que esté optimizado para
teléfonos y tablets creando diferentes versiones del archivo en distintas
directorios:
res/layout/main_activity.xml # For phones (smaller than 600dp smallest width) res/layout-sw600dp/main_activity.xml # For 7" tablets (600dp wide or wider)
El calificador de ancho mínimo especifica el lado más pequeño de la pantalla. independientemente de la orientación actual del dispositivo, por lo que es una manera de especificar el tamaño general de la pantalla disponible para tu diseño.
A continuación, se muestra cómo los valores de ancho mínimo se corresponden con los tamaños de pantalla típicos:
- 320 dp: pantalla pequeña de teléfono (240 x 320 ldpi, 320 x 480 mdpi, 480 x 800 hdpi, etcétera)
- 480 dp: una pantalla de teléfono grande de ~5" (480 x 800 mdpi)
- 600 dp: 7" Tablet (600 x 1024 mdpi)
- 720 dp: 10" Tablet (720 x 1280 mdpi, 800 x 1280 mdpi, etc.)
En la siguiente figura, se proporciona una vista más detallada de la manera en que las diferentes dp de pantalla los anchos se corresponden con diferentes tamaños y orientaciones de pantalla.
![](https://developer.android.com/static/images/screens_support/layout-adaptive-breakpoints_2x.png?authuser=9&hl=es)
Los valores para el calificador de ancho mínimo son en dp, ya que lo que importa es el cantidad de espacio de visualización disponible después de que el sistema contabiliza la densidad de píxeles (no la resolución de píxeles sin procesar).
Los tamaños que se especifican con calificadores de recursos, como el ancho mínimo, se no a los tamaños de pantalla reales. Más bien, los tamaños especifican el ancho o la altura en unidades dp disponibles para la ventana de tu app El sistema Android podría usar parte de la pantalla para la IU del sistema (como la barra del sistema en la parte inferior de la pantalla o la barra de estado en la parte superior), por lo que es posible que parte de la pantalla no disponible para tu diseño. Si tu app se usa en el modo multiventana, la La app solo tiene acceso al tamaño de la ventana que la contiene. Cuando cambia el tamaño de la ventana, se activa una configuración cambian por el nuevo tamaño de ventana, que permite que el sistema seleccione un archivo de diseño apropiado. Entonces, el recurso los tamaños de calificadores que declares deben especificar solo el espacio que tu aplicación necesita. El sistema considera cualquier espacio utilizado por la IU del sistema al proporcionar espacio para tu diseño.
Calificador de ancho disponible
En lugar de cambiar el diseño en función del ancho mínimo de la pantalla, es posible que quieras cambiar tu diseño según el ancho o la altura disponibles. Por ejemplo, tal vez quieras usar un diseño de doble panel siempre que la pantalla proporciona un ancho mínimo de 600 dp, que puede cambiar en función de que el dispositivo esté en orientación horizontal o vertical. En ese caso, debes usar el ancho disponible de la siguiente manera:
res/layout/main_activity.xml # For phones (smaller than 600dp available width) res/layout-w600dp/main_activity.xml # For 7" tablets or any screen with 600dp available width # (possibly landscape phones)
Si la altura disponible es una preocupación para tu app, puedes usar el
alto disponible. Por ejemplo, layout-h600dp
para pantallas con
y tener, al menos, 600 dp de alto de pantalla.
Calificadores de orientación
Si bien puedes admitir todas las variaciones de tamaño usando solo de los calificadores de ancho mínimo y ancho disponible, puedes También quieren cambiar la experiencia del usuario cuando cambian entre el modo vertical y horizontal.
Para eso, puedes agregar los calificadores port
o land
a tu directorio de diseño.
y nombres de usuario. Solo asegúrate de que los calificadores de orientación aparezcan después de los calificadores de tamaño.
Por ejemplo:
res/layout/main_activity.xml # For phones res/layout-land/main_activity.xml # For phones in landscape res/layout-sw600dp/main_activity.xml # For 7" tablets res/layout-sw600dp-land/main_activity.xml # For 7" tablets in landscape
Para obtener más información sobre todos los calificadores de configuración de la pantalla, consulta Aplicación descripción general de los recursos.
Clases de tamaño de ventana
Las clases de tamaño de ventana son puntos de interrupción de viewports que te ayudan a crear y diseños. Los puntos de interrupción identifican el área de visualización disponible para tu app como compacta, mediana o expandida. El ancho y la altura se especifican por separado, por lo que tu app siempre tiene una clase de tamaño de ventana para el ancho y una clase de tamaño de ventana altura.
Para aplicar diseños adaptables de manera programática, haz lo siguiente:
- Cómo crear recursos de diseño basados en los puntos de interrupción de la clase de tamaño de ventana
- Calcula las clases de tamaño de ventana de ancho y alto de tu app con la
WindowSizeClass#compute()
de Jetpack WindowManager biblioteca - Cómo aumentar el recurso de diseño para las clases de tamaño de ventana actuales
Para obtener más información, consulta Tamaño de la ventana. clases.
Componentes de la IU modularizados con fragmentos
Cuando diseñes tu app para varios tamaños de visualización, usa fragmentos a fin de extraer la lógica de tu IU en componentes separados para asegurarte de que no duplicando el comportamiento de la IU en actividades. Luego, puedes combinar fragmentos crear diseños de varios paneles en pantallas grandes o puedes colocar fragmentos en separar actividades en pantallas pequeñas.
Por ejemplo, el patrón lista-detalles (consulta SlidingPaneLayout) se podrían implementar con un fragmento que contiene la lista y otro que contiene el elemento de la lista más detalles. En pantallas grandes, los fragmentos podrían mostrarse uno al lado del otro; activado pantallas pequeñas, individualmente, en toda la pantalla.
Para obtener más información, consulta la descripción general de Fragments.
Incorporación de actividades
Si tu app consta de varias actividades, su incorporación te permitirá crear fácilmente una IU adaptable.
La incorporación de actividades muestra varias actividades o varias instancias de la misma actividad simultáneamente en la ventana de tareas de una aplicación. En pantallas grandes, las actividades se pueden mostrar una al lado de la otra; en pantallas pequeñas, apiladas una encima de la otra.
Para determinar la manera en que tu app muestra sus actividades, debes crear un archivo XML de configuración de Terraform que el sistema usa para determinar la la presentación en función del tamaño de visualización. Como alternativa, puedes hacer que Jetpack API de WindowManager llamadas.
La incorporación de actividades admite cambios de orientación del dispositivo y dispositivos plegables, apilar y desapilar actividades a medida que el dispositivo rota o se pliega y se despliega
Para obtener más información, consulta Actividad la incorporación.
Tamaños de pantalla y relaciones de aspecto
Prueba tu app en una variedad de tamaños de pantalla y relaciones de aspecto para garantizar que tu IU escala correctamente.
Android 10 (nivel de API 29) y las versiones posteriores admiten una gran variedad de relaciones de aspecto. Los factores de forma plegables pueden variar desde pantallas altas y angostas, como la proporción de 21:9 cuando plegado, a una relación de aspecto cuadrada de 1:1 cuando se despliega.
Para garantizar la compatibilidad con la mayor cantidad posible de dispositivos, prueba tus apps para la mayor cantidad posible muchas de las siguientes relaciones de aspecto de pantalla:
![](https://developer.android.com/static/images/guide/topics/ui/foldables/fold-screen-ratios.png?authuser=9&hl=es)
Si no tienes acceso a dispositivos de todos los tamaños de pantalla que quieras puedes usar Android Emulator para emular casi cualquier tamaño de pantalla.
Si prefieres hacer pruebas en un dispositivo real, pero no lo tienes, puedes usar Firebase Test Lab para acceder en un centro de datos de Google.
Recursos adicionales
- Material Design: información sobre el diseño