gangnam android

gangnam android

martes, 2 de julio de 2013

CAMBIO DE IMAGEN CUANDO SE PRESIONA UN BOTÓN CON JAVA ANDROID

Hola amigos, en esta ocasion compartire con ustedes un poco de mis conocimientos en java android, en este caso sera el evento de un boton, el cual cambiara de imagen cuando sea presionado y volvera a su estado normal si se deja de presionar, basta con crear un archivo xml en cualquiera de nuestra carpetas drawable, con el nombre que querramos en este ejemplo será btnencender.xml, ademas se debera importar las 2 imagenes que se quieran usar, como vemos a continuación estas son unas imagenes sin fondo png, para que se vea de manera mas realista.


Habiendo agregado estas imagenes en nuestro nuevo archivo xml agregamos 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/onluz" /> <!-- pressed -->
     <item android:state_focused="true"
          android:drawable="@drawable/offluz /> <!-- focused -->
     <item android:drawable="@drawable/offluz" /> <!-- default -->
 </selector>

Siendo offluz la primera imagen en cuestión y onluz la segunda imagen. Luego solo falta hacer referencia a este archivo, por lo que se procede de la siguiente manera:

Primero agregamos un imageButton, y usamos el siguiente codigo, en la linea android:src es en donde se hace referencia del archivo.

 <ImageButton
        android:id="@+id/imageButtonLuzHabitacion"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:background="#00000000"
        android:scaleType="fitXY"
        android:src="@drawable/btnencender" />

Con esto ya tenemos un boton que cambia de manera grafica y muestra su estado.

INTERFAZ VISUAL EN ANDROID JAVA ECLIPSE CODIGO PARA UBICAR LOS ELEMENTOS

En esta nueva ocasion les traigo un tema un tanto corto pero de mucha utilidad, que consiste en un codigo para ubicar nuestros elementos en nuestra aplicacion.

Basta con copiar la siguiente funcion:


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));

}

y dentro del onCreate ubicamos nuestros elementos de la siguiente forma:

setContentView(R.layout.activity_control_aire);

final ImageButton btnarribaaire=(ImageButton) findViewById(R.id.imageButtonArriba);
final ImageButton btnabajoaire=(ImageButton) findViewById(R.id.imageButtonAbajo);
final ImageButton btnaspas=(ImageButton) findViewById(R.id.imageButtonAspas);
final ImageButton btnhumedad=(ImageButton) findViewById(R.id.imageButtonhumedad);
final ImageButton btnmaximo=(ImageButton) findViewById(R.id.imageButtonmaximo);
final ImageButton btnonaire=(ImageButton) findViewById(R.id.imageButtononaire);
final ImageButton btnventilador=(ImageButton) findViewById(R.id.imageButtonventilador);


                //AutoSizeAndSetXY(elemento, posición en x,  posición en y , ancho , alto);
AutoSizeAndSetXY(btnarribaaire, 0.3,  0.3333 , 0.3 , 0.2);
AutoSizeAndSetXY(btnabajoaire, 0.3,  0.5333 , 0.3 , 0.2 );
AutoSizeAndSetXY(btnaspas, 0,  0.3333 , 0.3 , 0.2);
AutoSizeAndSetXY(btnhumedad, 0,  0.5333 , 0.3 , 0.2 );
AutoSizeAndSetXY(btnmaximo, 0.6,  0.3333 , 0.3 , 0.2);
AutoSizeAndSetXY(btnonaire, 0,  0 , 0.3 , 0.2 );
AutoSizeAndSetXY(btnventilador, 0.6,  0.5333 , 0.3 , 0.2);

Los valores comprede rango entre 0 y 1.




USO DE TTS CON LA BUSQUEDA DE VOZ DE GOOGLE ANDROID JAVA

Hola amigos, en esta ocasión les traigo un proyecto consistente en la integración del software de búsqueda de google con la integración de las tts, para dar como resultado una aplicación en android java que nos captura lo que escuchamos y que nos responde de acuerdo a lo que le preguntemos. Aunque parezca un poco difícil de creer en este caso no es asi, ya hay sotfware que lo hacen como el sherpa, solo que en esta ocasión estamos limitados a lo que nuestro tiempo nos deje programar para decodificar las frases, bueno sin mas preámbulo empezamos el proyecto.

Acá les dejo todo el programa código y debajo esta su explicación.

http://depositfiles.org/files/gh5vdviqy

La versión del sdk es la 2.3.3 con la que trabajé.

Solo resta darle en el manifest los permisos de usuarios de acceso a Internet y listo.

No se necesita del layout activity debido a que no uso ningún tipo de botón ni de etiqueta.


FUNCIONAMIENTO

- Cuando inicia abre la búsqueda de voz de google, se necesita tener acceso a Internet debido a que el motor esta sobre la web y no sobre nuestro telefono

- El programa tiene una validación, la cual pueden cambiar en este caso, no avanza si no dices la frase "hola penélope".

- Al momento que usamos la búsqueda por voz, el nos regresa como resultado un string, ese string lo decodificamos de la siguiente forma:

1. Se le retira los acentos para hacer mas fácil la decodificacion y así maximizar los procesos
2. Se corta la cadena de caracteres y se guardan en vectores
3. Luego esos vectores son comparados con cada palabra registrada
4. Cuando se obtiene el true de cada palabra llega hacia la función de reconocimiento de frases que consiste en operaciones lógicas and y posterior or.

Para ingresar palabras nuevas hay que crearlas como tipo boolean y luego seguir la estructura de la comparación del if, ahi se entiende fácilmente.

- Luego de obtener eso, se manda una respuesta que se selecciona al azar de opciones creadas para cada pregunta, ejemplo como estas?, respuesta bien gracias, me encuentro bien, etc. Después el sintetizador de voz TTS le responde con preguntas o frase de animo dependiendo la pregunta.

- Use función delay debido a que la reproducción y la búsqueda se hacian en paralelo por lo que no era la forma correcta de hacerlo, otra solución es con la función de la TTS, isSpeaking(), que devuelve un true mientras se esta reproduciendo, pero el problema es que hay que implementar el programa por medio de thread, algo que aun no he hecho.

En fin esto en si es el código y su explicación como dije antes el limite es nuestro tiempo para dedicarle, espero les sea de ayuda, y si hacen algo avanzado con esto espero que me lo retribuyan.

Saludos!!!

lunes, 1 de julio de 2013

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