Android / Uso practico de layouts

Bienvenidos sean a este post, hoy veremos un uso practico de un layout por medio de un elemento, en este caso un boton, veremos como trabajarlo por medio de los archivos XML y luego veremos otro para trabajarlo por medio de codigo Java.

Antes de comenzar con nuestro proyecto deberemos descargar este archivo

Estos van a ser los estados de nuestro boton pasemos a crear nuestro proyecto con las siguientes caracteristicas:

• Dispositivos: Phone and Tablet
• Actividad: Empty Activity
• Nombre: Mas Vistas
• Nombre de paquete: org.example.masvistas
• API Minimo: API 14 (Android 4.0)

Una vez geneado nuestro proyecto nos quedara de la siguiente manera

Luego haremos click con el boton derecho sobre el recurso drawable y elegiremos New -> drawable resource file como se ve en la siguiente imagen

Una vez hecho esto debera aparecer el siguiente cuadro

Aca completaremos el campo File Name con simplemente boton deben dejar todo como se ve en la imagen anterior, pulsemos Ok y esto generara un archivo boton.xml como se ve en la siguiente imagen

Si abrimos este archivo y elegimos la solapa Text tendremos el siguiente codigo:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

</selector>

Ahora vamos a modificarlo por el siguiente codigo:

<?xml version="1.0" encoding="utf-8"?>
<selector
    xmlns:android="http://schemas.android.com/apk/res/android">

   <item android:state_pressed="true"
       android:drawable="@drawable/boton_pulsado" />

    <item android:state_focused="true"
        android:drawable="@drawable/boton_foco" />

    <item android:drawable="@drawable/boton_normal" />
</selector>

Este simple codigo fuente se encargara de mostrarnos tres estados posibles del boton, a medida que lo escriben puede quedar marcado como error pero por ahora no se preocupen esto es por el hecho de no tener los archivos mencionados dentro del recurso drawable, como pueden ver en el primer item mostrara el archivo del estado del boton pulsado cuando el estado presionado sea verdad, el segundo item se mostrara cuando este seleccionado y el ultimo item nos mostrara el boton en estado normal, por ahora lo veremos simplemente de esta forma pero en un futuro post ahondaremos mas sobre los drawables.

Si descargaron el archivo mencionado al principio de este post, va a contener tres archivos los cuales nos representaran los tres estados del codigo anterior, los archivos son los siguientes

• 

• 

• 

Ahora pasaremos a corregir el error del codigo, primero deben extraer los archivos en alguna carpeta

El siguiente paso es seleccionar a los tres y copiarlos, con la opcion del boton derecho o con Ctrl+C, una vez hecho debemos ir a nuestro Android Studio y pegarlos en el recurso drawable como se ve en la siguiente imagen

Si todo es correcto, aparecera el siguiente cuadro

Aca deben seleccionar el recurso drawable y presionar Ok, donde aparecera el siguiente cuadro

Aca deben dejarlo como aparece y presionar Ok, si todo salio bien debera aparecer como la siguiente imagen

Observen como se agregaron los tres archivos debajo del recurso drawable y observen como en el codigo, en la linea  de cada uno de los items ahora aparece la figura correspondiente, para nuestro siguiente paso vamos a implementarlo, para eso abrimos el archivo activity_main.xml, esta ubicado en res/layout/activity_main.xml, iremos a la solapa Design y modificaremos nuestro diseño del generado automaticamente por el de RelativeLayout, para ello primero eliminaremos el elemento TextView generado de manera predeterminada, ya sea presionando Supr o como se ve en la siguiente imagen

Una vez eliminado, debemos convertir nuestro actual layout (ConstraintLayout) a RelativeLayout por medio de la opcion Convert view

Una vez seleccionado nos aparecera el siguiente cuadro

Aca debemos seleccionar RelativeLayout y pulsen Apply, con esto convertiremos nuestro layout, ahora debemos seleccionarlo y mirar en las propiedades del mismo, este se encuentra en el lado derecho de la pantalla, ahi debemos modificar el campo background para alcanzar esta propiedad deben el menu de All Attributes como se ve en la siguiente imagen

Una vez seleccionado le asignaremos el valor de #FFFFFF para tener el fondo en blanco, debera quedar como se ve en la siguiente imagen

Para nuestro siguiente paso vamos a agregar nuestro elemento, en este caso el boton, primero vamos a seleccionar el elemento Button como se ve en la siguiente imagen

Presionamos Enter y lo agregamos quedando de la siguiente forma

Ahora si nos fijamos a la derecha, tendremos las propiedades del boton y debemos seleccionar a Declared Attributes, seleccionen el campo Text y eliminen su contenido para que no aparezca en pantalla

Una vez hecho esto procederemos a utilizar el recurso drawable creado por nosotros como boton, para esto debemos ir al campo background en las solapas Common Attibutes y seleccionar el boton resaltado en la siguiente imagen, esta opcion nos permitira cargar recursos en nuestro elementos como en este caso

Una vez pulsado nos aparecera el siguiente cuadro

En esta ocasion nos aparecio directamente seleccionado Drawable y tendremos todos los elementos disponibles en nuestros recursos, a continuacion seleccionaremos el elemento llamado boton y nos aparecera de la siguiente forma

Como pueden ver al seleccionarlo veran los tres estados disponibles, cuando este seleccionado pulsan Ok y se cerrara la ventana quedando el background de la siguiente forma

Ahora veamos como quedo el codigo fuente de nuestro archivo activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    tools:context=".MainActivity" >

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/boton" />
</RelativeLayout>

Ahora nos quedan los ultimos dos pasos para completar nuestro proyecto, primero vamos a agregar un evento en nuestro boton, a este tipo de eventos en general se lo llaman listeners (escuchadores) porque son rutinas encargadas de verificar si el evento asignado es ejecutado y por ende correr el metodo (o funcion) asociado, veamos la modificacion del codigo fuente:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:background="#FFFFFF"
     tools:context=".MainActivity">

    <Button
         android:id="@+id/button"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:background="@drawable/boton"
         android:onClick="sePulsa" />

Como ven en el «nuevo» codigo fuente solamente agregamos una linea:

android:onClick="sePulsa"

La cual agrega el listener antes explicado, el cual espera el evento «click», es decir el pulsar nuestro elemento, en este caso el boton, para ejecutar el metodo sePulsa() que todavia no existe, ahora solamente debemos modificar el archivo MainActivity.java para agregar este metodo. Pasemos a ver el codigo de este archivo:

package org.example.masvistas;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

Este es nuestro codigo basico, ahora para agregar nuestro nuevo metodo debemos hacerlo al final del codigo pero antes de la ultima llave (}) como se ve a continuacion:

package org.example.masvistas;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    public void sePulsa(View vista){
        Toast.makeText(this,"Pulsado",Toast.LENGTH_SHORT).show();
    }
}

Como pueden ver el texto no cambio mucho, solo por esta funcion:

public void sePulsa(View view)
{
	Toast.makeText(this,"Pulsado",Toast.LENGTH_SHORT).show();
}

Con esta funcion haremos la aparicion de un texto en pantalla, los parametros del metodo makeText() son:

• this, le decimos que utilice la vista actual para mostrarlo
• «Pulsado», va a ser el texto a mostrar
• Toast.LENGTH_SHORT, va a ser la duracion en pantalla del mensaje

El ultimo metodo show se encarga de mostrarlo en pantalla, a medida que lo vayan agregando el editor les va a sugerir presionar Alt+Enter para agregar los paquetes faltantes pueden hacerlo mientras escriben o al final pero tienen que hacerlo sino no va a funcionar, si todo salio bien y probamos nuestra app obtendremos el siguiente resultado

Con esto concluimos la primera parte, pasemos a la segunda parte donde vamos a crear una nueva app con las siguientes caracteristicas:

• Dispositivos: Phone and Tablet
• Actividad: Empty Activity
• Nombre: Otras Vistas
• Nombre de paquete: org.example.otrasvistas
• API Minimo: API 14 (Android 4.0)

Una vez creado nuestro nuevo proyecto vamos a empezar a agregar nuestros componentes y a reformar nuestro layout, empecemos cambiando el layout. Para esto vamos al archivo activity_main.xml, y debemos hacer click con el boton derecho y elegir Convert view

Una vez seleccionado aparecera el siguiente cuadro

Aca debenos seleccionar LinearLayout y pulsar el boton Apply, nuestra siguiente paso sera convertirlo en sentido vertical, para esto volvemos a hacer click con el boton derecho y elegir LinearLayout -> Convert orientation to vertical

Una vez realizado todo esto, procederemos a agregar dos elementos y a aprovechar el elemento existente, primero vamos a agregar un item Number (Decimal)

Luego agregaremos el item Button en el listado

Y por ultimo, una vez agregado deberemos ordenar nuestros elementos en el siguiente orden:

• editText
• Button
• TextView

Este orden se puede ver en la siguiente imagen

Con todo esto creado pasemos a ver el codigo generado en nuestro archivo de layout:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <EditText
        android:id="@+id/editText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="numberDecimal" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />

</LinearLayout>

Nuestra modificacion sera en el bloque EditText donde lo cambiaremos por el siguiente:

    <EditText
        android:id="@+id/entrada"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="numberDecimal"
        android:hint="Ingresa un numero" />

En este caso modificaremos el id por el valor de entrada y por ultimo agregamos el campo hint donde lo usaremos para indicar un aviso de que debemos ingresar en nuestro campo, nuestro siguiente modifcacion sera en el bloque de Button:

    <Button
        android:id="@+id/button0"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="sePulsa"
        android:text="0" />

En este caso cambiaremos nuevamente el id y despues modificaremos el valor del texto a mostrar, tambien volvemos a agregar el evento onClick para llamara a la funcion sePulsa, puede dejarla marcada como error pero no se preocupen porque pronto lo solucionaremos, nuestra ultima modificacion sera en el bloque TextView:

    <TextView
        android:id="@+id/respuesta"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text=""
        android:hint="Respuesta"/>

En este bloque agregaremos un id para identificar a este elemento, el cual se llamara respuesta, y otro hint para indicar que devolvera este campo, por ultimo debemos eliminar el valor de text como se ve en el bloque, con todo esto ya solo nos falta modificar a la clase MainActivity pero antes veamos el codigo final de este archivo:

Nota: En todos los casos tambien modificamos el valor de layout_width y layout_height con el mismo esquema

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <EditText
        android:id="@+id/entrada"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="numberDecimal"
        android:hint="Ingresa un numero" />

    <Button
        android:id="@+id/button0"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="sePulsa"
        android:text="0" />

    <TextView
        android:id="@+id/respuesta"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text=""
        android:hint="Respuesta"/>

</LinearLayout>

Con todo esto completo vamos a proceder a modificar MainActivity con el siguiente codigo:

MainActivity.java

package org.example.otrasvistas;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private EditText entrada;
    private TextView respuesta;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        entrada = (EditText) findViewById(R.id.entrada);
        respuesta = (TextView) findViewById(R.id.respuesta);
    }

    public void sePulsa(View vista){
       respuesta.setText(String.valueOf(
               Float.parseFloat(entrada.getText().toString())*2));
    }
}

En este codigo primero crearemos dos objetos, uno de tipo EditText y otro de tipo TextView llamadas entrada y respuesta respectivamente, luego tenemos el bloque onCreate donde tendremos estas dos lineas:

        entrada = (EditText) findViewById(R.id.entrada);
        respuesta = (TextView) findViewById(R.id.respuesta);

Las dos primer lineas son para definir a los objetos creados anteriormente en este caso el valor entre parentesis esta hecho para asegurarnos que el valor devuelto del mismo tipo que el objeto, en esta ocasion usaremos findViewById. Este metodo nos permite buscar una vista por medio de su id, por este motivo le asignamos un id a cada elemento, utilizaremos el recurso R para indicar que lo busque en res, despues le decimos que lo busque entre los ids de nuestro proyecto y por ultimo le indicamos cual id debe buscar, por un motivo practico le designamos el mismo nombre que el elemento para saber identificarlo mas facil, con esto logramos que todo el contenido de nuestros elementos pueda ser manipulado por Java en estos dos objetos, pasemos a hablar sobre la funcion sePulsa:

    public void sePulsa(View vista){
       respuesta.setText(String.valueOf(
               Float.parseFloat(entrada.getText().toString())*2));
    }

En esta funcion utilizaremos a respuesta para setearle un texto por medio de setText y para ello usamos el metodo valueOf de la clase String donde por medio del metodo parseFloat de la clase Float, en estos dos casos no usamos los primitivos porque necesitamos acceso a estos metodos propios de estas clases, para parseFloat le enviamos el valor contenido en el elemento de entrada por medio del metodo getText y lo convertiremos en texto por medio de toString, este valor obtenido y convertido por parseFloat lo multiplicamos por 2, con todo esto procesado y asignado a respuesta deberiamos verlo en pantalla, si lo compilamos y probamos veremos una salida semejante al siguiente video

Si lograron esto, Felicitaciones!!! Hasta aca hemos logrado nuestras nuevas apps que pueden interactuar con los usuarios y hemos visto como trabajar con layouts y Java.

En resumen, hoy hemos visto como crear un recurso del tipo drawable, luego vimos como utilizar este mismo recurso en un item dentro de una app, como creamos un metodo el cual nos mostraba un texto en pantalla y vimos como cambiaba su estado, luego con otra app vimos como modificar los contenidos de un elemento de la misma por medio de codigo Java. Espero les haya gustado, sigueme en Twitter, Facebook o Google+ para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.

Tengo un Patreon donde podes acceder de manera exclusiva a material para este blog antes de ser publicado, sigue los pasos del link para saber como.