SENA REGIONAL CAUCA

CENTRO DE TELEINFORMTICA Y PRODUCCIN INDUSTRIAL

5. Diferentes botones en Android

Ahora veremos las diferentes opciones que tenemos para aadir botones que se ajusten ms a
casos concretos.
BUTTON
Lo hemos visto en el tutorial anterior, este tipo de botones es muy verstil,

Visualmente puede ser:

- Texto
- Texto + Imagen
- Imagen
- Varias Imgenes
Para aadir una imagen a un botn utilizaremos las propiedades drawableLeft, drawableRight,
drawableTop, drawableBottom que indicarn que imagen poner y dnde (izquierda, derecha, arriba
y abajo respectivamente)
IMAGEBUTTON
Similar al anterior, este tipo de botn es utilizado cuando visualmente el botn sea una imagen.
Aadir que para poner una imagen debemos utilizar la propiedad src o mediante codigo java:

btn.setCompoundDrawablesWithIntrinsicBounds(
0, // left
R.drawable.ic_launcher, // top
0,// right
0); // bottom

Ing. Giovanny Angulo

SENA REGIONAL CAUCA

CENTRO DE TELEINFORMTICA Y PRODUCCIN INDUSTRIAL
CHECKBOX, TOGGLEBUTTON Y SWITCH
Son un tipo de botones booleanos, que puede contener dos estados, checked o unchecked. En
principio solo cambia la apariencia. El tipo de boton Switch lo tenemos disponible a partir de
Android 4.
Podemos utilizarlos de dos formas una es llamando al mtodo setOnCheckedChangeListener :

import android.app.Activity;
import android.os.Bundle;
import android.widget.CheckBox;
import android.widget.CompoundButton;
public class MainActivity extends Activity {
private CheckBox cb;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
cb = (CheckBox) findViewById(R.id.checkBox);
cb.setOnCheckedChangeListener(new
CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton compoundButton,
boolean b) {
if (b = true) {
// botn marcado
} else {
// botn desmarcado
}
}
});

Ing. Giovanny Angulo

SENA REGIONAL CAUCA

CENTRO DE TELEINFORMTICA Y PRODUCCIN INDUSTRIAL
}
}
y otro forma tambin correcta es establecer la propiedad onClick: por ejemplo
onClick:onClickCheckBox y nuestro cdigo java quedara:

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.CheckBox;
public class MainActivity extends Activity {
private CheckBox cb;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
public void onClickCheckBox(View v) {
boolean check = ((CheckBox) v).isChecked();
if (check) {
//el botn ha sido activado
}
}
}

EL EVENTO onLongClick();
El mtodo onLongClick() es utilizado cuando el usuario realice una pulsacin larga sobre alguno de
nuestros botones. Se implementa de la misma forma que onClick(), la diferencia fundamental es
que retorna un valor booleano que debemos establecerlo en true si no queremos que
seguidamente se ejecute el onClick.

Ing. Giovanny Angulo

SENA REGIONAL CAUCA

CENTRO DE TELEINFORMTICA Y PRODUCCIN INDUSTRIAL

Adaptadores Android
Antes de ver los controles de seleccin, es necesario entender qu son y para qu se utilizan los
adaptadores.
ADAPTADORES
Los controles de seleccin como pueden ser el ListView, GridView, Spinner y Gallery, muestran
una coleccin de datos, sin embargo, usan un control o controles bsicos para mostrar la
informacin. Por ejemplo, un ListView podra mostrar una lista de ciudades, pero para mostrar el
nombre de la ciudad usa un TextView. Podemos considerar, que los controles de seleccin son
contenedores de un grupo de controles hijos.
Android asigna la responsabilidad del manejo de la coleccin de datos (la lista de nombres de
ciudades) al adaptador y adems proporcionar el View para cada item de la coleccin de datos.
Una imgen vale ms que mil palabras...

Ejemplo de adaptador

ADAPTADORES MS USADOS
ArrayAdapter<T>: Es el ms simple de los adaptadores en android, podemos utilizarlo con un
array de objetos, por defecto, usar la funcin toString del objeto para construir el View. En muchos
casos no ser suficiente con este adaptador para nuestras necesidades, y necesitaremos crear
uno propio, sobrescribiendo el mtodo getView como veremos en prximos tutoriales.

String[] colores = new String[]{"Rojo","Verde","Azul","Amarillo"};

ArrayAdapter<String> adapter;
adapter = new
ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,colores);
ListView viewById = (ListView) findViewById(R.id.listView);
viewById.setAdapter(adapter);
CursorAdapter: adaptador especifico para generalmente, el resultado de una consulta SQL.

Ing. Giovanny Angulo

SENA REGIONAL CAUCA

CENTRO DE TELEINFORMTICA Y PRODUCCIN INDUSTRIAL

SimpleAdapter: suele utilizarse para datos estticos, cuando creamos un array de valores en un
XML.

Controles de Seleccin Bsicos

Los controles de seleccin permiten al usuario elegir entre varias opciones, por ejemplo (y me
parece que siempre pongo el mismo ejemplo) una lista de pases. Es importante que antes de leer
este tutorial, echis un ojo al tutorial de adaptadores,
Ver video
En este tutorial veremos:

ListView: Muestra datos en forma de lista.

GridView: En forma de cuadricula

Spinner: Una lista desplegable

Gallery: Obsoleto desde la versin 4.1 as que no lo veremos,

RadioButton: el tpico control que existe en la mayora de los lenguajes de programacin.

Veamos estos controles en su forma ms sencilla, para poder verlos despus de forma
ms avanzada en los siguientes tutoriales.

LISTVIEW
Veamos el cdigo:

public class MainActivity extends Activity {

private String[] colores;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
colores = new
String[]{"Rojo","Verde","Azul","Amarillo","Naranja"};
ArrayAdapter<String> adapter;

Ing. Giovanny Angulo

SENA REGIONAL CAUCA

CENTRO DE TELEINFORMTICA Y PRODUCCIN INDUSTRIAL
adapter = new
ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,colores);
ListView lv = (ListView) findViewById(R.id.listView);
lv.setAdapter(adapter);
lv.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> adapterView, View
view, int i, long l) {
Toast.makeText(getApplicationContext(), "Has
seleccionado: "+ colores[i], Toast.LENGTH_SHORT).show();
}
});
}
}

Se ha declarado un array de Strings por ser la forma ms comn, en este caso colores (ya me
cans de los pases), pero como vimos en el apartado de adaptadores, el ArrayAdapter admite

Ing. Giovanny Angulo

SENA REGIONAL CAUCA

CENTRO DE TELEINFORMTICA Y PRODUCCIN INDUSTRIAL
objetos, entonces podra utilizar un array de objetos propios... digamos MiObjeto? Si has creado
el mtodo toString() en tu objeto, la respuesta es S!.
El mtodo setOnItemClickListener, lo utilizamos para cuando el usuario pulse sobre algn color de
la lista, en el ejemplo saldr un mensaje diciendo el color sobre el que ha pulsado.
No os confundis con el metodo setOnItemSelectedListener, la diferencia es que con este mtodo
el usuario podr elegir varias opciones.

GRIDVIEW

El GridView en su forma ms bsica es muy parecido al ListView, la diferencia fundamental es que

muestra los datos en forma de cuadrcula.
El cdigo es exactamente el mismo que para el ListView, cambiando evidentemente, ListView por
GridView.

Ing. Giovanny Angulo

SENA REGIONAL CAUCA

CENTRO DE TELEINFORMTICA Y PRODUCCIN INDUSTRIAL

SPINNER

Un Spinner es una lista desplegable, aunque podramos hacer de forma similiar al ListView, con
este control es necesario decirle al adaptador, que layout va a mostrar cuando se despliegue la
lista,
por
defecto android.R.layout.simple_spinner_dropdown_item mediante
el
mtodo adapter.setDropDownViewResource().
Por variar un poco, utilizar el fichero Strings.xml para obtener el listado de colores.

Strings.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>

<string name="app_name">Spinner</string>
<string name="action_settings">Settings</string>

<string-array name="colores">

Ing. Giovanny Angulo

SENA REGIONAL CAUCA

CENTRO DE TELEINFORMTICA Y PRODUCCIN INDUSTRIAL
<item>Rojo</item>
<item>Verde</item>
<item>Azul</item>
<item>Amarillo</item>
<item>Negro</item>
<item>Blanco</item>
</string-array>

</resources>

MainActivity.java:
public class MainActivity extends Activity {

protected void onCreate(Bundle savedInstanceState) {

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

Spinner spnn = (Spinner) findViewById(R.id.spinner);

ArrayAdapter<CharSequence> adapter;
adapter =
ArrayAdapter.createFromResource(this,R.array.colores,android.R.layout.simple_spinner
_item);

adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);

spnn.setAdapter(adapter);
}
}

RADIOBUTTON
Cada RadioButton es un control que puede tener 2 estados, es similar al CheckBox pero en este
caso el usuario slo puede pulsar sobre una de las opciones.
RadioButton debe estar contenido dentro de un RadioGroup como vemos en la siguiente imagen:

Ing. Giovanny Angulo

SENA REGIONAL CAUCA

CENTRO DE TELEINFORMTICA Y PRODUCCIN INDUSTRIAL

Android Studio por defecto no aade un id a nuestro RadioGroup. Recuerda que para aadirlo es
necesario utilizar @+id/ quedando as la propiedad id: @+id/radioGroup
Aunque podramos establecer la propiedad android:onclick para cada RadioButton, y mediante el id
saber cual ha marcado el usuario, (como en el tutorial de los botones) podemos utilizar un listener
directamente en el RadioGroup, como veremos en el cdigo:

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
RadioGroup RG = (RadioGroup) findViewById(R.id.radioGroup);
RG.setOnCheckedChangeListener(new
RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup radioGroup, int id) {
switch (id) {
case R.id.radioButton:
Toast.makeText(getApplicationContext(),"RadioButon1
Activo",Toast.LENGTH_SHORT).show();
break;
case R.id.radioButton2:
Toast.makeText(getApplicationContext(),"RadioButon2
Activo",Toast.LENGTH_SHORT).show();;
break;
case R.id.radioButton3:

Ing. Giovanny Angulo

SENA REGIONAL CAUCA

CENTRO DE TELEINFORMTICA Y PRODUCCIN INDUSTRIAL

Toast.makeText(getApplicationContext(),"RadioButon3
Activo",Toast.LENGTH_SHORT).show();
break;
}
}
});
}

Y con los RadioButton, finalizo el tutorial, veremos en siguientes cmo personalizar estos controles
para manejarlos a nuestro antojo y personalizarlos muchsimo

Ing. Giovanny Angulo