Una guía completa para aprender XML para el desarrollo de aplicaciones de Android

XML significa Lenguaje de marcado extensible. XML es un lenguaje de marcado muy parecido al HTML que se usa para describir datos. Se deriva del lenguaje de marcado generalizado estándar (SMGL). Básicamente, las etiquetas XML no están predefinidas en XML. Necesitamos implementar y definir las etiquetas en XML. Las etiquetas XML definen los datos y se utilizan para almacenar y organizar datos. Es fácilmente escalable y simple de desarrollar. En Android, el XML se usa para implementar datos relacionados con la interfaz de usuario y es un lenguaje de marcado liviano que no hace que el diseño sea pesado. XML solo contiene etiquetas, mientras que la implementación solo debe invocarse. 

La sintaxis simple de XML es 

<tag_name>Hello World!</tag_name>

Entonces, en este artículo, hay una discusión profunda sobre cómo aprender y comprender qué es XML para el desarrollo de Android.

Conceptos básicos de la interfaz de usuario (UI)

Básicamente, en Android XML se usa para implementar los datos relacionados con la interfaz de usuario. Por lo tanto, es importante comprender la parte central de la interfaz de la interfaz de usuario con respecto a XML. La interfaz de usuario para una aplicación de Android se construye como la jerarquía de diseños principales, widgets . Los diseños son objetos ViewGroup o contenedores que controlan cómo se debe colocar la vista secundaria en la pantalla. Los widgets aquí son objetos de visualización, como botones y cuadros de texto. Considerando el siguiente ejemplo simple del archivo activity_main.xml.

<?xml version="1.0" encoding="utf-8"?>
<!--ViewGroup1-->
<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:clipToPadding="false"
    android:orientation="vertical"
    android:padding="24dp"
    tools:context=".MainActivity">
  
    <!--TextView1 widget inside ViewGroup1-->
    <TextView
        style="@style/TextAppearance.MaterialComponents.Headline5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="GEEKSFORGEEKS"
        android:textColor="@color/green_500" />
  
    <!--TextView2 widget inside ViewGroup1-->
    <TextView
        style="@style/TextAppearance.MaterialComponents.Headline6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="Enter the user information"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
  
    <!--ViewGroup2-->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:clipToPadding="false">
  
        <!--EditText1 widget inside ViewGroup2-->
        <EditText
            android:id="@+id/editText1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Enter first name" />
  
        <!--EditText2 widget inside ViewGroup2-->
        <EditText
            android:id="@+id/editText2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/editText1"
            android:hint="Enter last name" />
  
        <!--Button widget inside ViewGroup2-->
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/editText2"
            android:layout_alignParentEnd="true"
            android:text="Submit" />
  
    </RelativeLayout><!--End of ViewGroup2-->
  
</LinearLayout><!--End of ViewGroup1-->

Interfaz de usuario de salida:

En el ejemplo anterior del archivo XML, hay 2 grupos de vista, uno es LinearLayout y otro es RelativeLayout y TextView1 y TextView2 son widgets secundarios bajo ViewGroup1 que es LinearLayout. EditText1 , EditText2 y Button son los widgets secundarios en ViewGroup2 que es RelativeLayout. ViewGroup2(RelativeLayout) está anidado en ViewGroup1, lo que produce la siguiente jerarquía.

De la jerarquía, se ha observado que cada widget como EdtText, TextView o Button es uno de los View. Estas vistas están contenidas dentro de ViewGroup, como RelativeLayout, LinearLayout, FrameLayout, etc.

Diferentes tipos de archivos XML utilizados en Android Studio

Diferentes archivos XML sirven para diferentes propósitos en Android Studio. La lista de varios archivos XML en Android Studio con sus propósitos se analiza a continuación.

1. Diseño de archivos XML en Android

Los archivos XML de diseño son responsables de la interfaz de usuario real de la aplicación. Contiene todos los widgets o vistas como Botones, TextViews, EditTexts, etc. que se definen en ViewGroups. La ubicación de los archivos de diseño en Android es:

aplicación -> src -> principal -> res -> diseño

La carpeta contiene los archivos de diseño para la actividad respectiva, fragmentos. El diseño básico del es el siguiente para activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<!--ViewGroup1-->
<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:clipToPadding="false"
    android:orientation="vertical"
    android:padding="24dp"
    tools:context=".MainActivity">
  
    <!--TextView1 widget inside ViewGroup1-->
    <TextView
        style="@style/TextAppearance.MaterialComponents.Headline5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="GEEKSFORGEEKS"
        android:textColor="@color/green_500" />
  
    <!--TextView2 widget inside ViewGroup1-->
    <TextView
        style="@style/TextAppearance.MaterialComponents.Headline6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="Enter the user information"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
  
    <!--ViewGroup2-->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:clipToPadding="false">
  
        <!--EditText1 widget inside ViewGroup2-->
        <EditText
            android:id="@+id/editText1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Enter first name" />
  
        <!--EditText2 widget inside ViewGroup2-->
        <EditText
            android:id="@+id/editText2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/editText1"
            android:hint="Enter last name" />
  
        <!--Button widget inside ViewGroup2-->
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/editText2"
            android:layout_alignParentEnd="true"
            android:text="Submit" />
  
    </RelativeLayout><!--End of ViewGroup2-->
  
</LinearLayout><!--End of ViewGroup1-->

2. Archivo AndroidManifest.xml

Este archivo describe la información esencial sobre la aplicación, como los nombres de los paquetes de la aplicación que coinciden con los espacios de nombres del código, un componente de la aplicación como actividades, servicios, receptores de transmisión y proveedores de contenido. Permiso requerido por el usuario para las características de la aplicación también mencionadas en este archivo XML. Ubicación del archivo AndroidManifest.xml:

aplicación -> origen -> principal

Un código típico dentro de AndroidManifest.xml con permiso de Internet se ve así:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.adityamshidlyali.gfgarticle">
  
    <!--internet permission from the user-->
    <uses-permission android:name="ANDROID.PERMISSION.INTERNET" />
  
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.GFGArticle">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
  
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
  
</manifest>

3. archivo strings.xml

Este archivo contiene textos para todos los widgets de TextViews. Esto permite la reutilización del código y también ayuda en la localización de la aplicación con diferentes idiomas. Las strings definidas en estos archivos se pueden usar para reemplazar todo el texto codificado en toda la aplicación. Ubicación del archivo strings.xml

aplicación -> src -> principal -> res -> valores

Un código típico dentro de strings.xml se ve así:

<resources>
    <string name="app_name">GFG Article</string>
    <string name="gfg_heading">GEEKSFORGEEKS</string>
    <string name="settings_label">settings</string>
</resources>

4. archivo themes.xml

Este archivo define el tema base y los temas personalizados de la aplicación. También solía definir estilos y busca la UI (interfaz de usuario) de la aplicación. Al definir estilos, podemos personalizar cómo se ven las vistas o los widgets en la interfaz de usuario. Ubicación del archivo styles.xml

aplicación -> src -> principal -> res -> valores

Un código típico dentro de themes.xml se ve así:

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.GFGArticle" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/green_500</item>
        <item name="colorPrimaryVariant">@color/green_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

5. Archivos XML dibujables

Estos son los archivos XML que proporcionan gráficos a elementos como el fondo personalizado para los botones y sus efectos de onda, también se pueden crear varios degradados. Esto también contiene los gráficos vectoriales como iconos. Usando estos archivos, se pueden construir diseños personalizados para EditTexts. La ubicación de los archivos Drawable es:

aplicación -> src -> principal -> res -> dibujable

Un código típico dentro de my_custom_gradient.xml se ve así:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:centerColor="@color/green_500"
        android:endColor="@color/green_700"
        android:startColor="@color/green_200" />
</shape>

que produce el siguiente efecto de gradiente:

6. archivo colores.xml

El archivo colors.xml es responsable de contener todos los tipos de colores necesarios para la aplicación. Puede ser el color primario de la marca y sus variantes y el color secundario de la marca y sus variantes. Los colores ayudan a mantener la marca de las aplicaciones. Por lo tanto, los colores deben decidirse con cautela, ya que son responsables de la experiencia del usuario. Los colores deben definirse en formato de código hexadecimal. Ubicación del archivo colors.xml:

aplicación -> src -> principal -> res -> valores

Un código típico dentro de custom.xml se ve así:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="purple_200">#FFBB86FC</color>
    <color name="purple_500">#FF6200EE</color>
    <color name="purple_700">#FF3700B3</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
  
    <!--custom colors-->
    <color name="green_200">#55cf86</color>
    <color name="green_500">#0f9d58</color>
    <color name="green_700">#006d2d</color>
</resources>

7. archivo dimensiones.xml

Como el propio nombre del archivo sugiere que el archivo es responsable de contener todas las dimensiones de las vistas. puede ser la altura del botón, el relleno de las vistas, el margen de las vistas, etc. Las dimensiones deben tener el formato de valores de densidad de píxeles (dp). Lo que reemplaza todos los valores dp codificados para las vistas. Este archivo debe crearse por separado en la carpeta de valores. Ubicación para crear el archivo dimens.xml:

aplicación -> src -> principal -> res -> valores

Un código típico dentro de dimens.xml se ve así:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="button_height">58dp</dimen>
    <dimen name="default_start_margin">16dp</dimen>
    <dimen name="default_end_margin">16dp</dimen>
    <dimen name="card_view_elevation">12dp</dimen>
</resources>