90
GUÍA DE LABORATORIO 2 “Diseño de interfaces de usuario”

Ejemplos de programación Android

Embed Size (px)

DESCRIPTION

Ejemplos para android studio.

Citation preview

PROGRAMACION WEB CON PHP

GUA DE LABORATORIO 2Diseo de interfaces de usuario

LABORATORIO

Objetivos:

Identificar los componentes que nos proporciona el SDK de Android.

Disear aplicaciones utilizando los controles adecuadamenteEquipos, 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:

TextViewRevisar el video: Lab2_TextView

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

package cursoandroid.lab02;import android.app.Activity;import android.os.Bundle;import android.view.Menu;import 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) {

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

Button

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

ButtonActivity.javapackage cursoandroid.lab02;import android.app.Activity;import android.os.Bundle;import android.view.Menu;import android.view.MenuItem;import android.view.View;import android.widget.Toast;import 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;

}

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

ImageView y ScrollViewRevisar 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.javapackage cursoandroid.lab02;import android.app.Activity;import android.os.Bundle;import android.view.Menu;import 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;

}

@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_image.xml

EditText

En el paquete del proyecto, creamos un nuevo Activity en blanco:EditTextActivity.javapackage cursoandroid.lab02;import android.app.Activity;import android.os.Bundle;import android.view.Menu;import 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

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_edit_text.xml

AutoCompleteTextViewRevisar el video: Lab2_AutoCompleteTextView

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

AutoCompletarActivity.javapackage cursoandroid.lab02;import android.app.Activity;import android.os.Bundle;import android.text.Editable;import android.text.TextWatcher;import android.util.Log;import android.view.Menu;import android.view.MenuItem;import android.view.View;import android.widget.ArrayAdapter;import 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" };

AutoCompleteTextView myAutoComplete = (AutoCompleteTextView) findViewById(R.id.autoCompleteTextView1);

myAutoComplete.addTextChangedListener(this);

myAutoComplete.setAdapter(new ArrayAdapter(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());

}}Modificamos el layout asociado al Activity:

activity_auto_completar.xml

CheckBox y RadioButton

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

CheckBoxRadioGroupActivity.javapackage cursoandroid.lab02;import android.app.Activity;import android.os.Bundle;import android.view.Menu;import android.view.MenuItem;import android.view.View;import android.widget.CheckBox;import android.widget.RadioButton;import 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.

getMenuInflater().inflate(R.menu.check_box_radio_group, 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 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();

}}Modificamos el layout asociado al Activity:

activity_check_box_radio_group.xml

ProgressBar

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

ProgressDialogActivity.javapackage cursoandroid.lab02;import android.app.Activity;import android.app.ProgressDialog;import android.os.Bundle;import android.os.Handler;import android.view.Menu;import android.view.MenuItem;import 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;

}

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

}

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

}

});

}

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

SeekBar

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

SeekBarActivity.javapackage cursoandroid.lab02;import android.app.Activity;import android.os.Bundle;import android.view.Menu;import android.view.MenuItem;import android.widget.EditText;import 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

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

ArrayAdapter (I) - SpinnerRevisar el video: Lab2_ArrayAdapter_Spinner

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

ArrayAdapterActivity.javapackage cursoandroid.lab02;import android.app.Activity;import android.os.Bundle;import android.util.Log;import android.view.Menu;import android.view.MenuItem;import android.view.View;import android.widget.AdapterView;import android.widget.ArrayAdapter;import android.widget.Spinner;import android.widget.Toast;public class ArrayAdapterActivity extends Activity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_array_adapter);

final String[] cursos = new String[] { "Sistemas distribuidos","Gerencia de proyectos", "Simulacin de sistemas" };

ArrayAdapter adaptador = new ArrayAdapter(this,android.R.layout.simple_spinner_item, cursos);

adaptador.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_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) {

Toast.makeText(ArrayAdapterActivity.this, "No ha seleccionado",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){

Spinner s = (Spinner)findViewById(R.id.desplegable_cursos);

Log.i("==>", s.getSelectedItem().toString());

}}Modificamos el layout asociado al Activity:

activity_array_adapter.xml

ArrayAdapter (II) - GridView

ArrayAdapter2Activity.javapackage cursoandroid.lab02;import android.app.Activity;import android.os.Bundle;import android.view.Menu;import android.view.MenuItem;import android.widget.AdapterView;import android.widget.ArrayAdapter;import android.widget.GridView;import 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";

ArrayAdapter adaptador = new ArrayAdapter(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);

}}activity_array_adapter2.xml

SimpleAdapter ListViewRevisar el video: Lab2_SimpleAdapter_ListView

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

SimpleAdapterActivity.javapackage cursoandroid.lab02;import java.util.ArrayList;import java.util.HashMap;import android.app.Activity;import android.os.Bundle;import android.view.Menu;import android.view.MenuItem;import android.widget.ListView;import android.widget.SimpleAdapter;public class SimpleAdapterActivity extends Activity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

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 lista = new ArrayList();

String[] evento1 = { "11:30", "Reunin de coordinacin", "Lugar: Auditorio", "1" };

String[] evento2 = { "12:00", "Almuerzo", "Lugar: Comedor central", "2" };

String[] evento3 = { "14:00", "Tiro al dardo", "Lugar: Oficina", "3" };

lista.add(evento1);

lista.add(evento2);

lista.add(evento3);

ArrayList eventos = new ArrayList();

for (String[] evento : lista) {

HashMap datosEvento = new HashMap();

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;

}

@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_simple_array.xml

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

SimpleCursorAdapter - ListView

En el paquete del proyecto, creamos un nuevo Activity en blanco:SimpleCursorAdapterActivity.javapackage cursoandroid.lab02;import android.app.Activity;import android.database.Cursor;import android.database.MatrixCursor;import android.os.Bundle;import android.view.Menu;import android.view.MenuItem;import android.widget.ListView;import 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

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

}}Modificamos el layout asociado al Activity:

activity_simple_cursor_adapter.xml

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

simple_cursor_adapter_fila.xml

Adaptador Personalizado

En el paquete del proyecto, creamos un nuevo Activity en blanco:AdaptadorPersonalizadoActivity.xmlpackage cursoandroid.lab02;import android.app.Activity;import android.os.Bundle;import android.util.SparseArray;import android.view.Menu;import android.view.MenuItem;import android.widget.ExpandableListView;public class AdaptadorPersonalizadoActivity extends Activity {

SparseArray grupos = new SparseArray();

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_adaptador_personalizado);

cargarDatos();

ExpandableListView ampliableVista = (ExpandableListView) findViewById(R.id.listaAmpliable);

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

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

ampliable_grupo.xml

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

ampliable_fila.xml

Nota: Agregar una nueva Clase Java llamada AmpliableGrupo.java en el paquete de clases.

AmpliableGrupo.javapackage cursoandroid.lab02;import java.util.ArrayList;import java.util.List;public class AmpliableGrupo {

public String titulo;

public final List children = new ArrayList();

public AmpliableGrupo(String titulo) {

this.titulo = titulo;

}}Nota: Agregar una nueva Clase Java llamada AmpliableAdapter.java en el paquete de clases.

AmpliableAdapter.javapackage cursoandroid.lab02;import android.app.Activity;import android.util.SparseArray;import android.view.LayoutInflater;import android.view.View;import android.view.View.OnClickListener;import android.view.ViewGroup;import android.widget.BaseExpandableListAdapter;import android.widget.CheckedTextView;import android.widget.TextView;import android.widget.Toast;public class AmpliableAdapter extends BaseExpandableListAdapter {

private final SparseArray grupos;

public LayoutInflater inflater;

public Activity activity;

public AmpliableAdapter(Activity act, SparseArray grupos) {

activity = act;

this.grupos = grupos;

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

}

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

}}Ejercicios PropuestosDisear las siguientes pantallas en Android:

Pestaas

En el paquete del proyecto, creamos un nuevo Activity en blanco:TabsActivity.javapackage cursoandroid.lab2;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);

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

}}Modificamos el layout asociado al Activity:

activity_tabs.xml

ActionBar y EstilosRevisar el video: Lab2_ActionBar_Estilos

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

MenuPrincipalActivity.javapackage cursoandroid.lab02;

import android.support.v7.app.ActionBarActivity;

import android.os.Bundle;

import android.view.Menu;

import android.view.MenuItem;

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

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

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

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

styles.xml

@style/EstiloActionBar

@style/EstiloActionBar

@color/fondoActionBar

@color/fondoActionBar

Nota: Crear el archivo, si no existe, /res/values/colors.xml con el siguiente contenido:

#ffafc8ff

Men Contextual

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

MenuContextualActivity.javapackage cursoandroid.lab2;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;

@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

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

}

}}Modificamos el layout asociado al Activity:activity_menu_contextual.xml

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

Men Contextual con Lista

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

ListaMenuContextualActivity.javapackage cursoandroid.lab2;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;

@Override

protected void onCreate(Bundle savedInstanceState) {

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 adaptador = new ArrayAdapter(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).toString()); inflater.inflate(R.menu.menu_context_lista, menu);

}}Modificamos el layout asociado al Activity:

activity_lista_menu_contextual.xml

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

Tabs Action Bar

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

TabsActionBarActivity.javapackage cursoandroid.lab2;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 {

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

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

}}Modificamos el layout asociado al Activity:

activity_tabs_action_bar.xml

Nota: Crear la clase Java en el paquete mod1.lab3:MiTabListener.javapackage cursoandroid.lab2;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); }}Nota: Crear la clase Java en el paquete mod1.lab3:Tab1Fragmento.javapackage cursoandroid.lab2;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); }}Nota: Crear la clase Java en el paquete mod1.lab3:Tab2Fragmento.javapackage cursoandroid.lab2;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); }} Nota: Crear el archivo en /res/layout/tabs_fragmento1.xml:tabs_fragmento1.xml

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

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

@style/EstiloActionBar @style/EstiloTitleText @style/EstiloTabTitleText

#ffffff #00ff00 #0000ff 18sp

Services (Tareas en Background)

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

MostrarHoraService.javapackage cursoandroid.lab2;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 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() {

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

...Widget

Revisar el video: Lab2_Widget

Nota: Crear una clase Java en el paquete del proyecto:SaludoWidget.javapackage cursoandroid.lab02;

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

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

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

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 junto con sus componentes ms importantes de la tecnologa.