Curso de Android

Android API

http://developer.android.com/index.html → Develop → Reference

http://developer.android.com/reference/packages.html

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.

Algunos atajos útiles del teclado para el emulador

Esc: back
F2: menu
Ctrl + F12 Cambiar orientación

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="fill_parent"
    android:layout_height="fill_parent"
    >
<TextView  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
	android:text="@string/hello"

    />
</LinearLayout>

string.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.
• dip: 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

Crear una interfaz de usuario por código

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

Un contexto es un manejador del sistema que proporciona servicios como acceso a bases de datos, etc.

La clase Activity es una subclase de Context.

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

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

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

Tipos de layout

• Linear Layout
  Para definir si los elementos se irán apilando verticalmente u horizontalmente:

  
  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation=vertical android:layout_width="fill_parent" android:layout_height="fill_parent">
  </LinearLayout>
  

• 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.
• RelativeLayout
  Los elementos se posicionan en función de los que tienen al lado.
• 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

Linear Layout (el más frecuente)

	
<?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>
	

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>
	

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>
		
	

Relative Layout
permite comenzar a situar los elementos en cualquiera de los cuatro lados del contenedor e ir añadiendo elementos pegados a estos

	
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
<AnalogClock 
android:id="@+id/AnalogClock01"
android:layout_width="wrap_content"
android:layout_height="wrap_content" 
android:layout_alignParentTop="true"/>
<CheckBox
android:id="@+id/CheckBox01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="un checkbox" 
android:layout_below="@+id/AnalogClock01"/>
<Button
android:id="@+id/Button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" 
android:text="un botón" 
android:layout_below="@+id/CheckBox01"/>
<TextView
android:id="@+id/TextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="un TextView" />
</RelativeLayout>

	

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>

	

fill_parent, match_parent y wrap_content

Nota: en algunos ejemplos es posible que veamos fill_parent en vez de match_parent.

Realmente son la misma cosa, pero a partir de la API 8 se introdujo el término match_parent y ese es el que debe usarse.

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>
	

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.

Para cambiar la orientación de la pantalla podremos pulsar ctrl+F12

Habrá que usar un TableLayout dentro de un LinearLayout. Para el tableLayout utilizar el siguiente atributo: android:stretchColumns="*". Este estira todas (*) las columnas para ocupar el ancho de la pantalla.

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

Ejercicio – strings.xml e internalizacion

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.

Para ver la lista de sufijos, al pulsar ctrl +n → Android XML values File → next → seleccionamos el qualifer (sufijo)

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.

Nota:
No pondremos un ListView dentro de un ScrollView salvo que no nos quede mas remedio, ya que ambos componentes son engorrosos de integrar.

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 {com.pablomonteserin/com.pablomonteserin.Second}; 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

Imágenes

Tamaños de imágenes y layouts en función de la pantalla dónde serán reproducidos

	
res/drawable-mdpi/my_icon.png 		//bitmap for medium density
res/drawable-hdpi/my_icon.png 		//bitmap for high density
res/drawable-xhdpi/my_icon.png 		//bitmap for extra high density

res/layout/my_layout.xml 			//layout for normal screen size (“default”)
res/layout-small/my_layout.xml 		//layout for small screen size
res/layout-large/my_layout.xml 		//layout for large screen size
res/layout-xlarge/my_layout.xml 		//layout for extra large screen size
res/layout-xlarge-land/my_layout.xml 	//layout for extra large in landscape orientation
	

Ponemos los recursos en estas carpetas y será el sistema el que decida cuál utilizar.

Ejercicio - Cargar una imagen

Debemos copiar la imagen en la carpeta drawable-hdpi.

Cargar la imagen en un ImageView:
Introducimos un objeto de tipo ImageView en el xml y lo vinculamos a la imagen guardada en drawable.

Cargar la imagen en un ImageButton:
Introducimos un elemento de tipo ImageButton en el xml y lo vinculamos a la imagen guardada en drawable.

Cambiar dinámicamente la foto del ImageView anterior:

	
ImageView iv = (ImageView) findViewById(R.id.imageView1);
iv.setImageResource(R.drawable.cara);
	

Background repeat

Por defecto una imagen se deformará para ocupar las dimensiones del ImageView, en el caso de que la imagen sea mas pequeña. Si lo que queremos es que la imagen se repita:

	
activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:background="@drawable/background_repeat
...

background_repeat.xml
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android" 
   android:src="@drawable/icon"
   android:tileMode="repeat"
    />
	

Consola de trazas

Poner nuestras propias trazas:

		
Log.d("total", cadenaTexto);
	
	

Si quiero mostrar por las trazas un número:

	
Log.d("total", ""+numeroRegistros);
	

Para ver las trazas:
Window → show view → other → logcat, devices (debo seleccionar el dispositivo del que quiero ver las trazas)

AndroidManifest.xml → Debbuggable: true

Ejercicio - Hacer que un radio button pertenezca a un RadioGroup para que no pueda haber dos seleccionados simultáneamente.

	
<RadioGroup android:layout_width="fill_parent" android:layout_height="wrap_content">
	<RadioButton android:text="RadioButton" android:id="@+id/radioButton1" android:layout_width="wrap_content" android:layout_height="wrap_content"></RadioButton>
	<RadioButton android:text="RadioButton" android:id="@+id/radioButton2" android:layout_width="wrap_content" android:layout_height="wrap_content"></RadioButton>
	<RadioButton android:text="RadioButton" android:id="@+id/radioButton3" android:layout_width="wrap_content" android:layout_height="wrap_content"></RadioButton>
	<RadioButton android:text="RadioButton" android:id="@+id/radioButton4" android:layout_width="wrap_content" android:layout_height="wrap_content"></RadioButton>
</RadioGroup>
	

Radiogroup es un layout, y como ocurre con todos los layouts, habrá que definir su ancho y alto.

Ejercicios estilos

Ejercicio - Cambiar dinámicamente el color o la imagen de fondo de un layout

	
milayout= findViewById(R.id.miLayout); 
milayout.setBackgroundColor(Color.rgb(151, 19, 19)); 
//milayout.setBackgroundResource(R.drawable.background_img);
	

Ejercicio - Poner un degradado a un layout

res/drawable/degradado.xml

	
<?xml version="1.0" encoding="utf-8"?>
<shape
  xmlns:android="http://schemas.android.com/apk/res/android">
	<gradient android:startColor="#FFFFFF"
	android:endColor="#0000FF"
	android:angle="270"/>    
</shape>
	

En el .java

	
View mlayout = findViewById(R.id.main_layout);
mlayout.setBackgroundResource(R.drawable.degradado);
	

Ejercicio - Maquetar un botón

res/drawable/rect.xml

		
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
	android:shape="rectangle">
	<gradient
		android:startColor="#FFFF0000"
		android:endColor="#80FF00FF"
		android:angle="45"/>
	<!--  Este es el padding para colocar el texto -->
	<padding
		android:left="7dp"
		android:top="7dp"
		android:right="7dp"
		android:bottom="7dp" />		
	<corners android:radius="10dp" />
</shape>


main.xml
<Button android:text="Button" android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/rect" />

		
	

main.xml

	
<Button android:text="Button" android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/rect" />
	

Ejercicio – usar colores predefinidos

rest/layout/main.xml

	
<TextView  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="@string/hello"
    android:textSize="30dp"
    android:textColor="@>colorred"
    />
	

res/values/loquesea.xml (también podría modificar el styles.xml)

	
<?xml version="1.0" encoding="utf-8"?>
<resources>
	<color name="red">#ff0000</color>
	<color name="green">#00ff00</color>
	<color name="blue">#0000ff</color>
</resources>
	

Ejercicio - Cargar las propiedades de un elemento desde un xml

Creamos el xml:
New → Android XML file → what type of resource would you like to create? → Values

res/layout/main.xml
<TextView  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="@string/hello" 
    style="@style/code"/>
	

res/values/loquesea.xml (también podría modificar el styles.xml)
<?xml version="1.0" encoding="utf-8"?>
<resources>
	<style name="code" parent="@android:style/TextAppearance">
		<item name="android:textSize">40sp</item>
		<item name="android:typeface">monospace</item>
		<item name="android:textColor">#0000FF</item>
	</style>    
</resources>
	

Ejercicio - crear un estilo que sobrescriba el anterior.

res/layout/loquesea.xml
<TextView 
    android:text="TextView" 
    android:id="@+id/textView1" 
    style="@style/code.red" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content"></TextView>
	

res/values/loquesea.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
	<style name="code" parent="@android:style/TextAppearance">
			<item name="android:textSize">40sp</item>
			<item name="android:typeface">monospace</item>
			<item name="android:textColor">#0000FF</item>
	</style>
	<style name="code.red">
		<item name="android:textColor">#FF0000</item>
	</style>    
</resources>	
	

Ejercicio – Cargar un theme de los que vienen por defecto en android

Para aplicar un theme a toda la aplicación añado la línea en rojo en el AndroidManifest.xml:

		
<application android:icon="@drawable/icon" android:label="@string/app_name"
android:theme="@android:style/Theme.Dialog">	
		
	

Para aplicarlo a un activity en concreto:

	
<activity android:name=".AcercaDe"
	android:label="@string/app_name"
	android:theme="@android:style/Theme.Dialog">
</activity>
	

Puedo ver cómodamente los themes disponibles desplegando la combo correspondiente en el layout.xml

Ejercicio → Cargar mi propio theme

New → Android XML file → what type of resource would you like to create? → Values

	
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style parent="@android:style/Theme.Dialog" name="myTheme">
    	<item name="android:textColor">#FF0000</item>
    </style>
</resources>
	

Cargamos el theme creado por nosotros utilizando el código pintado de rojo en el AndroidManifest.xml:

	
<application android:icon="@drawable/icon" android:label="@string/app_name"
android:theme="@style/myTheme">
	

Ejercicio

Crear un theme que herede de Theme.Dialog y hacer que toda la aplicación lo implemente.

El tema tendrá los siguientes estilos:

	
android:textColor="#00FF00"
android:typeface="monospace"
	

Iconos

Recomendaciones sobre cómo hacer los iconos en Android: http://developer.android.com/guide/practices/ui_guidelines/icon_design.html

Arreglar redimensionamientos de fotografías

En el caso de un botón con esquinas redondeadas, no querré que las esquinas se deformen. Por tanto haré que las esquinas no caigan dentro del área sombreada (en verde o rosa).

El área sombreada en verde se redimensiona en una dimensión.
El área sombreada en rosa se redimensiona en dos dimensiones.

Carpeta de Android → tools → draw9patch → Arrastramos la imagen que queremos tratar adentro del área con la flecha → desmarcamos la casilla “show lock” → marco la check de “show patches” → en los bordes de la imagen aparece una zona transparente, llevo el cursor hacia allí.

Pulsando shift elimino área sombreada.

Finalmente salvo la imagen en la carpeta de imágenes de mi proyecto.

Dibujar

Ejercicio - Dibujar un círculo

res/layout/main.xml
...
<com.pablomonteserin.Vista android:layout_width="match_parent" android:layout_height="match_parent" />
…

com.pablomonteserin.Vista.java
public class Vista extends View{
	Paint pincel;
	int color;
	public Vista(Context context){
		super(context);
		iniciar();
	}
	public Vista(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		iniciar();
	}
	public Vista(Context context, AttributeSet attrs) {
		super(context, attrs);
		iniciar();
	}

	private void iniciar(){
		pincel = new Paint();
		//Hay varias formas de definir los colores	
		//color = Color.BLUE;
		//color = Color.argb(127, 0, 255, 0);
		//color = 0x7F00FF00;
		color = getResources().getColor(R.color.color_circulo);
		pincel.setColor(color);
		pincel.setStrokeWidth(8);
		pincel.setStyle(Paint.Style.STROKE);
	}
	protected void onDraw(Canvas canvas){
		super.onDraw(canvas);
		canvas.drawCircle(150, 150, 100, pincel);
	}
}

	

La clase vista debe tener tres constructores:
El primero es para crear la vista desde código. Los otros dos son para inflar la vista llamándola desde un fichero xml.

Hay que procurar no hacer ninguna instancia e incluso tener el mínimo código posible dentro del método onDraw(), ya que será llamado varias veces por segundo y relentizaría la aplicación.

Ejercicio - Dibujar un Path (trazo)

trazo y pincel son dos objetos de las clases Path y Paint respectivamente.

		
protected void onDraw(Canvas canvas){
	super.onDraw(canvas);
	trazoaddCircle(150, 150, 100, Direction.CCW);
	pincel.setColor(Color.BLUE);
	pincel.setStrokeWidth(8);	
	pincel.setStyle(Style.STROKE);
	canvas.drawPath(trazo, pincel);
	pincel.setStrokeWidth(1);
	pincel.setStyle(Style.FILL);
	pincel.setTextSize(20);
	pincel.setTypeface(Typeface.SANS_SERIF);
	canvas.drawTextOnPath("Pablo Monteserín", trazo, 10, 40, pincel);
}
		
	

Ejercicio - Dibujar siguiendo un path II

protected void onDraw(Canvas canvas){
	super.onDraw(canvas);
	trazo.moveTo(50, 100);
	trazo.cubicTo(60, 70, 150, 90, 200, 110);
	trazo.lineTo(300, 200);
	canvas.drawColor(Color.YELLOW);
	pincel.setColor(Color.BLUE);
	pincel.setStrokeWidth(8);
	pincel.setStyle(Style.STROKE);
	canvas.drawPath(trazo, pincel);
	pincel.setStrokeWidth(1);
	pincel.setStyle(Style.FILL);
	pincel.setTextSize(20);
	pincel.setTypeface(Typeface.SANS_SERIF);
	canvas.drawTextOnPath("Pablo Monteserín", trazo, 10, 40, pincel);
}

trazo y pincel son dos objetos de las clases Path y Paint respectivamente. Sin embargo, no deben ser instanciados dentro del método onDraw(), ya que este es llamado varias veces por segundo y ralentizaría la aplicación.

Ejercicio - Dibujar un rectángulo

	
protected void onDraw(Canvas canvas) {
	super.onDraw(canvas);
	pincel.setColor(Color.BLUE);
	pincel.setStrokeWidth(8);
	pincel.setStyle(Style.STROKE);
	canvas.drawRect(0, 0, 200, 300, pincel);
}
	

Ejercicio - Dibujar un rectángulo con relleno

	
protected void onDraw(Canvas canvas) {
	super.onDraw(canvas);
	pincel.setColor(Color.BLUE);
	pincel.setStrokeWidth(8);
	pincel.setStyle(Style.STROKE);
	canvas.drawRect(10, 10, 200, 50, pincel);
	pincel.setColor(Color.RED);
	pincel.setStyle(Style.FILL);
	canvas.drawRect(12,12,198,48, pincel);
}
	

Repintar con OnTouchEvent

	
public class Vista extends View {
	private float x;
	private float y;
…
//Los tres constructores
@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		pincel.setColor(Color.BLUE);
		pincel.setStrokeWidth(8);
		pincel.setStyle(Style.STROKE);
		canvas.drawRect(x+10, y+10, x+200, y+50, pincel);
	}
	@Override
	public boolean onTouchEvent(MotionEvent event) {
		x = event.getX();
		y = event.getY();
		//Fuerzo el repintado
		this.invalidate();
		return super.onTouchEvent(event);
	}
	

OnClick

	
MainActivity.java
public class MainActivity extends Activity {
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
	}
	public void btnPulsado(View v){
		TextView tv = (TextView)findViewById(R.id.textView1);
		tv.setText("botón pulsado");
	}
}

main.xml
…
<Button android:text="Button" android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="btnPulsado"></Button>
...
	

Esta forma de gestionar los eventos fue introducida en la API 7 (Android 2.1)

Implementación de la interfaz OnClickListener()

Con esto conseguiremos tener solamente una única clase que gestione todos los eventos de click.

	
public class Main extends Activity implements View.OnClickListener{
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        Button b = (Button) findViewById(R.id.button1);
        b.setOnClickListener(this);
    }
	@Override
	public void onClick(View v) {
		if(v.getId() ==  R.id.button1){
			Log.d("traza", "llega");
		}
	}
}
	

El relleno del rectángulo crece con un click del ratón

		
protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		pincel.setColor(Color.BLUE);
		pincel.setStrokeWidth(8);
		pincel.setStyle(Style.STROKE);
		canvas.drawRect(10, 10, getWidth(), 50, pincel);
		pincel.setColor(Color.RED);
		pincel.setStyle(Style.FILL);
		canvas.drawRect(12,12,getWidth()*this.width-3,48, pincel);
	}

	public void aumentarWidth(){
		if(this.width<1){
			this.width = (float) (this.width+0.1);
			this.postInvalidate();
		}
	}
		
	

Este método fuerza a volver a llamar al método onDraw para que el dibujo se repinte. Si no lo llamamos, el repintado no estará asegurado.

Clase OnClickListener (lo utilizaremos para el siguiente ejercicio)

	
Button b = (Button) findViewById(R.id.button1);
b.setOnClickListener(new View.OnClickListener() {
@Override
	public void onClick(View arg0) {
		Toast.makeText(getApplicationContext(), "Boton Pulsado",Toast.LENGTH_LONG).show();
	}
});
	

Añadir un nuevo Activity

Botón derecho sobre el paquete → new → class → Android Activity

Esto crea una clase Activity con su método onCreate y su correspondiente referencia en el AndroidManifest.xml.

¿Para qué sirve un Intent?

Para invocar componentes (un Activity, código ejecutándose en segundo plano, et.)

Crear un botón en la primera activity para que cuando pulsemos sobre él vayamos a la segunda

		
	package com.pablomonteserin;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;

public class Main extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        Button b = (Button) findViewById(R.id.button1);
        
        b.setOnClickListener(new OnClickListener(){
        	public void onClick(View v){
        		startActivity(new Intent(Main.this, Second.class));
        	}
   });}}
		
	

Activity que hace la llamada. Si sólo ponemos this, se pensará que estamos haciendo referencia a la clase OnClickListener, en lugar de a la clase Main

Hay que registrar el Activity en el AndroidManifest.xml

	
<activity android:name=".AcercaDe" 
	android:label="@string/app_name">
</activity>
	

Ejercicio

Hacer que al pulsar el botón Acerca de se lance un activity con un cuadro de texto informativo.

El activity con el cuadro informativo utilizará un theme propio de diálogos:

	
android:theme="@android:style/Theme.Dialog"
	

Dicho Activity deberá extender de la clase Activity, en lugar de la clase ActionBarActivity.

Pasar información de una activity a otra

		
Main.java
	public final static String TEXTO = "texto";

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

	public void pasarInfo(View view) {
		final EditText et = (EditText) findViewById(R.id.editText1);
		Intent intent = new Intent(Main.this, Second.class);
		intent.putExtra(TEXTO, et.getText().toString());
		startActivity(intent);
	}

Second.java
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.second);
		TextView tv = (TextView)findViewById(R.id.textView1);
		tv.setText(getIntent().getExtras().getString(Main.TEXTO));
	}

		
	

Menus

Ejercicio - Crear un menú

Un menú contextual es lanzado al pulsar la tecla menú del teléfono.

	
Menu.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
	<item android:id="@+id/item1" android:title="Option 1" android:icon="@android:drawable/ic_menu_compass" />
	<item android:id="@+id/item2" android:title="Option 2" android:icon="@android:drawable/ic_menu_call" />    
</menu>
-------------------------------------------------------------------------------------------------
MenuActivity.java
public class MenuActivity extends Activity {
	...
	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		MenuInflater inflater = getMenuInflater();
		inflater.inflate(R.menu.menu, menu);
		return true;
	}
	

Al ejecutar la aplicación pulsamos el botón de menú para ver los menús.

Ejercicio - Detectar la pulsación de un menú

Añadimos el siguiente código al java anterior:

	
public boolean onOptionsItemSelected(MenuItem item){
	if(item.getItemId() == R.id.item1){
    	Log.d("opcion", "opcion 1 pulsada");
    }
	return super.onOptionsItemSelected(item);
}
	

Detectar cuando se ha cargado la vista para recuperar tamaños y posiciones

Necesitamos este código para el ejercicio siguiente

		
@Override
public void onWindowFocusChanged(boolean hasFocus) {
	super.onWindowFocusChanged(hasFocus);
	final View content = getWindow().findViewById(Window.ID_ANDROID_CONTENT);

	view_width = content.getWidth()-a1.getWidth();
	view_height = content.getHeight()-a1.getHeight()-getStatusBarHeight();
}

public int getStatusBarHeight(){
        Rect rectangle= new Rect();
        Window window= getWindow();
        window.getDecorView().getWindowVisibleDisplayFrame(rectangle);
        int statusBarHeight= rectangle.top;
        int contentViewTop=
                window.findViewById(Window.ID_ANDROID_CONTENT).getTop();
        int titleBarHeight= contentViewTop - statusBarHeight;
        return statusBarHeight+titleBarHeight;
}
		
	

Hacer un juego sencillo

Se trata de un juego en el que un monstruo (una clase que hereda de ImageView) va cambiando de posición en la pantalla y cada vez que pulsamos sobre él aumenta un marcador.

Para realizar una tarea cada x tiempo utilizaremos:

	
timer = new Timer();
task = new MyTimerTask();
timer.schedule(task, 0, 1000);
	

	
private class MyTimerTask extends TimerTask {
	/*  En Android hay una restricción con respecto al hilo que pinta la pantalla. Para  modificarlo desde fuera del método onDraw de la clase View utilizo el método runOnUiThread. */
	@Override
	public void run() {
		MainActivity.this.runOnUiThread(new Runnable() {
			public void run() {
			setRandomPosition(a1);
        }
    });
    }
}

public void setRandomPosition(ImageView a1){
	int x = randInt(a1.getWidth(), view_width);
	int y = randInt(a1.getHeight(), view_height);
	a1.setX(x);
	a1.setY(y);
}
	

Problema al cambiar la orientación de la pantalla

Al cambiar la orientación se destruyen los componentes visuales y se vuelven a crear, llamando al onCreate.

Podemos solventar los problemas que esto pueda acarrear modificando el nodo <activity> correspondiente del AndroidManifest.xml:

- Para limitar el giro de la aplicación:
android:screenOrientation="portrait"

- Para que no se destruya el activity:
android:configChanges="keyboard|keyboardHidden|orientation|screenSize|smallestScreenSize"

Aviso Legal

Los derechos de propiedad intelectual sobre el presente documento son titularidad de D. Pablo Monteserín Fernández Administrador, propietario y responsable de pablomonteserin.com. El ejercicio exclusivo de los derechos de reproducción, distribución, comunicación pública y transformación pertenecen a la citada persona.

Queda totalmente prohibida la reproducción total o parcial de las presentes diapositivas fuera del ámbito privado (impresora doméstica, uso individual, sin ánimo de lucro).

La ley que ampara los derechos de autor establece que: “La introducción de una obra en una base de datos o en una página web accesible a través de Internet constituye un acto de comunicación pública y precisa la autorización expresa del autor”.

El contenido de esta obra está protegido por la Ley, que establece penas de prisión y/o multa, además de las correspondientes indemnizaciones por daños y perjuicios, para quienes reprodujesen, plagiaren, distribuyeren o comunicaren públicamente, en todo o en parte, o su transformación, interpretación o ejecución fijada en cualquier tipo de soporte o comunicada a través de cualquier medio.

El usuario que acceda a este documento no puede copiar, modificar, distribuir, transmitir, reproducir, publicar, ceder, vender los elementos anteriormente mencionados o un extracto de los mismos o crear nuevos productos o servicios derivados de la información que contiene.

Cualquier reproducción, transmisión, adaptación, traducción, modificación, comunicación al público, o cualquier otra explotación de todo o parte del contenido de este documento, efectuada de cualquier forma o por cualquier medio, electrónico, mecánico u otro, están estrictamente prohibidos salvo autorización previa por escrito de Pablo Monteserín.

El autor de la presente obra podría autorizar a que se reproduzcan sus contenidos en otro sitio web u otro soporte (libro, revista, e-book, etc.) siempre y cuando se produzcan dos condiciones:

1. Se solicite previamente por escrito mediante email al correo pablomonteserin@pablomonteserin.com.
2. En caso de aceptación, no se modifiquen los textos y se cite la fuente con absoluta claridad.

Una parte de las imágenes utilizadas en este documento no son propiedad de Pablo Monteserín, por lo que, si alguna de estas imágenes estuviera sujeta a derechos de autor, o a algún otro tipo de derecho que impida su publicación en este documento, una vez que el autor, Pablo Monteserín, tenga conocimiento del hecho, procederá a la retirada inmediata de la imagen protegida por los derechos pertinentes.