Aplikasi Guitar Tuner berbasis Android Bagian 2

Kembali ke activity_main.xml, sekarang tambahkan widget seperti FrameLayout, View, Button, dan TextView dengan susunan hierarki. Setiap widget pada activity_main.xml memiliki properties berbeda-beda. Informasi properties setiap widget dapat dibaca dari source code XML-nya.

 

<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:layout_gravity="center_horizontal"

    android:orientation="vertical"

    android:background="@drawable/paternbgwood"

    android:gravity="center_horizontal"

    tools:context="com.guitar.tuner.app.MainActivity" >

    <FrameLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_gravity="center_horizontal">

     

    <View

        android:id="@+id/view1"

        android:layout_width="250dp"

        android:layout_height="250dp"

        android:layout_gravity="bottom|center_horizontal"

        android:layout_marginBottom="24dp"

        android:background="@drawable/circle_black"/>

   

        <LinearLayout

            android:layout_width="match_parent"

            android:layout_height="match_parent"

            android:layout_gravity="center_horizontal"

            android:gravity="bottom|center_horizontal" >

            <FrameLayout

                android:layout_width="wrap_content"

                android:layout_height="match_parent" >

                <Button

                    android:id="@+id/Ebtn"

                    android:layout_width="9dp"

                    android:layout_height="match_parent"

                    android:layout_marginLeft="16dp"

                    android:layout_marginRight="16dp"

                    android:background="@drawable/buttonstring" />

                       

                <TextView

                    android:id="@+id/TextView05"

                    android:layout_width="32dp"

                    android:layout_height="32dp"

                    android:layout_gravity="center_horizontal"

                    android:layout_marginTop="32dp"

                    android:background="@drawable/circle_white"

                    android:gravity="center_horizontal"

                    android:padding="4dp"

                    android:text="E"

                    android:textAppearance="?android:attr/textAppearanceMedium" />

            </FrameLayout>

            <FrameLayout

                android:layout_width="wrap_content"

                android:layout_height="match_parent" >

                <Button

                    android:id="@+id/Abtn"

                    android:layout_width="8dp"

                    android:layout_height="match_parent"

                    android:layout_marginLeft="16dp"

                    android:layout_marginRight="16dp"

                    android:background="@drawable/buttonstring" />

                <TextView

                    android:id="@+id/TextView04"

                    android:layout_width="32dp"

                    android:layout_height="32dp"

                    android:layout_gravity="center_horizontal"

                    android:layout_marginTop="32dp"

                    android:background="@drawable/circle_white"

                    android:gravity="center_horizontal"

                    android:padding="4dp"

                    android:text="A"

                    android:textAppearance="?android:attr/textAppearanceMedium" />

            </FrameLayout>

            <FrameLayout

                android:layout_width="wrap_content"

                android:layout_height="match_parent" >

                <Button

                    android:id="@+id/Dbtn"

                    android:layout_width="7dp"

                    android:layout_height="match_parent"

                    android:layout_marginLeft="16dp"

                    android:layout_marginRight="16dp"

                    android:background="@drawable/buttonstring" />

                <TextView

                    android:id="@+id/TextView03"

                    android:layout_width="32dp"

                    android:layout_height="32dp"

                    android:layout_gravity="center_horizontal"

                    android:layout_marginTop="32dp"

                    android:background="@drawable/circle_white"

                    android:gravity="center_horizontal"

                    android:padding="4dp"

                    android:text="D"

                    android:textAppearance="?android:attr/textAppearanceMedium" />

            </FrameLayout>

            <FrameLayout

                android:layout_width="wrap_content"

                android:layout_height="match_parent" >

                <Button

                    android:id="@+id/Gbtn"

                    android:layout_width="6dp"

                    android:layout_height="match_parent"

                    android:layout_marginLeft="16dp"

                    android:layout_marginRight="16dp"

                    android:background="@drawable/buttonstring" />

                <TextView

                    android:id="@+id/TextView02"

                    android:layout_width="32dp"

                    android:layout_height="32dp"

                    android:layout_gravity="center_horizontal"

                    android:layout_marginTop="32dp"

                    android:background="@drawable/circle_white"

                    android:gravity="center_horizontal"

                    android:padding="4dp"

                    android:text="G"

                    android:textAppearance="?android:attr/textAppearanceMedium" />

            </FrameLayout>

            <FrameLayout

                android:layout_width="wrap_content"

                android:layout_height="match_parent" >

                <Button

                    android:id="@+id/Bbtn"

                    android:layout_width="5dp"

                    android:layout_height="match_parent"

                    android:layout_marginLeft="16dp"

                    android:layout_marginRight="16dp"

                    android:background="@drawable/buttonstring" />

                <TextView

                    android:id="@+id/TextView01"

                    android:layout_width="32dp"

                    android:layout_height="32dp"

                    android:layout_gravity="center_horizontal"

                    android:layout_marginTop="32dp"

                    android:background="@drawable/circle_white"

                    android:gravity="center_horizontal"

                    android:padding="4dp"

                    android:text="B"

            android:textAppearance="?android:attr/textAppearanceMedium" />

            </FrameLayout>

            <FrameLayout

                android:layout_width="wrap_content"

                android:layout_height="match_parent" >

                <Button

                    android:id="@+id/E2btn"

                    android:layout_width="4dp"

                    android:layout_height="match_parent"

                    android:layout_marginLeft="16dp"

                    android:layout_marginRight="16dp"

                    android:background="@drawable/buttonstring" />

                <TextView

                    android:id="@+id/TextView1"

                    android:layout_width="32dp"

                    android:layout_height="32dp"

                    android:layout_gravity="center_horizontal"

                    android:layout_marginTop="32dp"

                    android:background="@drawable/circle_white"

                    android:gravity="center_horizontal"

                    android:padding="4dp"

                    android:text="E"

             android:textAppearance="?android:attr/textAppearanceMedium" />

            </FrameLayout>

        </LinearLayout>

    </FrameLayout>

</LinearLayout>

  

Hasil akhir bagian ini adalah tampilan aplikasi GuitarTunerApp seperti gambar berikut:

 

Buatlah folder baru dengan nama raw pada folder res. Folder raw digunakan untuk menyimpan file audio. Copy lalu paste enam file suara senar gitar (E, A, D, G, B, E) berformat mp3 kedalam folder ini.

 

Sekarang saatnya membuat kode untuk MainActivity.java

package com.guitar.tuner.app:

import android.support.v7.app.ActionBarActivity;

import android.media.MediaPlayer;

import android.os.Bundle;

import android.app.Activity;

import android.view.Menu;

import android.view.View;

import android.view.View.OnClickListener;

import android.widget.Button;

import android.widget.Toast;

public class MainActivity extends Activity implements OnClickListener {

  

   private MediaPlayer player;

   private Button EButton;

   private Button BButton;

   private Button GButton;

   private Button DButton;

   private Button AButton;

   private Button E2Button;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

       

        EButton = (Button) findViewById (R.id.Ebtn);

        AButton = (Button) findViewById (R.id.Abtn);

        DButton = (Button) findViewById (R.id.Dbtn);

        GButton = (Button) findViewById (R.id.Gbtn);

        BButton = (Button) findViewById (R.id.Bbtn);

        E2Button = (Button) findViewById (R.id.E2btn);

       

        EButton.setOnClickListener(this);

        AButton.setOnClickListener(this);

        DButton.setOnClickListener(this);

        GButton.setOnClickListener(this);

        BButton.setOnClickListener(this);

        E2Button.setOnClickListener(this);

    }

    @Override

    public boolean onCreateOptionsMenu(Menu menu) {

        getMenuInflater().inflate(R.menu.main, menu);

        return true;

    }

   

    @Override

    public void onClick(View arg0) {

         switch (arg0.getId()) {

         case R.id.Ebtn:

               playSound(1);

               break;

         case R.id.Abtn:

               playSound(2);

               break;

         case R.id.Dbtn:

               playSound(3);

               break;

         case R.id.Gbtn:

               playSound(4);

               break;

         case R.id.Bbtn:

               playSound(5);

               break;

         case R.id.E2btn:

               playSound(6);

               break;     

         }

    }

   

    private void playSound(int i) {

         try {

               if (player.isPlaying())  {

                     player.stop();

                     player.release();

               }

         } catch (Exception e) {

              

         }

         switch (i) {

         case 1:

               player = MediaPlayer.create(this,R.raw.e_tune);

               break;

         case 2:

               player = MediaPlayer.create(this,R.raw.a_tune);

               break;

         case 3:

               player = MediaPlayer.create(this,R.raw.d_tune);

               break;

         case 4:

               player = MediaPlayer.create(this,R.raw.g_tune);

               break;

         case 5:

               player = MediaPlayer.create(this,R.raw.b_tune);

               break;

         case 6:

               player = MediaPlayer.create(this,R.raw.e2_tune);

               break;     

         }

         player.start();

    }

   

    public void onPause() {

         try {

               super.onPause();

               player.pause();

         } catch (Exception e) {

              

         }

    }

   

    public void onStop() {

         super.onStop();

         player.stop();

    }

}