m1 lab3 nuevo

7/21/2019 m1 Lab3 Nuevo

1/33

GUA DE LABORATORIO 3

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

en background

7/21/2019 m1 Lab3 Nuevo

2/33

Tecsup

Dpto. de Informtica David Rodrguez - [email protected] Pg. 1

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 delos puntos, ello le dar a la sesin una interaccin de la teora y la parte prctica, ya que entodo el momento el alumno podr comprobar en su propia PC, todos los tems del manual.

Procedimiento y Resultados:

7/21/2019 m1 Lab3 Nuevo

3/33

Tecsup


Pe staas

TabsActivity.java package mod1.lab3;

import android.app.Activity;import android.os.Bundle;import android.view.Menu;import android.view.MenuItem;import 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 );

7/21/2019 m1 Lab3 Nuevo

4/33

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 ifit is present.

getMenuInflater().inflate(R.menu. tabs , menu );return true ;

}

@Override public boolean onOptionsItemSelected(MenuItem item ) {

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

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

// as you specify a parent activity inAndroidManifest.xml.

int id = item .getItemId();if ( id == R.id. action_settings ) {

return true ;}return super .onOptionsItemSelected( item );

}}

7/21/2019 m1 Lab3 Nuevo

5/33

Tecsup


activity_tabs.java

7/21/2019 m1 Lab3 Nuevo

6/33

Tecsup


Action Bar y Estilos

MenuPrincipalActivity.java package mod1.lab3;

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

public class MenuPrincipalActivity extends Activity {


super .onCreate( savedInstanceState );

setContentView(R.layout. activity_menu_principal );

this .getActionBar().setHomeButtonEnabled( true );

}



getMenuInflater().inflate(R.menu. menu_principal , menu );return true ;

}


7/21/2019 m1 Lab3 Nuevo

7/33

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

}}

7/21/2019 m1 Lab3 Nuevo

8/33

Tecsup


activity_menu_principal.xml

7/21/2019 m1 Lab3 Nuevo

9/33

Tecsup


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

menu_principal.xml

7/21/2019 m1 Lab3 Nuevo

10/33

Tecsup


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

styles.xml

@style/EstiloActionBar

@style/EstiloTitleText

#ffffff

#00ff00

7/21/2019 m1 Lab3 Nuevo

11/33

Tecsup


Men Con textu al

MenuContextualActivity.java package mod1.lab3;

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

public class MenuContextualActivity extends Activity {

static TextView lblMensaje ;


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

7/21/2019 m1 Lab3 Nuevo

12/33

Tecsup


registerForContextMenu( lblMensaje );

}

@Override

public boolean onCreateOptionsMenu(Menu menu ) {// Inflate the menu; this adds items to the action bar ifit is present.

getMenuInflater().inflate(R.menu. menu_contextual , menu );return true ;

}



// 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 ) {


}

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

}}

}

7/21/2019 m1 Lab3 Nuevo

13/33

Tecsup


activity_menu_contextual.xml

7/21/2019 m1 Lab3 Nuevo

14/33

Tecsup


Nota: Crear el archivo en /res/menu/menu_context_item.xml:

menu_context_item.xml

7/21/2019 m1 Lab3 Nuevo

15/33

Tecsup


Men Contextual co n L ista

ListaMenuContextualActivity.java package mod1.lab3;

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

public class ListaMenuContextualActivity extends Activity {

static ListView lstLista ;


super .onCreate( savedInstanceState );setContentView(R.layout. activity_lista_menu_contextual );

7/21/2019 m1 Lab3 Nuevo

16/33

Tecsup


lstLista = (ListView) findViewById(R.id. LstLista );String[] datos = new String[] { "Elem1" , "Elem2" ,

"Elem3" , "Elem4" , "Elem5" };ArrayAdapter adaptador = new

ArrayAdapter( this , android.R.layout. simple_list_item_1 ,

datos ); lstLista .setAdapter( adaptador );registerForContextMenu( lstLista );

}



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

return true ;

}





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 ).toString());

inflater .inflate(R.menu. menu_context_lista , menu );}

}

7/21/2019 m1 Lab3 Nuevo

17/33

Tecsup


activity_lista_menu_contextual.xml

7/21/2019 m1 Lab3 Nuevo

18/33

Tecsup


Nota: Crear el archivo en /res/menu/menu_context_lista.xml:

menu_context_lista.xml

7/21/2019 m1 Lab3 Nuevo

19/33

Tecsup


Tabs Action Bar

TabsActionBarActivity.java package mod1.lab3;

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

public class TabsActionBarActivity extends Activity {


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

7/21/2019 m1 Lab3 Nuevo

20/33

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

}



getMenuInflater().inflate(R.menu. tabs_action_bar , menu );return true ;

}





int id = item .getItemId();if ( id == R.id. action_settings ) {


}}

7/21/2019 m1 Lab3 Nuevo

21/33

Tecsup


activity_tabs_action_bar.xml

7/21/2019 m1 Lab3 Nuevo

22/33

Tecsup


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

MiTabListener.java package mod1.lab3;

import android.app.ActionBar.Tab;import android.app.ActionBar.TabListener;import android.app.Fragment;import android.app.FragmentTransaction;import 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 );

}}

7/21/2019 m1 Lab3 Nuevo

23/33

Tecsup



Tab1Fragmento.java package mod1.lab3;

import android.app.Fragment;import android.os.Bundle;import android.view.LayoutInflater;import android.view.View;import 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 );}

}

7/21/2019 m1 Lab3 Nuevo

24/33

Tecsup



Tab2Fragmento.java package mod1.lab3;

import android.app.Fragment;import android.os.Bundle;import android.view.LayoutInflater;import android.view.View;import 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 );}

}

7/21/2019 m1 Lab3 Nuevo

25/33

Tecsup


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

tabs_fragmento1.xml

7/21/2019 m1 Lab3 Nuevo

26/33

Tecsup


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

tabs_fragmento2.xml

7/21/2019 m1 Lab3 Nuevo

27/33

Tecsup


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

styles.xml

@style/EstiloActionBar

@style/EstiloTitleText

@style/EstiloTabTitleText

#ffffff

#00ff00

#0000ff 18sp

7/21/2019 m1 Lab3 Nuevo

28/33

Tecsup


Services (Tareas en Backgro und )


MostrarHoraService.java package mod1.lab3;

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

import android.app.Service;import android.content.Intent;import android.os.Handler;import android.os.IBinder;import 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 paraevitar

// el error can't create handler inside thread that has notcalled

// 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() {

7/21/2019 m1 Lab3 Nuevo

29/33

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 :

...

...

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

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

7/21/2019 m1 Lab3 Nuevo

30/33

Tecsup


Widget


SaludoWidget.java package mod1.lab3;

import android.appwidget.AppWidgetManager;import android.appwidget.AppWidgetProvider;import android.content.ComponentName;import android.content.Context;import android.util.Log;import 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 );

7/21/2019 m1 Lab3 Nuevo

31/33

Tecsup


remoteViews .setTextViewText(R.id. txtMensaje , "Bienvenidojugador" );

appWidgetManager .updateAppWidget( widgetId , remoteViews );}

}

7/21/2019 m1 Lab3 Nuevo

32/33

Tecsup


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

widget_saludo.xml

7/21/2019 m1 Lab3 Nuevo

33/33

Tecsup

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

menu_widget_saludo.xml

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

Conclusiones:

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

m1 lab3 nuevo

Documents