GUA DE LABORATORIO 2

Diseo de interfaces de usuario

Tecsup

LABORATORIO
Objetivos:

Identificar los componentes que nos proporciona el SDK de Android.

Disear aplicaciones utilizando los controles adecuadamente

Equipos, Materiales, Programas y Recursos:

PC con Sistema Operativo Windows o Linux

Eclipse IDE
Android Development Tool para Eclipse
Android SDK

Introduccin:
En la presente sesin se detalla los fundamentos para el diseo de interfaces en Android.
Seguridad:

Ubicar maletines y/o mochilas en el gabinete al final de aula de

laboratorio.
No ingresar con lquidos ni comida al aula de laboratorio.
Al culminar la sesin de laboratorio, apagar correctamente la computadora
y el monitor.

Preparacin:
Durante el desarrollo de los temas de clase se tendrn ejercicios explicativos en
cada uno de los puntos, ello le dar a la sesin una interaccin de la teora y la
parte prctica, ya que en todo el momento el alumno podr comprobar en su
propia PC, todos los tems del manual.
Procedimiento y Resultados:

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 1

Tecsup

TextView
Revisar el video: Lab2_TextView

En el paquete del proyecto, creamos un nuevo Activity en blanco:

TextViewActivity.java
package cursoandroid.lab02;
import
import
import
import

android.app.Activity;
android.os.Bundle;
android.view.Menu;
android.view.MenuItem;

public class TextViewActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_text_view);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if
it is present.
getMenuInflater().inflate(R.menu.text_view, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 2

Tecsup

// Handle action bar item clicks here. The action bar

will

// automatically handle clicks on the Home/Up button, so

long

// as you specify a parent activity in

AndroidManifest.xml.
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}
Modificamos el layout asociado al Activity:
activity_text_view.xml
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:shadowColor="#182282"
android:shadowDx="3.5"
android:shadowDy="3.5"
android:shadowRadius="8.0"
android:text="TextView"
android:textAllCaps="true"
android:layout_gravity="center_horizontal"
android:textSize="40dp"
android:textColor="#0000ff" />

/>

/>

<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge"
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium"

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 3

Tecsup

<TextView
android:id="@+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Small Text"
android:textAppearance="?android:attr/textAppearanceSmall"
/>
</LinearLayout>

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 4

Tecsup

Button

En el paquete del proyecto, creamos un nuevo Activity en blanco:

ButtonActivity.java
package cursoandroid.lab02;
import
import
import
import
import
import
import

android.app.Activity;
android.os.Bundle;
android.view.Menu;
android.view.MenuItem;
android.view.View;
android.widget.Toast;
android.widget.ToggleButton;

public class ButtonActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_button);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if
it is present.
getMenuInflater().inflate(R.menu.button, menu);
return true;
}
Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 5

Tecsup

will
long

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar
// automatically handle clicks on the Home/Up button, so

// as you specify a parent activity in

AndroidManifest.xml.
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
public void grabar(View view){
Toast.makeText(this, "Botn Grabar", 4000).show();
}
public void cambiarEstado(View view){
ToggleButton tb =
(ToggleButton)this.findViewById(R.id.toggleButton1);
String seleccionado = tb.getText().toString();
Toast.makeText(this, "Estado: " + seleccionado,
4000).show();
}
public void procesar(View view){
Toast.makeText(this, "Botn Procesar", 4000).show();
}
}
Modificamos el layout asociado al Activity:
activity_button.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Grabar"
android:onClick="grabar"
/>
<ToggleButton
Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 6

Tecsup

android:id="@+id/toggleButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOn="Activo"
android:textOf="Inactivo"
android:onClick="cambiarEstado"
/>
<ImageButton
android:id="@+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="Descripcin"
android:src="@drawable/ic_launcher"
android:onClick="procesar"
/>
</LinearLayout>

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 7

Tecsup

ImageView y ScrollView
Revisar el video: Lab2_ImageView_ScrollView

Nota: Agregar una imagen llamada marcaperu.png en la carpeta /drawable/.

En el paquete del proyecto, creamos un nuevo Activity en blanco:
ImageActivity.java
package cursoandroid.lab02;
import
import
import
import

android.app.Activity;
android.os.Bundle;
android.view.Menu;
android.view.MenuItem;

public class ImageActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_image);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if
it is present.
getMenuInflater().inflate(R.menu.image, menu);
return true;
}
Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 8

Tecsup

will
long

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar
// automatically handle clicks on the Home/Up button, so

// as you specify a parent activity in

AndroidManifest.xml.
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}
Modificamos el layout asociado al Activity:
activity_image.xml
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/ScrollView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<LinearLayout
android:id="@+id/Lista1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="118dp"
android:layout_gravity="center_horizontal"
android:src="@drawable/marcaperu" />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#dfdfdf"
android:textColor="#121212"
android:textSize="26dp"
android:text="Curso de Android"
android:layout_gravity="center_horizontal|
center_vertical"/>
<TextView
android:id="@+id/textView2"
Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 9

Tecsup

android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#dfdfdf"
android:textColor="#121212"
android:textSize="26dp"
android:text="Nombres"
android:layout_gravity="left"/>
<EditText
android:id="@+id/editText2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="text">
</EditText>
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#dfdfdf"
android:textColor="#121212"
android:textSize="26dp"
android:text="Correo"
android:layout_gravity="left"/>
<EditText
android:id="@+id/editText3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="textEmailAddress">
</EditText>
<TextView
android:id="@+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#dfdfdf"
android:textColor="#121212"
android:textSize="26dp"
android:text="Celular"
android:layout_gravity="left"/>
<EditText
android:id="@+id/editText4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="phone">
</EditText>
<TextView
android:id="@+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 10

Tecsup

android:background="#dfdfdf"
android:textColor="#121212"
android:textSize="26dp"
android:text="Correo alterno"
android:layout_gravity="left"/>
<EditText
android:id="@+id/editText6"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="textEmailAddress">
</EditText>
<Button
android:id="@+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Enviar" />
</LinearLayout>
</ScrollView>

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 11

Tecsup

EditText

En el paquete del proyecto, creamos un nuevo Activity en blanco:

EditTextActivity.java
package cursoandroid.lab02;
import
import
import
import

android.app.Activity;
android.os.Bundle;
android.view.Menu;
android.view.MenuItem;

public class EditTextActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_edit_text);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if
it is present.
getMenuInflater().inflate(R.menu.edit_text, menu);
return true;
}
@Override
Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 12

Tecsup

will
long

public boolean onOptionsItemSelected(MenuItem item) {

// Handle action bar item clicks here. The action bar
// automatically handle clicks on the Home/Up button, so

// as you specify a parent activity in

AndroidManifest.xml.
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}
Modificamos el layout asociado al Activity:
activity_edit_text.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Correo: "
android:textAppearance="?android:attr/textAppearanceLarge" />
<EditText
android:id="@+id/txtCorreo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Ingrese aqu su correo"
android:maxLines="1"
android:maxLength="25"/>
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Comentarios: "
android:textAppearance="?android:attr/textAppearanceLarge" />
<EditText
android:id="@+id/txtMasComentarios"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:lines="3"
Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 13

Tecsup

android:hint="Ingrese aqu sus comentarios"

/>
<Button
android:id="@+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Enviar" />
</LinearLayout>

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 14

Tecsup

AutoCompleteTextView
Revisar el video: Lab2_AutoCompleteTextView

En el paquete del proyecto, creamos un nuevo Activity en blanco:

AutoCompletarActivity.java
package cursoandroid.lab02;
import
import
import
import
import
import
import
import
import
import

android.app.Activity;
android.os.Bundle;
android.text.Editable;
android.text.TextWatcher;
android.util.Log;
android.view.Menu;
android.view.MenuItem;
android.view.View;
android.widget.ArrayAdapter;
android.widget.AutoCompleteTextView;

public class AutoCompletarActivity extends Activity implements

TextWatcher {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_auto_completar);
String zonas[] = { "Parque Nro 1", "Parque Nro 2", "Av.
Huarochiri", "Av. Separadora" };
Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 15

Tecsup

AutoCompleteTextView myAutoComplete =
(AutoCompleteTextView) findViewById(R.id.autoCompleteTextView1);
myAutoComplete.addTextChangedListener(this);
myAutoComplete.setAdapter(new ArrayAdapter<String>(this,
android.R.layout.simple_dropdown_item_1line, zonas));
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if
it is present.
getMenuInflater().inflate(R.menu.auto_completar, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar
will

// automatically handle clicks on the Home/Up button, so

long

// as you specify a parent activity in

AndroidManifest.xml.
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
@Override
public void afterTextChanged(Editable arg0) {
// TODO Auto-generated method stub
}
@Override
public void beforeTextChanged(CharSequence s, int start, int
count,
int after) {
// TODO Auto-generated method stub
}
@Override
public void onTextChanged(CharSequence s, int start, int
before, int count) {
// TODO Auto-generated method stub
}
public void enviar(View v) {
AutoCompleteTextView t = (AutoCompleteTextView)
findViewById(R.id.autoCompleteTextView1);
Log.i("==>", t.getText().toString());
}
Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 16

Tecsup

}
Modificamos el layout asociado al Activity:
activity_auto_completar.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<AutoCompleteTextView
android:id="@+id/autoCompleteTextView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:completionThreshold="1"
android:ems="10"
android:hint="Escriba aqu" />
<Button
android:id="@+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="enviar"
android:text="Enviar" />
</LinearLayout>

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 17

Tecsup

CheckBox y RadioButton

En el paquete del proyecto, creamos un nuevo Activity en blanco:

CheckBoxRadioGroupActivity.java
package cursoandroid.lab02;
import
import
import
import
import
import
import
import

android.app.Activity;
android.os.Bundle;
android.view.Menu;
android.view.MenuItem;
android.view.View;
android.widget.CheckBox;
android.widget.RadioButton;
android.widget.Toast;

public class CheckBoxRadioGroupActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_check_box_radio_group);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if
it is present.
Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 18

Tecsup

getMenuInflater().inflate(R.menu.check_box_radio_group,
menu);

return true;

will

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar
// automatically handle clicks on the Home/Up button, so

long

// as you specify a parent activity in

AndroidManifest.xml.
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
public void enviar(View view) {
CheckBox cb1 = (CheckBox)
this.findViewById(R.id.checkBox1);
CheckBox cb2 = (CheckBox)
this.findViewById(R.id.checkBox2);
CheckBox cb3 = (CheckBox)
this.findViewById(R.id.checkBox3);
StringBuffer resultado = new StringBuffer();
if (cb1.isChecked()) {
resultado.append("Ir al teatro \n");
}
if (cb2.isChecked()) {
resultado.append("Ir al cine \n");
}
if (cb3.isChecked()) {
resultado.append("Ir a cenar \n");
}
RadioButton rb1 = (RadioButton)
this.findViewById(R.id.radio0);
RadioButton rb2 = (RadioButton)
this.findViewById(R.id.radio1);
if (rb1.isChecked()) {
resultado.append("Masculino \n");
} else if (rb2.isChecked()) {
resultado.append("Femenino \n");
}
}

Toast.makeText(this, resultado.toString(), 5000).show();

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 19

Tecsup

Modificamos el layout asociado al Activity:

activity_check_box_radio_group.xml
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<TextView
android:id="@+id/textView0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Encuesta"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_gravity="center_horizontal" />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cules son sus aficiones?"
android:textAppearance="?android:attr/textAppearanceMedium"
/>
<CheckBox
android:id="@+id/checkBox1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Ir al teatro" />
<CheckBox
android:id="@+id/checkBox2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Ir al cine" />
<CheckBox
android:id="@+id/checkBox3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Ir a cenar" />
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Indique su sexo:"
android:textAppearance="?android:attr/textAppearanceMedium"
/>
<RadioGroup
Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 20

Tecsup

android:id="@+id/radioGroup1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<RadioButton
android:id="@+id/radio0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:text="Masculino" />
<RadioButton
android:id="@+id/radio1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Femenino" />
</RadioGroup>
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="Enviar"
android:onClick="enviar" />
</LinearLayout>

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 21

Tecsup

ProgressBar

En el paquete del proyecto, creamos un nuevo Activity en blanco:

ProgressDialogActivity.java
package cursoandroid.lab02;
import
import
import
import
import
import
import

android.app.Activity;
android.app.ProgressDialog;
android.os.Bundle;
android.os.Handler;
android.view.Menu;
android.view.MenuItem;
android.view.View;

public class ProgressDialogActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_progress_dialog);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if
it is present.
getMenuInflater().inflate(R.menu.progress_dialog, menu);
return true;
}
Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 22

Tecsup

will

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar
// automatically handle clicks on the Home/Up button, so

long

// as you specify a parent activity in

AndroidManifest.xml.
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
ProgressDialog progressBar;
private int progressBarStatus = 0;
private Handler progressBarHandler = new Handler();
public void lanzar1(View view) {
progressBar = new ProgressDialog(view.getContext());
progressBar.setCancelable(true);
progressBar.setMessage("Tarea larga...");
progressBar.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL);
progressBar.setProgress(0);
progressBar.setMax(100);
progressBar.show();
new Thread(new Runnable() {
public void run() {
while (progressBarStatus < 100) {
progressBarStatus += 10;
// Dormir 1 segundo para mostrar el
progreso

try {
Thread.sleep(1000);
} catch (InterruptedException e) {
e.printStackTrace();
}
// Actualizar el progress bar
progressBarHandler.post(new Runnable() {
public void run() {

progressBar.setProgress(progressBarStatus);
}
});
}
Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 23

Tecsup

// Cuando lleg a 100%

if (progressBarStatus >= 100) {
// Cerrar el progress bar
progressBar.dismiss();
}
}
}).start();
}
public void lanzar2(View view) {
final ProgressDialog ringProgressDialog =
ProgressDialog.show(this, "Espere",
"Descargando archivo...",
true);
ringProgressDialog.setCancelable(true);
new Thread(new Runnable() {
@Override
public void run() {
try {
// Escribir aqu la operacin a realizar
Thread.sleep(3000);
} catch (Exception e) {
}
ringProgressDialog.dismiss();

}
}).start();

Modificamos el layout asociado al Activity:

activity_progress_dialog.xml
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<Button
android:id="@+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="lanzar1"
android:text="ProgressBar con status" />
<Button
android:id="@+id/button2"
android:layout_width="match_parent"
Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 24

Tecsup

android:layout_height="wrap_content"
android:onClick="lanzar2"
android:text="ProgressBar" />
</LinearLayout>

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 25

Tecsup

SeekBar

En el paquete del proyecto, creamos un nuevo Activity en blanco:

SeekBarActivity.java
package cursoandroid.lab02;
import
import
import
import
import
import

android.app.Activity;
android.os.Bundle;
android.view.Menu;
android.view.MenuItem;
android.widget.EditText;
android.widget.SeekBar;

public class SeekBarActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_seek_bar);
SeekBar sb = (SeekBar) findViewById(R.id.seekBar1);
final EditText et = (EditText)
findViewById(R.id.editText1);
sb.setOnSeekBarChangeListener(new
SeekBar.OnSeekBarChangeListener() {
@Override
Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 26

Tecsup

public void onProgressChanged(SeekBar seekBar, int

progress, boolean fromUser) {
int valor = progress;
et.setText(valor + " entradas");
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
}
}

});

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if
it is present.
getMenuInflater().inflate(R.menu.seek_bar, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar
will

// automatically handle clicks on the Home/Up button, so

long

// as you specify a parent activity in

AndroidManifest.xml.
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}
Modificamos el layout asociado al Activity:
activity_seek_bar.xml
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<TextView
Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 27

Tecsup

android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Nmero de entradas a comprar:"
android:textAppearance="?android:attr/textAppearanceMedium"
/>
<SeekBar
android:id="@+id/seekBar1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="5" />
<EditText
android:id="@+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="number" >
<requestFocus />
</EditText>
</LinearLayout>

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 28

Tecsup

ArrayAdapter (I) - Spinner

Revisar el video: Lab2_ArrayAdapter_Spinner

En el paquete del proyecto, creamos un nuevo Activity en blanco:

ArrayAdapterActivity.java
package cursoandroid.lab02;
import
import
import
import
import
import
import
import
import
import

android.app.Activity;
android.os.Bundle;
android.util.Log;
android.view.Menu;
android.view.MenuItem;
android.view.View;
android.widget.AdapterView;
android.widget.ArrayAdapter;
android.widget.Spinner;
android.widget.Toast;

public class ArrayAdapterActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_array_adapter);

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 29

Tecsup

final String[] cursos = new String[] { "Sistemas

distribuidos", "Gerencia de proyectos", "Simulacin de sistemas" };
ArrayAdapter<String> adaptador = new
ArrayAdapter<String>(this, android.R.layout.simple_spinner_item,
cursos);
adaptador.setDropDownViewResource(android.R.layout.simple_spinner_dr
opdown_item);
Spinner combo = (Spinner)
findViewById(R.id.desplegable_cursos);
combo.setAdapter(adaptador);
combo.setOnItemSelectedListener(new
AdapterView.OnItemSelectedListener() {
public void onItemSelected(AdapterView<?> parent,
android.view.View v, int position, long id) {
Toast.makeText(ArrayAdapterActivity.this,
"Seleccionado: " + cursos[position], Toast.LENGTH_LONG).show();
}
public void onNothingSelected(AdapterView<?> parent)

ha seleccionado",
}
});

Toast.makeText(ArrayAdapterActivity.this, "No
Toast.LENGTH_LONG).show();

}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if
it is present.
getMenuInflater().inflate(R.menu.array_adapter, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar
will

// automatically handle clicks on the Home/Up button, so

long

// as you specify a parent activity in

AndroidManifest.xml.
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
public void enviar (View v){
Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 30

Tecsup

Spinner s =
(Spinner)findViewById(R.id.desplegable_cursos);
Log.i("==>", s.getSelectedItem().toString());
}
}

Modificamos el layout asociado al Activity:

activity_array_adapter.xml
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<Spinner
android:id="@+id/desplegable_cursos"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<Button
android:id="@+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Enviar"
android:onClick="enviar" />
</LinearLayout>

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 31

Tecsup

ArrayAdapter (II) - GridView

ArrayAdapter2Activity.java
package cursoandroid.lab02;
import
import
import
import
import
import
import
import

android.app.Activity;
android.os.Bundle;
android.view.Menu;
android.view.MenuItem;
android.widget.AdapterView;
android.widget.ArrayAdapter;
android.widget.GridView;
android.widget.Toast;

public class ArrayAdapter2Activity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_array_adapter2);
final String[] datos = new String[9];
datos[0] = "X";
datos[1] = "O";
datos[2] = "O";
datos[3] = "O";
datos[4] = "X";
datos[5] = "X";
datos[6] = "O";
datos[7] = "O";
datos[8] = "X";

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 32

Tecsup

ArrayAdapter<String> adaptador = new

ArrayAdapter<String>(this, android.R.layout.simple_list_item_1,
datos);
GridView grdOpciones = (GridView)
findViewById(R.id.grilla_opciones);
grdOpciones.setAdapter(adaptador);
grdOpciones.setOnItemClickListener(
new AdapterView.OnItemClickListener() {
public void onItemClick(AdapterView<?> parent,
android.view.View v, int position, long id) {
Toast.makeText(ArrayAdapter2Activity.this,
"Seleccionado: "+datos[position], Toast.LENGTH_SHORT).show();
}
}

});

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if
it is present.
getMenuInflater().inflate(R.menu.array_adapter2, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar
will

// automatically handle clicks on the Home/Up button, so

long

// as you specify a parent activity in

AndroidManifest.xml.
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 33

Tecsup

activity_array_adapter2.xml
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<GridView
android:id="@+id/grilla_opciones"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnWidth="80dip"
android:horizontalSpacing="5dp"
android:numColumns="auto_fit"
android:stretchMode="columnWidth"
android:verticalSpacing="10dp" />
</LinearLayout>

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 34

Tecsup

SimpleAdapter ListView
Revisar el video: Lab2_SimpleAdapter_ListView

En el paquete del proyecto, creamos un nuevo Activity en blanco:

SimpleAdapterActivity.java
package cursoandroid.lab02;
import java.util.ArrayList;
import java.util.HashMap;
import
import
import
import
import
import

android.app.Activity;
android.os.Bundle;
android.view.Menu;
android.view.MenuItem;
android.widget.ListView;
android.widget.SimpleAdapter;

public class SimpleAdapterActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 35

Tecsup

setContentView(R.layout.activity_simple_adapter);
String[] from = new String[] { "Time", "Name", "Desc" };
int[] to = new int[] { R.id.hora, R.id.nombre, R.id.desc1

};

ArrayList<String[]> lista = new ArrayList<String[]>();

String[]
"Lugar: Auditorio",
String[]
central", "2" };
String[]
Oficina", "3" };

evento1 = { "11:30", "Reunin de coordinacin",

"1" };
evento2 = { "12:00", "Almuerzo", "Lugar: Comedor
evento3 = { "14:00", "Tiro al dardo", "Lugar:

lista.add(evento1);
lista.add(evento2);
lista.add(evento3);
ArrayList<HashMap<String, String>> eventos = new
ArrayList<HashMap<String, String>>();
for (String[] evento : lista) {
HashMap<String, String> datosEvento = new
HashMap<String, String>();
datosEvento.put("Time", evento[0]);
datosEvento.put("Name", evento[1]);
datosEvento.put("Desc", evento[2]);
datosEvento.put("id", evento[3]);
}

eventos.add(datosEvento);

SimpleAdapter listadoAdapter = new SimpleAdapter(this,

eventos, R.layout.simple_adapter_fila, from, to);
ListView lv = (ListView) findViewById(R.id.lista1);
lv.setAdapter(listadoAdapter);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if
it is present.
getMenuInflater().inflate(R.menu.simple_adapter, menu);
return true;
}

will
long

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar
// automatically handle clicks on the Home/Up button, so

// as you specify a parent activity in

AndroidManifest.xml.
Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 36

Tecsup

int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}

Modificamos el layout asociado al Activity:

activity_simple_array.xml
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<ListView
android:id="@+id/lista1"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:cacheColorHint="#00000000"
android:padding="5dp" >
</ListView>
</LinearLayout>

Nota: Agregar un nuevo File llamado simple_adapter_fila.xml en la carpeta /res/layout/.

simple_adapter_fila.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingRight="4px">
<TextView android:id="@+id/hora"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16dp"
android:padding="3dp"
Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 37

Tecsup

/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingBottom="5dp">
<TextView android:id="@+id/nombre"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20dp"
/>
<TextView android:id="@+id/desc1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="14dp"
/>
</LinearLayout>
</LinearLayout>

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 38

Tecsup

SimpleCursorAdapter - ListView

En el paquete del proyecto, creamos un nuevo Activity en blanco:

SimpleCursorAdapterActivity.java
package cursoandroid.lab02;
import
import
import
import
import
import
import
import

android.app.Activity;
android.database.Cursor;
android.database.MatrixCursor;
android.os.Bundle;
android.view.Menu;
android.view.MenuItem;
android.widget.ListView;
android.widget.SimpleCursorAdapter;

public class SimpleCursorAdapterActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_simple_cursor_adapter);
// De
String[] columnas = new String[] { "Cdigo", "Nombre",
"Continente", "Regin" };
// Hacia
Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 39

Tecsup

int[] hacia = new int[] { R.id.codigo, R.id.nombre,

R.id.continente, R.id.region };
Cursor cursor = traerPaises();
SimpleCursorAdapter dataAdapter = new
SimpleCursorAdapter(this, R.layout.simple_cursor_adapter_fila,
cursor, columnas, hacia, 0);
ListView listView = (ListView)
findViewById(R.id.lista_simple_cursor);
listView.setAdapter(dataAdapter);
}
private Cursor traerPaises() {
MatrixCursor mCursor = new MatrixCursor(new String[] {
"_id", "Cdigo", "Nombre", "Continente", "Regin" });
mCursor.addRow(new String[] { "1", "51", "Per",
"Amrica", "Sur" });
mCursor.addRow(new String[] { "2", "01", "Estados
Unidos", "Amrica", "Norte" });
if (mCursor != null) {
mCursor.moveToFirst();
}
return mCursor;
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if
it is present.
getMenuInflater().inflate(R.menu.simple_cursor_adapter,
menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar
will

// automatically handle clicks on the Home/Up button, so

long

// as you specify a parent activity in

AndroidManifest.xml.
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 40

Tecsup

Modificamos el layout asociado al Activity:

activity_simple_cursor_adapter.xml
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="Ejemplo de SimpleCursorAdapter"
android:textSize="20sp" />
<ListView
android:id="@+id/lista_simple_cursor"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</LinearLayout>
Nota: Agregar un nuevo File llamado simple_cursor_adapter_fila.xml en la carpeta
/res/layout/.
simple_cursor_adapter_fila.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="6dip" >
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TableRow
android:id="@+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cdigo: "
android:textAppearance="?
android:attr/textAppearanceMedium" />
Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 41

Tecsup

<TextView
android:id="@+id/codigo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</TableRow>
<TableRow
android:id="@+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Nombre: "
android:textAppearance="?
android:attr/textAppearanceMedium" />
<TextView
android:id="@+id/nombre"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</TableRow>
<TableRow
android:id="@+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/textView2"
android:layout_below="@+id/textView2"
android:text="Continente: "
android:textAppearance="?
android:attr/textAppearanceMedium" />
<TextView
android:id="@+id/continente"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</TableRow>
<TableRow
android:id="@+id/tableRow4"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="@+id/textView4"
Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 42

Tecsup

android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Regin: "
android:textAppearance="?
android:attr/textAppearanceMedium" />
<TextView
android:id="@+id/region"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</TableRow>
</TableLayout>
</LinearLayout>

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 43

Tecsup

Adaptador Personalizado

En el paquete del proyecto, creamos un nuevo Activity en blanco:

AdaptadorPersonalizadoActivity.xml
package cursoandroid.lab02;
import
import
import
import
import
import

android.app.Activity;
android.os.Bundle;
android.util.SparseArray;
android.view.Menu;
android.view.MenuItem;
android.widget.ExpandableListView;

public class AdaptadorPersonalizadoActivity extends Activity {

SparseArray<AmpliableGrupo> grupos = new
SparseArray<AmpliableGrupo>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_adaptador_personalizado);
cargarDatos();
ExpandableListView ampliableVista = (ExpandableListView)
findViewById(R.id.listaAmpliable);

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 44

Tecsup

AmpliableAdapter adapter = new AmpliableAdapter(this,

grupos);

ampliableVista.setAdapter(adapter);

}
public void cargarDatos() {
for (int j = 0; j < 5; j++) {
AmpliableGrupo grupo = new AmpliableGrupo("Categora
" + j);
for (int i = 0; i < 3; i++) {
grupo.children.add("Sub Categora " + i);
}
grupos.append(j, grupo);
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if
it is present.
getMenuInflater().inflate(R.menu.adaptador_personalizado,
menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar
will

// automatically handle clicks on the Home/Up button, so

long

// as you specify a parent activity in

AndroidManifest.xml.
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}

Modificamos el layout asociado al Activity:

activity_adaptador_personalizado.xml
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 45

Tecsup

<ExpandableListView
android:id="@+id/listaAmpliable"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</ExpandableListView>
</LinearLayout>

Nota: Agregar un nuevo File llamado ampliable_grupo.xml en la carpeta /res/layout/.

ampliable_grupo.xml
<CheckedTextView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="?android:attr/listPreferredItemHeight"
android:layout_marginLeft="8dp"
android:drawableRight="@drawable/ic_launcher"
android:gravity="left"
android:paddingLeft="32dp"
android:paddingTop="8dp"
android:text="Grupo x"
android:textSize="14sp"
android:textStyle="bold" />
Nota: Agregar un nuevo File llamado ampliable_fila.xml en la carpeta /res/layout/.
ampliable_fila.xml
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="40dp"
android:clickable="true"
android:orientation="vertical"
android:paddingLeft="40dp" >
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableLeft="@drawable/ic_launcher"
android:drawablePadding="5dp"
android:gravity="center_vertical"
android:text="Texto x"
android:textSize="14sp"
android:textStyle="bold" >
</TextView>
<View
Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 46

Tecsup

android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@android:color/black" />
</LinearLayout>
Nota: Agregar una nueva Clase Java llamada AmpliableGrupo.java en el paquete de
clases.
AmpliableGrupo.java
package cursoandroid.lab02;
import java.util.ArrayList;
import java.util.List;
public class AmpliableGrupo {
public String titulo;
public final List<String> children = new ArrayList<String>();
public AmpliableGrupo(String titulo) {
this.titulo = titulo;
}
}
Nota: Agregar una nueva Clase Java llamada AmpliableAdapter.java en el paquete de
clases.
AmpliableAdapter.java
package cursoandroid.lab02;
import
import
import
import
import
import
import
import
import
import

android.app.Activity;
android.util.SparseArray;
android.view.LayoutInflater;
android.view.View;
android.view.View.OnClickListener;
android.view.ViewGroup;
android.widget.BaseExpandableListAdapter;
android.widget.CheckedTextView;
android.widget.TextView;
android.widget.Toast;

public class AmpliableAdapter extends BaseExpandableListAdapter {

private final SparseArray<AmpliableGrupo> grupos;
public LayoutInflater inflater;
public Activity activity;
public AmpliableAdapter(Activity act,
SparseArray<AmpliableGrupo> grupos) {
activity = act;
this.grupos = grupos;
Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 47

Tecsup

inflater = act.getLayoutInflater();
}
@Override
public Object getChild(int groupPosition, int childPosition) {
return
grupos.get(groupPosition).children.get(childPosition);
}
@Override
public long getChildId(int groupPosition, int childPosition) {
return 0;
}
@Override
public View getChildView(int groupPosition, final int
childPosition,
boolean isLastChild, View convertView, ViewGroup
parent) {
final String children = (String) getChild(groupPosition,
childPosition);
TextView text = null;
if (convertView == null) {
convertView =
inflater.inflate(R.layout.ampliable_grupo, null);
}
text = (TextView)
convertView.findViewById(R.id.textView1);
text.setText(children);
convertView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(activity, children,
Toast.LENGTH_SHORT).show();
}
});
return convertView;
}
@Override
public int getChildrenCount(int groupPosition) {
return grupos.get(groupPosition).children.size();
}
@Override
public Object getGroup(int groupPosition) {
return grupos.get(groupPosition);
}
@Override
public int getGroupCount() {
return grupos.size();
}
@Override
public void onGroupCollapsed(int groupPosition) {
super.onGroupCollapsed(groupPosition);
Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 48

Tecsup

}
@Override
public void onGroupExpanded(int groupPosition) {
super.onGroupExpanded(groupPosition);
}
@Override
public long getGroupId(int groupPosition) {
return 0;
}
@Override
public View getGroupView(int groupPosition, boolean isExpanded,
View convertView, ViewGroup parent) {
if (convertView == null) {
convertView =
inflater.inflate(R.layout.ampliable_grupo, null);
}
AmpliableGrupo grupo = (AmpliableGrupo)
getGroup(groupPosition);
((CheckedTextView) convertView).setText(grupo.titulo);
((CheckedTextView) convertView).setChecked(isExpanded);
return convertView;
}
@Override
public boolean hasStableIds() {
return false;
}
@Override
public boolean isChildSelectable(int groupPosition, int
childPosition) {
return false;
}
}

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 49

Tecsup

Ejercicios Propuestos
Disear las siguientes pantallas en Android:

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 50

Tecsup

Pestaas

En el paquete del proyecto, creamos un nuevo Activity en blanco:

TabsActivity.java
package cursoandroid.lab2;
import
import
import
import
import

android.app.Activity;
android.os.Bundle;
android.view.Menu;
android.view.MenuItem;
android.widget.TabHost;

public class TabsActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tabs);
TabHost tabs=(TabHost)
findViewById(android.R.id.tabhost);
tabs.setup();
TabHost.TabSpec spec=tabs.newTabSpec("pes1");
spec.setContent(R.id.pestania1);
spec.setIndicator("Inicio");
tabs.addTab(spec);
spec=tabs.newTabSpec("pes2");
Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 51

Tecsup

spec.setContent(R.id.pestania2);
spec.setIndicator("Servicios");
tabs.addTab(spec);
spec=tabs.newTabSpec("pes3");
spec.setContent(R.id.pestania3);
spec.setIndicator("Contacto");
tabs.addTab(spec);
tabs.setCurrentTab(0);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if
it is present.
getMenuInflater().inflate(R.menu.tabs, menu);
return true;
}

will
long

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar
// automatically handle clicks on the Home/Up button, so

// as you specify a parent activity in

AndroidManifest.xml.
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}
Modificamos el layout asociado al Activity:
activity_tabs.xml
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TabHost
android:id="@android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 52

Tecsup

android:orientation="vertical" >
<TabWidget
android:id="@android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:id="@+id/pestania1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:id="@+id/pestania2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:id="@+id/pestania3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
</LinearLayout>
</FrameLayout>
</LinearLayout>
</TabHost>
</LinearLayout>

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 53

Tecsup

ActionBar y Estilos
Revisar el video: Lab2_ActionBar_Estilos

En el paquete del proyecto, creamos un nuevo Activity en blanco:

MenuPrincipalActivity.java
package cursoandroid.lab02;
import
import
import
import
import

android.support.v7.app.ActionBarActivity;
android.os.Bundle;
android.view.Menu;
android.view.MenuItem;
android.widget.Toast;

public class MenuPrincipalActivity extends ActionBarActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_menu_principal);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 54

Tecsup

// Inflate the menu; this adds items to the action bar if it

is present.
getMenuInflater().inflate(R.menu.menu_menu_principal, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case android.R.id.home:
Toast.makeText(this, "Seleccionado el cono ",
Toast.LENGTH_SHORT).show();
return true;
case R.id.MnuOpc1:
Toast.makeText(this, "Seleccionado la opcin 1: ",
Toast.LENGTH_SHORT).show();
return true;
case R.id.MnuOpc2:
Toast.makeText(this, "Seleccionado la opcin 2: ",
Toast.LENGTH_SHORT).show();
return true;
case R.id.MnuOpc3:
Toast.makeText(this, "Seleccionado la opcin 3: ",
Toast.LENGTH_SHORT).show();
return true;
default:
return super.onOptionsItemSelected(item);
}
}

Modificamos el layout asociado al Activity:

activity_menu_principal.xml
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Ver las opciones del Men" />
</LinearLayout>

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 55

Tecsup

Nota: Modificar el archivo /res/menu/menu_menu_principal.xml:

Necesitar agregar los archivos de imagen menu1.png, menu2.png y
menu3.png. Descargarlos de la pgina www.iconfinder.com.
menu_menu_principal.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:context="curso.android.MenuPrincipalActivity"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/MnuOpc1"
android:title="Ayuda"
android:orderInCategory="500"
app:showAsAction="always"
android:icon="@drawable/menu1"/>
<item
android:id="@+id/MnuOpc2"
android:title="Ver"
android:orderInCategory="400"
app:showAsAction="always"
android:icon="@drawable/menu2"/>
<item
android:id="@+id/MnuOpc3"
android:title="Contacto"
android:orderInCategory="300"
app:showAsAction="always"
android:icon="@drawable/menu3"/>
<item
android:id="@+id/MnuOpc4"
app:showAsAction="never"
android:title="Ayuda" />
<item
android:id="@+id/MnuOpc5"
app:showAsAction="never"
android:title="Contactos" />
</menu>

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 56

Tecsup

Nota: Modificar el archivo /res/values/styles.xml:

styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- the theme applied to the application or activity -->
<style name="AppTheme"
parent="@style/Theme.AppCompat.Light.DarkActionBar">
<item
name="android:actionBarStyle">@style/EstiloActionBar</item>
<!-- Support library compatibility -->
<item name="actionBarStyle">@style/EstiloActionBar</item>
</style>
<!-- ActionBar styles -->
<style name="EstiloActionBar"
parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="android:background">@color/fondoActionBar</item>
<!-- Support library compatibility -->
<item name="background">@color/fondoActionBar</item>
</style>
</resources>
Nota: Crear el archivo, si no existe, /res/values/colors.xml con el siguiente
contenido:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="fondoActionBar">#ffafc8ff</color>
</resources>

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 57

Tecsup

Men Contextual

En el paquete del proyecto, creamos un nuevo Activity en blanco:

MenuContextualActivity.java
package cursoandroid.lab2;
import
import
import
import
import
import
import
import
import

android.app.Activity;
android.os.Bundle;
android.view.ContextMenu;
android.view.ContextMenu.ContextMenuInfo;
android.view.Menu;
android.view.MenuInflater;
android.view.MenuItem;
android.view.View;
android.widget.TextView;

public class MenuContextualActivity extends Activity {

static TextView lblMensaje;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_menu_contextual);
Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 58

Tecsup

// Obtenemos las referencias a los controles

lblMensaje = (TextView) findViewById(R.id.LblMensaje);
// Asociamos los mens contextuales a los controles
registerForContextMenu(lblMensaje);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if
it is present.
getMenuInflater().inflate(R.menu.menu_contextual, menu);
return true;
}

will

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar
// automatically handle clicks on the Home/Up button, so

long

// as you specify a parent activity in

AndroidManifest.xml.
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
@Override
public void onCreateContextMenu(ContextMenu menu, View v,
ContextMenuInfo menuInfo) {
super.onCreateContextMenu(menu, v, menuInfo);
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.menu_context_item, menu);
}
@Override
public boolean onContextItemSelected(MenuItem item) {

switch (item.getItemId()) {
case R.id.CtxLblOpc1:
lblMensaje.setText("Etiqueta: Opcion 1 pulsada!");
return true;
case R.id.CtxLblOpc2:
lblMensaje.setText("Etiqueta: Opcion 2 pulsada!");
return true;
default:
return super.onContextItemSelected(item);
}

}
Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 59

Tecsup

Modificamos el layout asociado al Activity:

activity_menu_contextual.xml
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<TextView
android:id="@+id/LblMensaje"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="Men contextual (mantenga presionado aqu)" />
</LinearLayout>
Nota: Crear el archivo en /res/menu/menu_context_item.xml:
menu_context_item.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="@+id/CtxLblOpc1"
android:title="OpcEtiqueta1">
</item>
<item
android:id="@+id/CtxLblOpc2"
android:title="OpcEtiqueta2">
</item>
</menu>

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 60

Tecsup

Men Contextual con Lista

En el paquete del proyecto, creamos un nuevo Activity en blanco:

ListaMenuContextualActivity.java
package cursoandroid.lab2;
import
import
import
import
import
import
import
import
import
import
import
import

android.app.Activity;
android.os.Bundle;
android.view.ContextMenu;
android.view.ContextMenu.ContextMenuInfo;
android.view.Menu;
android.view.MenuInflater;
android.view.MenuItem;
android.view.View;
android.widget.AdapterView;
android.widget.ArrayAdapter;
android.widget.ListView;
android.widget.Toast;

public class ListaMenuContextualActivity extends Activity {

static ListView lstLista;
@Override
protected void onCreate(Bundle savedInstanceState) {
Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 61

Tecsup

super.onCreate(savedInstanceState);
setContentView(R.layout.activity_lista_menu_contextual);
lstLista = (ListView) findViewById(R.id.LstLista);
String[] datos = new String[] { "Elem1", "Elem2",
"Elem3", "Elem4",
"Elem5" };
ArrayAdapter<String> adaptador = new
ArrayAdapter<String>(this, android.R.layout.simple_list_item_1,
datos);
lstLista.setAdapter(adaptador);
registerForContextMenu(lstLista);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if
it is present.
getMenuInflater().inflate(R.menu.lista_menu_contextual,
menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar
will

// automatically handle clicks on the Home/Up button, so

long

// as you specify a parent activity in

AndroidManifest.xml.
switch (item.getItemId()) {
case R.id.CtxLstOpc1:
Toast.makeText(this, "Etiqueta: Opcion 1 pulsada!",
Toast.LENGTH_LONG).show();
return true;
case R.id.CtxLstOpc2:
Toast.makeText(this, "Etiqueta: Opcion 2 pulsada!",
Toast.LENGTH_LONG).show();
return true;
default:
return super.onContextItemSelected(item);
}
}
@Override
public void onCreateContextMenu(ContextMenu menu, View v,
ContextMenuInfo menuInfo) {
super.onCreateContextMenu(menu, v, menuInfo);
MenuInflater inflater = getMenuInflater();
AdapterView.AdapterContextMenuInfo info =
(AdapterView.AdapterContextMenuInfo)menuInfo;
menu.setHeaderTitle(lstLista.getAdapter().getItem(info.position).toS
tring());
inflater.inflate(R.menu.menu_context_lista, menu);
}
Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 62

Tecsup

}
Modificamos el layout asociado al Activity:
activity_lista_menu_contextual.xml
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<ListView
android:id="@+id/LstLista"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" >
</ListView>
</LinearLayout>
Nota: Crear el archivo en /res/menu/menu_context_lista.xml:
menu_context_lista.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="@+id/CtxLstOpc1"
android:title="OpcLista1">
</item>
<item
android:id="@+id/CtxLstOpc2"
android:title="OpcLista2">
</item>
</menu>

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 63

Tecsup

Tabs Action Bar

En el paquete del proyecto, creamos un nuevo Activity en blanco:

TabsActionBarActivity.java
package cursoandroid.lab2;
import
import
import
import
import
import

android.app.ActionBar;
android.app.Activity;
android.app.Fragment;
android.os.Bundle;
android.view.Menu;
android.view.MenuItem;

public class TabsActionBarActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tabs_action_bar);
ActionBar abar = getActionBar();
// Se configura la navegacin a travs de Tabs
abar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
// Ocultar el ttulo del Activity
abar.setDisplayShowTitleEnabled(false);
// Creacin de tabs
Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 64

Tecsup

ActionBar.Tab tab1 = abar.newTab().setText("Pestaa 1");

ActionBar.Tab tab2 = abar.newTab().setText("Pestaa 2");
//Creamos los fragmentos de cada tab
Fragment tab1frag = new Tab1Fragmento();
Fragment tab2frag = new Tab2Fragmento();
//Asociamos los listener a los tabs
tab1.setTabListener(new MiTabListener(tab1frag));
tab2.setTabListener(new MiTabListener(tab2frag));
// Agregar los tabs al ActionBar
abar.addTab(tab1);
abar.addTab(tab2);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if
it is present.
getMenuInflater().inflate(R.menu.tabs_action_bar, menu);
return true;
}

will
long

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar
// automatically handle clicks on the Home/Up button, so

// as you specify a parent activity in

AndroidManifest.xml.
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}
Modificamos el layout asociado al Activity:
activity_tabs_action_bar.xml
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 65

Tecsup

<LinearLayout
android:id="@+id/tabs_contenedor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="58dp"
android:layout_marginTop="69dp"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
Nota: Crear la clase Java en el paquete mod1.lab3:
MiTabListener.java
package cursoandroid.lab2;
import
import
import
import
import

android.app.ActionBar.Tab;
android.app.ActionBar.TabListener;
android.app.Fragment;
android.app.FragmentTransaction;
android.util.Log;

public class MiTabListener implements TabListener {

private Fragment fragment;
public MiTabListener(Fragment fg)
{
this.fragment = fg;
}
@Override
public void onTabReselected(Tab tab, FragmentTransaction ft) {
Log.i("ActionBar", tab.getText() + " reseleccionada.");
}
@Override
public void onTabSelected(Tab tab, FragmentTransaction ft) {
Log.i("ActionBar", tab.getText() + " seleccionada.");
ft.replace(R.id.tabs_contenedor, fragment);
}
@Override
public void onTabUnselected(Tab tab, FragmentTransaction ft) {
Log.i("ActionBar", tab.getText() + " deseleccionada.");
ft.remove(fragment);
}
}

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 66

Tecsup

Nota: Crear la clase Java en el paquete mod1.lab3:

Tab1Fragmento.java
package cursoandroid.lab2;
import
import
import
import
import

android.app.Fragment;
android.os.Bundle;
android.view.LayoutInflater;
android.view.View;
android.view.ViewGroup;

public class Tab1Fragmento extends Fragment {

@Override
public View onCreateView(LayoutInflater inflater,
ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.tabs_fragmento1, container,
false);
}
}
Nota: Crear la clase Java en el paquete mod1.lab3:
Tab2Fragmento.java
package cursoandroid.lab2;
import
import
import
import
import

android.app.Fragment;
android.os.Bundle;
android.view.LayoutInflater;
android.view.View;
android.view.ViewGroup;

public class Tab2Fragmento extends Fragment {

@Override
public View onCreateView(LayoutInflater inflater,
ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.tabs_fragmento2, container,
false);
}
}

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 67

Tecsup

Nota: Crear el archivo en /res/layout/tabs_fragmento1.xml:

tabs_fragmento1.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Fragmento 1" />
</LinearLayout>
Nota: Crear el archivo en /res/layout/tabs_fragmento2.xml:
tabs_fragmento2.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Fragmento 2" />
</LinearLayout>

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 68

Tecsup

Nota: Modificar el archivo /res/values/styles.xml:

styles.xml
<resources>
<!--

Base application theme, dependent on API level. This theme

is replaced
by AppBaseTheme from res/values-vXX/styles.xml on newer
devices.
-->
<style name="AppBaseTheme" parent="android:Theme.Light">
<!-Theme customizations available in newer API levels can
go in
res/values-vXX/styles.xml, while customizations related
to
backward-compatibility can go here.
-->
</style>
<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
<!-- All customizations that are NOT specific to a
particular API-level can go here. -->
<item
name="android:actionBarStyle">@style/EstiloActionBar</item>
<item
name="android:titleTextStyle">@style/EstiloTitleText</item>
<item
name="android:actionBarTabTextStyle">@style/EstiloTabTitleText</item
>
</style>
<style name="EstiloActionBar"
parent="@android:style/Widget.ActionBar">
<item name="android:background">#ffffff</item>
</style>
<style name="EstiloTitleText"
parent="@android:style/Widget.ActionBar">
<item name="android:textColor">#00ff00</item>
</style>
<style name="EstiloTabTitleText"
parent="@android:style/Widget.ActionBar.TabText">
<item name="android:textColor">#0000ff</item>
<item name="android:textSize">18sp</item>
</style>
</resources>

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 69

Tecsup

Services (Tareas en Background)

Nota: Crear la clase Java en el paquete mod1.lab3:
MostrarHoraService.java
package cursoandroid.lab2;
import
import
import
import

java.util.Calendar;
java.util.GregorianCalendar;
java.util.Timer;
java.util.TimerTask;

import
import
import
import
import

android.app.Service;
android.content.Intent;
android.os.Handler;
android.os.IBinder;
android.widget.Toast;

public class MostrarHoraService extends Service {

private Timer mTimer = new Timer();
public static final long INTERVALO_SEGUNDOS = 4 * 1000;
// Handler es una clase que crea otro hilo de ejecucin para
evitar
// el error can't create handler inside thread that has not
called
// looper.prepare()
private Handler mHandler;
public MostrarHoraService() {
mHandler = new Handler();
}
@Override
public IBinder onBind(Intent arg0) {
return null;
}
@Override
public int onStartCommand(Intent intent, int flags, int
startId) {
mTimer.scheduleAtFixedRate(new TimeDisplayTimerTask(), 0,
INTERVALO_SEGUNDOS);
return START_STICKY;
}
// Inicio de Timer
class TimeDisplayTimerTask extends TimerTask {
@Override
public void run() {

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 70

Tecsup

// Crear otro hilo

mHandler.post(new Runnable() {

GregorianCalendar();

@Override
public void run() {
GregorianCalendar gc = new

String hora = gc.get(Calendar.HOUR) + ":"

+ gc.get(Calendar.MINUTE) + ":" + gc.get(Calendar.SECOND);
Toast.makeText(getBaseContext(), hora,
Toast.LENGTH_SHORT).show();
}
});
}
}
@Override
public void onDestroy() {
super.onDestroy();
Toast.makeText(this, "Service Destroyed",
Toast.LENGTH_LONG).show();
}
}

Nota: Agregar al AndroidManifest.xml, dentro de la etiqueta <application>:

...
<service
android:name="mod1.lab3.MostrarHoraService"
android:label="MostrarHora Service"
android:exported="false"/>
...

Nota: Agregar al Activity que tiene el Launcher, en el mtodo onCreate()

...
startService(new Intent(getBaseContext(), MostrarHoraService.class));
...

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 71

Tecsup

Widget
Revisar el video: Lab2_Widget

Nota: Crear una clase Java en el paquete del proyecto:

SaludoWidget.java
package cursoandroid.lab02;
import
import
import
import
import
import

android.appwidget.AppWidgetManager;
android.appwidget.AppWidgetProvider;
android.content.ComponentName;
android.content.Context;
android.util.Log;
android.widget.RemoteViews;

public class SaludoWidget extends AppWidgetProvider {

@Override
public void onUpdate(Context
appWidgetManager, int[] appWidgetIds) {
Log.i("====>", "En onUpdate()");

context,

AppWidgetManager

ComponentName thisWidget = new ComponentName(context,

SaludoWidget.class);
int[]
widgetId
=
appWidgetManager.getAppWidgetIds(thisWidget);
Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 72

Tecsup

RemoteViews
remoteViews
=
new
RemoteViews(context.getPackageName(), R.layout.widget_saludo);
remoteViews.setTextViewText(R.id.txtMensaje, "Bienvenido
jugador");
appWidgetManager.updateAppWidget(widgetId, remoteViews);
}

Nota: Crear el archivo en /res/layout/widget_saludo.

Tambin, buscar y descargar un archivo de imagen y guardarlo en
/res/drawable/jugador.png.
widget_saludo.xml
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_margin="5dp"
android:background="#ffffff"
android:padding="10dp"
android:orientation="vertical" >
<TextView
android:id="@+id/txtMensaje"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Bienvenido "
android:textColor="#000000" />
<ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/jugador" />
</LinearLayout>

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 73

Tecsup

Nota: Crear el archivo en la carpeta /res/xml/:

menu_widget_saludo.xml
<?xml version="1.0" encoding="utf-8"?>
<appwidget-provider
xmlns:android="http://schemas.android.com/apk/res/android"
android:initialLayout="@layout/widget_saludo"
android:minWidth="180dip"
android:minHeight="100dip"
android:updatePeriodMillis="3600000"
/>

Nota: Agregar al AndroidManifest.xml, dentro de la etiqueta <application>:

<receiver
android:name=".SaludoWidget"
android:label="Ejemplo de Widget" >
<intent-filter>
<action
android:name="android.appwidget.action.APPWIDGET_UPDATE" />
</intent-filter>
<meta-data
android:name="android.appwidget.provider"
android:resource="@xml/menu_widget_saludo" />
</receiver>

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 74

Tecsup

Conclusiones:
En la presente sesin, se detall el diseo de interfaces en Android junto con sus
componentes ms importantes de la tecnologa.

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 75