En este tutorial «Android Bolivia» construiremos nuestra propia aplicación para molestar a los amigos con sonidos divertidos (pedos, piropos, silbidos, chistes, etc), podremos usarlo en salón de clases, en el recreo, en la universidad, en el trabajo y porque no en la iglesia 😉
Al termino de este tutorial, aprenderemos el uso de archivos de sonido en android, veremos el uso de ImageButton en XML y su implementación en código, veremos como usar dos LAYOUTS (vistas) para cada posición del teléfono (Landscape y Portrait).
Necesitamos.
– IDE Eclipse Indigo con Android instalado y configurado.
– Archivos de sonido MP3, imagenes JPG y PNG
Nivel: Android básico, Java intermedio, XML intermedio
Duración: 20 minutos
SONIDOS DIVERTIDO PROYECTO ECPLISE
1.Crea un nuevo Application Android Project con la siguiente configuración:
Application Name: Funny Sounds
Project Name: FunnySounds
Package Name: com.tutorial.funnysounds
Activity: Blank Activity
Activity Name: MainActivity.java
Layout Name: activity_main.xml
2. Para este proyecto, haremos uso de imágenes JPG y PNG para los botones y el fondo de la aplicación, utilizaremos también archivos XML para la animación de botones como vimos en post anteriores.
Estos archivos, debes colocarlos en la carpeta RES/DRAWABLE-MDPI/ .
Necesitamos 4 archivos de sonido en formato MP3 (latigo,silbido,pedo,yegua) de 1 0 3 segundos de duración, estos archivos de audio debemos colocarlos en la carpeta ASSETS.
Descargate los archivos de imagen, XML y MP3 [AQUI]
3. Vamos ahora a crear la interfaz de usuario, abre el archivo activity_main.xml que esta en RES/LAYOUT/ Y reemplaza el código por:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/LinearLayout1" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/sf_bg" android:orientation="vertical" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context=".MainActivity" > <ImageView android:id="@+id/imageView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:contentDescription="@null" android:layout_gravity="center" android:layout_weight="1" android:src="@drawable/sflogov" /> <ImageButton android:id="@+id/btnYegua" android:layout_width="match_parent" android:layout_height="wrap_content" android:contentDescription="@null" android:layout_weight="1" android:layout_marginBottom="4dp" android:background="@drawable/btn_main" android:src="@drawable/yegua" /> <ImageButton android:id="@+id/btnPedo" android:layout_width="match_parent" android:layout_height="wrap_content" android:contentDescription="@null" android:layout_weight="1" android:layout_marginBottom="4dp" android:background="@drawable/btn_main" android:src="@drawable/pedo" /> <ImageButton android:id="@+id/btnSilbido" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1" android:layout_marginBottom="4dp" android:background="@drawable/btn_main" android:contentDescription="@null" android:src="@drawable/silbido" /> <ImageButton android:id="@+id/btnLatigo" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/btn_main" android:contentDescription="@null" android:layout_weight="1" android:src="@drawable/latigo" /> </LinearLayout>
Guardamos los cambios y ejecutamos, nuestra aplicación tiene listo ya la interfaz pero tenemos un pequeño problema.
Vista Portrait. En esta vista tenemos nuestra aplicación tal cual la habíamos diseñado en eclipse.
Vista Landscape. En la vista Landscape, nuestra aplicación al tratar de adaptarse a la forma de la pantalla, se a deformado, los botones están muy delgados lo que le da un mal aspecto.
Para solucionar este problema tenemos dos soluciones, podríamos bloquear la orientación de la pantalla o utilizar un layout para cada posición, landscape o portrait. A continuación, llevaremos a cabo la segunda opción.
4. Para hacer uso de un layout para cada posición de la pantalla en android, basta con añadir una nueva carpeta «layout-land» para la vista LANDSCAPE a la carpeta RES. De esta forma cuando nuestra aplicación este en ejecución, android sabrá que layout utilizar según la orientación de la pantalla.
En la nueva carpeta layout-land, crea un archivo Android XML Layout File (New->Other -> Android ) con el mismo nombre de nuestro layout principal, «activity_main.xml«, eclipse te da varias opciones al crear este archivo, por el momento no nos interesan así que dale FINISH para terminar su creación.
Nuestro proyecto Android, debe tener el siguiente aspecto:
El código XML para el nuevo activity_main.xml es:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/LinearLayout1" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/sf_bg" android:gravity="center" android:orientation="vertical" > <ImageView android:id="@+id/imageView1" android:layout_width="match_parent" android:layout_height="wrap_content" android:contentDescription="@null" android:paddingBottom="10dp" android:src="@drawable/sflogoh" /> <LinearLayout android:id="@+id/LinearLayout2" android:layout_width="wrap_content" android:layout_height="wrap_content"> <ImageButton android:id="@+id/btnSilbido" android:layout_width="0dip" android:layout_height="match_parent" android:layout_weight="1" android:padding="24dp" android:layout_margin="4dp" android:contentDescription="@null" android:background="@drawable/btn_main" android:src="@drawable/silbido" /> <ImageButton android:id="@+id/btnLatigo" android:layout_width="0dip" android:layout_height="match_parent" android:layout_weight="1" android:padding="24dp" android:layout_margin="4dp" android:contentDescription="@null" android:background="@drawable/btn_main" android:src="@drawable/latigo" /> <ImageButton android:id="@+id/btnYegua" android:layout_width="0dip" android:layout_height="match_parent" android:layout_weight="1" android:padding="24dp" android:layout_margin="4dp" android:contentDescription="@null" android:background="@drawable/btn_main" android:src="@drawable/yegua" /> <ImageButton android:id="@+id/btnPedo" android:layout_width="0dip" android:layout_height="match_parent" android:layout_weight="1" android:padding="24dp" android:layout_margin="4dp" android:contentDescription="@null" android:background="@drawable/btn_main" android:src="@drawable/pedo" /> </LinearLayout> </LinearLayout>
Nuestra vista en landscape esta lista.
5. Para terminar, abrimos el archivo MainActivity.java y reemplazamos el código por:
package com.tutorial.funnysounds; import java.io.IOException; import android.media.AudioManager; import android.media.SoundPool; import android.os.Bundle; import android.app.Activity; import android.content.res.AssetFileDescriptor; import android.content.res.AssetManager; import android.util.Log; import android.view.Menu; import android.view.View; import android.view.Window; import android.view.WindowManager; import android.view.View.OnClickListener; import android.widget.ImageButton; public class MainActivity extends Activity implements OnClickListener { private ImageButton btn1,btn2,btn3,btn4; private SoundPool soundPool; private int yeguaSound, pedoSound, silbidoSound, latigoSound = -1; @Override protected void onCreate(Bundle savedInstanceState) { //-->PARA PANTALLA COMPLETA requestWindowFeature(Window.FEATURE_NO_TITLE); getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN); //-->end super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //botones btn1 = (ImageButton) findViewById( R.id.btnYegua ); btn2 = (ImageButton) findViewById( R.id.btnPedo ); btn3 = (ImageButton) findViewById( R.id.btnSilbido ); btn4 = (ImageButton) findViewById( R.id.btnLatigo ); btn1.setOnClickListener(this); btn2.setOnClickListener(this); btn3.setOnClickListener(this); btn4.setOnClickListener(this); //sonido setVolumeControlStream(AudioManager.STREAM_MUSIC); soundPool = new SoundPool( 20, AudioManager.STREAM_MUSIC, 0); try{ AssetManager assetManager = getAssets(); AssetFileDescriptor sound1 = assetManager.openFd("yegua.mp3"); AssetFileDescriptor sound2 = assetManager.openFd("pedo.mp3"); AssetFileDescriptor sound3 = assetManager.openFd("silbido.mp3"); AssetFileDescriptor sound4 = assetManager.openFd("latigo.mp3"); yeguaSound = soundPool.load( sound1 ,1); pedoSound = soundPool.load( sound2,1); silbidoSound = soundPool.load( sound3,1); latigoSound = soundPool.load( sound4,1); } catch( IOException ex) { Log.e("Error de sonido", ex.getMessage() ); } } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.main, menu); return true; } @Override public void onClick(View arg0) { // TODO Auto-generated method stub switch ( arg0.getId() ) { case R.id.btnYegua : dale_play( yeguaSound ); break; case R.id.btnPedo : dale_play( pedoSound ); break; case R.id.btnSilbido: dale_play( silbidoSound ); break; case R.id.btnLatigo : dale_play( latigoSound ); break; } } /** * Metodo privado para reproducir sonido * @param int id identificador de sonido * */ private void dale_play( int id ) { if( id != -1 ) { soundPool.play( id ,1,1,0,0,1 ); } } }
Para manejar sonido en android contamos con la API SoundPool, con esta api podemos reproducir pequeños archivos de sonido.
Codigo Fuente
Proyecto: Funny Sound
IDE: Eclipse Indigo
🙂
Yo soy yo :) JC Mouse, Soy orgullosamente boliviano soy fundador y CEO de la web jc-Mouse.net uno de las pocas web en emprendimiento y tecnología en Bolivia.
Toda la información que encuentres en este sitio es y sera completamente gratis siempre, puedes copiar, descargar y re-publicar si así lo deseas en otros blogs o sitios web, solo te pido a cambio que dejes una referencia a esta web. Esto nos ayuda a crecer y seguir aportando. Bye
Enjoy! :)
El proyecto «Java Decompiler» tiene como objetivo desarrollar herramientas para descompilar y analizar byte code de jav...
Un Tabbed Activity te permite cambiar la vista entre fragmentos desplazando el dedo de izquierda a derecha o de derech...
La clase Canvas (Lienzo) de Android es una superficie que nos permite pintar figuras, texto e imágenes utilizando para...
Para quienes hayan trabajado con JMF saben que es una librería de Java desarrollada por Sun Microsystems para facilitar...
Problema: Escriba un programa en java que permita dibujar con el mouse cuadrados, círculos y triángulos. El usuario debe...
Antes de programar un videojuego, es necesario saber: Cómo representar figuras en la pantalla Cómo se manejan las coorde...
En este post crearemos un botón swing que reproducirá un sonido cuando este sea presionado por el usuario. Sin mas que...
Muchas veces necesitamos de fotos para adornar nuestros perfiles en RRSS pero no queremos subir nuestras propias fotos p...
En esta ocasión aprenderemos a conectaros con una base de datos Oracle desde Laravel. Es un tutorial sencillo y cortito,...
En este tutorial conoceremos una forma de conectar una aplicación en Laravel con tres bases de datos diferentes, 2 en My...