UNIVERSIDAD DE CONCEPCIÓN

FACULTAD DE INGENIERÍA
DEPTO. INGENIERÍA ELÉCTRICA

Tarea 1 Aplicaciones Móviles

“
Desarrollo de aplicación “Piano” en AndroidStudio

Alumno:
 Luciano Radrigán

Profesor
 Mario Medina C.
Índice
Características de la Aplicación .........................................................................................................3
Código XML ........................................................................................................................................3
Ventana de inicio ...........................................................................................................................3
Piano ..............................................................................................................................................5
Acordes piano ................................................................................................................................8
Código java ........................................................................................................................................9
MainActivity ................................................................................................................................10
Tutorials .......................................................................................................................................13
AndroidManifest .............................................................................................................................13
Comentarios ....................................................................................................................................14
Características de la Aplicación

La aplicación elaborada en Android estudio, constará de 3 etapas, un “splash” de inicio, el

cual dará la bienvenida y el nombre de la aplicación, luego la aplicación central del piano y
finalmente un layout con imágenes de cómo hacer distintos acordes en un piano. La
interacción entre estos elementos se muestra en la figura 1.

Figura 1. Diagrama de Bloques Aplicación

Código XML
Ventana de inicio

La ventana de inicio, constara de una imagen central, con 2 líneas de texto, una superior la cual
llevará el nombre de la aplicación y ora inferior, la cual llevara un slogan, para esto aplicamos el
siguiente código:

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

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF">
 <TextView
android:layout_width="match_parent"
android:layout_height="48dp"
android:text="PianoApp"
android:textAlignment="center"
android:textAppearance="@style/TextAppearance.AppCompat.Body2"
android:textSize="36sp"
android:textStyle="bold" />

<ImageView
android:id="@+id/ivSplash"
android:layout_width="match_parent"
android:layout_height="390dp"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:src="@drawable/piano" />

<TextView
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_alignParentStart="true"
android:layout_below="@+id/ivSplash"
android:text="Aprende Jugando"
android:textAlignment="center"
android:textAppearance="@style/TextAppearance.AppCompat.Body2"
android:textSize="36sp"
android:textStyle="bold" />

</RelativeLayout>

Podemos notar que el texto está definido entre <TextView/> y que la imagen está
definida entre <ImageView/>, así obtenemos la siguiente imagen

Figura 2. Imagen de Bienvenida

Piano
En el piano tenemos 3 botones, las notas blancas, las notas sostenidas (negras), y el botón para
pasar al otro layout, para esto tenemos que tener definidos 14 botones, esto lo podemos observar
en el siguiente código

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

<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/fondo"
android:paddingBottom="16dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="16dp"
tools:context=".MainActivity">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="441dp"
tools:ignore="MissingConstraints"
tools:layout_editor_absoluteX="28dp"
tools:layout_editor_absoluteY="0dp">

<Button
android:id="@+id/Button1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" />

<Button
android:id="@+id/Button2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" />

<Button
android:id="@+id/Button3"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" />

<Button
android:id="@+id/Button4"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" />

<Button
android:id="@+id/Button5"
android:layout_width="wrap_content"
android:layout_height="match_parent"
 android:layout_weight="1" />

<Button
android:id="@+id/Button6"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" />

<Button
android:id="@+id/Button7"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" />

<Button
android:id="@+id/Button8"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" />

</LinearLayout>

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="494dp"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="8dp">

<Button
android:id="@+id/Button9"
android:layout_width="30dp"
android:layout_height="270dp"
android:layout_alignParentStart="true"
android:layout_marginStart="31dp"
android:layout_weight="1"
android:background="#000000" />

<Button
android:id="@+id/Button10"
android:layout_width="30dp"
android:layout_height="270dp"
android:layout_alignParentStart="true"
android:layout_marginStart="77dp"
android:layout_weight="1"
android:background="#000000" />

<Button
android:id="@+id/Button11"
android:layout_width="30dp"
android:layout_height="270dp"
android:layout_centerHorizontal="true"
android:layout_weight="1"
android:background="#000000" />

<Button
android:id="@+id/Button12"
 android:layout_width="30dp"
android:layout_height="270dp"
android:layout_alignParentEnd="true"
android:layout_marginEnd="72dp"
android:layout_weight="1"
android:background="#000000" />

<Button
android:id="@+id/Button13"
android:layout_width="30dp"
android:layout_height="270dp"
android:layout_alignParentEnd="true"
android:layout_marginEnd="117dp"
android:layout_weight="1"
android:background="#000000" />

<Button
android:id="@+id/button14"
android:layout_width="49dp"
android:layout_height="46dp"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_marginBottom="13dp"
android:layout_weight="1"
android:background="@drawable/boton"
android:onClick="onClick"/>

</RelativeLayout>

<android.support.constraint.Group
android:id="@+id/group"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</android.support.constraint.ConstraintLayout>

Podemos observar que las teclas blancas los definimos entre <LinearLayout y </LinearLayout>,
estos corresponderían a los botones

Do Button1
Re Button2
Mi Button3
Fa Button4
Sol Button5
La Button6

Si Button7
DO Button8
Tabla 1. Notas y Botones
Luego tenemos las notas sostenidas y el botón para pasar al siguiente Layout, esos se definen entren
<RelativeLayout y </RelativeLayout>, estos correspondían a los siguientes botones

#Do Button9
#Re Button10
#Fa Button11
#Sol Button12
#La Button13
Cambio de Layout Button14
Tabla 2. Notas sostenidas, cambio de layout y Botones

Asi obtenemos la siguiente imagen

Figura 3. Imagen de Piano

Acordes piano

Para el acorde del piano, solo tendremos un layout nuevo con una imagen, la cual muestra los 8
acordes básicos. Esto se logra con el siguiente código

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

<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Tutorials">

<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
 android:background="@drawable/acordes"
android:text="Acordes"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="0dp" />

</android.support.constraint.ConstraintLayout>

Podemos observar que definimos la imagen en <TextView/> , así obtenemos la siguiente

imagen

Figura 4. Layout con acordes

Código java

Tenemos 2 archivos Java MainActivity y Tutorials, en el primero es donde está la definición

de todas las teclas del piano con la asociación de sus respectivos sonidos y en el Tutorial se
tiene las actividades de la ventana del Layout de acordes.
MainActivity
Para realizar el MainActivity utilizamos el siguiente código:

package com.curso.piano2;

import android.content.Intent;
import android.media.MediaPlayer;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

MediaPlayer
a,b,c,d,e,f,g,aa,a_sostenido,b_sostenido,d_sostenido,e_sostenido,f_sosten
ido;
Button
boton1,boton2,boton3,boton4,boton5,boton6,boton7,boton8,boton9,boton10,bo
ton11,boton12,boton13;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

a=MediaPlayer.create(this,R.raw.a);
b=MediaPlayer.create(this,R.raw.b);
c=MediaPlayer.create(this,R.raw.c);
d=MediaPlayer.create(this,R.raw.d);
e=MediaPlayer.create(this,R.raw.e);
f=MediaPlayer.create(this,R.raw.f);
g=MediaPlayer.create(this,R.raw.g);
aa=MediaPlayer.create(this,R.raw.aa);
a_sostenido=MediaPlayer.create(this,R.raw.a_sostenido);
b_sostenido=MediaPlayer.create(this,R.raw.b_sostenido);
d_sostenido=MediaPlayer.create(this,R.raw.d_sostenido);
e_sostenido=MediaPlayer.create(this,R.raw.e_sostenido);
f_sostenido=MediaPlayer.create(this,R.raw.f_sostenido);

boton1= (Button)findViewById(R.id.Button1);
boton2= (Button)findViewById(R.id.Button2);
boton3= (Button)findViewById(R.id.Button3);
boton4= (Button)findViewById(R.id.Button4);
boton5= (Button)findViewById(R.id.Button5);
boton6= (Button)findViewById(R.id.Button6);
boton7= (Button)findViewById(R.id.Button7);
boton8= (Button)findViewById(R.id.Button8);
boton9= (Button)findViewById(R.id.Button9);
boton10= (Button)findViewById(R.id.Button10);
boton11= (Button)findViewById(R.id.Button11);
boton12= (Button)findViewById(R.id.Button12);
boton13= (Button)findViewById(R.id.Button13);

boton1.setOnClickListener(new View.OnClickListener() {
@Override
 public void onClick(View v)
{ a.start();
}
});
boton2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v)
{ b.start();
}
});
boton3.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v)
{ c.start();
}
});
boton4.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v)
{ d.start();
}
});
boton5.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v)
{ e.start();
}
});
boton6.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v)
{ f.start();
}
});
boton7.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v)
{ g.start();
}
});
boton8.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v)
{ aa.start();
}
});
boton9.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v)
{ a_sostenido.start();
}
});
boton10.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v)
{ b_sostenido.start();
}
 });
boton11.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v)
{ d_sostenido.start();
}
});
boton12.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v)
{ e_sostenido.start();
}
});
boton13.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v)
{ f_sostenido.start();
}
});

public void onClick(View view){startActivity(new

Intent(MainActivity.this,Tutorials.class));}
}

Podemos ver que las notas fueron cargadas a una carpeta llamada raw, una consideración que hay
que tener, es que las notas no pueden empezar con numero ni mayúsculas, y también existen
ciertas palabras prohibidas, por lo que reorganizamos las notas de la siguiente manera:

Do a
Re b
Mi c
Fa d
Sol e
La f

Si g
DO aa
#Do a_sostenido
#RE b_sostenido
#FA d_sostenido
#Sol e_sostenido
#La f_sostenido
Tabla 3. Nomenclatura de notas
A continuación, se le asigna a cada variable su respectivo sonido, luego a cada variable se le asigna
su respectivo botón, seguidamente explicitamos la acción, es decir, que cada vez que se toque el
botón se emita el sonido que corresponda. Finalmente, en la última línea si utiliza un “onClick” el
cual permite pasar del layout del piano al layout donde se ubican los acordes.

Tutorials
Para realizar el Tutorials utilizamos el siguiente código:

package com.curso.piano2;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
public class Tutorials extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tutorials);
}

Con esto podemos definir la acción que permite que el botón pueda pasar del layout del piano al
layout de los acordes.

AndroidManifest
En el AndroidManifest, declaramos todas las actividades que nuestra aplicación realizará, es así
como obtenemos el siguiente código

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

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.curso.piano2">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".MainActivity" />
<activity android:name=".SplashActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER"
/>
</intent-filter>
</activity>
<activity android:name=".Tutorials"></activity>
</application>

</manifest>
Comentarios

Mediante el transcurso del proyecto, se pudo observar un par de situaciones que caben destacar:

 Las notas adjuntadas, no pueden tener cualquier nombre, de estos destacan que no pueden
empezar con números, ni mayúsculas, como también tienen prohibidas ciertas palabras,
como “DO”.
 Al cambiar de nombre un archivo .java o .xml , se debe realizar con la opción “Refactor” y
luego “Rename”, ya que si se hace directamente, no se cambia el nombre en todos los
archivos , asociados, lo que produce errores de funcionamiento.