¡Nuevo look! Cambios de diseño y funcionalidades

Ve imagen más grande

¡Hola a todos! Con mucho gusto, tengo el honor de presentaros la versión 3.0 de mi preciado blog. Está a puntito de cumplir un añito el peque pero en todo este tiempo es la tercera "gran" transformación que sufre. Desde el 6 de diciembre (enlace) y hasta el día de hoy el blog ha tenido la estética azul que veis en la cabecera de esta imagen.

Espero que el cambio os guste, aún me quedan algunos pequeños detalles por pulir de este nuevo diseño. Los cambios están orientados a una mejor lectura, que para eso es un blog. Por que al fin al cabo, lo importante es el contenido y por eso he intentado ponerlo todo de una forma lo más sencilla posible (pero sin llegar a parecer sosa) sin perder, al menos, gran parte de personalidad.

Por otro lado, también he cambiado el sistema de comentarios a uno nuevo que espero os guste. Lo he cambiado por varios motivos. El primero (y al final el menos importante, pero bueno) ha sido por experimentar nuevas formas de mostrar todo. El segundo, por que creo que es un sistema mucho más cómodo y sencillo, con muchas más posibilidades. Ahora podéis responder directamente a un comentario, valorar los ya existentes u ordenarlos por vuestro mejor criterio. Por último, también he suplantado el sistema de comentarios para que podáis escribir con vuestra cuenta de Twitter, Facebook o Google, aunque también podéis seguir comentando de forma anónima. Al fin y al cabo, todo el que comentaba con su cuenta de Blogger tiene una cuenta de Google implícitamente ¿No?. 

También podréis hacer un seguimiento de todos los comentarios que habéis escrito en este blog  y en otros que utilicen el mismo sistema (si os hacéis una cuenta, es muy sencillo) o subscribirse a la nuevas respuestas de los posts que más os interesen.

Os cuento a continuación el resto de cambios que he realizado.

• El orden de los widgets ha cambiado y algunos menos importantes se han quitado, para ahorrar tiempo de carga. Ahora tengo como primeros widgets el panel de Seguidores, Ranquing Semanal y Blogs amigos, que creo que son los más importantes.

• El fondo es mucho más claro, para una mejor lectura

• He simplificado la ventana en la que indicaba mi perfil en las diferentes redes sociales. Ahora están en la cabecera de forma más resumida, simple y cómoda.

• Junto a cada widget, a la izquierda del título, he añadido un pequeño icono a modo de detalle.

• También he cambiado de lugar el botón de búsqueda. Ahora está junto a la cabecera, con más visibilidad.

SIGUE LEYENDO

Android (V): Crear opciones de menú

¡Ya iba tocando dejar por aquí un nuevo post sobre desarrollo en Android!, esta vez voy a intentar explicar algo bastante sencillo pero al mismo tiempo muy útil y versátil en las aplicaciones: las opciones de menú dentro de cada pantalla, donde normalmente añadimos las pequeñas funcionalidades que no tienen que mostrarse siempre en pantalla pero que de vez en cuando usamos, lo explicaré en 4 sencillos pasos:

• Crear imágenes de icono (opcional)
• Crear elemento XML con las diferentes opciones de menú
• Añadir opciones al Activity deseado
• Añadir funcionalidad a cada una de las opciones de menú

1. Crear los iconos para cada opción de menú (opcional)

Si queremos que el tamaño de la imagen cambie según la resolución del dispositivo que ejecuta la aplicación deberemos generar distintos tamaños de cada imagen. En general las aplicaciones suelen tener imágenes para tres resoluciones como mínimo: HDPI (alta), MDPI (media) y LDPI (baja), a continuación os dejo una relación de las distintas resoluciones existentes para aplicaciones android. Debemos tener cada imagen para cada resolución dentro de la carpeta correspondiente en res: drawable-hdpi, drawable-mdpi o drawable-ldpi.

Dando soporte a distintas resoluciones de pantalla (clic aquí para más info)

2. Crear elemento XML que contiene las diferentes opciones de menú

El siguiente paso necesario es definir un medio desde el cual leamos las opciones de menú. Puede configurarse desde una base de datos, desde el propio código o (la parte más sencilla a mi parecer) desde un fichero XML dentro de la carpeta menu, en res.

Como costumbre, suelo nombrar a los ficheros XML que forman parte de un menú con el mismo nombre que el layout al que van a pertenecer y así tener mejor organizados los ficheros a la hora de reconocerlos, esto es muy aconsejable sobre todo si la aplicación va a tener una estructura de ficheros bastante amplias. Como en este caso el menú va a ir asociado al layout home, lo he nombrado home_menu.xml.

Estructura de ficheros del proyecto

El contenido de home_menu.xml tiene la siguiente estructura:

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

<menu xmlns:android="http://schemas.android.com/apk/res/android">

      <item

            android:id="@+id/btConfig"

            android:title="Configuración"

            android:icon="@drawable/config">

      </item>

      <item

            android:id="@+id/btInfo"

            android:title="Acerca de"

            android:icon="@drawable/info">

      </item>

</menu>

3. Añadir las opciones de menú dentro del Activity deseado

Este paso es bastante sencillo, sólo debemos sobreescribir el método onCreateOptionsMenu dentro del Activity que implemente el menú e indicarle el documento XML que contiene dichas opciones.

// Añadiendo las opciones de menú

      @Override

      public boolean onCreateOptionsMenu(Menu menu) {

          MenuInflater inflater = getMenuInflater();

          inflater.inflate(R.menu.home_menu, menu);

          return true;

      }

Vista final de la pantalla cuando se pulsa el botón MENÚ

4. Dando funcionalidad a cada una de las opciones de menú

El código que muestra a continuación muestra un mensaje de texto diferente según que opción se pulsa, se deberá cambiar el contenido de cada case según la funcionalidad que queremos dar a la aplicación: Acceder a la base de datos para modificar algún registro, cambiar de Activity, etc.

// Añadiendo funcionalidad a las opciones de menú

@Override

public boolean onOptionsItemSelected(MenuItem item) {

   switch (item.getItemId()) {

        case R.id.btConfig:

           Toast.makeText(getApplicationContext(), "Has pulsado Config", 

                 Toast.LENGTH_SHORT).show();

           return true;

        case R.id.btInfo:

           Toast.makeText(getApplicationContext(), "Has pulsado la opción 

                 Info", Toast.LENGTH_SHORT).show();

           return true;

        default:

           return super.onOptionsItemSelected(item);

    }

}

OTRAS ENTRADAS SOBRE ANDROID EN ESTE BLOG

SIGUE LEYENDO

Android (IV): Diseño de layouts o interfaces

Personalización de nuestros layouts o interfaces

Bienvenidos a uno más de los experimentos que poco a poco voy realizando en el aprendizaje de mi curso de desarrollo en Android. En este cuarto post voy a intentar explicar algunas de las propiedades y "truquillos" que he aprendido a la hora de realizar el diseño de la aplicación a mi gusto.

Supongo que todos sabremos (tanto desarrolladores como usuarios) que uno de los puntos claves de una buena aplicación es un buen diseño. Por eso, una vez sabemos qué debe aparecer en cada pantalla o página web el siguiente paso es cómo mostrar esa información para que aparezca de la mejor manera tanto en lo visual como en lo práctico.

A continuación haré un repaso de todas las modificaciones que he realizado en la interfaz de la pantalla principal de mi aplicación para cambiar el diseño que aparece por defecto al diseño que he querido enfocar.

Como ejemplo, vamos a diseñar una pantalla en la que mostraremos el título de la aplicación, un mensaje de bienvenida, cuatro botones que nos darán acceso a diferentes partes del programa y un pie en el que indicaremos información correspondiente a la aplicación, ya sea la versión de la aplicación, el autor, empresa, derechos, año de publicación, etc.

Cambios de aspecto de una vista con los mismos elementos

1. Creación del archivo XML que define el Layout o interfaz

Todos los archivos que definen la interfaz se encuentran en una carpeta llamada "layout" dentro de la carpeta "res" perteneciente al proyecto de Android. Si no tenemos creado ningúin layout o deseamos crear el diseño en un nuevo archivo, dentro de la propia carpeta "layout" hacemos clic derecho y pulsamos "New" - "Other" - "Android XML File". Nos aparecerá una pantalla en la que debemos indicar el tipo de archivo que crearemos y el nombre del mismo. Podemos dejar la opción por defecto "LinearLayout" e indicar el nombre de archivo que nos apetezca.

IMPORTANTE: Debemos indicar la extensión ".xml" en el nombre de nuestro Layout para poder crear el archivo. NUNCA deben crearse los archivos con lestras en Mayúscula, si se desea diferenciar dos palabras debemos usar el guión bajo ( _ ).

2. Insertar los elementos en nuestro layout.xml

En primer lugar debemos insertar los elementos citados anteriormente, que serán los que aparecerán en la pantalla:

• Título de la aplicación: TextView
• Mensaje de bienvenida: TextView
• Botón "Nuevo Evento": Button
• Botón "Calendario": Button
• Botón "Contactos": Button
• Botón "Opciones": Button
• Pie de pantalla 1: TextView
• Pie de pantalla 2: TextView

Por defecto, los elementos en nuestra interfaz los definimos dentro de un LinearLayout, que es un tipo de estructura que define cómo se ordenan los elementos que contiene en su interior, en el siguiente apartado de este post se explicará de forma más detallada.
Todos los elementos deben formar una estructura en XML, y se suelen crear con las siguientes propiedades:

• Todas las propiedades se indican como android:nombre_propiedad="contenido_propiedad"
• ID: Nombre de la variable asociada al elemento que estamos creando
• layout_width: Ancho máximo ocupado por el elemento. "fill_parent" hace referencia a que el ancho máximo será lo ocupado por el padre (en este caso el LinearLayout que engloba a todos los elementos)
• layout_height: Altura máxima. "wrap_content" indica que el elemento puede ocupar el espacio que necesite para mostrarse, por lo que su altura variará según el tamaño de la letra, tipo de elemento, etc.
• text: Texto que se mostrara en pantalla para dicho elemento. En un botón, hace referencia al nombre representativo del botón.

<TextView  
android:id="@+id/txBienvenida"
android:layout_width="fill_parent" 
android:layout_height="wrap_content" 
android:text="AGENDA Y CONTACTOS"
/>

3. Acoplar los elementos en diferentes estructuras

Una vez tenemos todos los elementos en la pantalla toca estructurarlos en diferentes zonas. Para cada zona utilizaremos un a estructura diferente que afecte a un conjunto de elementos. Según cómo queramos mostrar los elementos podemos agrupar las vistas de diferentes elementos: De forma linear (LinearLayout), como una tabla (TableLayout), etc.

CONSULTA LOS TIPOS DE ESTRUCTURAS POSIBLES EN UNA VISTA 

La estructura de elementos quedaría de la siguiente manera

• LinearLayout principal, que comprende toda la pantalla
• LinearLayout - Cabecera
• TextView - Título
• TextView - Mensaje de bienvenida
• TableLayout - Estructura de botones
• Fila 1
• Button - Nuevo Evento
• Button - Calendario
• Fila 2
• Button - Contactos
• Button - Opciones
• LinearLayout
• TextView - Mensaje de pie de página

En la pantalla de ejemplo tenemos tres zonas diferenciadas:

• Cabecera: La cabecera contiene el título de la pantalla y un mensaje de bienvenida. Estos dos elementos se definirán dentro de un LinearLayout que ordene los elementos verticalmente (de arriba hacia abajo).
• Conjunto de botones: Los botones quedan estructurados como una tabla (TableLayout) con cuatro elementos (dos filas y dos columnas), en cada uno de los elementos de la tabla añadimos el botón correspondiente.
• Pié de página: Al igual que la cabecera, se usará un LinearLayout que contenga los elementos en orden vertical, ocupando el espacio restante.

4. Pulir los detalles

Ya definida la estructura, el resto de tareas pendientes son definir correctamente las propiedades de los elementos para aparezcan en pantalla de la forma que queremos, empezando por el tamaño de las imágenes, el color del fondo, las imágenes que queremos añadir al botón o el tamaño de cada estructura en la pantalla. A continuación indicare varias propiedades que he usado en cada uno de los elementos, para ver todo al detalle puedes descargarte el proyecto completo.

    <LinearLayout 
   android:orientation="vertical"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:layout_weight="2"
   android:gravity="center"
    >    
            (Aquí especificamos el contenido del LinearLayout)
    
    </LinearLayout>

• layout_weight: Esta propiedad es fundamental para la estructura que queremos diseñar. Hace referencia al peso que tiene el elemento sobre el resto, dentro de la misma pantalla. Cuanto mayor sea el peso, menor será su proporción de tamaño en la pantalla. Por ello, a la zona más importante (en este caso la tabla de botones), le pondremos peso 1 y a la cabecera le pondremos peso 2. Esto quiere decir que el espacio ocupado por la estructura de tipo tabla ocupará el doble de espacio que la cabecera. Si pusieramos relación 1-3, el tamaño de la estructura con peso 1 sería 3 veces mayor que el tamaño de la estructura con peso 3.
• gravity="center": Los elementos que forman parte de la estructura se alinean al centro de la pantalla.
• padding="20px": El elemento con dicha propiedad tendrá un margen del tamaño de los píxeles establecidos con todo lo que le rodea. Existen las variantes PaddingTop, PaddingLeft, PaddingButtom y PaddingRight.

Descarga el código del proyecto de prueba:

Accede a Windows Skyline para descargar el archivo

OTRAS ENTRADAS SOBRE ANDROID EN ESTE BLOG

SIGUE LEYENDO

Cambios en el diseño del blog.

¡Hola a todos! No sé si alguien ha entrado por aquí recientemente, pero si es el caso es posible que haya estado viendo "cosas raras" en el diseño del blog. En este último par de días he estado haciendo pruebas y finalmente lo he dejado tal y como lo estáis viendo ahora.

Sin buscar un cambio drástico de la visión del blog, empezé a juguetear con las posibilidades que brinda CSS y Javascript (obviamente da para mucho más de lo que yo he conseguido). 

He cambiado los bordes del recuadro principal del blog y las pestañas. La cabecera principal la he sustituido por una imagen en formato PNG, que me permite jugar con la transparencia y mostrar parte de lo que hay detrás. Las letras de título y descripción las he cambiado de sitio y de tamaño hasta ajustarlas en la imagen principal creada, cuando en el formato anterior quedaban ocultas y el texto estaba incrustado directamente en la imagen, formando parte de ella.

Y, evidentemente, he cambiado el color general del blog. Antes tenía un color rojizo. Creo que este color queda mucho mejor a la hora de realizar cualquier lectura de un post.

El muñecote que aparece como imagen del post ha sido una creación de Sonia. Hizo este dibujo hace bastante tiempo y hoy se ha puesto unos minutillos a darle color. Creo que refleja bastante lo que es mi personalidad, y desde luego el dibujo le ha quedado genial. ¡Muchas gracias por el aporte, chuli! ^^

Por último he añadido un buscador personalizado (no quería que me apareciese en el widget el logotipo de google) en el que podemos buscar cualquier entrada antigua que recordemos en este blog, y he cambiado el formato de las webs amigas, para que tengan todos los enlaces un diseño común. Dejando mi toque de egocentrismo y poniendo mis cabezas una y otra vez, a mí me mola más así.

¿Qué os ha parecido el cambio? ¿Qué cosas nuevas le añadiríais y qué cambiaríais? Si tenéis alguna idea estoy atento a cualquier propuesta que se os ocurra, de todas formas ya se me irán ocurriendo cosillas nuevas que añadir.

Os dejo un pantallado de lo que era este blog antes de realizar el cambio. 

SIGUE LEYENDO