Tutorial Membuat Aplikasi Android Dengan Eclipse



Memenuhi janji di post sebelumnya, ini adalah tutorial Membuat Aplikasi Android Dengan Eclipse dari posting disini

Untuk download file tutorialnya, bisa meluncur ke sini, pilih file yang judulnya "BabyFun Source Code and Resource.zip",  kalau sudah download silahkan di bongkar file zipnya, nanti ada 2 folder "src" dan "res" selanjutnya silahkan buat project android kosong menggunakan IDE kesukaan kalian, kalau gw membuat aplikasi android ini dengan eclipse, dan copy kan folder "src" dan "res" ke project android kalian.

Untuk target build androidnya gw pilih android versi 2.2 kalo gak salah itu froyo, dengan harapan semua android di atas froyo bisa jalanin aplikasi ini, seandainya masih ada di atas froyo gak bisa jalanin aplikasi ini,  wajar aja.. gw kan cuma berharap bisa berjalan di android yg lain, tapi kalo tuhan berkehendak lain, gw gak bisa ngapa ngapain kan.

Kita bahas isi folder yang ada di "res", kalo kita buka folder tersebut akan banyak folder lagi, tapi yang perlu kita perhatikan adalah "drawable-????" dan "raw", drawable gw isi gambar yg gw download dari www.openclipart.org, untuk folder raw gw isi file midi yang gw dapet entah dari mana (lupa).

Folder yang berisi source kode ada di folder "src", kalo kita buka menggunakan IDE, maka kita akan lihat package "com.puputs.babyfun" dan di dalam package itu, kita akan lihat 2 file "MainActivity.java" dan "ViewPlay.java" mari kita bahas file tersebut satu persatu.

 ViewPlay.java
 
1:  package com.puputs.babyfun;  
2:    
3:  import android.content.Context;  
4:  import android.graphics.Bitmap;  
5:  import android.graphics.BitmapFactory;  
6:  import android.graphics.Canvas;  
7:  import android.graphics.Paint;  
8:  import android.media.MediaPlayer;  
9:  import android.view.MotionEvent;  
10:  import android.view.View;  
11:  import android.view.View.OnTouchListener;  
12:    
13:  public class ViewPlay extends View implements Runnable, OnTouchListener {  
14:    
15:       private Bitmap[] bScene = null;  
16:    
17:       private Bitmap[] bAnimal = null;  
18:    
19:       private Bitmap bCredit = null;  
20:    
21:       private Thread thread = null;  
22:    
23:       private boolean isStop = true;  
24:    
25:       private boolean isTauch = false;  
26:    
27:       private boolean firstLoad = false;  
28:    
29:       private Paint paint = null;  
30:    
31:       private float thisWidth = 0;  
32:    
33:       private float thisHeight = 0;  
34:    
35:       private float defaultWidth = 240;  
36:    
37:       private float defaultDensity = 240;  
38:    
39:       private float defaultHeight = 400;  
40:    
41:       private MediaPlayer mediaPlayer = null;  
42:    
43:       private int[] midiFile = null;  
44:    
45:       private Context context = null;  
46:    
47:       private int playingMidi = 0;  
48:         
49:       private int playingScene = 0;  
50:         
51:       private int playingAnimal = 0;  
52:    
53:       private boolean showCreditCounter = true;  
54:    
55:       public ViewPlay(Context context, int width, int height) {  
56:            super(context);  
57:            // TODO Auto-generated constructor stub  
58:    
59:            this.context = context;  
60:            this.thisWidth = width;  
61:            this.thisHeight = height;  
62:    
63:            // Loading Bitmap Scene, with scale  
64:    
65:            bScene = new Bitmap[] {  
66:                      Bitmap.createScaledBitmap(BitmapFactory.decodeResource(  
67:                                getContext().getResources(), R.drawable.scene_spring),  
68:                                (int) thisWidth, (int) thisHeight, false),  
69:                      Bitmap.createScaledBitmap(BitmapFactory.decodeResource(  
70:                                getContext().getResources(), R.drawable.scene_camping),  
71:                                (int) thisWidth, (int) thisHeight, false),  
72:                      Bitmap.createScaledBitmap(BitmapFactory.decodeResource(  
73:                                getContext().getResources(), R.drawable.scene_rejon),  
74:                                (int) thisWidth, (int) thisHeight, false),  
75:                      Bitmap.createScaledBitmap(BitmapFactory.decodeResource(  
76:                                getContext().getResources(), R.drawable.scene_sunny),  
77:                                (int) thisWidth, (int) thisHeight, false) };  
78:    
79:            // Loading Bitmap Animal  
80:    
81:            bAnimal = new Bitmap[] {  
82:                      BitmapFactory.decodeResource(getContext().getResources(),  
83:                                R.drawable.animal_cow),  
84:                      BitmapFactory.decodeResource(getContext().getResources(),  
85:                                R.drawable.animal_frog),  
86:                      BitmapFactory.decodeResource(getContext().getResources(),  
87:                                R.drawable.animal_giraffe),  
88:                      BitmapFactory.decodeResource(getContext().getResources(),  
89:                                R.drawable.animal_gnu),  
90:                      BitmapFactory.decodeResource(getContext().getResources(),  
91:                                R.drawable.animal_hippo),  
92:                      BitmapFactory.decodeResource(getContext().getResources(),  
93:                                R.drawable.animal_ladybugs),  
94:                      BitmapFactory.decodeResource(getContext().getResources(),  
95:                                R.drawable.animal_ladybugs2),  
96:                      BitmapFactory.decodeResource(getContext().getResources(),  
97:                                R.drawable.animal_monkey),  
98:                      BitmapFactory.decodeResource(getContext().getResources(),  
99:                                R.drawable.animal_pengu),  
100:                      BitmapFactory.decodeResource(getContext().getResources(),  
101:                                R.drawable.animal_wasp),  
102:                      BitmapFactory.decodeResource(getContext().getResources(),  
103:                                R.drawable.animal_zebra) };  
104:    
105:            // Scale Bitmap Animal  
106:    
107:            for (int i = 0; i < bAnimal.length; i++) {  
108:                 bAnimal[i] = Bitmap  
109:                           .createScaledBitmap(  
110:                                     bAnimal[i],  
111:                                     (int) (bAnimal[i].getWidth()  
112:                                               * (thisWidth / defaultWidth) * (defaultDensity / bAnimal[i]  
113:                                               .getDensity())),  
114:                                     (int) (bAnimal[i].getHeight()  
115:                                               * (thisHeight / defaultHeight) * (defaultDensity / bAnimal[i]  
116:                                               .getDensity())), false);  
117:            }  
118:    
119:            // Load Credit Image  
120:    
121:            bCredit = BitmapFactory.decodeResource(getContext().getResources(),  
122:                      R.drawable.credit_openclipart);  
123:    
124:            // Scale Credit Image  
125:    
126:            bCredit = Bitmap  
127:                      .createScaledBitmap(  
128:                                bCredit,  
129:                                (int) (bCredit.getWidth() * (thisWidth / defaultWidth) * (defaultDensity / bCredit  
130:                                          .getDensity())),  
131:                                (int) (bCredit.getHeight()  
132:                                          * (thisHeight / defaultHeight) * (defaultDensity / bCredit  
133:                                          .getDensity())), false);  
134:    
135:            paint = new Paint();  
136:    
137:            midiFile = new int[] { R.raw.gembira, R.raw.kebunku, R.raw.kodok,  
138:                      R.raw.sepeda, R.raw.becak };  
139:    
140:            mediaPlayer = MediaPlayer.create(context, midiFile[playingMidi]);  
141:            mediaPlayer.setLooping(false);  
142:    
143:       }  
144:    
145:       public void start() {  
146:            isStop = false;  
147:            thread = new Thread(this);  
148:            thread.start();  
149:            this.setOnTouchListener(this);  
150:    
151:            mediaPlayer.start();  
152:            mediaPlayer.pause();  
153:            postInvalidate();  
154:       }  
155:    
156:       protected void onDraw(Canvas canvas) {  
157:    
158:            if (!firstLoad) {  
159:                 // firstLoad = false;  
160:                 // thisWidth = canvas.getWidth();  
161:                 // thisHeight = canvas.getHeight();  
162:            }  
163:    
164:            // canvas.scale(thisWidth / defaultWidth, thisHeight / defaultHeight);  
165:    
166:            canvas.drawBitmap(bScene[playingScene], 0, 0, paint);  
167:    
168:            canvas.drawBitmap(bAnimal[playingAnimal],  
169:                      (float) (Math.random() * (thisWidth / 3)),  
170:                      (float) (Math.random() * (thisHeight / 3)), paint);  
171:    
172:            if (showCreditCounter) {  
173:                 canvas.drawBitmap(bCredit, 0, 0, paint);  
174:    
175:            }  
176:    
177:       }  
178:    
179:       @Override  
180:       public boolean onTouch(View v, MotionEvent event) {  
181:            // TODO Auto-generated method stub  
182:            if (event.getAction() == MotionEvent.ACTION_DOWN) {  
183:                 isTauch = true;  
184:                 mediaPlayer.start();  
185:    
186:            }  
187:    
188:            if (event.getAction() == MotionEvent.ACTION_UP) {  
189:                 isTauch = false;  
190:                 mediaPlayer.pause();  
191:            }  
192:            return true;  
193:       }  
194:    
195:       public void stop() {  
196:            mediaPlayer.stop();  
197:            mediaPlayer.release();  
198:            isStop = true;  
199:       }  
200:    
201:       @Override  
202:       public void run() {  
203:            // TODO Auto-generated method stub  
204:            while (!isStop) {  
205:    
206:                 if (isTauch) {  
207:    
208:                      if (!mediaPlayer.isPlaying()) {  
209:    
210:                           playingMidi = playingMidi + 1;  
211:    
212:                           if (playingMidi == midiFile.length) {  
213:                                playingMidi = 0;  
214:                           }  
215:    
216:                           mediaPlayer.stop();  
217:                           mediaPlayer.release();  
218:    
219:                           mediaPlayer = MediaPlayer.create(context,  
220:                                     midiFile[playingMidi]);  
221:                           mediaPlayer.start();  
222:                      }  
223:    
224:                      try {  
225:                           Thread.sleep(2400);  
226:                      } catch (InterruptedException e) {  
227:                           // TODO Auto-generated catch block  
228:                           e.printStackTrace();  
229:                      }  
230:                      postInvalidate();  
231:    
232:                      playingScene = playingScene + 1;  
233:    
234:                      if (playingScene == bScene.length) {  
235:                           playingScene = 0;  
236:                      }  
237:    
238:                      playingAnimal = playingAnimal + 1;  
239:    
240:                      if (playingAnimal == bAnimal.length) {  
241:                           playingAnimal = 0;  
242:                      }  
243:    
244:                      showCreditCounter = false;  
245:                 }  
246:            }  
247:       }  
248:    
249:  }  
250:    

Line 1-12 : nama package dan import library yang kita gunakan, ini gak perlu penjelasan lebih lanjut ya, soalnya basic java gw juga kurang okay, masih mending kalian googling kalo ada pertanyaan di Line 1-12.

Line 13 : nama class ini adalah ViewPlay yang extend dari "View" nya android, agar class kita menjadi class yang boleh ditampilkan di layar android, lalu kita implement Runnable dan OnTouchListener, kalo dari nama classnya udah jelaskan, Runnable bikin aplikasi ini bisa menjalankan lebih dari satu proses, OnTouchListener ini jelas sekali buat menghandle sentuhan lembut dari user ke aplikasi kita.

Line 15-53 : atribute dari class ini.

Line 55-143 : konstruktor dari class ini, disitu udah gw kasih komentar, biar kita gampang tau blok apa aja yang ada di konstruktor ini.

Line 145-154 : method start yang nanti bisa di akses dari luar class, isinya yg paling penting adalah "thread.start()" untuk menjalankan proses baru dari aplikasi ini, dan yang di jalankan adalah method "run()" yang ada di line 202. Menjalankan object mediaPlayer dan langsung "postInvalidate()" untuk menjalankan "onDraw()" di line  156 satu kali.

Line 156-177 : disini method kita untuk menggambar apapun yang ada dilayar, pertama kita lihat ada "if(!firstLoad)" ini abaikan aja, kita perhatikan 3 penggunaan drawBitmap, itu untuk menempatkan background, hewan dan gambar credit dengan kondisi dan pilihan tertentu, yang kondisinya di atur di "run()".

Line 180-193 : disini blok kode yg menerima sentuhan tangan kita, isinya kalo di sentuh music nyala gambar ganti, sebaliknya kalo gak di sentuh, music diem gak ganti.

Line 195-198 : ini kebalikan dari method "start()".

Line 202-247 : loop yang melakukan refresh layar per 2400 ms, diawali dengan blok mediaPlayer untuk memainkan file music selanjutnya apabila sudah selesai music sebelumnya, lalu delay 2400 untuk memeri jeda dalam menampilkan "onDraw()", dan setelah itu "postInvalidate()" melakukan refresh dengan "onDraw()" yang baru, di akhiri dengan menambahkan counter background dan counter gambar hewan dengan kondisi kalau melebihi dari kuota gambar maka akan dimulai dari pertama lagi.

MainActivity.java
1:  package com.puputs.babyfun;  
2:    
3:  import android.os.Bundle;  
4:  import android.app.Activity;  
5:  import android.content.pm.ActivityInfo;  
6:  import android.view.Menu;  
7:  import android.view.Window;  
8:  import android.view.WindowManager;  
9:    
10:  public class MainActivity extends Activity {  
11:         
12:       private ViewPlay play=null;  
13:         
14:       @Override  
15:       protected void onCreate(Bundle savedInstanceState) {  
16:            super.onCreate(savedInstanceState);  
17:              
18:            getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,  
19:                      WindowManager.LayoutParams.FLAG_FULLSCREEN);  
20:              
21:            getWindow().setFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON,WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON);  
22:              
23:            requestWindowFeature(Window.FEATURE_NO_TITLE);  
24:            setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);  
25:              
26:            play = new ViewPlay(this,getWindowManager().getDefaultDisplay().getWidth(),getWindowManager().getDefaultDisplay().getHeight());  
27:            play.start();  
28:            this.setContentView(play);       
29:    
30:       }  
31:    
32:       @Override  
33:       public boolean onCreateOptionsMenu(Menu menu) {  
34:            // Inflate the menu; this adds items to the action bar if it is present.  
35:            //getMenuInflater().inflate(R.menu.main, menu);  
36:            return true;  
37:       }  
38:    
39:       protected void onDestroy(){  
40:            play.stop();  
41:            super.onDestroy();  
42:    
43:       }  
44:  }  
45:    

Line 1-End : ini adalah class yang pertama kali dijalankan waktu aplikasi ini di jalankan, untuk detail mendalamnya bisa baca2 dokumen yang di sediakan google perihal android development,  yang gw isi di "onCreate()" seting windowsnya masalah orientasi, fullscreen, tittle dan lain lain, dan dilanjutkan dengan pembuatan object dari class "ViewPlay" yang setelah itu di start, dan dimasukan ke "setContentView" untuk ditampilkan dilayar, diakhiri dengan "onDestroy()" kalo dimatikan aplikasinya maka akan memanggil method "stop()".

Selesai deh :)

nb: seperti biasa, tutorial ini harap digunakan sewajarnya dan as-is, saya tidak bertanggung jawab apabila gadget anda rusak, meledak atau kecurian dalam tahap development ini, ataupun dalam tahap implementasi kode yg ada disini seluruhnya atau sebagiannya, jadi gunakan dengan bijak ya, sekian Tutorial Membuat Aplikasi Android Dengan Eclipse

Share this:

CONVERSATION

2 comments:

  1. Mantap tutorialnya put..
    tapi kok setelah gw install yg muncul malah gambar dewasa ya put.. :P

    BalasHapus
    Balasan
    1. :D wakkakka yg dewasa itu gambar jerapahnya gus,

      Hapus