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.