GUA DE LABORATORIO 3

Diseo de interfaces de usuario (2/2) y tareas

en background

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

Pestaas

TabsActivity.java
package mod1.lab3;
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");
spec.setContent(R.id.pestania2);
spec.setIndicator("Servicios");
tabs.addTab(spec);
Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 2

Tecsup

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;
}
@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. 3

Tecsup

activity_tabs.java
<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"
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. 4

Tecsup

ActionBar y Estilos

MenuPrincipalActivity.java
package mod1.lab3;
import
import
import
import
import

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

public class MenuPrincipalActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_menu_principal);
this.getActionBar().setHomeButtonEnabled(true);
}
@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_principal, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 5

Tecsup

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);
}
}
}

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

Pg. 6

Tecsup

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"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="mod1.lab3.MenuPrincipalActivity" >
<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. 7

Tecsup

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

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" >
<item
android:id="@+id/MnuOpc1"
android:title="Ayuda"
android:orderInCategory="500"
android:showAsAction="always"
android:icon="@drawable/menu1"/>
<item
android:id="@+id/MnuOpc2"
android:title="Ver"
android:orderInCategory="400"
android:showAsAction="always"
android:icon="@drawable/menu2"/>
<item
android:id="@+id/MnuOpc3"
android:title="Contacto"
android:orderInCategory="300"
android:showAsAction="always"
android:icon="@drawable/menu3"/>
<item
android:id="@+id/MnuOpc4"
android:showAsAction="never"
android:title="Ayuda" />
<item
android:id="@+id/MnuOpc5"
android:showAsAction="never"
android:title="Contactos" />
</menu>

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

Pg. 8

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>
</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>
</resources>

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

Pg. 9

Tecsup

Men Contextual

MenuContextualActivity.java
package mod1.lab3;
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);
// Obtenemos las referencias a los controles
lblMensaje = (TextView) findViewById(R.id.LblMensaje);
// Asociamos los mens contextuales a los controles
Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 10

Tecsup

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;
}
@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 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. 11

Tecsup

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"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin" >
<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>

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

Pg. 12

Tecsup

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. 13

Tecsup

Men Contextual con Lista

ListaMenuContextualActivity.java
package mod1.lab3;
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) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_lista_menu_contextual);
Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 14

Tecsup

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. 15

Tecsup

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"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin" >
<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>

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

Pg. 16

Tecsup

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. 17

Tecsup

Tabs Action Bar

TabsActionBarActivity.java
package mod1.lab3;
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
ActionBar.Tab tab1 = abar.newTab().setText("Pestaa 1");
ActionBar.Tab tab2 = abar.newTab().setText("Pestaa 2");
Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 18

Tecsup

//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;
}
@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. 19

Tecsup

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"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin" >
<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>

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

Pg. 20

Tecsup

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

MiTabListener.java
package mod1.lab3;
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. 21

Tecsup

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

Tab1Fragmento.java
package mod1.lab3;
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);
}
}

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

Pg. 22

Tecsup

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

Tab2Fragmento.java
package mod1.lab3;
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. 23

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>

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

Pg. 24

Tecsup

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. 25

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. 26

Tecsup

Services (Tareas en Background)

Nota: Crear la clase Java en el paquete mod1.lab3:
MostrarHoraService.java
package mod1.lab3;
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. 27

Tecsup

// Crear otro hilo

mHandler.post(new Runnable() {
@Override
public void run() {
GregorianCalendar gc = new
GregorianCalendar();
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. 28

Tecsup

Widget

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

SaludoWidget.java
package mod1.lab3;
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 context, AppWidgetManager
appWidgetManager, int[] appWidgetIds) {
Log.i("====>", "En onUpdate()");
ComponentName thisWidget = new ComponentName(context,
SaludoWidget.class);
int[] widgetId =
appWidgetManager.getAppWidgetIds(thisWidget);
RemoteViews remoteViews = new
RemoteViews(context.getPackageName(), R.layout.widget_saludo);
Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 29

Tecsup

remoteViews.setTextViewText(R.id.txtMensaje, "Bienvenido
jugador");
appWidgetManager.updateAppWidget(widgetId, remoteViews);
}
}

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

Pg. 30

Tecsup

Nota: Crear el archivo en /res/layout/. Adems copiar un archivo llamado jugador.png en la

carpeta /res/drawable/.
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. 31

Tecsup

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

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="mod1.lab3.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="@menu/widget_saludo" />
</receiver>

Conclusiones:
En la presente sesin, se detall el diseo de interfaces en Android.

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

Pg. 32