Android: Elementos Graficos

Elementos  gráficos clásicos como TextView, EditText, ImageView y Button.

Elementos Gráficos

A continuación vamos a hablar de algunos de los elementos gráficos a la hora de diseñar el layout del activity, entre ellos: TextView, EditText, ImageView y Button.

TextView

Los TextView son los clásicos campos de texto que se muestran al usuario (Campos de salida).  Una particularidad del TextView es que debe contar obligatoriamente con un Alto y Ancho. Veamos un ejemplo:

  • id: Valor único e irrepetible con el que vamos a identificar a nuestro TextView. No es un dato obligatorio pero sin por ejemplo queremos manipularlo desde java necesitamos tener un id.
  • ancho (width): El ancho obligatorio, en este caso adaptándolo al máximo del ancho del padre, que como el padre es el único elemento, se adapta al tamaño máximo de la pantalla.
  • largo (height): En este caso optamos por wrap_content para que se adapte al largo del contenido. No tendría sentido que ocupe toda la pantalla nuestro mensaje, no al menos en este ejemplo.
  • gravity: Es una de las propiedades que puede tener el TextView. Dicha propiedad nos permite elegir la “gravedad del elemento” es decir, en donde se ubica. En el ejemplo está seleccionado que se ubica en el centro horizontal del TextView.
  • text: En esta propiedad va el mensaje a mostrar en el TextView. Podemos estar tentados a hardcodear el mensaje, pero no es recomendable. Una de las ventajas es que, imaginen que tenemos un texto fijo que va a aparecer en 5 Activities distintas… en lugar de estar hardcodeado el mensaje 5 veces, hacemos referencia a la cadena ubicada en el correspondiente sitio y de está manera ahorramos memoria y si además por un determinado motivo debemos cambiar ese mensaje, nos ahorraremos bastante tiempo. Para poder relacionarlo con la cadena de texto, bastará con poner entre comillas el @ seguido por el nombre del archivo y el nombre con el cual se ubica a esa cadena. No se preocupen, al poner el @ directamente el IDE les dará las opciones.

Crear cadena de texto

Antes mencione sobre crear una cadena de texto dentro de string.xml, vamos a ponerlo en práctica! Si recuerdan el comienzo del instructivo, en donde hablamos sobre la estructura del proyecto, mencionamos el archivo string.xml, ubicado en:

Si ingresamos en el archivo ya nos aparecerá un string armado con el nombre de nuestra app. Para crear uno nosotros copiamos el modelo que tenemos arriba y modificamos el name a gusto. Luego, con ese name será la forma de ubicar a esa cadena, de más está decir que el name deberá ser único para evitar confusiones.

Modificar TextView desde Java

Supongamos que queremos modificar un textview desde java, al momento en que se lanza el Activity. Nos dirigimos al Activity.java que corresponda y nos situamos sobre el onCreate.

Si recuerdan, el onCreate es lo primero que se lanza al llamar a un Activity. Si quisiéramos modificar el TextView que vamos a mostrar, tendríamos que llamar a una instancia de un TextView y asignarle el TextView de nuestro Activity por medio de su id:

  1. Realizamos la instancia de un TextView
  2. le asignamos el TextView por medio de su id. Lo primero que hacemos es “castear” lo que viene como TextView y luego utilizando el findViewById() traemos el TextView que corresponda por medio de su id.
  3. Utilizando el método setText seteamos el mensaje que queramos. De nuevo, si realizan la combinación CONTROL + ESPACIO al momento de poner “texto.” podrán ver las diferentes opciones que tienen disponible

Si todo salió de la manera en que se esperaba, al correr el Emulador nos debería figurar el nuevo mensaje:

NOTA: Para correr nuestra app en el emulador, deberán hacer click en el siguiente botón de su barra de herramientas

El mismo les tardara en cargar, pero a la larga les abrira el mismo emulador que vimos en lecciones pasadas y que automaticamente cargara nuestra aplicación dentro del teléfono. Si tienen un teléfono android conectado por medio de USB al equipo también podrán usarlo en lugar de emulador, instalándose de manera automática la app. Este paso no lo explico debido a que no tengo un celular con Android (Disculpen).

EditText

La función del EditText es permitirle al usuario ingresar un determinado texto con el cual nosotros vamos a poder interactuar, por ejemplo en un login. Crear un EditText es muy sencillo, lleva prácticamente los mismos campos que TextView, puede o no llevar un ID (Lo ideal es que si así podemos manipularlo desde Java), lleva obligatoriamente ancho y alto y puede llevar un hint, ¿que es un hint? es un Texto por Defecto que, otra vez, se recomienda usar cadena de texto y no hardcodear.

Visualmente nos quedará algo similar a esto, en donde si queremos probar que realmente funcione y nos permite modificar el texto, bastará con correr la aplicación como lo hicimos con anterioridad y comprobarlo nosotros mismos.

ImageView

El ImageView en Android no es nada más ni nada menos que el elemento que nos permite colocar imágenes.

Utiliza lo básico, ancho y largo, que en este caso ponemos que sea wrap_content para que se adapte al tamaño de la imagen y aparece un nuevo atributo llamado android:src el cual nos pide que ingresemos la ubicación de la imagen que queremos mostrar. Si recuerdan la lección sobre estructura del proyecto, teníamos una carpeta llamada drawable en la cual ponemos todos los elementos gráficos.

Hay varias maneras de cargar las imagenes dentro de la carpeta, una de las más comodas es con el complejo comando de CONTROL + C / CONTROL + V parandonos sobre la carpeta drawable.

Nos saldrá un cartel como el siguiente y le daremos OK. Un consejo a tener en cuenta, en Android se recomienda utilizar imágenes PNG ya que además de contar con un fondo en transparencia, poseen un peso menor frentea un JPG.

Ahora que ya contamos con nuestra imagen, tenemos que hacer lo mismo que hicimos para poder usar cadenas de texto del archivo string.xml. Ponemos el @ + nombre de la carpeta + nombre de la imagen sin la extensión. Al igual que con los string, con solo pararse encima y apretar control + espacio ya nos saldra el menu con opciones posibles.

Y si no tuvimos ningún error nos debería figurar una pantalla como la siguiente (dependiendo de la imagen que utilicen claro):

Button

Como su nombre lo indica es un botón. La manera de crearlo es extremadamente sencilla:

Ingresar ancho y largo, un mensaje y un id si es necesario, quedándonos visualmente de la siguiente manera:

En la próxima lección vamos a realizar una interacción entre un TextView, EditText y un Button!