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
🙂
Firebase es la plataforma para el desarrollo de aplicaciones web y aplicaciones móviles de Google el cual se centra en e[...]
Muchas de las innovaciones computacionales de la NASA se desarrollaron para ayudar a explorar el espacio, pero ahora la[...]
En esta oportunidad dejamos las fuentes del Generador de Código de Control de Impuestos Bolivia (Facturación Virtual), e[...]
No se puede negar la popularidad que ganaron las aplicaciones de JavaScript en los últimos años, y las bibliotecas dispo[...]
Los mejores días del marco de java swing se han ido. Las aplicaciones de escritorio perdieron popularidad y todo está fo[...]
Según Santa Wikipedia: «Un archivo binario es un archivo informático que contiene información de cualquier tipo codifica[...]