Inoichi No Tsukaimichi

"Laugh and the world laughs with you. Weep, and you weep alone"

Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris ...

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in ...

Here's an mp3 file that was uploaded as an attachment: Juan Manuel Fangio by Yue And here's a link to an external mp3 file: Acclimate by General Fuzz Both are CC licensed. Lorem ...

Some block quote tests: Here's a one line quote. This part isn't quoted. Here's a much longer quote: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In dapibus. In pretium pede. Donec ...

Ke Menu Utama >>

Archive for November 2014

MEMBUAT APLIKASI GUITAR TUNER SEDERHANA BERBASIS ANDROID

Pendahuluan
            Tuner gitar adalah alat yang digunakan oleh musisi untuk mendeteksi dan menampilkan pitch saat alat musik dimainkan. Seperti halnya gitar yang memiliki enam senar aplikasi ini nantinya juga akan terdiri atas enam button, masing-masing mewakili satu senar bernada E, A, D, G, B, E. setiap button bentuknya akan dimodifikasi menjadi persegi panjang sehingga diharapkan nantinya terlihat seperti senar gitar yang sesungguhnya.

Implementasi
            Dalam pengembangan aplikasi ini minimal kita membutuhkan dua tools, yang pertama code editor+SDK dan yang kedua adalah virtual device. Apabila kita menggunakan Eclipse sebagai code editor kita tidak perlu menginstall virtual device tambahan (seperti Bluestack, Andy, Youwave, dll)  karena SDK eclipse sudah menyediakan virtual device di dalamnya. Namun apabila komputer anda tidak memiliki RAM yang cukup besar, sebaiknya menggunakan virtual device tambahan.

            Berikut ini adalah tools yang akan penulis gunakan dalam implementasi ini :

    •  Eclipse + SDK
    •  Bluestack

           Kemudian untuk resource membutuhkan

    •  Efek suara gitar bernada E, A, D, G, B, E
    •  Gambar texture kayu yang merupakan texture badan gitar sebagai background dari aplikasi ini
    •  Gambar pick gitar untuk icon aplikasi

Setelah melakukan instalasi perangkat lunak di atas, kemudian ikuti langkah – langkah 
berikut ini.


  1. Langkah pertama adalah melakukan pengaturan sambungan dua tools yang akan kita gunakan   yakni, eclipse dan bluestack.
  2. Jalankan kedua aplikasi di atas kemudian koneksikan keduanya. Untuk melakukan koneksi, buka command prompt dan masuk ke folder “platform-tools” pada eclipse.
  3. Kemudian masukkan perintah : adb connect localhost , apabila berhasil maka akan muncul pesan seperti ini.
  4. Kemudian pada eclipse buatlah project baru, File > New > Android Application Project, lalu klik next
  5. Kemudian set icon aplikasi dengan gambar pick gitar yang sudah disiapkan.
  6. Lalu pada package explorer buka tab res > layout > activity_main.xml, ubahlah RelativeLayout menjadi LinearLayout dengan cara pada tab outline klik kanan > change layout > linearlayout(vertical) > OK 

  7.  Masukkan gambar kayu ke dalam project dengan cara buka tab res kemudian drag and drop gambar ke dalam menu drawable > copy file > ok.
  8.  Buka tab res > drawable kemudian buat file xml baru dengan nama patternbgwood.xml untuk membuat background kayu. file tersebut dibuat dengan melakukan klik kanan drawable > new > android xml file kemudian isi kode di bawah
    patternbgwood.xml
    xml version="1.0" encoding="utf-8"?>
    <bitmap xmlns:android="http://schemas.android.com/apk/res/android"
        android:src="@drawable/wood"
        android:tileMode="repeat" >

    </bitmap>
  9. Kemudian buat kelas xml lain pada drawable dengan nama circle_black.xml untuk membuat dasar hole gitar berwarna hitam
    circle_black.xml
    xml version="1.0" encoding="utf-8"?>
    <shape
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="oval">
       <solid
           android:color="#000000"/>
       <size
           android:width="12dp"
           android:height="12dp"/>
    </shape>
  10.  Buat satu lagi file xml dengan nama buttonstring.xml untuk membuat layout senar yang nanti dijadikan tombol senar
    buttonstring.xml
    xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_pressed="true">
            <shape>
                <solid android:color="#262523" />
            </shape>
        </item>
        <item>
            <shape>
                <gradient android:angle="180"
                    android:endColor="#262523"
                    android:startColor="#8c8c8c" />
            </shape>
        </item>
    </selector>
  11.  Buka editor activity_main.xml di tab res > layout lalu ketikkan source code berikut.
  12. activity_main.xml
    <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:background="@drawable/paternbgwood"
        android:gravity="center_horizontal"
        android:orientation="vertical"
        tools:context=".MainActivity" >

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            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="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"
                    android:layout_gravity="center_horizontal" >

                    <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>
    </LinearLayout>
    Setelah source code diatas dibuat nantinya pada menu graphical layout akan menghasilkan tampilan seperti ini.     

  13. Masukkan resource efek suara yang telah disiapkan dengan melakukan drag & drop di res > raw(apabila folder raw belum tersedia, silahkan buat folder baru)
  14. Sekarang tinggal membuat method yang dapat menjalankan button yang telah dibuat MainActivity.java pada menu src > package > MainActivity.java
    MainActivity.java
    package com.guitar.tuner.app;

    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) {
                  // 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.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) {
                  // TODO Auto-generated method stub
                  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();
           }
    }
  15. Jalankan aplikasi dengan cara klik kanan project > Run As > Android Application. Apabila langkah yang dilakukan sudah benar maka tampilan akan seperti gambar di bawah.
     

Continue