SENA REGIONAL CAUCA

CENTRO DE TELEINFORMTICA Y PRODUCCIN INDUSTRIAL

Controles de Texto Bsicos en Android TextView

EditText
TextView es un control que muestra un texto, generalmente es informativo y no se suelen hacer
muchos cambios.
EditText es un control que permite al usuario de nuestra aplicacin introducir un texto mediente
teclado.

TEXTVIEW
Como se muestra en la imagen, tenemos varias opciones a la hora de elegir una etiqueta
informativa.
"Plain TextView" seria el TextvView bsico y "Large Text", "Medium Text", "Small Text" es el mismo
control, lo nico que nos cambia la apariencia, en concreto el tamao del texto.
EDITTEXT
De igual forma, el control bsico sera Plain Text, aunque tenemos muchas otras opciones que
nos proporciona Android Studio, como puede ser Password(Numeric), que nos automatiza el
control para que el usuario al pulsar, le aparezca el teclado numrico, y oculte los caracteres con
puntos.

Ingeniero, Giovanny Angulo

SENA REGIONAL CAUCA

CENTRO DE TELEINFORMTICA Y PRODUCCIN INDUSTRIAL

Propiedades a destacar:

layout:width : indica el ancho del control (ojo no del texto que contiene)

layout:height : indica la altura del control. (idem)

Estas dos propiedades pueden contener 4 valores:

1.
match_parent: Ajusta la dimensin al padre que lo contiene
2.

wrap_content: Ajusta la dimensin a su contenido.

3.
fill_parent: es exactamente igual que match_parent, es un valor obsoleto que no
debemos usar a no ser que nuestra aplicacin sea compatible con versiones anteriores a
Android 2.2, a partir de esta versin debemos usar match_parent.
4.

Un valor en concreto, por ejemplo 50dp

No debemos confundir la propiedad Gravity con layout:gravity, esto suele crear bastante
confusin sobre todo cuando uno se inicia en el mundillo de android.
Gravity hace referencia al contenido mientras que layout:gravity hace referencia al control, es decir,
si queremos alinear el texto dentro del control hacia la derecha, utilizaremos Gravity, y marcaremos
la opcin de right, mientras que si queremos alinear todo el control a la derecha de la
pantalla(activity), utilizaremos layout:gravity y tambin marcaremos right.

Propiedad Autolink
Podemos definir que nuestro TextView, (ya que en EditText no es muy lgico utilizarla) para que se
genere un enlace, que el usuario al pulsarlo se abrir automticamente la aplicacin por defecto
para usar el enlace, por ejemplo si marcamos web siempre y cuando el texto sea una URL, se
abrir el navegador por esa URL, o si ponemos un nmero de telfono, automticamente nos
saldr la aplicacin para llamar a ese nmero.
Os animo a que juguis con las propiedades, que son muy intuitivas.
Es importante definir un id para nuestros controles, de esta forma podemos hacer referencia a
ellos en nuestro cdigo java.
Ejemplo de nuestro fichero xml: layout_main.xml:

<linearlayout android:layout_height="fill_parent"
android:layout_width="fill_parent" >
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android">

<textview android:autolink="phone|email|map|none|web"

Ingeniero, Giovanny Angulo

SENA REGIONAL CAUCA

CENTRO DE TELEINFORMTICA Y PRODUCCIN INDUSTRIAL
android:gravity="center_horizontal"
android:id="@+id/tvMuestraTexto"
android:layout_gravity="center"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:text="Esto es un TextView">
</textview>

<edittext android:hint="Introduzca un texto aqui"

android:id="@+id/etEntradaTexto"
android:layout_gravity="center"
android:layout_height="wrap_content"
android:layout_width="match_parent">
</edittext>
</linearlayout>

Para hacer obtener el texto que el usuario introduce en el EditText, lo primero es declarar el
control en nuestra clase de la siguiente forma:
EditText etTextoIntroducido = (EditText) findviewbyid(R.id.etEntradaTexto);
como muestro en el siguiente cdigo:

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
EditText etTextoIntroducido = (EditText)
findViewById(R.id.etEntradaTexto);
String texto = etTextoIntroducido.getText().toString();
}

Ingeniero, Giovanny Angulo

SENA REGIONAL CAUCA

CENTRO DE TELEINFORMTICA Y PRODUCCIN INDUSTRIAL

3. Controles de Texto Avanzados

Hemos visto los controles bsicos de texto, ahora vamos a ver unos controles un poco ms
avanzados, que pueden aadir un extra de usabilidad a nuestras aplicaciones, los controles
sonAutoCompleteTextView y MultiAutoCompleteTextView

Se utilizan para presentar sugerencias mientras el usuario escribe un texto, con una serie de
palabras que nosotros hemos predefinido, en forma de men desplegable.

Que diferencia hay entre AutoCompleteTextView y MultiAutoCompleteTextView?

El primero se utiliza cuando el usuario va a escribir solamente un elemento, por ejemplo, si
introduce un pas y comienza escribiendo una 'E', le apareceran como sugerencias Espaa /
Ecuador / Egipto. Pero si en el mismo cuadro va a escribir varios pases, debemos usar el
MultiAutoCompleteTextView, de esta forma cuando escriba por ejemplo: "Mxico, A" en la letra A le
aparecern sugerencias Argentina, Afganistn...
Para que quede completamente claro, lo mejor es probar el control y ver cmo funciona. A
continuacin os muestro un ejemplo:

Nuestro Archivo XML:

<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"

Ingeniero, Giovanny Angulo

SENA REGIONAL CAUCA

CENTRO DE TELEINFORMTICA Y PRODUCCIN INDUSTRIAL
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:gravity="center_vertical"
>
<AutoCompleteTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New AutoCompleteTextView"
android:id="@+id/autoCompleteTextView"
android:layout_gravity="center"/>
<MultiAutoCompleteTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New MultiAutoCompleteTextView"
android:id="@+id/multiAutoCompleteTextView"
android:layout_gravity="center"/>
</LinearLayout>
En muchos tutoriales utilizan un array de Strings para especificar las palabras clave que se
mostrarn en las sugerencias, con la intencin de abreviar el tutorial, pero esa no es la forma
correcta, si intencin es tener la aplicacin en varios idiomas.
Por realizarlo correctamente y seguir las buenas practicas de programacin debemos declarar un
array en nuestro archivo values/strings.xml de la siguiente forma:

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

<resources>
<string name="app_name">Controles de Avanzados</string>
<string name="action_settings">Settings</string>
<string-array name="paises_array">
<item>Espaa</item>
<item>Mxico</item>
<item>Ecuador</item>
<item>Argentia</item>
<item>Bolivia</item>

Ingeniero, Giovanny Angulo

SENA REGIONAL CAUCA

CENTRO DE TELEINFORMTICA Y PRODUCCIN INDUSTRIAL
<item>Chile</item>
<item>Colombia</item>
<item>Costa Rica</item>
<item>El Salvador</item>
<item>Panam</item>
<item>Paraguay</item>
<item>Per</item>
<item>Puerto Rico</item>
<item>Repblica Dominicana</item>
<item>Venezuela</item>
<item>Uruguay</item>
</string-array>
</resources>
Ahora veamos nuestro cdigo Java de MainActivity.java:

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.widget.ArrayAdapter;
import android.widget.AutoCompleteTextView;
import android.widget.EditText;
import android.widget.MultiAutoCompleteTextView;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//Declaramos las sugerencias
String[] paises =
getResources().getStringArray(R.array.paises_array);

Ingeniero, Giovanny Angulo

SENA REGIONAL CAUCA

CENTRO DE TELEINFORMTICA Y PRODUCCIN INDUSTRIAL
//Declaramos nuestros controles
AutoCompleteTextView autoTextView = (AutoCompleteTextView)
findViewById(R.id.autoCompleteTextView);
MultiAutoCompleteTextView multiAutoTV =
(MultiAutoCompleteTextView)findViewById(R.id.multiAutoCompleteTextView);
//Declaramos un adaptador
ArrayAdapter<String> adapter;
adapter = new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1, paises);
//Indicamos que muestre sugerencias con el primer caracter que
escriba el usuario
autoTextView.setThreshold(1);
multiAutoTV.setThreshold(1);
//definimos cmo vaman a estar separados los paises, en este caso
con una coma
multiAutoTV.setTokenizer(new
MultiAutoCompleteTextView.CommaTokenizer());

autoTextView.setAdapter(adapter);
multiAutoTV.setAdapter(adapter);
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is
present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}

Ingeniero, Giovanny Angulo

SENA REGIONAL CAUCA

CENTRO DE TELEINFORMTICA Y PRODUCCIN INDUSTRIAL
}

4. Tres Formas de Programar un Botn en Android

Los botones (button) en Android, son esenciales en cualquier aplicacin, en realidad es un
componente que tenemos disponible en la mayora de las plataformas.
Tenemos varios tipos de botones disponibles que se adaptarn a la mayora de nuestras
necesidades:

Button: el control mas bsico.

RadioButton: permite al usuario elegir entre varias opciones, aunque yo lo voy a

encuadrar en controles de seleccin y lo veremos en ese apartado.

ImageButton: En vez del tpico texto, el botn es una imagen.

CheckBox: es un botn que puede tener 2 estados, "checked" o "unchecked".

ToggleButton: similar al anterior puede tener dos estados, marcando con una luz si esta
activo.

Switch: el nuevo botn para versiones superiores a Android 4, que viene a sustituir a
ToggleButton.

Utilizando un botn bsico:

MTODO 1
La forma de proporcionar un botn mediante XML, aunque el editor de Android Studio o Eclipse lo
hace por nosotros es:

<button android:id="@+id/btAceptar"
android:layout_gravity="center"
android:layout_height="wrap_content"
android:layout_width="wrap_content" <
android:text="Aceptar">
</button>
Una vez definido el id del botn, ya podemos utilizarlo en nuestro cdigo java. Lo primero es
declararlo e inicializarlo, a continuacin llamamos al mtodo setOnClickListner creando un nuevo
objeto View.onClickListener, es ms fcil ver el cdigo que explicarlo:

Button btAcept = (Button) findViewById(R.id.btAceptar);

Ingeniero, Giovanny Angulo

SENA REGIONAL CAUCA

CENTRO DE TELEINFORMTICA Y PRODUCCIN INDUSTRIAL
btAcept.setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
Toast.makeText(getBaseContext(), "Has pulsado Aceptar!",
Toast.LENGTH_SHORT).show();
}
});
MTODO 2
En vez de utilizar el mtodo setOnclickListener, utilizaremos un mtodo propio. que debe cumplir 3
requisitos:
1. Debe ser pblico.
2. Debe ser void.
3. Recibe un View.
Veamos como quedara el XML del botn, presta atencin a como hemos definido la propiedad
onClick.
(Nota: no es necesario escribir XML, en el panel de propiedades podemos hacerlo)

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cancelar"
android:id="@+id/btCancelar"
android:layout_gravity="center"
android:onClick="clickBotonCancelar"/>
y ahora nuestro cdigo Java, insisto en los 3 requisitos que coment antes para que funcione
correctamente, como podis observar tampoco lo he declarado:

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
public void clickBotonCancelar(View v) {
Toast.makeText(getBaseContext(), "Has pulsado Cancelar!",
Toast.LENGTH_SHORT).show();
}
Ingeniero, Giovanny Angulo

SENA REGIONAL CAUCA

CENTRO DE TELEINFORMTICA Y PRODUCCIN INDUSTRIAL

MTODO 3
Este mtodo es muy cmodo cuando nuestra activity utiliza varios botones. Como siempre veamos
el cdigo, idntico que el primer mtodo y difiere del segundo en que no utilizamos la propiedad
onClick en el XML.

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:id="@+id/bt1"
android:layout_gravity="center"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2"
android:id="@+id/bt2"
android:layout_gravity="center"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3"
android:id="@+id/bt3"
android:layout_gravity="center"/>
Esta forma es una variante del mtodo 1, la diferencia es que nuestra clase MainActivity
implementa la clase OnClickListener.

public class MainActivity extends Activity implements

View.OnClickListener {
@Override
protected void onCreate(Bundle savedInstanceState) {

Ingeniero, Giovanny Angulo

SENA REGIONAL CAUCA

CENTRO DE TELEINFORMTICA Y PRODUCCIN INDUSTRIAL
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Button btUno= (Button) findViewById(R.id.bt1);
Button btDos = (Button) findViewById(R.id.bt2);
Button btTres = (Button) findViewById(R.id.bt3);
btUno.setOnClickListener(this);
btDos.setOnClickListener(this);
btTres.setOnClickListener(this);
}

@Override
public void onClick(View v) {
String s = new String();
switch (v.getId()) {
case R.id.bt1:
s = "Boton 1";
break;
case R.id.bt2:
s = "Boton 2";
break;
case R.id.bt3:
s = "Boton 3";
break;
}
Toast.makeText(getBaseContext(), "Has pulsado " + s,
Toast.LENGTH_SHORT).show();
}
}
A continuacin os dejo el cdigo fuente completo con todos los botones:

Ingeniero, Giovanny Angulo

SENA REGIONAL CAUCA

CENTRO DE TELEINFORMTICA Y PRODUCCIN INDUSTRIAL
XML:

<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:gravity="center_vertical"
>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Aceptar"
android:id="@+id/btAceptar"
android:layout_gravity="center"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cancelar"
android:id="@+id/btCancelar"
android:layout_gravity="center"
android:onClick="clickBotonCancelar"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:id="@+id/bt1"
android:layout_gravity="center"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2"
Ingeniero, Giovanny Angulo

SENA REGIONAL CAUCA

CENTRO DE TELEINFORMTICA Y PRODUCCIN INDUSTRIAL
android:id="@+id/bt2"
android:layout_gravity="center"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3"
android:id="@+id/bt3"
android:layout_gravity="center"/>
</LinearLayout>
JAVA:

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;
public class MainActivity extends Activity implements
View.OnClickListener {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Button btAcept = (Button) findViewById(R.id.btAceptar);
btAcept.setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
Toast.makeText(getBaseContext(), "Has pulsado Aceptar!",
Toast.LENGTH_SHORT).show();
}
});

Ingeniero, Giovanny Angulo

SENA REGIONAL CAUCA

CENTRO DE TELEINFORMTICA Y PRODUCCIN INDUSTRIAL

Button btUno= (Button) findViewById(R.id.bt1);

Button btDos = (Button) findViewById(R.id.bt2);
Button btTres = (Button) findViewById(R.id.bt3);
btUno.setOnClickListener(this);
btDos.setOnClickListener(this);
btTres.setOnClickListener(this);
}
public void clickBotonCancelar(View v) {
Toast.makeText(getBaseContext(), "Has pulsado Cancelar!",
Toast.LENGTH_SHORT).show();
}
@Override
public void onClick(View v) {
String s = new String();
switch (v.getId()) {
case R.id.bt1:
s = "Boton 1";
break;
case R.id.bt2:
s = "Boton 2";
break;
case R.id.bt3:
s = "Boton 3";
break;
}
Toast.makeText(getBaseContext(), "Has pulsado " + s,
Toast.LENGTH_SHORT).show();
}

@Override
Ingeniero, Giovanny Angulo

SENA REGIONAL CAUCA

CENTRO DE TELEINFORMTICA Y PRODUCCIN INDUSTRIAL
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is
present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}

Ingeniero, Giovanny Angulo