Android / Vistas

Bienvenidos sean a este nuevo post, hoy volveremos a Android para centraranos en nuestro primer tema: Vistas.

Como hablamos muy brevemente en este post, las vistas pueden ser creadas por Java (codigo) pero habitualmente son creadas por medio de XML, dejando a Android Studio hacer el resto, comencemos a ver un ejemplo de vista generada por codigo para ello vamos a generar el siguiente proyecto:

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

Por si necesitan refrescar los pasos para generar un nuevo proyecto les recomiendo este post, una vez creado el proyecto vamos a reemplazar el codigo de MainActivity.java con el siguiente:

MainActivity.java

package org.example.vistas;

import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        TextView texto = new TextView(this);
        texto.setText("Hola, Tinchicus!!");
        setContentView(R.layout.activity_main);
    }
}

Analicemos el codigo fuente, primero tenemos la linea en onCreate, esta es creada con nuestra app, nuestra segunda linea se encarga de crear un objeto de la clase TextView llamada texto, lo creamos haciendo referencia al apuntador this. En la siguiente linea por medio de setText le agregamos al objeto texto el contenido Hola, Tinchicus!!, por ultimo reemplazaremos esta linea del codigo anterior:

setContentView(R.layout.activity_main);

Por esta otra:

setContentView(texto);

Donde en lugar de hacerle ir a ver a un archivo XML, luego lo explicare, le decimos que la vista debe contener lo almacenado en el objeto texto, ahora vamos a probar el nuevo codigo, primero, ejecutamos el codigo por medio de Run->Run ‘app’ o presionando Mayus+F10

Una vez seleccionado, nos aparecera el siguiente cuadro

Aca, debemos seleccionar nuestro equipo virtual para probar la app, si no crearon ninguna, les recomiendo este post donde explico como crearlo, una vez seleccionado despues de ejecutarse nos aparecera de la siguiente forma

Hasta aqui, hemos visto como modificar la vista por medio de codigo Java ahora veremos como se trabaja con los archivos XML para ello volvamos a la clase MainActivity.java y volvamos a modificar el codigo fuente de la siguiente forma:

package org.example.vistas;

import android.app.Activity;
import android.os.Bundle;

public class MainActivity extends Activity {

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

Como podran darse cuenta, ahora eliminamos todo el codigo que generaba el contenido en nuestra app y ahora lo volvimos a reemplazar para obtener la informacion desde el archivo activity_main.xml ubicado en res/layout/activity_main.xml, como se ve en la siguiente imagen

A la derecha van a a tener dos solapas, una es Design y otro Text, para modificar el contenido del archivo debemos elegir Text para poder tener acceso al codigo, igualmente mas a la derecha tendran un preview de las modificaciones efectuadas

Ahora veamos un poco el codigo fuente

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    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"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Este es el codigo base en el archivo XML, este se genera automaticamente en base a unas configuraciones basicas, como pueden ver el ancho (width), el alto (height), etc. Si no saben sobre XML, este es un tipo de pagina donde no esta orientado a un lenguaje (como puede ser HTML) sino al almacenaje de parametros entre tags para ser interpretados por otro lenguaje, por ejemplo HTML, si intentan abrir un archivo del tipo XML en un navegador van a ver todo el codigo fuente en lugar de una pagina pero si se pueden visualizar los datos almacenados en los tags de un archivo XML por medio de una pagina en HTML con Javascript o VBscript, en este caso sucede lo mismo nosotros establecemos los parametros por medio de este archivo y el Android Studio se encarga de crear los objetos.

Volviendo a nuestro codigo, antes de hacer los cambios vamos a abrir el archivo strings.xml, el cual se encuentra en res/values/strings.xml como se ve en la siguiente imagen

Va a contener el siguiente codigo:

<resources>
    <string name="app_name">Vistas</string>
</resources>

Ahora lo vamos a reemplazar por el siguiente:

<resources>
    <string name="app_name">Mis Vistas</string>
    <string name="holis">Hola, Tinchicus!!</string>
    <string name="action_settings">Configuraciones</string>
</resources>

Agregamos dos lineas y modificamos la existente, la primera es donde esta almaceenado el titulo de nuestra app, en la segunda linea estara almacenado el texto a mostrar en pantalla y por ultimo, otro para mostrar el titulo configuraciones. Una vez realizada estas modificaciones volvemos a nuestro archivo activity_main.xml y modificaremos el codigo de la siguiente forma:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/holis"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

En realidad, no realizaremos grandes cambios sino solamente la siguiente linea:

android:text="Hello World!"

por esta otra:

android:text="@string/holis"

Por eso, es fundamental cambiar primero el archivo strings.xml para poder tener los nuevos textos en nuestra app, la mejor practica es tratar de tener todos los elementos de tipo cadena (string) en este archivo porque a la hora de tener que modificarlos van a ser mas faciles de ubicar y editar en este archivo, y por otro lado al tenerlos almacenados en este archivo cuando vayan escribiendolo les aparecera como sugerencia como se ve a continuacion en la siguiente imagen

Una vez hecha esta modificacion, probamos nuestra app y nos deberia quedar de la siguiente forma:

Para probar una app, deben ir a Run->Run ‘app’, cuando aparezca el cuadro con los equipos virtuales, eligen uno para probarlo y listo, sino tambien pueden probarlo por medio de un equipo conectado, lo explico en este post, porque a veces es mas rapido pero no se crean que tanto.

Por ultimo vamos a hablar sobre la linea encargada de hacer esta brujeria, nuevamente veamos esto:

setContentView(R.layout.activity_main);

En esta linea resalte el objeto R, este objeto es creado desde la clase View y por medio del metodo layout utilizamos el archivo activity_main..xml pero en este caso no agregamos la extension solo el nombre, este objeto se crea automaticamente en base al contenido de la carpeta res, con invocarlo de esta forma alcanza para trabajar, lo optimo de trabajar de esta forma es que no quita performance y tambien consume menos memoria en comparacion de ser creado por codigo como vimos anteriormente, ahora pasemos a ver como modificar una vista por medio de una forma visual.

Cuando hablamos de como modificar los archivos XML, dijimos que habia dos solapas, una llamada Design y otra Text, ahora elijamos la opcion Design, al seleccionarla nos aparecera de esta forma

Veamos el panel de la izquierda

En esta seccion tendremos todos los elementos que podamos agregar en nuestra vista, desde texto adicionales, hasta otros elementos como Widgets o botones, en fin todos los elementos necesarios para nuestra vista, ahora pasemos a la derecha

Aca podremos modificar la ubicacion de nuestro elemento, puede ser cualquiera siempre y cuando los elijamos, tambien podremos modificar algunas propiedades del elemento.

Ahora vamos a crear un ejemplo completamente con la opcion de diseño, abramos Android Studio y hagamos un nuevo proyecto con las siguientes opciones:

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

Una vez creado nuestro nuevo proyecto volvemos al Android Studio, debemos ir a activity_main.xml y debemos elegir la solapa Design se vera de la siguiente forma

Ahora vamos a hacer una pequeña modificacion antes de agregar nuestros cuatro items. Vamos a Component Tree y elegimos ConstraintLayout

Luego presionamos boton derecho y elegimos Convert view

Una vez seleccionado nos aparecera el siguiente cuadro

Aqui seleccionaremos LinearLayout y pulsamos el boton Apply, con la nueva vista volvemos hacer click con el boton derecho y ahora vamos a LinearLayout y seleccionamos Convert orientation to vertical

Una vez hecha esta pequeña modificacion procederemos a crear cuatro nuevos items:

• ToggleButton
• CheckBox
• ProgressBar
• RatingBar

Vamos a agregar el primer item, ToggleButton

Lo pueden hacer como se ve en la imagen con el boton derecho o directametne presionando Enter, pasemos al siguiente item CheckBox

Una vez agregado, agregaremos el siguiente item ProgressBar

Y por ultimo agregaremos el ultimo Item RatingBar

Ahora procederemos a eliminar al unico item creado por defecto al generar la app, la TextView para ello podemos utilizar el boton derecho y elegir eliminar o presionar directamente el boton Supr

Una vez hecho todo esto nos debera quedar algo asi

Ahora procederemos a reubicar todos nuestros items en la vista, primero seleccionemos el item toggleButon y luego pulsamos el boton resaltado

Una vez pulsado este boton se nos cambiara la propiedad de ancho de este item, ahora seleccionemos checkBox y vamos al marco de las Propiedades y debemos elegir la propiedad Layout_margin en la opcion de All Attributes

Busquen entre todos los atributos hasta encontrar layout_margin, una vez que lleguen despliegan la opcion y completan Layout_Margin con el valor de 20dp, quedando de la siguiente forma

Para nuestra siguiente modificacion cambiaremos el valor del atributo gravity, para ello deben buscarlo y desplegarlo y tildar las opciones: Center y Center Horizontal quedando de la siguiente forma

Con esto nos falta una sola modificacion, debemos buscar el atributo layout_weight y asignarle el valor de 1 como se va a continuacion

Todo esto que hicimos debemos hacerlo con los elementos restantes de nuestra vista, una vez realizado nos quedara de la siguiente manera

Nota: De todos los elementos uno solo no configure a Gravity porque no estaba y este era ProgressBar.

Pero esto todavia no esta concluido, ahora vamos a hacer un par de modificaciones mas para ir cerrando nuestra app con nuestras primeras vistas, para ello vamos a modificar los textos y para esto podemos hacerlo de dos formas, una es a traves de las propiedades del elemento

O hacerlo de la forma mas recomendada, como vimos anteriormente por medio del archivo strings.xml, hagamos este segundo caso. Primero abramos el archivo ubicado en res/values/strings.xml como se ve en la siguiente imagen

Ahora veamos el codigo fuente basico:

<resources>
    <string name="app_name">Primeras Vistas</string>
</resources>

Donde tenemos el nombre de nuestra app, procedamos a crear el nuevos rotulo:

<resources>
    <string name="app_name">Primeras Vistas</string>
    <string name="checkBx">Guardar Automaticamente</string>
</resources>

Como ven agregamos una linea, esta es para asignar el titulo al item checkBox, lo salvamos y ahora volvemos al archivo activity_main.xml, elegimos el item checkBox y vamos a la propiedad text

En la propiedad de checkBox llamada text le asignamos el valor @string/checkBx si lo salvaron a strings.xml antes de volver a este archivo, cuando empiecen a escribir en el campo les aparecera de la siguiente forma

Ahora vamos a hacer nuestra ultima modificacion. Elegimos el item toogleButton, vamos a las propiedades y elegimos layout_weight le asignamos el valor 0.5, luego elegiremos el item progressBar y le asignaremos a layout_weight el valor de 4 y por ultimo al item ratingBar le asignaremos el valor 2, una vez hecha todas estas modificaciones, salvamos el archivo y procedamos a probar nuestra app donde deberiamos obtener una pantalla de este estilo

Como pueden ver al modificar el layout_weight en cada uno de los items en realidad lo que definimos es la importancia en el layout. Ok, suena confuso pero veamoslo asi, esta propiedad si la traducimos seria como hablar del «peso» de cada item en el layout, mientras mas grande sea el peso mayor sera el tamaño, si se fijan en las propiedades de cada item, en el cual asignamos el valor wrap_content y nosotros por medio de la propiedad layout_weight le podremos el tamaño a tomar de la pantalla, por eso cuando lo modificamos en el ultimo paso cambiaron algunos items tomando un mayor tamaño, por ejemplo progressBar, o reduciendo el mismo, en este caso toggleButton, por ultimo les hablare sobre las medidas utilizadas en Android:

• pixeles (px), es utilizada para representar el tamaño en base a los pixeles de la pantalla
• milimetros (mm), distancia real medida sobre la pantalla
• pulgadas (in), idem al anterior pero en unidad americana
• puntos (pt), equivale a 1/72 pulgadas (in)
• pixeles independientes de la densidad (dp), equivale a 1/160 pulgadas en los dispositivos chicos y en dispositivos mdpi equivale a un pixel, la gran ventaja de utilizar esta medida es que siempre que se utilice este dato la medida se ajustara a un valor aproximado, esta medida es la mas recomendada por google
• pixeles escalados (sp), es similar a dp pero tambien se escala en base al tamaño de las fuentes.

Antes de finalizar veamos como quedo nuestra ultima aplicacion

En conclusion, hoy hemos aprendido sobre vistas, las cuales tienen tres formas de modificarse, pueden ser por codigo, por medio de los archivos XML y por ultimo por medio de las opciones de diseño, pudimos crear dos aplicaciones y ajustarlas a nuestro gusto pero podemos sacar por conclusion que lo ideal es tratar de utilizar un diseño de vista intermedio. Es decir, agregar los items y ubicarlos por medio del diseñador pero los atributos podemos ajustarlos por medio de los archivos XML, en general lo mas aconsejable es manejarse por los archivos XML y por la opcion de diseño pero no por codigo como vimos al principio pero como digo siempre queda a criterio del programador y por ultimo vimos las medidas mas utilizadas en las apps de Android. Espero les haya sido util, 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.