Layouts de Android

Primer proyecto

File → new → Android → Android Proyect → Create new proyect in Workspace → Lo llamamos a_hola_mundo

Esto crea un proyecto Android con un Activity que será el punto de inicio de la aplicación.

Error típico: An SDK Target must be specified → Para solventarlo → window → preferences → Android

Activity

Es una clase java. Presenta su propia interfaz de usuario (ventana).

Es cada una de las pantallas que componen una aplicación.

Uno de los activities es el que lanza la aplicación (lanzador)

Hola Mundo – Activity

Este es el código del Activity que se genera por defecto al crear nuestro proyecto.

public class A_holaMundoActivity extends Activity{
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}

R (resources) es una clase java (ruta gen/R.java) que contiene constantes que apuntan a la ubicación de los recursos utilizados en nuestra aplicación.

R.layout.main contiene la ubicación del XML que contiene la apariencia de nuestra activity. Está accesible desde res/layout/main.xml. En eclipse, será posible modificar dicha ubicación mediante un editor gráfico o mediante código.

Hola Mundo – Layout

Por defecto, la propiedad android:text del main.xml apunta a una variable hello, definida en res/values/string.xml que contiene su valor. También podría haber puesto directamente el texto “Hola Mundo”, en vez de una constante.

main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
<TextView  
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
	android:text="@string/hello"
    />
</LinearLayout>
strings.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="hello">Hello World, A_holaMundoActivity!</string>
    <string name="app_name">A_holaMundo</string>
</resources>

Unidades de medida

  • sp: scale-independent pixels. Es similar a la unidad dp, pero su tamaño variará dependiendo de las preferencias del usuario y de la densidad de la pantalla. Lo utilizarás para los tamaños de textos.
  • dp: density-independent pixels. Lo utilizarás para todo lo demás. Un dip es lo mismo que un dp, habitualmente utilizamos el término dp, porque se parece más al término sp. Estas unidades son relativas a una pantalla de 160 dpi(dots per inch); luego un dp equivale a un px en este tipo de pantalla.
  • px: pixel
  • in: inches (pulgadas). Basadas en el tamaño físico de la pantalla.
  • mm: milímetros. Basados en el tamaño físico de la pantalla.
  • pt: points. 1/72 de una pulgada.

Ejercicio Layout

Hacer una aplicación con un activity que llame a un layout llamado nuevo_layout.xml que tenga dos cuadros de texto.

En el primero se muestra el texto “Hola Mundo”. Dicho texto será una variable definida en strings.xml. Se mostrará en un tamaño superior al normal.

En el segundo se muestra el texto “Adios Mundo”. Dicho texto estará escrito directamente en la propiedad android:text. Se mostrará en rojo y en negrita.

Probar a introducir otros componentes, modificar sus propiedades y ver el efecto que esto tiene

Notas:

  • Para crear un nuevo layout: botón derecha sobre la carpeta res/layout en el panel de estructura de proyecto → new → Layout Resource File

Crear una interfaz de usuario por código

public class InterfazUSuarioActivity extends AppCompatActivity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        TextView texto = new TextView(this);
        texto.setText("Hola Mundo");
        setContentView(texto);
    }
}

Al instanciar un objeto de la clase TextView le pasamos como parámetro el Activity que se va a encargar de gestionarlo.

La clase Activity es una subclase de Context.

El contexto es una variable que almacena el estado del teléfono (brillo, conectividad, batería…). Un activity y un servicio heredan de Context. Por tanto, también son contextos.

Como la clase InterfazUSuarioActivity es una subclase de Activity, también es de tipo context. Por ello, puedes pasar this como contexto del TextView.

Tipos de layout

  • Constraint (restricción) Layout
    Nota: Si tenemos algún elemento con su alto o ancho ocupando toda la pantalla o unas dimensiones demasiado grandes, los elementos desaparecerán por la derecha o el fondo de la pantalla.
  • Linear Layout
  • RelativeLayout: Los elementos se posicionan en función de los que tienen al lado. Ha sido sustituído por el Constraint Layout
  • FrameLayout
    Los elementos se superponen unos con otros. No es un layout típico.
  • TableLayout
    Coloca los elementos siguiendo una distribución de tabla
  • AbsoluteLayout
    Deprecated

Constraint Layout

Alineas cada vista en función de las que tienen al lado o de la que la envuelve.

Cada vista tiene al menos dos restricciones: horizontal y vertical. Estas restricciones está conectada con el layout padre o una línea de guía invisible.

Generalmente, tenderemos a realizar este layout con las herramientas de la interfaz visual de android studio.

Añadiremos las restricciones (constraints) arrastrando y soltando a partir de los puntos azules ubicados en los cuatro puntos cardinales.

Layouts de Android 1

Linear Layout (el más sencillo)

Los elementos se irán apilando horizontal o verticalmente en función del parámetro orientation

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
	<AnalogClock 
		android:layout_width="wrap_content"
		android:layout_height="wrap_content" />
	<CheckBox
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="un checkbox" />
	<Button
		android:layout_width="wrap_content"
		android:layout_height="wrap_content" 
		android:text="un botón" />
	<TextView
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="un TextView" />
</LinearLayout>
Layouts de Android 2

Table Layout

Se utiliza la etiqueta TableRow cada vez que queremos insertar una nueva línea.
Utilizaré el atributo android:stretchColumns=»*» para que las celdas ajusten su tamaño hasta alcanzar los límites de la pantalla.

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
<TableRow>
	<AnalogClock 
	android:layout_width="wrap_content"
	android:layout_height="wrap_content" />
	<CheckBox
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="un checkbox" />
</TableRow>
<TableRow>
	<Button
	android:layout_width="wrap_content"
	android:layout_height="wrap_content" 
	android:text="un botón" />
	<TextView
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="un TextView" />
</TableRow>
</TableLayout>
Layouts de Android 3

GridLayout

<GridLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
      android:columnCount="2">
<AnalogClock 
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/un_checkbox" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" 
android:text="@string/un_boton" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/un_textview" />
</GridLayout>
Layouts de Android 4

Frame Layout (posiciona todos los elementos usando todo el contenedor, sin distribuirlos espacialmente)

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
<AnalogClock 
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="un checkbox" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" 
android:text="un botón" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="un TextView" />
</FrameLayout>
Layouts de Android 5

Ejercicio Linear Layout

Utilizaremos un Linear Layout y setearemos su propiedad gravity.

El fichero res/strings.xml ha de tener el siguiente contenido:

<?xml version="1.0" encoding="utf-8"?>
<resources>
	<string name="app_name">Ejercicio Layout</string>
	<string name="pablomonteserin">Pablo Monteserín</string>
	<string name="menu1">Acerca de mí</string>
	<string name="menu2">Galería de videos</string>
	<string name="menu3">Galería de fotos</string>
	<string name="menu4">Contacto</string>
</resources>
Layouts de Android 6

Ejercicio: TableLayout

Android permite diseñar una vista diferente para la configuración horizontal y vertical.

A partir del ejercicio anterior, crea la carpeta res/layout-land y crea en ella una vista con el mismo nombre que la que está en la carpeta layout.

Para ver la carpeta land recién creada: panel Project → Packages.

Habrá que usar un TableLayout dentro de un LinearLayout. Para que los elementos del TableLayout ocupen todo el ancho de la celda, utilizar el siguiente atributo: android:stretchColumns=»*».

Todos los elementos visuales del layout (los layouts, los Buttons y el TextView) deben tener un layout_width y un layout_height.

Layouts de Android 7

Ejercicio: strings.xml e internacionalizacion

Android utiliza una lista de sufijos para expresar recursos alternativos. Estos sufijos pueden hacer referencia a la orientación del dispositivo, al lenguaje, la región, la densidad de pixeles, la resolución, etc.

Crea el siguiente fichero en el que traducirás todas las cadenas al inglés:
res/values-en/strings.xml

Para cambiar el idioma en el dispositivo:
Ajustes → Idioma y texto → Seleccionar idioma

Contenido scrollable

Bastará con envolver el Layout dentro de nuestro activity_main.xml por un ScrollView. El ScrollView sólo puede tener un hijo.

Ejercicio: Constraint Layout

Layouts de Android 8

AndroidManifest.xml

Describe las funcionalidades y los permisos que serán necesarios, etc. de la aplicación.
Para editarlo recurriremos a las vistas xml y no a las vistas gráficas que nos da eclipse.
Las siguientes líneas estarán contenidas en el nodo del activity que se lanzará en primer lugar al arrancar la aplicación:

<intent-filter>
	<action android:name="android.intent.action.MAIN" />
      <category android:name="android.intent.category.LAUNCHER" />
</intent-filter>

Cuando en la consola de trazas obtengo un «Class Not Found Exception»:
o el nombre de la clase o el nombre del paquete están mal en el manifest. Lo ideal es que en el manifest la definición del paquete coincida con el paquete raíz de todos los activities.

Si tenemos el siguiente error en las trazas:
android.content.ActivityNotFoundException: Unable to find explicit activity class…; have you declared this activity in your AndroidManifest.xml?

Falto declarar la segunda activity. Ponemos la siguiente línea en el AndroidManifest.xml

<activity android:name=".Second" />

R

Todos los recursos (xml, drawable, etc.) se empaquetan en un archivo R que es una especie de índice de recursos.

android:id=»@+id/item2″

La arroba significa que nos estamos refiriendo al archivo de recursos R.
El + significa que estamos añadiendo un nuevo recurso.

Cada vez q realizo un cambio en la estructura de mi proyecto (carpetas, documentos xml, atributos de dichos documentos, etc) android lo comprueba. Si el cambio arrojase un error es probable que dicho error apareciese reflejado en la pestaña Console

← Usando Gradle para la gestión de dependencias en Android
Insertar imágenes en un proyecto de Android →