Nociones Básicas Android/xml

Buenas amigos, en el tema anterior estuvimos viendo como compilar y ejecutar nuestra app. En este nuevo tema vamos a ver algunos conceptos básicos que tenemos que ir conociendo para no perdernos en lo temas posteriores a la hora de ir vendo el código xml de nuestras activitys.



Bien, para empezar debemos saber que toda activity está compuesta inicialmente por un layout. El layout nos permite posicionar nuestros componentes en nuestra pantalla y es la base de la que parte toda aplicación. En código xml lo veríamos así:

Bien, cuando creamos nuestra activity, se nos crea un layout para esa activity, en este caso "RelativeLayout" (en el próximo tema veremos más a fondo los distintos layout), En el activity se nos generan por defecto ciertas lineas de código que le dan ciertas cualidades al layout. Es posible que aquellos que hayan visto algo de HTML y CSS vean conceptos y lineas de código familiares:

• xmlns:android="": Esta linea nos proporciona un espacio para el nombre, en caso de no existir esta linea, el layout no podrá ser construido de la forma correcta y darnos un fallo en nuestra app. Al pasarle la cadena "http://schemas.android.com/apk/res/android" le estamos indicando donde buscar las etiquetas que vamos a utilizar.
• xmlns:tools="": Esta linea nos proporciona las herramientas necesarias basándose en el concepto anterior descrito.
• android:layout_width: Opción que nos indica el ancho que va a tener nuestro componente. Tiene varias opciones:
• Valor: Podemos agregar una cadena con valor numérico y ajustar el ancho a nuestro gusto.
• fill_parent o match_parent: Estas 2 constantes son la misma, una se utiliza en niveles anteriores a API 8 (match_parent) y la otra en versiones superiores a API 8(fill_parent). Se encarga de que nuestro componente sea tan ancho como nuestra activity, quitando el padding que puedan tener.
• wrap_parent: Esta constante nos permite poner nuestro componente tan ancho como para mostrarnos su contenido menos el padding.
• android:layout_height: Opción que nos indica el alto que va a tener nuestro componente. Tiene varias opciones y son exactamente iguales que la anterior, así que no vamos a comentarla.
• En las siguientes 4 lineas se proporciona el padding que va a tener el layout. El padding es el espacio que habrá entre los componentes y los bordes del layout.
• andrioid:paddingBottom: Es el espacio que existirá entre el borde inferior del componente (en este caso el layout)  y el componente que contenga.
• android:paddingLeft: Es el espacio que existirá entre el borde izquierdo del componente (en este caso el layout)  y el componente que contenga.
• android:paddingTop: Es el espacio que existirá entre el borde superior del componente (en este caso el layout)  y el componente que contenga.
• android:paddingRight: Es el espacio que existirá entre el borde derecho del componente (en este caso el layout)  y el componente que contenga.
• Estas opciones suelen ir ligadas a valores establecidos en el archivo dimension:
• "@dimens/activity_vertical_margin": Cuando os encontráis una arroba seguida de un nombre, significa que va a acceder a un valor contenido en un archivo, en este caso "dimens", pero ¿qué valor va a buscar?. El valor a utilizar se le proporciona a la cadena después del nombre del archivo seguido de una barra, en nuestro caso el valor sería "activity_vertical_margin". Queda claro que el valor que obtenemos se encuentra en "activity_vertical_margin" dentro del archivo "dimens".
• tools:context=".ConceptosBasicosActivity": Esta etiqueta es la asociación de nuestra clase con la Activity.

Bien, ya vais conociendo como funciona nuestros componentes, android nos permite personalizar nuestros componentes de forma muy dinámica, podemos utilizar otras opciones para cambiar el fondo, para darle una orientación a la pantalla, e incluso eventos(lo veremos en un futuro).

Bueno, esto es básicamente lo que ocurre con el layout, si nosotros quisiéramos incluir un componente en nuestro layout, por ejemplo un TextView, haríamos lo siguiente:

Podéis observar que he creado la etiqueta TextView dentro de los limites de nuestro layout. las etiquetas de nuestros componentes no se cierran como las de los layout, <RelativeLayout>...<RelativeLayout>, si no que sus acciones o funciones van dentro de la misma etiqueta, <TextView .../>.

En la etiqueta TextView podemos ver algunas opciones para el espacio que ocupara en nuestro layout y que vimos anteriormente, y otras nuevas y más comunes en los componentes:

• android: id="@+id/textView1": Esta linea es muy importante ya que establecerá el id único para el componente. Anteriormente dije que cuando existía una @ a principio de palabra, era el archivo a buscar, en este caso "id" es una clase estática de la clase "R", dentro de la carpeta gen. Bien, cuando existe una arroba y posteriormente un símbolo "+" y posteriormente "id", significa que se va a añadir una variable de tipo id a ese componente.
• android:layout_marginTop: El margen existente con la parte superior del componente y el anterior componente.
• android:layout_alignParentLeft: Esta opción es booleana, con lo que tendremos que elegir entre "true" y "false".
• True:  El componente se alinea con la parte izquierda del componente padre (RelativeLayout).
• False: No se alinea con la parte izquierda del componente padre (RelativeLayout).
• android:layout_alignParentTop: Esta opción es booleana, con lo que tendremos que elegir entre "true" y "false":
• True: El componente se alinea con la parte superior del componente padre (RelativeLayout).
• False: No se alinea con la parte superior del componente padre (RelativeLayout)
• android:text="": En esta opción nos mostrará cualquier texto en nuestro componente. Veréis que me lanza un aviso, ya que no es la forma correcta de ponerla, es legal, y nos pillará el texto, pero no es la correcta.
• La forma correcta de mostrar un texto es creando una referencia en el archivo string.xml de la carpeta values y posteriormente llamarla de la siguiente manera: "@string/referencia". Esta sería la forma más correcta. La iremos viendo conforme pasan los temas.

Bien, podéis ver que casi todas las opciones que hemos puesto a nuestras etiquetas consisten en su relación espacial con el resto de componentes, pero tenéis cantidad de opciones para cambiar la fuente, el estilo, y demás opciones personalizables que puedan hacer lucir una app. 

Bueno, resumiendo:

• Cada vez que creamos una activity, se nos proporcionará un contenedor para los distintos componentes que vayamos a utilizar (layout).
•  Dentro del layout vamos poniendo las distintas opciones que queramos que tenga y las etiquetas de nuestros componentes.
• Dentro de las etiquetas de los componentes podemos poner sus distintas opciones.
• android:id="@id/cualquierID": Hace referencia al id del componte.
• android:id="@+id/cualquierID": Nos agregará un id único de tipo id.

Bien, por ahora lo vamos a dejar aquí, en temas posteriores iremos profundizando más acerca de los componentes gráficos de android.

Un saludo.