Diseño del modo horizontal y vertical de la aplicación en Android

Cada vez que el usuario cambia al modo horizontal, se encuentra un problema en el que algunos de los widgets se vuelven invisibles (como puede ver en la imagen a continuación) y, en este escenario, es necesario diseñar un diseño separado para el modo horizontal. Al final de este artículo podrás hacerlo.

Paso 1: Crea un nuevo proyecto en Android Studio:

• Consulte cómo crear un nuevo proyecto en Android Studio aquí: Android | ¿Cómo crear/comenzar un nuevo proyecto en Android Studio?
• Dar el Nombre de la aplicación como «Diseño de paisaje».
• Deje que el nombre de la actividad sea «Actividad principal» y el archivo de diseño como «actividad_principal.xml» o puede cambiar el nombre.

Paso 2: puede cambiar la combinación de colores del tema base de la aplicación

• Para cambiar los colores del tema de la aplicación base Vaya a la aplicación -> res -> valores -> colores.xml e invoque la siguiente combinación de colores.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#0f9d58</color>
    <color name="colorPrimaryDark">#006d2d</color>
    <color name="colorAccent">#55cf86</color>
</resources>

• Consulte la siguiente imagen si no tiene el archivo colors.xml.

Paso 3: modo de diseño de retrato

• Aquí, el diseño del retrato contiene LinearLayout simple, 1 EditText y 3 botones.
• Entonces, uno debe invocar el siguiente código XML simple para activity_main.xml.

<?xml version="1.0" encoding="utf-8"?>
<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:orientation="vertical"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">
  
    <!--This image is custom made GeeksforGeeks logo-->
    <ImageView
        android:layout_width="200dp"
        android:layout_height="150dp"
        android:layout_gravity="center"
        android:layout_marginTop="25dp"
        android:src="@drawable/gfg_logo_1" />
  
    <!--A simple EditText view-->
    <EditText
        android:id="@+id/edit_text_1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="35dp"
        android:layout_marginEnd="16dp"
        android:hint="Name" />
  
    <Button
        android:id="@+id/button_1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="30dp"
        android:layout_marginEnd="16dp"
        android:text="Button 1" />
  
    <Button
        android:id="@+id/button_2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="25dp"
        android:layout_marginEnd="16dp"
        android:text="Button 2" />
  
    <Button
        android:id="@+id/button_3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="25dp"
        android:layout_marginEnd="16dp"
        android:text="Button 3" />
  
</LinearLayout>

La interfaz de usuario de salida se parece a:

Paso 4: Diseñe el diseño para el modo horizontal

• Para diseñar el diseño para el modo horizontal, debemos agregar el directorio de recursos en la carpeta res del proyecto.
• Para crear el modo horizontal, haga clic derecho en la carpeta res -> Nuevo -> Directorio de recursos de Android. 
• Ahora aparecerá una ventana emergente. Seleccione Calificadores disponibles de orientación y luego el ícono » >> » en el lado derecho, luego seleccione Horizontal en Orientación de la pantalla.
• Ahora seleccione el diseño en el tipo de recurso, y luego deje que el nombre del directorio sea diseño-tierra y no lo cambie .
• Luego copie el archivo activity_main.xml de la carpeta de diseño a la carpeta de diseño-tierra. O puede crear un nuevo diseño por separado y rediseñar el diseño para el modo horizontal.
• Consulte el siguiente video si no puede obtener los pasos:

• Ahora invoque el siguiente código o también puede rediseñar su propio archivo de diseño para el modo horizontal.

<?xml version="1.0" encoding="utf-8"?>
<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:orientation="horizontal"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">
  
    <!--This image is custom made GeeksforGeeks logo-->
    <ImageView
        android:layout_width="250dp"
        android:layout_height="150dp"
        android:layout_gravity="center"
        android:src="@drawable/gfg_logo_1" />
  
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
  
        <!--A simple EditText view-->
        <EditText
            android:id="@+id/edit_text_1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginTop="10dp"
            android:layout_marginEnd="16dp"
            android:hint="Name" />
  
        <Button
            android:id="@+id/button_1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginTop="30dp"
            android:layout_marginEnd="16dp"
            android:text="Button 1" />
  
        <Button
            android:id="@+id/button_2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginTop="25dp"
            android:layout_marginEnd="16dp"
            android:text="Button 2" />
  
        <Button
            android:id="@+id/button_3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginTop="25dp"
            android:layout_marginEnd="16dp"
            android:text="Button 3" />
  
    </LinearLayout>
  
</LinearLayout>

La interfaz de usuario de salida se ve así (para ver esta salida, es necesario girar el dispositivo):

Método 2: otra forma de resolver este problema es envolver grupos de vistas completos dentro de la vista de desplazamiento (lo que significa que la vista de desplazamiento debe ser la vista raíz del diseño). Al hacer esto, no es necesario crear un diseño de diseño separado para el paisaje. modo.

• Esta implementación puede ayudar en algunos de los escenarios como, por ejemplo, la actividad que contiene solo widgets EditText o vistas de imágenes simples o vistas de cuadrícula, en este caso se puede adoptar este método.
• Sin embargo, no se recomienda usar este método en el modo horizontal (pero en algunos casos, como el punto anterior, se puede usar). Porque la experiencia del usuario no estaría a la altura de la aplicación.
• Para implementar eso, invoque el siguiente código en activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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"
    tools:ignore="HardcodedText">
  
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
  
        <!--This image is custom made GeeksforGeeks logo-->
        <ImageView
            android:layout_width="200dp"
            android:layout_height="150dp"
            android:layout_gravity="center"
            android:layout_marginTop="25dp"
            android:src="@drawable/gfg_logo_1" />
  
        <!--A simple EditText view-->
        <EditText
            android:id="@+id/edit_text_1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginTop="35dp"
            android:layout_marginEnd="16dp"
            android:hint="Name" />
  
        <Button
            android:id="@+id/button_1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginTop="30dp"
            android:layout_marginEnd="16dp"
            android:text="Button 1" />
  
        <Button
            android:id="@+id/button_2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginTop="25dp"
            android:layout_marginEnd="16dp"
            android:text="Button 2" />
  
        <Button
            android:id="@+id/button_3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginTop="25dp"
            android:layout_marginEnd="16dp"
            android:text="Button 3" />
  
    </LinearLayout>
  
</ScrollView>

Al invocar el código anterior, obtendrá el siguiente resultado:

Cosas a tener en cuenta al hacer el diseño separado para el modo horizontal.

• Si uno está diseñando el diseño para el modo horizontal, debe pensar y enmarcar los diseños horizontales en plataformas como Whimsical o puede optar por plataformas profesionales como Adobe XD .
• Al enmarcar los diseños, uno debe ver que los widgets se colocan de tal manera que deberían aumentar la experiencia del usuario (lo que significa que debería hacer que el usuario interactúe con la aplicación sin problemas).
• Decidir el diseño perfecto antes de convertir el diseño de estructura alámbrica en una implementación real en Android Studio debe hacerse de acuerdo con la complejidad del diseño de la aplicación.