las pantallas responsivas en android es algo que vamos a ver cada día mas, cada día sale resoluciones distintas, densidades y hasta pantallas con nuevos diseños.
Android ha trabajado bastante duro para tener cubierto todas las pantallas y densidades, pero no siempre es muy claro como se hace.
Como hacer Pantallas responsivas en android
Variedad de pantallas compatibles
A partir de Android 1.6 (nivel de API 4), Android proporciona compatibilidad con diferentes tamaños y densidades de ventanas, lo cual refleja la variedad de configuraciones de pantalla que un dispositivo puede tener. Puedes usar las funciones del sistema Android a fin de optimizar la interfaz de usuario de tu aplicación para la configuración de cada pantalla y asegurarte de que tu aplicación no solo se represente de forma apropiada, sino también proporcione la mejor experiencia de usuario posible para cada pantalla.
Android al tener muchos tipos de pantallas facilitaron la división para desarrollar interfaces, estas división son las siguientes
- ldpi (baja) ~120 dpi
- mdpi (media) ~160 dpi
- hdpi (alta) ~240 dpi
- xhdpi (extraalta) ~320 dpi
- xxhdpi (extra extraalta) ~480 dpi
- xxxhdpi (extra extra extraalta) ~640 dpi
para entender un poco mejor estas medidas, los documentos de android explica que las pantallas pueden cambiar por algunos pixeles, es decir que una pantalla hdpi no siempre serán las mismas por ejemplo un samsung s7 y un motorola x estos dos aunque la densidad se toma como hdpi no tendrán los mismos pixeles y aveces ni el mismo tamaño.
Al diseñar tu IU para diferentes tamaños de pantalla, descubrirás que cada diseño requiere una cantidad mínima de espacio. Por lo tanto, cada tamaño de pantalla generalizado tiene una resolución mínima asociada definida por el sistema.
- Las pantallas extragrandes miden como mínimo 960 x 720 dp.
- Las grandes miden como mínimo 640 x 480 dp.
- Las normales miden como mínimo 470 x 320 dp.
- Las pequeñas miden como mínimo 426 x 320 dp.
nota: hay otras configuraciones para pantallas de android, como crear pantallas en portrait o landscape así como carpetas de recursos así que si desean leer les pondré el post original
Crear pantallas responsivas en android
En Internet encontraremos muchas formas de hacer las pantallas responsivas, como copiar y remplazar el titulo, crear desde 0 pero con otro nombre en fin.
Aquí mostrare una forma mas simple de hacer, pero para esto recomiendo crear la vista del layout y una vez terminado comenzamos a crear las pantallas responsivas en android.
Creando pantallas
vamos a crear nuestras resoluciones para esto usare la app del post pasado y este es el proyecto que se hizo repositorio
Para crear una nueva pantalla responsiva vamos seleccionar el layout que queremos hacer responsivo, luego ubicarnos en el icono de un celular (a lado del de visualización) y vamos a poner create other
se abrirá la ventana y aquí lo que tenemos que hacer es crear layout con las medidas que necesitemos en este caso vamos a poner la siguiente estructura
layout-tamaño de layour
por ejemplo:
- layout-mdpi
- layout-hdpi
- layout-xhdpi
una vez teniendo esta estructura podemos cambiar manualmente, vamos a mover botones y en algunos caso vamos a cambiar los colores para que se encuentre la diferencia
los resultados son los siguientes, podemos ver que si abrimos por ejemplo el xhdpi el visualizador nos dirá que esta layout corresponde a un nexus 4, estos son aproximados:
podemos compilar y vamos a ver que en cada resolución tendrá una vista distinta, con esto podemos tener pantallas responsivas en android sin tanto problemas.
Dimensiones responsivas
como hemos visto las dimensiones dependiendo de cada resolución de pantalla este cambia, cambia los espacio los tamaños etc, para todas las carpetas value podemos hacer mas carpetas con las misma estructura de los layout.
vamos a crear un archivo dimens, para esto nos vamos a value y creamos un nuevo archivo
vamos a crear dimens
este documento xml comienza con la etiqueta dimen
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="primera">20dp</dimen>
<dimen name="segundo">40dp</dimen>
</resources>
con esto podemos controlar los espacio de cada cosa mas facil
nuestro xml quedaría algo así, podrán ver que se hace llamar los dimens de la siguiente forma @dimens/nombre
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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">
<Button
android:id="@+id/botonesmain"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/primera"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Botones"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/inputmain"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/segundo"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="24dp"
android:text="Inputs"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/botonesmain" />
</android.support.constraint.ConstraintLayout>
Carpeta value para pantallas responsivas en android
para hacer nuestros dimens a medida podemos hacer lo siguiente, click derecho > create resource
ya teniendo todos nuestros dimens solo adaptamos, recomiendo copiar y pegar del dimens original, ya que para que funcione bien, necesitamos que cada dimens tenga el mismo nombre, lo único diferente van a ser las medidas, hay que recordar que para tipos de letras debemos usar sp.
esto no solo funciona solamente para dimens, si no para todos los recursos values que tenemos disponible y esto es para que nuestra app sea lo mas adaptado.