18/8/2018 El Androide Novato: Elementos básicos del interface de usuario – Buttons - Basic elements of the user interface

Más jomomu10@gmail.com Escritorio Cerrar sesión

El Androide Novato
Blog de un programador iniciandose en el mundo de Android

MARTES, 16 DE AGOSTO DE 2011 SUSCRIBETE A ELANDROIDENOVATO

Entradas
Elementos básicos del interface de usuario – Buttons - Basic
elements of the user interface Comentarios

Button, al igual que EditText, es una subclase de TextView, y su TRANSLATE

definición en nuestro Layout se hace incluyendo el siguiente código en
el fichero xml : Seleccionar idioma

Con la tecnología de Traductor de Google

<Button
android:id="@+id/boton01"
SEGUIDORES
android:layout_width="wrap_content"
Seguidores (4)
android:layout_height="wrap_content"
android:text="@string/boton01"
android:onClick="apretaBoton"
Seguir
/>

Como en el resto de elementos ya conocidos podemos incluir multitud ARCHIVO DEL BLOG
de atributos que modifcan su apariencia o su situación dentro del ▼ 2011 (16)
Layout que lo contiene, pero voy a hacer especial incapié en el ► septiembre (3)
atributo ‘android:onClick’ puesto que es especialmente
▼ agosto (5)
interesante. El valor de este atributo indica el nombre de la clase Java
Elementos básicos del
que se ejecutará cuando el botón sea presionado.
interface de usuario –
Para verlo funcionar incluimos este código en nuestro fuente Java: Radio...
Elementos básicos del
public void onCreate(Bundle savedInstanceState) { interface de usuario –
super.onCreate(savedInstanceState); Butto...
setContentView(R.layout.main); Elementos básicos del
} interface de usuario –
public void apretaBoton (View view) { EditT...
TextView texto01 = (TextView) findViewById(R.id.texto01); Elementos básicos del
texto01.setText("Me han apretado!!"); interface de usuario –
TextV...
}
Elementos básicos del
interface de usuario –
Como veis he definido una clase pública llamada apretaBoton Layou...
que recibe como parámetro único un dato tipo View que es la
conexión con el elemento del Layout que lo llama. ► julio (8)

BLOGROLL
XatakaAndroid. Imprescindible.
Todo tipo de noticias relacionadas
con Android.
JavieLinux. Un fuera de serie en el
curioso mundo de los
http://elandroidenovato.blogspot.com/2011/08/elementos-basicos-del-interface-de_16.html 1/5
18/8/2018 El Androide Novato: Elementos básicos del interface de usuario – Buttons - Basic elements of the user interface
desarrolladores.

QUIEN SOY

Ver todo mi perfil

Otra forma de conseguir el mismo resultado es definiendo un objeto

‘onClickListener’ asociado al botón. Este objeto lleva implícita la
clase ‘onClick’ en la que definimos lo que debe ejecutarse cuando se
aprete el botón :

public void onCreate(Bundle savedInstanceState) {

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

// Capturo el botón a través de su atributo id

Button boton01 = (Button) findViewById(R.id.boton01);

// Asocio el objeto onClickLIstener al boton

boton01.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
apretaBoton(); // Indico la clase a ejecutar
}
});
}
// En este caso no recibe ningún parámetro de entrada
public void apretaBoton () {
TextView texto01 = (TextView) findViewById(R.id.texto01);
texto01.setText("Me han apretado!!");
}

Si utilizamos este método, vemos cómo la clase apretaBoton no

necesita ningún parámetro de entrada.
Por cuestiones de claridad, yo prefiero utilizar esta última forma de
tratar los botones, aunque podeis utilizar cualquiera.

PERSONALIZANDO NUESTRO BOTONES

Si la apariencia estandard de los botones Android no es de nuestro

agrado, podemos modificarla, incluso hacer que varíe su forma según
el estado del botón. Para hacer esto debemos definir un fichero XML
en la carpeta res/drawable en el que asociamos la imagen a mostrar
según el estado del botón:

Fichero res/drawable/botones.xml

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/button_green"
android:state_pressed="true" />
<item android:drawable="@drawable/button_red"
android:state_focused="true" />

http://elandroidenovato.blogspot.com/2011/08/elementos-basicos-del-interface-de_16.html 2/5
18/8/2018 El Androide Novato: Elementos básicos del interface de usuario – Buttons - Basic elements of the user interface

<item android:drawable="@drawable/button_blue" />

</selector>

Como veis se asocia el estado de pulsado (‘state_pressed’) con

la image ‘button_green’

El estado de seleccionado, es decir, cuando recibe el foco,

(‘state_focused’) con la imagen ‘button_red’

Y el estado normal con la imagen ‘button_blue’

Por último incluimos un nuevo atributo a la definición XML del botón indicando :

android:background="@drawable/botones"

Con este atributo, normalmente indicamos el archivo drawable que

queremos mostrar como botón, sin embargo, al indicar el nombre de
un archivo XML podemos personaliazrlo aún más haciendo que
cambie según su estado.

Estado ‘Normal’

Estado’Focused’ al bajar con las flechas del teclado del simulador

Estado ‘Pressed’ al pulsar sobre él

http://elandroidenovato.blogspot.com/2011/08/elementos-basicos-del-interface-de_16.html 3/5
18/8/2018 El Androide Novato: Elementos básicos del interface de usuario – Buttons - Basic elements of the user interface

La estructura del proyecto ha quedado de la siguiente forma:

La información para esta entrada ha sido obtenida del API de

Android en la que podeis profundizar algo más.

Hasta la próxima.

Publicado por androidenovato en 21:29

No hay comentarios:

Publicar un comentario

Introduce tu comentario...

Comentar como: Jonhny Moreno Cerrar sesión

Publicar Vista previa Avisarme

Entrada más reciente Página principal Entrada antigua

Suscribirse a: Enviar comentarios (Atom)

http://elandroidenovato.blogspot.com/2011/08/elementos-basicos-del-interface-de_16.html 4/5
18/8/2018 El Androide Novato: Elementos básicos del interface de usuario – Buttons - Basic elements of the user interface

Tema Picture Window. Con la tecnología de Blogger.

http://elandroidenovato.blogspot.com/2011/08/elementos-basicos-del-interface-de_16.html 5/5