ESTILO BALDOSAS(AZULEJOS) DE WINDOWS 8 PARA ANDROID JAVA

Hola compañeros, en esta ocasión les explicare un poco sobre como hacer que nuestras aplicaciones en android java sean un poco más llamativas, tanto para nosotros como para los demás. Porque es muy triste hacer aplicaciones que tengan múltiples funcionalidades pero que en su aspecto demuestre ser una aplicación que no interesa o que nos aburre. Bueno sin mas allá les traigo el siguiente ejemplo:

- Estilo Baldosas de windows 8 para android JAVA

Primero que nada necesitaremos tener instalado el adobe photoshop u otro programa para la edición profesional de imágenes. (pueden descargarlo desde aqui: http://www.putlocker.com/file/626E80781CFED267)

Para hacer las aplicaciones de android utilizo el programa eclipse, que viene en el paquete del adt-bundle y lo pueden conseguir aquí: http://developer.android.com/sdk/index.html

Sin mas preámbulo empecemos con el diseño de las imágenes.

En photoshop le damos click a nuevo, establecemos la resolución de nuestro proyecto en este caso nuestra valdosa que en este caso sera de 400x200, con el fondo transparente.

Seleccionamos un color, en este caso el naranja, llenamos el fondo con la herramienta bote de pintura, luego le hacemos doble click a la capa y en este menú clickeamos la primera opción en mi photoshop es bevel and emboss, luego seleccionamos gradient overlay, nos vamos a la paleta de colores del gradiente y seleccionamos un color un tono mas claro o mas oscuro que el original para que contraste, y el resultado seria el siguiente:

Después rasterizamos el estilo haciendo click derecho a nuestra capa en la opción de rasterizar estilo, luego para obtener otros colores sin perder la simetría de la tonalidad por así decirlo usamos el comando control+u, y escogemos el color a nuestro gusto, luego guardamos toda las imágenes con el formato png.
Para cada icono es esencial crear dos baldosas de diferentes colores para indicar que se presiona el botón.

Aquí de este modo ya tenemos terminada el fondo de nuestra baldosa, ahora lo mas importante es el desarrollo del icono.


Para el icono, ya es cuestión de cada uno, sobre lo que va a tratar nuestra aplicación, en este caso supondremos que estamos desarrollando una aplicación para encender y apagar nuestro aire acondicionado.
Lo primero que tendremos que hacer es crear un proyecto nuevo con las siguientes especificaciones; resolución 200x200, fondo transparente.

- 1 Seleccionamos la herramienta rectángulo redondeado le quitamos los bordes en el panel superior , y creamos la forma

- 2 Con la herramienta de selección rectángulo recortamos de la siguiente manera

- 3 Con el mismo corte hacemos dos hendiduras mas solo usando la tecla abajo del cursor y el botón suprimir de nuestro teclado.

Este ejemplo debe hacerse con el color blanco, sino que a modo de ejemplo utilicé el color negro para poder observar el procedimiento de una forma optima y precisa.

Por ultimo esta imagen ya terminada la guardamos con el formato png.

Y a modo de prueba haré una superposición de una baldosa con el icono que creamos.y el resultado es el siguiente:

Ya los colores y el diseño es solo gusto y el limite es nuestra imaginación.


Habiendo terminado la parte grafica, ahora lo que todos esperábamos el desarrollo de nuestra aplicación en android java for eclipse.

Ahora falta es desarrollar nuestra interfaz y aplicación.

1. En nuestro activity layout, agregamos un imageButton que sera nuestro botón-

2. Creamos el icono de la siguiente forma:

 3. le damos el nombre al icono

4. Seleccionamos la imagen para nuestro icono y lo hacemos de la siguiente manera.

Ahora nos vamos a nuestro .xml del layout y editamos de la siguiente manera:

    <ImageButton
        android:id="@+id/imageButtonaire"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
      android:scaleType="centerInside"
        android:background="@drawable/baldosa1"
        android:src="@drawable/ic_aire" />



En el manifest resta colocar el siguiente tema, dentro del activity

android:theme="@android:style/Theme.NoTitleBar.Fullscreen"

Ahora en el main, en el archivo .java crearemos la siguiente función:

public void AutoSizeAndSetXY(View v,double posX,double posY,double width,double height){
   Display display = getWindowManager().getDefaultDisplay();
 
   int widthP = display.getWidth();
   int heightP = display.getHeight();
   RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
   lp.setMargins(((int)Math.round(posX*widthP)),((int)Math.round(posY*heightP)), 1, 1);
   v.setLayoutParams(lp);
   v.getLayoutParams().height=(int)(Math.round(height*heightP));
   v.getLayoutParams().width=(int)(Math.round(width*widthP));

}

Esta función obtiene los parámetros de la pantalla y deja posicionar nuestro elemento, ademas de tener la posibilidad de establecer el tamaño de la pantalla, dándole valores desde 0 hasta 1 máximo.

Esto se logra de esta forma:

Dentro del onCreate, pegamos el siguiente codigo:

AutoSizeAndSetXY(btnonaire, 0.3,  0.3333 , 0.3 , 0.2);

Si queremos introducirle una imagen de fondo a nuestra aplicación lo haremos de la siguiente manera:

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:scaleType="fitXY"
        android:src="@drawable/fondoprincipal" />

Ahi que importar los recursos utilizados, tales como fondoprincipal,baldosa1 etc.

De esta forma tenemos una aplicación un poco mas agradable que las de antes.

Aca les dejo un video de una aplicacion donde uso lo descrito anteriormente:

http://www.youtube.com/watch?v=WrG4HSR30ik