NOVEDADES IMPORTANTES

Acceso a todos los contenidos

Hace unos meses decidimos suspender nuestra actividad de formación online en Digital Learning SL (propietaria de esta web).

Desde entones hemos mantenido operativos nuestra plataforma de teleformación y webs de contenidos Academia Android y Digital Learning, habilitando un acceso libre y gratuito a todos estos recursos, incluyendo cursos y contenidos Premium que antes requerían un registro y pago previo, lo que ha propiciado un volumen de visitas constante de usuarios que consultan esta formación.

Venta-traspaso de los contenidos

Creemos que estas webs por sus contenidos, posicionamiento SEO y atracción de tráfico (junto a sus cuentas en redes sociales asociadas, incluyendo Twitter y Facebook de nuestro curso de Community Manager) pueden ser una oportunidad para emprendedores o compañías de diversos ámbitos (formación, marketing y publicación online, desarrollo software,…) que quieran:

  • Captar usuarios, alumnos o clientes para sus proyectos, productos y servicios.
  • Comercializar los contenidos bajo múltiples fórmulas: venta de publicidad, modelos freemium o de pago, suscripciones…
  • Crear un nuevo proyecto a partir de esta infraestructura de recursos.

Si tú o tú empresa estáis interesados en adquirirlos, ofrecemos su traspaso en propiedad exclusiva. Puedes contactar conmigo en «contacto@digitallearning.es» (por favor entiende que los correos que no vengan suficientemente identificados no vamos a atenderlos). Gracias.

Manuel Cabello (Socio-Director de Digital Learning/Academia Android)

Este es el número de tutoriales publicados:

Pincha en los textos de los contadores de Tutoriales publicados, Premium o Series de tutoriales para tener un detalle de las publicaciones que comprenden.

Desde hace unos meses, todos los contenidos, incluidos los Premium, son accesibles libre y gratuitamente.

  • Premium
  • Acceso libre
130
Acceso libre
126
Premium

Algunos datos sobre los contenidos que hemos publicado hasta la fecha:

74
Videos
61
Proyectos descargables
contacto[arroba]digitallearning.es
Interfaz Usuario XML

Proyecto ejemplo de Interfaz de Usuario en Aplicación Android

Post Series: Creación de Apps Android: diseño de Interfaz de Usuario

Vamos a mostrar a través de un ejercicio práctico, cómo construir elementos de la interfaz de usuario. Se tratará de una aplicación Android muy simple que presentará un control de entrada Button que al ser pulsado, mostrará un mensaje en la pantalla.

Haremos dos versiones de este sencillo ejemplo, cuyo código podrás descargar al final de este tutorial:

  • Proyecto que denominaremos «InterfazUsuario» donde implementamos los controles de forma programática, es decir, se construyen dichos elementos en tiempo de ejecución (cuando la App se ejecuta en el dispositivo).
  • Proyecto que denominaremos «InterfazUsuarioXML» donde definiremos los controles a nivel de layout.

Descripción y estructura del proyecto InterfazUsuario

La aplicación será muy simple. Constará de una sola pantalla con el botón y el mensaje que aparecerá al pulsarlo, como vemos aquí:

 

Pantalla App versión programática

Los elementos necesarios para el desarrollo de este son:

  • Clase MainActivity, que herede de la clase base Activity, y que definirá la lógica de creación de instancias y diseño programático de las propiedades de la interfaz de usuario.
  • Layout activity_main.xml, formado por un layout de tipo RelativeLayout, que servirá como base para el resto de elementos que vayan construyéndose en tiempo de ejecución.

En la siguiente imagen, se podrá apreciar cómo quedaría finalmente la estructura de elementos que intervienen en el proyecto (vista Android en el IDE Android Studio):

Estructura Proyecto Interfaz Usuario

Descripción del código fuente proyecto «InterfazUsuario»

Una vez presentado brevemente el proyecto, vamos a explicar el código que contiene:

InterfazUsuario\app\src\main\java\com\academiaandroid\interfazusuario\MainActivity.class

Activity que mostrará un control de tipo Button, creado en tiempo de ejecución, y que permitirá al usuario interaccionar con la aplicación al pulsar dicho botón:

Se declara tres variables de tipo TextView, Button y RelativeLayout a nivel de clase:

El método onCreate() será llamado cuando se inicie la Activity, por lo que todo lo situado en su interior se inicializará al llamar a dicha Activity:

En las siguientes líneas se crean las instancias de los objetos que serán inicializados al ejecutar la aplicación (reciben como parámetro de entrada el contexto de la aplicación). En este caso se trata del layout base de la Activity, y el control Button que aparecerá inicialmente:

El objeto btnSaludo invocará al método setText() para establecer el texto que mostrará el botón:

Finalmente se añade el control Button al layout definido, para establecer dicho layout como base de la interfaz de la aplicación:

A continuación, y todavía dentro del método onCreate(), se invoca al método setOnClickListener() del objeto btnSaludo, encargado de controlar la pulsación del botón:

Dentro de este evento, se crea una instancia de TextView, para en las siguientes líneas invocar al método setTextColor() encargado de establecer el color del texto, y además establecer los parámetros para definir la posición del objeto tvHolaMundo dentro del layout. Para este último aspecto se crea una instancia de LayoutParams, que recibirá como argumentos para dicha instancia, el ancho y alto del layout definido:

En las siguientes líneas se establece el margen con respecto a la parte izquierda, superior, derecha e inferior de la pantalla, además de asignar los parámetros del layout y asignarle el texto «Hola Academia Android!!!» al invocar al método setText():

Por último se añade al layout implementado, para finalmente cerrar el método setOnClickListener, onCreate() y la clase MainActivity:

InterfazUsuario\app\src\main\res\layout\activity_main.xml

Layout activity_main.xml que al definir los elementos de forma programática, sólo estaría formado por un RelativeLayout:

Descripción del código fuente proyecto «InterfazUsuarioXML»

Si por el contrario, deseamos crear una aplicación similar a la anterior, enlazando los controles definidos en la interfaz de usuario, con las variables definidas en la clase, bastaría con realizar los siguientes pasos:

A nivel de layout añadir dos controles, uno de tipo Button, y otro de tipo TextView. Para ello sólo bastará con seleccionar el layout creado por defecto al construir un proyecto con una Activity vacía, y que podremos encontrar dentro de la ruta InterfazUsuarioXML\app\src\main\res\layout\activity_main.xml.

Una vez estemos situados sobre dicho fichero XML, en la vista diseño, seleccionar los controles comentados anteriormente con un click, e indicaremos en qué posición queremos colocarlo en la interfaz de usuario. Tanto a nivel visual, como desde el punto de vista XML, quedaría de la siguiente forma:

Interfaz Usuario XML
Como se puede apreciar en la imagen anterior, aunque se ha definido un control TextView (árbol de componentes), este no mostrará contenido debido a que la propiedad «text» se deja vacía, para posteriormente desde la clase MainActivity indicar que texto deseamos visualizar.

InterfazUsuarioXML\app\src\main\res\layout\activity_main.xml

A nivel de clase, se crearán dos variables de tipo Button y TextView:

Para finalmente, dentro del método onCreate(), definir el resto de lógica del contenido de la vista y referencias de variables con sus recursos a nivel de layout. Como se puede apreciar, a diferencia del ejemplo anterior, el método setContentView() establece la referencia con el layout definido en los recursos de la aplicación, además de también referenciar las variables de tipo TextView y Button con los identificadores (propiedad id del control a nivel de layout). Esta tarea se realizará mediante el método findViewById(), que recibirá el identificador único asignado a ese control:

El resultado final con la pantalla de la App ejemplo sería muy similar a la otra versión:

Pantalla App versión XML

Descarga de los proyectos

Proyecto InterfazUsuario:

Descargar

Proyecto InterfazUsuarioXML:

Descargar

En la próxima publicación explicaremos en un video ambos proyectos ejemplo.