Rabu, 24 April 2019

MEMBUAT APLIKASI PEMUTAR MUSIK SEDERHANA MENGGUNAKAN ECLIPSE

Pada kesempatan kali ini saya akan membuat aplikasi Android menggunakan Eclipse. Aplikasi yang saya buat adalah aplikasi pemutar musik sederhana, dan pada projec kali ini saya akan membuat empat activity yang nantinya akan di hubungkan. Untuk lebih jelasnya sebelum membuat aplikasinya perhatikan deskripsi di bawah:

Deskripsi:

Nama Projec: LexyLumiling_161011400103

Nama Activity: 
  1. Login_Activity
  2. Menu_Activity
  3. LaguIndonesia_Activity
  4. LaguBarat_Activity
Elemen-element yang digunakan:
  1. TextView
  2. Button
  3. Personal Name
  4. Password
  5. ListView
  6. ImageButton
File Pendukung:
  1. Siapkan satu lagu Indonesia dan satu lagu Barat.
  2. Siapkan beberapa gambar/icon yaitu Play,Pause,dan Stop.
Setelah memahami deskripsi di atas dan telah mempersiapkan file yang di perlukan kita akan membuat aplikasinya, berikut ini adalah langkanya:

1. Saya membuat sebuah projec dengan nama  LexyLumiling_161011400103 dan buatlah activity yang pertama dengan nama "Login_Activity".


2. Pada folder res buat lagi sebuah folder dengan nama "raw" dan masukkan file lagu kedalam folder raw yang telah kita buat. Untuk lebih jelasnya perhatikan gambar dibawah ini:


3. Pada awal membuat projec kita telah membuat sebuah activity dengan nama Activity_Login Selanjudnya kita akan membuat 3 buah activity lagi yaitu Menu_Activity, LaguIndonesia_Activity, dan LaguBarat_Activity. Untuk lebih jelasnya perhatikan gambar di bawah ini:



4.Selanjudnya buka folder layout > activity_login.xml lalu buatlah tampilan Graphical Layout dan buat source code activity_login.xml seperti langkah di bawah ini :

 Graphical Layout:
  1. Pada tampilan ini menggunakan  Form Widgeds yaitu 3 TextView dan 2 Button, serta menggunakan Text Fields yaitu Personal Name dan Password.
  2. TextField 1 menggunakan Personal Name dengan nama id txtusername.
  3. TextField 2 Menggunakan Password dengan nama id password.
  4. Mengunakan 2 Button Login dan Close .




activity_login.xml:

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Login_Activity" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="50dp"
        android:text="@string/silahkanlogin" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView2"
        android:layout_below="@+id/txtusername"
        android:layout_marginTop="38dp"
        android:text="@string/Password" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/textView1"
        android:layout_marginLeft="23dp"
        android:layout_marginTop="76dp"
        android:text="@string/username" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/txtpassword"
        android:layout_marginTop="38dp"
        android:layout_toRightOf="@+id/textView3"
        android:onClick="Login"
        android:text="@string/Login" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/button1"
        android:layout_alignBottom="@+id/button1"
        android:layout_marginLeft="21dp"
        android:layout_toRightOf="@+id/button1"
        android:text="@string/Close" />

    <EditText
        android:id="@+id/txtpassword"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/textView3"
        android:layout_alignParentRight="true"
        android:ems="10"
        android:inputType="textPassword" />

    <EditText
        android:id="@+id/txtusername"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/textView2"
        android:layout_alignBottom="@+id/textView2"
        android:layout_alignLeft="@+id/txtpassword"
        android:ems="10"
        android:inputType="textPersonName" >

        <requestFocus />
    </EditText>


</RelativeLayout>


5. Buka folder src > Login_Activity.java dan isikan sourcecode di bawah:

 Login_Activity.java:

 package com.lexylumiling_161011400103;


import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;

public class Login_Activity extends Activity {
       EditText editUserName;
       EditText editPassword;
       Button buttonLogin;
       Button buttonExit;



    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_login_);
     
        editUserName = (EditText) findViewById(R.id.txtusername);
        editPassword = (EditText) findViewById(R.id.txtpassword);
    }
     
        public void Login (View view) {
      // TODO Auto-generated method stub
        String user = editUserName.getText().toString();
             String pwd = editPassword.getText().toString();
             if (user.equals("LexyLumiling") && pwd.equals("12345")) {
                    Intent i = new Intent(this, Menu_Activity.class);
                    startActivityForResult (i, 0);
             }
        }

}      

6. Selanjudnya buka folder layout > activity_menu.xml lalu buatlah tampilan Graphical Layout dan buat source code activity_menu.xml seperti langkah di bawah ini :

Graphical Layout:

  1. Menggunaka Composite yaitu ListView


activity_menu.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Menu_Activity" >

    <ListView
        android:id="@+id/listView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true" >
    </ListView>

</RelativeLayout>


7. Buka folder src > Menu_Activity.java dan isikan sourcecode di bawah:

Menu_Activity.java:

package com.lexylumiling_161011400103;

import android.os.Bundle;
import android.app.Activity;
import android.content.Intent;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;

public class Menu_Activity extends Activity {
ListView LV;
String [] Menu={"Lagu Indonesia","Lagu Barat"};

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_menu_);
LV=(ListView) findViewById(R.id.listView1);
        ArrayAdapter adapter=new ArrayAdapter (this, android.R.layout.simple_list_item_single_choice,Menu);
        LV.setAdapter(adapter);
        
        LV.setOnItemClickListener(new AdapterView.OnItemClickListener() {

@Override
public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
long arg3) {
// TODO Auto-generated method stub
String itemText=(String) LV.getItemAtPosition(arg2);
Toast.makeText(getBaseContext(),"anda mengklik" +itemText, Toast.LENGTH_LONG).show();
       
        if(itemText.equals("Lagu Indonesia")){
        Intent IndonesiaIntent=new Intent(arg0.getContext(),LaguIndonesia_Activity.class);
        startActivityForResult(IndonesiaIntent,0);
        }
        if(itemText.equals("Lagu Barat")){
        Intent BaratIntent=new Intent(arg1.getContext(),LaguBarat_Activity.class);
        startActivityForResult(BaratIntent,0);
       
        }
       }
});
}}

8. Selanjudnya buka folder layout > activity_lagu_.indonesia.xml lalu buatlah tampilan Graphical Layout dan buat source code activity_lagu_indonesia.xml seperti langkah di bawah ini :

 Graphical Layout:
  1. Tampilan ini menggunakan  Form Widgeds yaitu 1 TextView dan Images & Media yaitu 3 ImageButton.
  2. Gunakan 3 buah gambar yang sudah di persiapkan tadi sebagai background image button. 



activity_lagu_.indonesia.xml:

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".LaguIndonesia_Activity" >

    <ImageButton
        android:id="@+id/btnPlay"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/btnPause"
        android:layout_toLeftOf="@+id/btnPause"
        android:src="@drawable/play" />

    <ImageButton
        android:id="@+id/btnPause"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/btnStop"
        android:layout_toLeftOf="@+id/btnStop"
        android:src="@drawable/pause" />

    <ImageButton
        android:id="@+id/btnStop"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_marginBottom="122dp"
        android:layout_marginRight="48dp"
        android:src="@drawable/stop" />

    <TextView
        android:id="@+id/txtindonesia"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginTop="90dp"
        android:gravity="center_horizontal"
        android:text="@string/indo"
        android:textAppearance="?android:attr/textAppearanceLarge" />


</RelativeLayout>

9. Buka folder src > LaguIndonesia_Activity.java dan isikan sourcecode di bawah:

LaguIndonesia_Activity.java:

 package com.lexylumiling_161011400103;

import java.io.IOException;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.TextView;
import android.media.MediaPlayer;
import android.media.MediaPlayer.OnCompletionListener;

public class LaguIndonesia_Activity extends Activity {
   /** Called when the activity is first created. */

   private ImageButton btnPlay;
   private ImageButton btnPause;
   private ImageButton btnStop;
   private MediaPlayer mp;

   @Override
   public void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_lagu_indonesia_);

       mp = new MediaPlayer();
     
       btnPlay = (ImageButton) findViewById(R.id.btnPlay);
       btnPause = (ImageButton) findViewById(R.id.btnPause);
       btnStop = (ImageButton) findViewById(R.id.btnStop);

       stateAwal();

       btnPlay.setOnClickListener(new View.OnClickListener() {
           @Override
           public void onClick(View v) {
               play();
               btnPlay.setEnabled(false);
               btnPause.setEnabled(true);
               btnStop.setEnabled(true);
           }
       });

       btnPause.setOnClickListener(new View.OnClickListener() {
           @Override
           public void onClick(View v) {
               pause();
           }
       });

       btnStop.setOnClickListener(new View.OnClickListener() {
           @Override
           public void onClick(View v) {
               stop();
           }
       });
   }

   /** State Awal / Pertama Dijalankan */
   public void stateAwal(){
       btnPlay.setEnabled(true);
       btnPause.setEnabled(false);
       btnStop.setEnabled(false);
   }

   /** Dijalankan Oleh Tombol Play */
   private void play() {
       /** Memanggil File MP3 "indonesia.mp3" */
       mp = MediaPlayer.create(this,R.raw.indonesia);

       try {
           mp.prepare();
       } catch (IllegalStateException e) {
           e.printStackTrace();
       } catch (IOException e) {
           e.printStackTrace();
       }
       /** Mendajalankan Audio */
       mp.start();

       /** Penanganan Ketika Suara Berakhir */
       mp.setOnCompletionListener(new OnCompletionListener() {
           @Override
           public void onCompletion(MediaPlayer mp) {
               stateAwal();
           }
       });
   }

   /** Dijalankan Oleh Tombol Pause */
   public void pause(){
       if(mp.isPlaying()){
           if(mp!=null){
               mp.pause();
               btnPause.setImageResource(R.drawable.play);
           }
       } else {
           if(mp!=null){
               mp.start();
               btnPause.setImageResource(R.drawable.pause);
           }
       }
   }

   /** Dijalankan Oleh Tombol Stop */
   public void stop(){
       mp.stop();

       try{
           mp.prepare();
           mp.seekTo(0);
       }catch (Throwable t) {
           t.printStackTrace();
       }

       stateAwal();
   }

}

10. Selanjudnya buka folder layout > activity_lagu_.barat.xml lalu buatlah tampilan Graphical Layout dan buat source code activity_lagu_barat.xml seperti langkah di bawah ini :

 Graphical Layout:
  1. Tampilan ini menggunakan Form Widgeds yaitu TextView dan Images&Media yaitu 3 ImageButton.
  2. Gunakan 3 buah gambar yang sudah di persiapkan tadi sebagai background image button. 



activity_lagu_barat.xml:

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".LaguBarat_Activity" >

    <ImageButton
        android:id="@+id/btnPause2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/btnPlay2"
        android:layout_centerHorizontal="true"
        android:src="@drawable/pause" />

    <ImageButton
        android:id="@+id/btnPlay2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="141dp"
        android:layout_toLeftOf="@+id/btnPause2"
        android:src="@drawable/play" />

    <ImageButton
        android:id="@+id/btnStop2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/btnPause2"
        android:layout_toRightOf="@+id/btnPause2"
        android:src="@drawable/stop" />

    <TextView
        android:id="@+id/txtbarat"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_marginTop="79dp"
        android:gravity="center_horizontal"
        android:text="@string/barat"
        android:textAppearance="?android:attr/textAppearanceLarge" />


</RelativeLayout>

 11. Buka folder src > LaguBarat_Activity.java dan isikan sourcecode di bawah:

 LaguBarat_Activity.java:

package com.lexylumiling_161011400103;

import java.io.IOException;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.TextView;
import android.media.MediaPlayer;
import android.media.MediaPlayer.OnCompletionListener;

public class LaguBarat_Activity extends Activity {
   /** Called when the activity is first created. */

   private ImageButton btnPlay2;
   private ImageButton btnPause2;
   private ImageButton btnStop2;
   private MediaPlayer mp;

   @Override
   public void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_lagu_barat_);

       mp = new MediaPlayer();
     
       btnPlay2 = (ImageButton) findViewById(R.id.btnPlay2);
       btnPause2 = (ImageButton) findViewById(R.id.btnPause2);
       btnStop2 = (ImageButton) findViewById(R.id.btnStop2);

       stateAwal();

       btnPlay2.setOnClickListener(new View.OnClickListener() {
           @Override
           public void onClick(View v) {
               play();
               btnPlay2.setEnabled(false);
               btnPause2.setEnabled(true);
               btnStop2.setEnabled(true);
           }
       });

       btnPause2.setOnClickListener(new View.OnClickListener() {
           @Override
           public void onClick(View v) {
               pause();
           }
       });

       btnStop2.setOnClickListener(new View.OnClickListener() {
           @Override
           public void onClick(View v) {
               stop();
           }
       });
   }

   /** State Awal / Pertama Dijalankan */
   public void stateAwal(){
       btnPlay2.setEnabled(true);
       btnPause2.setEnabled(false);
       btnStop2.setEnabled(false);
   }

   /** Dijalankan Oleh Tombol Play */
   private void play() {
       /** Memanggil File MP3 "barat.mp3" */
       mp = MediaPlayer.create(this,R.raw.barat);

       try {
           mp.prepare();
       } catch (IllegalStateException e) {
           e.printStackTrace();
       } catch (IOException e) {
           e.printStackTrace();
       }
       /** Mendajalankan Audio */
       mp.start();

       /** Penanganan Ketika Suara Berakhir */
       mp.setOnCompletionListener(new OnCompletionListener() {
           @Override
           public void onCompletion(MediaPlayer mp) {
               stateAwal();
           }
       });
   }

   /** Dijalankan Oleh Tombol Pause */
   public void pause(){
       if(mp.isPlaying()){
           if(mp!=null){
               mp.pause();
               btnPause2.setImageResource(R.drawable.play);
           }
       } else {
           if(mp!=null){
               mp.start();
               btnPause2.setImageResource(R.drawable.pause);
           }
       }
   }

   /** Dijalankan Oleh Tombol Stop */
   public void stop(){
       mp.stop();

       try{
           mp.prepare();
           mp.seekTo(0);
       }catch (Throwable t) {
           t.printStackTrace();
       }

       stateAwal();
   }
}

12. Setelah semua langkah di atas sudah dilakukan dengan benar dan tidak terdapat kesalahan pada sourse codenya maka langkah selanjudnya adalah menjalankan aplikasinya dengan cara:
  1. Buat emulator bawaan pada Eclipse "Android Virtual Device Manager" yang fungsinya untuk menjalankan aplikasi seperti anda menjalankan sebuah aplikasi pada sebuah handphone.
  2. Jika ingin menjalankan aplikasi langsung menggunakan hanphone caranya adalah buka folder res > LexyLumiling_161011400103.apk lalu copykan file tersebut ke handphone android anda dan instal kemudian jalankan.
  3. Saya menjalankan aplikasi melalui emulator bawaan Eclipse dengan klik kanan project LexyLumiling_161011400103 pilih Run As > Android Application.
13. Hasil Aplikasi yang sudah berhasil saya jalankan:










Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)