Las cookies nos permiten ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso que hacemos de las cookies. Más Información. Aceptar

Multiscreen, diseña en Android para diferentes pantallas

Miguel Campos
  • Escrito por Miguel Campos el 12 de Abril de 2016
  • 1 min de lectura | Mobile
Multiscreen, diseña en Android para diferentes pantallas
El reproductor de video será cargado en breves instantes.

El diseño Multiscreen en Android , consiste en diseñar una aplicación que se adapte tanto a dispositivos de mano (handset) como a tablets . Entre otras ventajas, las aplicaciones que diseña esta adaptación, permiten mejorar la experiencia de usuario, ya que optimizan el diseño de las interfaces en función del dispositivo empleado para ejecutar la aplicación.

Imagen 0 en Multiscreen, diseña en Android para diferentes pantallas

Veamos cómo implementarlo en Android:

  1. Comenzamos creando un nuevo proyecto y seleccionando como Activity Principal, de la galería que nos muestra Android Studio, Master/Detail Flow .

    Imagen 1 en Multiscreen, diseña en Android para diferentes pantallas
  2. En la siguiente pantalla del asistente, hay que tener en cuenta que Android Studio nos pregunta por algunos parámetros que le guiarán en la generación del código fuente que implementará esta funcionalidad. Android Studio creará una clase estática con objetos de prueba que serán utilizados para el menú lateral en el que se mostrará un listado de elementos (ListView). Podemos seleccionar el nombre que queremos darle a esos elementos (por defecto Items).

    Imagen 2 en Multiscreen, diseña en Android para diferentes pantallas
  3. A continuación analizamos el código que ha generado Android Studio.

En el Activity, ItemListActivity , nos encontramos con un layout > activity_item_list.xml . Dentro de este layout, nos encontramos con que existe un componente FrameLayout que contiene la siguiente línea que incluye a su vez otro layout:

<include layout="@layout/item_list" />

Pues bien, si intentamos acceder con la tecla Ctrl + Click a ese fichero, nos encontramos con que en realidad existen 2 ficheros con el mismo nombre.

Imagen 3 en Multiscreen, diseña en Android para diferentes pantallas

La diferencia entre ambos es que Android en tiempo de ejecución decido cuál de los 2 debe cargar , basándose en un parámetro que haya sido definido. En este caso el parámetro es la anchura de la pantalla. Si la anchura de la pantalla es menor de 900dp, se cargará el layout item_list.xml cuyo contenidos es el siguiente:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.RecyclerView 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:id="@+id/item_list"
    android:name="com.miguelcr.gridview.ItemListFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginLeft="16dp"
    android:layout_marginRight="16dp"
    app:layoutManager="LinearLayoutManager"
    tools:context="com.miguelcr.gridview.ItemListActivity"
    tools:listitem="@layout/item_list_content" />

Si por el contrario, la anchura de la pantalla del dispositivo es mayor o igual que 900dp, el layout que se carga será el fichero item_list.xml cuyo contenido es el siguiente:

<LinearLayout 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"
    android:layout_marginLeft="16dp"
    android:layout_marginRight="16dp"
    android:baselineAligned="false"
    android:divider="?android:attr/dividerHorizontal"
    android:orientation="horizontal"
    android:showDividers="middle"
    tools:context="com.miguelcr.gridview.ItemListActivity">

    <!--
    This layout is a two-pane layout for the Items
    master/detail flow.
    
    -->

    <android.support.v7.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/item_list"
        android:name="com.miguelcr.gridview.ItemListFragment"
        android:layout_width="@dimen/item_width"
        android:layout_height="match_parent"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        app:layoutManager="LinearLayoutManager"
        tools:context="com.miguelcr.gridview.ItemListActivity"
        tools:listitem="@layout/item_list_content" />

    <FrameLayout
        android:id="@+id/item_detail_container"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="3" />

</LinearLayout>

Como podemos apreciar en este segundo caso, se trataría de una tablet y por tanto, en una misma pantalla muestra el Menú lateral y la vista detalle del elemento seleccionado de la lista del menú lateral.

De esta ingeniosa manera se cargan layouts diferentes en tiempo de ejecución en función de si es una tablet o un handset.

Pero y ¿cómo sabes desde el Activity en cuál de los 2 casos nos encontramos? El código generado por Android Studio nos da la respuesta. Si intentamos obtener una referencia al elemento de la interfaz que se muestra para las tablets FrameLayout , cuyo id es item_detail_container , y la referencia no es nula, querrá decir que la aplicación se está ejecutando en una tablet, en otro caso, será un handset .

Las líneas de código para hacer esa comprobación son las siguientes:

if (findViewById(R.id.item_detail_container) != null) {
    // The detail container view will be present only in the
    // large-screen layouts (res/values-w900dp).
    // If this view is present, then the
    // activity should be in two-pane mode.
    mTwoPane = true;
}

Hasta aquí la explicación de cómo detectar y adaptar en tiempo de ejecución el diseño multiscreen en aplicaciones Android.

Estas son algunas de las empresas que ya confían en OpenWebinars

Profesores y profesionales

Nuestros docentes son profesionales que trabajan día a día en la materia que imparten

Conviértete en profesor de OpenWebinars