Penulis

Penulis adalah seorang programmer freelance yang aktif dalam bidang mobile application khususnya android. Setelah menerbitkan buku 24 JAM!! Pintar Pemrograman Android , saat ini penulis yang bernama lengkap Arif Akbarul Huda sedang menyelesaikan studi di Pascasarjana Magister Teknik Informatik UGM. Dalam kesehariaanya, penulis yang kerap disapa omayib ini berkantor di Imagine IT Education Center (IITEC) Yogyakarta sebagai Manajer. IITEC membuka kelas-kelas pemrograman seperti Android Academy, Web Developer Class, Graphic Design Class, Multimedia Class dan lainnya yang dapat Anda lihat di www.imagineitcenter.com . Dalam perjalanan karirnya, omayib kerap kali diundang dalam pelatihan, seminar-seminar atau workshop seputar I.T. Selain itu, omayib adalah pemilik website www.omayib.com dan www.indocode.net sekaligus sebagai CEO nya. Melalui media ini, omayib sering berbagi ilmu seputar pemrograman Android. Ebook ini bersifat serial, akan terbit seri LIVE CODING ANDROID #2, #3 dan seterusnya. saya persembahkan untuk teman-teman yang ingin mendalami pemrograman android. Silakan membagikan ebook ini sebanyak-banyaknya, bisa dijadikan sebagai panduan praktikum atau sekedar belajar dirumah. Dilarang mengubah isi dan tidak untuk di komersilkan. Bagi anda yang mencari referensi buku, berikut ini buku yang sangat saya rekomendasikan sebagai panduan belajar.

Info detil buku www.omayib.com/buku

Konsultias pemrograman android via email [email protected]

www.indocode.net

Perkenalkan Kami
Indocode.net merupakan asoftware aplikasi. Programmer freelance adalah seorang programer professional yang siap membantu Anda mengerjakan sebuah project pemrograman seperti pembuatan website, aplikasi android, aplikasi dekstop atau lainnya. Komunikasi antara programmer dan klien dapat dilakukan melalui chating/email/sms/BBM. Seorang programmer berhak menerima upah dari klien sekligus berkewajiban menyelesaikan project yang telah disepakati. sebuah media penghubung antara programmer dengan

klien. Klien disini adalah seseorang yang memerlukan jasa programmer untuk mebuat sebuah

Konsultias pemrograman android via email [email protected]

Indocode.net mengklasifikasikan project menjadi 3 yaitu - Personal - Instansi - Product Saat ini, indocode menyediakan jasa membangun aplikasi sebagai berikut - Android Apps - Flash Apps - Sistem Infirmasi Web Based ( PHP & MySQL) - Sistem Aplikasi pengelolaan UMKM

Hubungi [email protected] atau klik www.indocode.net

Bekerja sama dengan indocode.net caranya sangat mudah. Cukup melewati 5 langkah, maka aplikasi siap di tangan Anda.

1. Konsultasi & Dealing Pada bagian ini, indocode.net memberi kesempatan kepada Anda untuk berkonsultasi mengenai apa saja yang ingin di kembangkan. Konsultasi dapat melalui halaman ini.

2. Pembayaran 1 Pada tahap ini, Anda perlu melakukan pembayaran 1 atau D.P. agar project bisa segera di develop. Besar pembayaran 1 berkisar antara 30-50% dari seluruh biaya yang disepakati.

Konsultias pemrograman android via email [email protected]

3. Developing & Testing Tahap ini merupakan tahap pembuatan aplikasi ( developing ). Lama waktu pengerjaan sesuai dengan rentang waktu yang telah disepakati pada tahap 1. Programmer Kami akan memberikan prorgres atau update secara berkala ( misal 1 minggu sekali ). Setelah project jadi hingga 90%, project akan dikirimkan kepada Anda. Programmer akan melakukan revisi atau merelease versi terbaru jika ada hal-hal yang belum sempurna.

4. Pembayaran 2 Setelah melalui proses penyempurnaan aplikasi (melibatkan Anda dalam testing), maka aplikasi akan di rilis sebagai fersi FINALxx. Seblum versi final diserahkan sepenuhnya, Anda harus melakukan pelunasan terlebih dahulu.

5. Finish Pengerjaan project selesai, minimal 1 bulan setelah akhir pengerjaan ini, project akan di publish diwww.indocode.net sebagai berkedudukan sebagai klien Kami.

Hubungi [email protected] atau klik www.indocode.net

Konsultias pemrograman android via email [email protected]

DAFRTAR ISI

Bagian 1 | Pengenalan
Instalasi ADT HellowordApp Pengenalan environment Pengenalan Layout

Bagian 2 | Basic
Menggunakan Button Memanggil halaman lain Siklus hidup aplikasi

Bagian 3 | Multimedia
Menampilkan gambar Memanggil audio

Bagian 4 | Android Academy Baigan 5 | Listview & Spinner

Menampilkan listview sederhana Menampilkan spinner sederhana

Bagian 6 | User Interface

Membuat gradient Membuat custom button Membuat custom editteks

Konsultias pemrograman android via email [email protected]

Bagian 1 | Pengenalan
1.1. Instalasi ADT Sejak 3 Desember 2013, situs www.developer.android.com resmi merilis paket ADT 21.x.x ( Android Development Tool) berukuran + 300Mb. ADT berisi SDK (Standart Development Kit) Android dan eclipse yang sudah di set khusus untuk mengembangkan aplikasi android. Jika Anda sudah mempunyai ADT, maka bisa langsung dipakai untuk membuat aplikasi tanpa harus melakukan setting serperti versi sebelumnya. Beirkut ini langkah menjalankan ADT 1. Lakukan ekstrak file adt-bundle-windows-x86.zp ke C:/developer/android (Gambar 1.1) 2. Masuk ke folder C:/developer/android/eclipse jalankan eclipse.exe

Gambar 1.1. Letak hasil ekstrak ADT

Gambar 1.2. Tampilan saat eclipse ADT dijalankan

Konsultias pemrograman android via email [email protected]

1.2. Membuat project baru Nah saatnya membuat project baru. Setiap membuat aplikasi baru maka kita akan membuat project baru. Dalam satu project bisa terdiri atas banyak package. 1. Klik file > new > Android Application Project. Anda akan dihadapkan dengan dialog box seperti gambar 1.3.

Gambar 1.3. Membuat project baru 2. Isilah field Application Name, Project Name, Package Name dan lainnya persis dengan Gambar 1.3. lalu klik Next sebanyak empat kali diakhiri dengan Finish. 3. Jalankan aplikasi dengan cara klik kanan project > Run As > Android Application

Konsultias pemrograman android via email [email protected]

Gambar 1.4. Aplikasi baru helloword

Konsultias pemrograman android via email [email protected]

1.3. Pengenalan environment Perhatikan kembali editor eclipse yang ada di depan Anda, maka Anda akan menjumpai tampilan default seperti Gambar 1.4.

Gambar 1.4. Tampilan default eclipse ADT Minimal ada 5 bagian pada Eclipse ADT yang perlu Anda kenali, karena untuk mengembangkan sebuah aplikasi nantinya akan banyak berinteraksi dengan bagian-bagian ini. 1. 2. 3. 4. 5. Package Explorer Menu Bar Stage Other View Properties Panel

Konsultias pemrograman android via email [email protected]

10

3.1. Pengenalan Layout 3.1.1. Linearlayout Poin penting! Linearlayout setOrientation setGravity

Layout Width / Layout Height setId setText

Bagian ini kita akan memahami mengenai LinearLayout. Setiap layout dapat disisipkan komponen atau disebut child. Linearlayout adalah salah satu dari jenis layout yang mempunyai satu kolom saja atau satu barus saja. Hasil akhir bagian ini tampak seperti Gambar 1.5.

Gambar 1.5. Tampilan aplikasi LinearlayoutApp 1. Siapkan project baru dengan parameter seperti Gambar 1.6. berikut Application Name Project Name Package Name LinearlayoutApp LinearlayoutApp com.linear.layout.app

Konsultias pemrograman android via email [email protected]

11

Gambar 1.6. membuat aplikasi LinearlayoutApp 2. Tambahkan code berikut pada activity_main.xml
1. <?xml version="1.0" encoding="utf-8"?> 2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3. android:layout_width="match_parent" 4. android:layout_height="match_parent" 5. android:orientation="vertical" > 6. 7. <LinearLayout 8. android:layout_width="match_parent" 9. android:layout_height="wrap_content" 10. android:orientation="vertical" > 11. 12. <TextView 13. android:layout_width="match_parent" 14. android:layout_height="wrap_content" 15. android:background="#aa0000" 16. android:gravity="center_horizontal" 17. android:text="merah" /> 18. 19. <TextView 20. android:layout_width="match_parent" 21. android:layout_height="wrap_content" 22. android:background="#00aa00" 23. android:gravity="center_horizontal" 24. android:text="hijau" /> 25. 26. <TextView 27. android:layout_width="match_parent" 28. android:layout_height="wrap_content" 29. android:background="#aaaa00" 30. android:gravity="center_horizontal"

Konsultias pemrograman android via email [email protected]

12

31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45. 46. 47. 48. 49. 50. 51. 52. 53. 54. 55. 56. 57. 58. 59. 60. 61. 62. 63. 64. 65. 66. 67. 68. 69. 70. 71. 72. 73. 74. 75. 76. 77. 78. 79. 80. 81. 82. 83. 84.

android:text="kuning" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#0000aa" android:gravity="center_horizontal" android:text="biru" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center_horizontal" > <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" > <ImageView android:id="@+id/ImageView01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_launcher" /> <TextView android:id="@+id/TextView01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="gambar 1" /> </LinearLayout> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" > <ImageView android:id="@+id/imageView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_launcher" /> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="gambar 2" /> </LinearLayout> </LinearLayout>

85. </LinearLayout> 3. Selesai, jalankan aplikasinya

Konsultias pemrograman android via email [email protected]

13

3.1.2. RelativeLayout Dengan relativelayout, posisi setiap child bisa diset lebih spesifik terhadap child lainnya. Misal, posisi button berada di sebelah kanan bawah spinner, sedangkan spinner posisinya berada dibawah Edittext. Sederhananya, setiap child posisinya relatif terhadap child-child lainnya. Ilustrasinya seperti gambar 1.7.

Gambar 1.7. Ilustrasi penggunaan Relativelayout

Sebagai pandangan, hasil akhir sesi ini tampak seperti pada Gambar 1.8. Mari kita praktikkan.

Gambar 1.8. Hasil akhir aplikasi RelativelayoutApp

Konsultias pemrograman android via email [email protected]

14

1. Siapkan project baru dengan parameter sebagai berikut seperti Gambar 1.9 Application Name Project Name Package Name RelativelayoutApp RelativelayoutApp com.relative.layout.app

Gambar 1.9. Membuat aplikasi RelativelayoutApp 2. Ubahlah activity_main.xml seperti berikut

1. <?xml version="1.0" encoding="utf-8"?> 2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 3. android:layout_width="fill_parent" 4. android:layout_height="fill_parent" 5. android:paddingLeft="16dp" 6. android:paddingRight="16dp" > 7. <EditText 8. android:id="@+id/name" 9. android:layout_width="fill_parent" 10. android:layout_height="wrap_content" 11. android:hint="reminder" /> 12. <Spinner 13. android:id="@+id/dates" 14. android:layout_width="0dp" 15. android:layout_height="wrap_content"

Konsultias pemrograman android via email [email protected]

15

16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31.

android:layout_below="@id/name" android:layout_alignParentLeft="true" android:layout_toLeftOf="@+id/times" /> <Spinner android:id="@id/times" android:layout_width="96dp" android:layout_height="wrap_content" android:layout_below="@id/name"

android:layout_alignParentRight="true" /> <Button android:layout_width="96dp" android:layout_height="wrap_content" android:layout_below="@id/times" android:layout_alignParentRight="true" android:text="done" /> 32. </RelativeLayout>

3. Selesai, jalankan aplikasinya. 3.1.3. Tablelayout Analoginya mirip table yang sering kita jumpai di HTML atau pada EXCEL. Tablelayout ini bisa terdiri atas banyak Tablerow. Setiap Tablerow bisa memiliki banyak cell yang berisi widget seperti button, textview, spinner dan lainnya.

Gambar 1.10. Tampilan akhir aplikasi TablelayoutApp 1. Siapkan project baru dengan parameter sebagai berikut

Konsultias pemrograman android via email [email protected]

16

Application Name Project Name Package Name

TablelayoutApp TablelayoutApp com.table.layout.app

2. Tambahkan coding berikut pada activity_main.xml

3. <?xml version="1.0" encoding="utf-8"?> 4. <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" 5. android:layout_width="fill_parent" 6. android:layout_height="fill_parent" 7. android:stretchColumns="1" > 8. 9. <TableRow> 10. 11. <TextView 12. android:layout_column="1" 13. android:padding="3dip" 14. android:text="Open..." /> 15. 16. <TextView 17. android:gravity="right" 18. android:padding="3dip" 19. android:text="Ctrl-O" /> 20. </TableRow> 21. 22. <TableRow> 23. 24. <TextView 25. android:layout_column="1" 26. android:padding="3dip" 27. android:text="Save..." /> 28. 29. <TextView 30. android:gravity="right" 31. android:padding="3dip" 32. android:text="Ctrl-S" /> 33. </TableRow> 34. 35. <TableRow> 36. 37. <TextView 38. android:layout_column="1" 39. android:padding="3dip" 40. android:text="Save As..." /> 41. 42. <TextView 43. android:gravity="right" 44. android:padding="3dip" 45. android:text="Ctrl-Shift-S" /> 46. </TableRow> 47. 48. <View 49. android:layout_height="2dip" 50. android:background="#FF909090" /> 51. 52. <TableRow>

Konsultias pemrograman android via email [email protected]

17

53. 54. 55. 56. 57. 58. 59. 60. 61. 62. 63. 64. 65. 66. 67. 68. 69. 70. 71. 72. 73. 74. 75. 76. 77. 78. 79. 80. 81. 82. 83. 84. 85. 86. 87. 88. 89. 90.

<TextView android:padding="3dip" android:text="X" /> <TextView android:padding="3dip" android:text="Import..." /> </TableRow> <TableRow> <TextView android:padding="3dip" android:text="X" /> <TextView android:padding="3dip" android:text="Export..." /> <TextView android:gravity="right" android:padding="3dip" android:text="Ctrl-E" /> </TableRow> <View android:layout_height="2dip" android:background="#FF909090" /> <TableRow> <TextView android:layout_column="1" android:padding="3dip" android:text="Quit" /> </TableRow>

91. </TableLayout>

Konsultias pemrograman android via email [email protected]

18

Bagian 2 | Basic
2.1. Menggunakan Button Poin Penting! - FindViewById(); - setOnClickListener(); - getId(); - AlertDialog();

Toast(); getText(); setText();

Setelah memahami dasar-dasar layout, sekarang saatnya kita belajar ke tingkat berikutnya. Nah bagian dua ini, kita akan banyak beirnteraksi dengan code java dan belajar mengenai beberapa hal yaitu 1. 2. 3. 4. mengontrol button menampilkan toast menampilkan dialog mengambil teks pada field Edittext

Supaya ada gambaran mengenai aplikasi yang akan dibuat, berikut ini adalah tampilan aplikasi

Gambar 2.1. Tampilan aplikasi ButtonApp saat dijalankan Ok, mari kita mulai 1. siapkan project baru dengan parameter sebagai berikut Application Name Project Name Package Name ButtonApp ButtonApp com.button.app

Konsultias pemrograman android via email [email protected]

19

2. Siapkan activity_main.xml seperti Gambar 2.1. atau lihat coding berikut ini
1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 2. xmlns:tools="http://schemas.android.com/tools" 3. android:id="@+id/LinearLayout1" 4. android:layout_width="match_parent" 5. android:layout_height="match_parent" 6. android:gravity="center_horizontal" 7. android:orientation="vertical" > 8. 9. <TextView 10. android:id="@+id/textView1" 11. android:layout_width="wrap_content" 12. android:layout_height="wrap_content" 13. android:text="@string/hello_world" /> 14. 15. <Button 16. android:id="@+id/bSatu" 17. android:layout_width="wrap_content" 18. android:layout_height="wrap_content" 19. android:text="Button Toast" /> 20. 21. <EditText 22. android:id="@+id/inName" 23. android:layout_width="wrap_content" 24. android:layout_height="wrap_content" 25. android:ems="10" /> 26. 27. <Button 28. android:id="@+id/bDua" 29. android:layout_width="wrap_content" 30. android:layout_height="wrap_content" 31. android:text="Button Ambil Text" /> 32. 33. <Button 34. android:id="@+id/bTiga" 35. android:layout_width="wrap_content" 36. android:layout_height="wrap_content" 37. android:text="Button Dialog" /> 38. 39. <Button 40. android:id="@+id/bEmpat" 41. android:layout_width="wrap_content" 42. android:layout_height="wrap_content" 43. android:text="Button Exit" /> 44. 45. </LinearLayout>

3. Salinlah code MainActivity.java seperti dibawah

1. 2. 3. 4. 5. 6. 7. 8. package com.button.app; import import import import import import android.os.Bundle; android.app.Activity; android.app.AlertDialog; android.content.DialogInterface; android.view.View; android.view.View.OnClickListener;

Konsultias pemrograman android via email [email protected]

20

9. import android.widget.Button; 10. import android.widget.EditText; 11. import android.widget.Toast; 12. 13. public class MainActivity extends Activity implements OnClickListener { 14. 15. Button btnSatu, btnDua, btnTiga, btnEmpat; 16. EditText nama; 17. String tempNama; 18. 19. @Override 20. protected void onCreate(Bundle savedInstanceState) { 21. super.onCreate(savedInstanceState); 22. setContentView(R.layout.activity_main); 23. 24. btnSatu = (Button) findViewById(R.id.bSatu); 25. btnSatu.setOnClickListener(this); 26. 27. btnDua = (Button) findViewById(R.id.bDua); 28. btnDua.setOnClickListener(this); 29. 30. btnTiga = (Button) findViewById(R.id.bTiga); 31. btnTiga.setOnClickListener(this); 32. 33. btnEmpat = (Button) findViewById(R.id.bEmpat); 34. btnEmpat.setOnClickListener(this); 35. 36. nama = (EditText) findViewById(R.id.inName); 37. 38. } 39. 40. @Override 41. public void onClick(View v) { 42. // TODO Auto-generated method stub 43. switch (v.getId()) { 44. case R.id.bSatu: 45. 46. Toast.makeText(this, "hahahaha saya di pencet", 47. Toast.LENGTH_SHORT).show(); 48. 49. break; 50. 51. case R.id.bDua: 52. 53. tempNama = nama.getText().toString(); 54. Toast.makeText(this, "nama saya : " + tempNama, 55. Toast.LENGTH_SHORT).show(); 56. break; 57. 58. case R.id.bTiga: 59. AlertDialog.Builder ad=new AlertDialog.Builder(this); 60. ad.setTitle("WARNING"); 61. ad.setMessage("This is your message"); 62. ad.show(); 63. break; 64. case R.id.bEmpat: 65. AlertDialog.Builder d=new AlertDialog.Builder(this); 66. d.setTitle("WARNING"); 67. d.setMessage("This is your message"); 68. d.setPositiveButton("yes", new 69. DialogInterface.OnClickListener() { 70. 71. @Override 72. public void onClick(DialogInterface dialog, int

Konsultias pemrograman android via email [email protected]

21

73. 74. 75. 76. 77. 78. 79. 80. 81. 82. 83. 84. 85. 86. 87. 88. 89. 90. 91. 92. 93. 94.

which) { // TODO Auto-generated method stub finish(); } }); d.setNegativeButton("no", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { // TODO Auto-generated method stub dialog.dismiss(); } }); d.show(); break; } } }

4. Selesai. Selamat menjalankan aplikasi.

Konsultias pemrograman android via email [email protected]

22

2.2. Memanggil halaman lain Key point! 5. Activity 6. Intent 7. startActivity

8. SharedPreference 9. AndroidManifest 10. Overide/implement method

Sejauh ini kita belajar hanya menggunakan satu activity saja, nah sekarang saatnya kita melibatkan dua halaman saling memanggil. Siapkan dulu dua buah layout halaman satu dan dua masing-masing berisi satu Button, satu EditText dan satu TextView. Skenarionya, kita bisa menuliskan sebuah kata pada halaman satu. Kemudian jika button pada halaman satu diklik maka aplikasi akan berpindah ke halaman dua dengan menampilkan kata yang telah dimasukkan sebelumnya. Ilustrasinya seperti pada Gambar 2.2.

diklik

Gambar 2.2. Ilustrasi skenario aplikasi IntentStartApp Lets make it real! 1. Siapkan project baru dengan parameter sebagai berikut Application Name Project Name Package Name ActivityApp ActivityApp com.activity.app

2. Pada activity_main.xml, tambahkan satu EditText dan satu Button dengan tampilan seperti Gambar 2.2. Berikut ini code nya

Konsultias pemrograman android via email [email protected]

23

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 2. xmlns:tools="http://schemas.android.com/tools" 3. android:id="@+id/LinearLayout1" 4. android:layout_width="match_parent" 5. android:layout_height="match_parent" 6. android:orientation="vertical" 7. tools:context=".MainActivity" > 8. 9. <TextView 10. android:id="@+id/textView1" 11. android:layout_width="wrap_content" 12. android:layout_height="wrap_content" 13. android:text="Page-1" /> 14. 15. <EditText 16. android:id="@+id/inText" 17. android:layout_width="match_parent" 18. android:layout_height="wrap_content" 19. android:ems="10" /> 20. 21. <Button 22. android:id="@+id/bNext" 23. android:layout_width="wrap_content" 24. android:layout_height="wrap_content" 25. android:layout_gravity="right" 26. android:text="Next" /> 27. 28. </LinearLayout>

3. Buat layout baru activity_dua.xml. Klik kanan folder res/layout > new > android XML file. 4. Pada activity_dua.xml, tambahkan kompenen yang sama dengan activity_main.xml. Ubah Textview menjadi tulisan Page-2. Berikut code activity_dua.xml. 5. Buat class baru DuaActivity.java. Caranya klik kanan package > new > class. 6. Salin code MainActivity.java berikut.
1. import android.os.Bundle; 2. import android.app.Activity; 3. import android.content.Intent; 4. import android.content.SharedPreferences; 5. import android.view.Menu; 6. import android.view.View; 7. import android.view.View.OnClickListener; 8. import android.widget.Button; 9. import android.widget.EditText; 10. 11. public class MainActivity extends Activity implements OnClickListener { 12. 13. Button bNext; 14. EditText inText; 15. SharedPreferences sp; 16. SharedPreferences.Editor spe; 17. 18. @Override 19. protected void onCreate(Bundle savedInstanceState) { 20. super.onCreate(savedInstanceState); 21. setContentView(R.layout.activity_main); 22.

Konsultias pemrograman android via email [email protected]

24

23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45. 46.

bNext = (Button) findViewById(R.id.bNext); bNext.setOnClickListener(this); inText = (EditText) findViewById(R.id.inText); sp = this.getSharedPreferences("data", 0); spe = sp.edit(); } @Override public void onClick(View v) { // TODO Auto-generated method stub String input = inText.getText().toString(); spe.putString("isidata", input); spe.commit(); Intent i = new Intent(MainActivity.this, DuaActivity.class); startActivity(i); }

47. }

7. Salin code untuk DuaActivity.java berikut ini

1. import android.app.Activity; 2. import android.content.Intent; 3. import android.content.SharedPreferences; 4. import android.os.Bundle; 5. import android.view.View; 6. import android.view.View.OnClickListener; 7. import android.widget.Button; 8. import android.widget.EditText; 9. 10. public class DuaActivity extends Activity implements OnClickListener { 11. Button bBack; 12. EditText outText; 13. SharedPreferences sp; 14. SharedPreferences.Editor spe; 15. 16. @Override 17. protected void onCreate(Bundle savedInstanceState) { 18. // TODO Auto-generated method stub 19. super.onCreate(savedInstanceState); 20. setContentView(R.layout.activity_dua); 21. 22. bBack = (Button) findViewById(R.id.bBack); 23. bBack.setOnClickListener(this); 24. outText = (EditText) findViewById(R.id.outText); 25. 26. sp = this.getSharedPreferences("data", 0); 27. spe = sp.edit(); 28. 29. String out = sp.getString("isidata", ""); 30. outText.setText(out); 31. 32. } 33. 34. @Override

Konsultias pemrograman android via email [email protected]

25

35. 36. 37. 38. 39. 40.

public void onClick(View arg0) { // TODO Auto-generated method stub Intent i = new Intent(DuaActivity.this, MainActivity.class); startActivity(i); }

41. }

42. Daftarkan DuaActivity.java pada AndroidManifest > application (baris 24). Berikut ini AndroidManifest keseluruhan.
1. <?xml version="1.0" encoding="utf-8"?> 2. <manifest xmlns:android="http://schemas.android.com/apk/res/android" 3. package="com.activity.app" 4. android:versionCode="1" 5. android:versionName="1.0" > 6. 7. <uses-sdk 8. android:minSdkVersion="8" 9. android:targetSdkVersion="9" /> 10. 11. <application 12. android:allowBackup="true" 13. android:icon="@drawable/ic_launcher" 14. android:label="@string/app_name" 15. android:theme="@style/AppTheme" > 16. <activity 17. android:name="com.activity.app.MainActivity" 18. android:label="@string/app_name" > 19. <intent-filter> 20. <action android:name="android.intent.action.MAIN" /> 21. <category android:name="android.intent.category.LAUNCHER" /> 22. </intent-filter> 23. </activity> 24. <activity android:name="DuaActivity"></activity> 25. </application> 26. 27. </manifest>

Konsultias pemrograman android via email [email protected]

26

2.3. Siklus hidup aplikasi Key poin!! 11. Overide/implement method 16. onResume() 12. onCreate() 17. onPause() 13. onResume() 18. onStop() 14. onStart() 19. onDestroy() 15. onRestart() Salah satu kehebatan smartphone adalah kehebatannya mengelola sendiri memori atau aktifitas prosesor. Dalam rangka mengatur penggunaan memori, aplikasi android mempunyai cara unik untuk mengendalikan status. Sejauh ini kita membuat aplikasi, pasti menjumpai method onCreate() pada MainActivity.java. Method onCreate() adalah salah satu method untuk mengontrol siklus hidup aplikasi, di eksekusi pertama kali saat aplikasi dijalankan. Masih ada method-method lain yang di eksekusi pada kondisi tertentu. Gambar 2.3. menjelaskan urutan terjadinya siklus hidup sebuah aplikasi, menunjukkan saat method-methodnya dieksekusi.

Konsultias pemrograman android via email [email protected]

27

Gambar 2.3. Ilustrasi siklus hidup aplikasi 1. buat project baru dengan parameter Application Name LifecycleApp Project Name LifecycleApp Package Name com.life.cycle.app 2. Tambahkan method-method seperti code dibawah ini pada MainActivity.java
1. import android.os.Bundle; 2. import android.app.Activity; 3. import android.view.Menu; 4. import android.widget.Toast; 5. 6. public class MainActivity extends Activity { 7. 8. @Override 9. protected void onCreate(Bundle savedInstanceState) { 10. super.onCreate(savedInstanceState); 11. setContentView(R.layout.activity_main); 12. 13. Toast.makeText(this, "onCreate executed", Toast.LENGTH_SHORT).show(); 14. } 15. 16. @Override 17. protected void onPause() { 18. // TODO Auto-generated method stub 19. super.onPause(); 20. Toast.makeText(this, "onStop executed", Toast.LENGTH_SHORT).show(); 21. } 22. 23. @Override 24. protected void onRestart() { 25. // TODO Auto-generated method stub 26. super.onRestart(); 27. Toast.makeText(this, "onRestart executed", Toast.LENGTH_SHORT).show(); 28. } 29. 30. @Override 31. protected void onResume() { 32. // TODO Auto-generated method stub 33. super.onResume(); 34. Toast.makeText(this, "onResume executed", Toast.LENGTH_SHORT).show(); 35. } 36. 37. @Override 38. protected void onStart() { 39. // TODO Auto-generated method stub 40. super.onStart(); 41. Toast.makeText(this, "onRestart executed", Toast.LENGTH_SHORT).show(); 42. } 43. 44. @Override 45. protected void onStop() { 46. // TODO Auto-generated method stub 47. super.onStop(); 48. Toast.makeText(this, "onStop executed", Toast.LENGTH_SHORT).show(); 49. } 50. 51. @Override 52. public boolean onCreateOptionsMenu(Menu menu) { 53. 54. getMenuInflater().inflate(R.menu.activity_main, menu);

Konsultias pemrograman android via email [email protected]

28

55. 56. 57. 58. 59. 60. 61. 62. 63. 64. 65. }

return true; } @Override protected void onDestroy() { // TODO Auto-generated method stub super.onDestroy(); Toast.makeText(this, "onDestroy executed", Toast.LENGTH_SHORT).show(); }

3. Selesai dan jalankan, hasilnya tampak seperti Gambar 2.4

Gambar 2.4. Tampilan LifecycleApp saat dijalankan Lakukan ujicoba dengan menjalankan aplikasi, memencet tombol Home atau memencet tombol Back secara acak atau bergantian. Toast akan muncul pada setiap method dieksekusi. Sambil mencoba cocokkan dengan siklus pada Gambar 2.3.

Konsultias pemrograman android via email [email protected]

29

Bagian 3 | Multimedia
3.1. Menampilkan gambar Ada dua cara untuk menampilkan suatu gambar, menggunakan widget ImageView atau menggunakan Webview. Pada bab ini kita menampilkan gambar menggunakan widget ImageView. Seperti apa sih hasilnya nanti? Perhatikan gambar 3.1 berikut ini

Gambar 3. 1 Kita mulai dengan cara yang sederhana. 1. Buat project baru dengan parameter Application Name Project Name Package Name GambarApp GambarApp com.gambar.app

2. Bikin folder baru dengan nama drawable di dalam GambarApp/res. Caranya klik kanan folder res > new> folder (Gambar 3.2).

Konsultias pemrograman android via email [email protected]

30

Gambar 3.2 3. Masukkan sebuah gambar PNG atau JPG ke dalam folder drawable (Gambar 3.5). Klik kanan folder drawable > paste. Latihan ini memakai gambar format PNG berukuran 250px x 275px. (Gambar 3.3).

Gambar 3.3. Gambar yang akan ditampilkan

Gambar 3.5. Meletakkan gambar pada folder drawable

Konsultias pemrograman android via email [email protected]

31

4. Tambahkan widget ImageView pada activity_main.xml. Pada saat menaruh ImageView pada layout, akan muncul kotak dialog seperti Gambar 3.6. Pilih gambar yang telah disiapkan. Berikut code untuk activity_main.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=".MainActivity" > <ImageView android:id="@+id/imageView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" android:layout_marginTop="82dp" android:src="@drawable/gambarandroid" /> </RelativeLayout>

Gambar 3.6. Memasukkan gambar pada ImageView

5. Pastikan kode pada tampilanGambar.java seperti berikut

1. import android.os.Bundle; 2. import android.app.Activity; 3. import android.view.Menu; 4. 5. public class MainActivity extends Activity { 6. 7. @Override 8. protected void onCreate(Bundle savedInstanceState) { 9. super.onCreate(savedInstanceState); 10. setContentView(R.layout.activity_main);

Konsultias pemrograman android via email [email protected]

32

11. 12. 13. 14. 15. 16. 17. 18. 19. 20. }

} @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.activity_main, menu); return true; }

21. Lakukan RUN dan lihat hasilnya. Mudah bukan??

3.2. Memanggil audio Bagian ini kita akan membuat aplikasi sederhana untuk memutar sebuah lagu mp3. Hasil akhir aplikasi ini nantinya seperti Gambar 3.7. Gunakan file mp3 yang ukurannya tidak terlalu besar.

Gambar 3.7. Tampilan aplikasi audioApp 1. Buat project baru dengan parameter 2. Pada activity_main.xml, tambahkan ImageButton dua buah dengan resource gambar ic_media_play dan ic_media_pause. Berikut code untuk activity_main.xml.
1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 2. xmlns:tools="http://schemas.android.com/tools" 3. android:layout_width="match_parent" 4. android:layout_height="match_parent" 5. tools:context=".MainActivity" > 6. 7. <TextView

Konsultias pemrograman android via email [email protected]

33

8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38.

android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:text="AudioApp" /> <ImageButton android:id="@+id/bPause" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignTop="@+id/bPlay" android:layout_toRightOf="@+id/bPlay" android:src="@android:drawable/ic_media_pause" /> <TextView android:id="@+id/tKet" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:text="TextView" /> <ImageButton android:id="@+id/bPlay" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignRight="@+id/tKet" android:layout_below="@+id/tKet" android:src="@android:drawable/ic_media_play" />

39. </RelativeLayout>

3. Salin code MainActivity.java berikut ini

1. import java.io.IOException; 2. import android.media.MediaPlayer; 3. import android.media.MediaPlayer.OnCompletionListener; 4. import android.os.Bundle; 5. import android.app.Activity; 6. import android.view.Menu; 7. import android.view.View; 8. import android.view.View.OnClickListener; 9. import android.widget.ImageButton; 10. import android.widget.TextView; 11. 12. public class MainActivity extends Activity implements OnClickListener { 13. ImageButton bplay, bpause; 14. TextView tket; 15. MediaPlayer mp; 16. 17. @Override 18. protected void onCreate(Bundle savedInstanceState) { 19. super.onCreate(savedInstanceState); 20. setContentView(R.layout.activity_main); 21. 22. bplay = (ImageButton) findViewById(R.id.bPlay); 23. bpause = (ImageButton) findViewById(R.id.bPause); 24. tket = (TextView) findViewById(R.id.tKet);

Konsultias pemrograman android via email [email protected]

34

25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45. 46. 47. 48. 49. 50. 51. 52. 53. 54. 55. 56. 57. 58. 59. 60. 61. 62. 63. 64. 65. 66. 67. 68. 69. 70. 71. 72. 73. 74. 75. 76. }

bplay.setOnClickListener(this); bpause.setOnClickListener(this); mp = MediaPlayer.create(MainActivity.this, R.raw.forsaken); } @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.activity_main, menu); return true; } @Override public void onClick(View v) { // TODO Auto-generated method stub switch (v.getId()) { case R.id.bPlay: bplay.setEnabled(false); tket.setText("playing..."); if (!mp.isPlaying()) { try { mp.prepare(); } catch (IllegalStateException e) { // TODO Auto-generated catch block e.printStackTrace(); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } } mp.start(); mp.setOnCompletionListener(new OnCompletionListener() { public void onCompletion(MediaPlayer arg0) { bplay.setEnabled(true); tket.setText("play again.."); } }); break; case R.id.bPause: tket.setText("stop..."); mp.pause(); bplay.setEnabled(true); break; } }

4. Selesai dan jalankan!

Konsultias pemrograman android via email [email protected]

35

Bagian 4 | Android Academy

INFO :

Klik www.imagineitcenter.com atau Gedug Imagine IT Education Center Jalan Wahid Hasyim no 99 Nologaten, Condongcatur, Depok, Sleman
Pendaftaran langsung ke IMAGINE IT Education Center Booking sms ke 085747969669 atau hub call centre 0274-4333224

Konsultias pemrograman android via email [email protected]

36

Bagian 5 | Listview & Spinner

Menampilkan listview sederhana Terkadang kita perlu menggunakan listview untuk menampilkan item-item berurutan dari atas kebawah dan dapat di scrol. Listview berasal dari beberapa item dalam sebuah array. Array yang berisi item harus dikonversi ke ArrayAdapter supaya bisa ditampilkan pada lsitview. Kedudukan antaray item array, ArrayAdapter dan Listview kurang lebih seperti ilustrasi Gambar 5.1.

arra[]

ArrayAdapter

ListView

Gambar 5.1. Ilustrasi kedudukan antara array, arrayadapter dan listview. 1. Buat project baru dengan parameter seperti Gambar 5.2.

Gambar 5.2. Membuat project baru 2. Ubahlah layout standart dari RelativeLayout menjadi LinearLayout (Vertical). Caranya pada Outline klik kanan RelativeLayout > Changelayout > pilih LinearLayout(Vertical). Prosesnya terlihat seperti Gambar 5.3.

Konsultias pemrograman android via email [email protected]

37

Gambar 5.3. Cara mengubah layout 3. Lakukan Drag n drop komponen listview kedalam layout, caranya seperti ditunjukkan Gambar 5.4.

Gambar 5.4. Menambahkan komponen listview dengan drag&drop 4. Untuk keperluan pemrograman , tambahkan id pada listview dengan cara klik kanan listview > Edit ID... Isilah field id dengan idList seperti Gambar 5.5.

Konsultias pemrograman android via email [email protected]

38

Gambar 5.5. Menambahkan id pada listview 5. Code secara keseluruhan dari activity_main.xml sebagai berikut
1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 2. xmlns:tools="http://schemas.android.com/tools" 3. android:id="@+id/LinearLayout1" 4. android:layout_width="match_parent" 5. android:layout_height="match_parent" 6. android:orientation="vertical" 7. tools:context=".MainActivity" > 8. 9. <TextView 10. android:layout_width="wrap_content" 11. android:layout_height="wrap_content" 12. android:text="@string/hello_world" /> 13. 14. <ListView 15. android:id="@+id/idList" 16. android:layout_width="match_parent" 17. android:layout_height="wrap_content" > 18. </ListView> 19. 20. </LinearLayout>

6. Nah sekarang tambahkan code berikut ini pada MainActivity.java

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. import import import import import import import import import android.os.Bundle; android.app.Activity; android.view.Menu; android.view.View; android.widget.AdapterView; android.widget.AdapterView.OnItemClickListener; android.widget.ArrayAdapter; android.widget.ListView; android.widget.Toast;

public class MainActivity extends Activity implements

Konsultias pemrograman android via email [email protected]

39

12. OnItemClickListener { 13. String[] array_item = { "Cupcake", "Donut", "Eclair", "Froyo", 14. "Ginger Bread", "Honeycomb", "ICS", "Jelly Bean", "Key 15. Liem Pie" }; 16. ListView lv; 17. 18. @Override 19. protected void onCreate(Bundle savedInstanceState) { 20. super.onCreate(savedInstanceState); 21. setContentView(R.layout.activity_main); 22. 23. lv = (ListView) findViewById(R.id.idList); 24. 25. ArrayAdapter<String> insert_item = new 26. ArrayAdapter<String>(this, 27. android.R.layout.simple_list_item_1, array_item); 28. lv.setAdapter(insert_item); 29. lv.setOnItemClickListener(this); 30. 31. } 32. 33. @Override 34. public boolean onCreateOptionsMenu(Menu menu) { 35. getMenuInflater().inflate(R.menu.activity_main, menu); 36. return true; 37. } 38. 39. @Override 40. public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, 41. long arg3) { 42. Toast.makeText(this, "you choose " + array_item[arg2], 43. Toast.LENGTH_SHORT).show(); 44. } 45. }

7. Selesai. Lakukan tes run aplikasi dengna cara seperti Gambar 5.6. klik kanan project ListviewApp > Run As > Android Project Application. Jika benar, hasilnya tampil seperti Gambar 5.7.

Konsultias pemrograman android via email [email protected]

40

Gambar 5.6. Menjalankan aplikasi

Gambar 5.7. Hasil akhir aplikasi ListviewApp saat dujalankan

Konsultias pemrograman android via email [email protected]

41

Menampilkan spinner sederhana Not availabel in this version

Konsultias pemrograman android via email [email protected]

42

Bagian 6 | User Interface

6.1. Membuat gradient 6.1.1. Not availabel in this version 6.2. Membuat custom button Pada bagian ini kita akan mengatahui trik cara membuat custom button sehingga tmapilan button terlihat lebih menarik. Hasil aplikasi seperti Gambar 6.1.

Gambar 6.1. hasil aplikasi customButtonApp 1. Buat project baru dengna parameter Application Name Project Name Package Name CustomButtonApp CustomButtonApp com.custom.button.app

2. Buat folder drawable didalam res/layout., lalu buat empat buah file xml masing masing code berikut ini circlebutton.xml
1. <?xml version="1.0" encoding="utf-8"?> 2. <selector xmlns:android="http://schemas.android.com/apk/res/android"> 3. 4. <item android:state_pressed="true"><shape>

Konsultias pemrograman android via email [email protected]

43

5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28.

<solid android:color="#677e86" /> <stroke android:width="3dp" android:color="#4b4c4c" /> <corners android:bottomLeftRadius="16dp" android:bottomRightRadius="16dp" android:topLeftRadius="16dp" android:topRightRadius="16dp" /> </shape></item> <item><shape> <gradient android:angle="270" android:endColor="#677e86" android:startColor="#a3f2ff" /> <stroke android:width="3dp" android:color="#444" /> <corners android:bottomLeftRadius="16dp" android:bottomRightRadius="16dp" android:topLeftRadius="16dp" android:topRightRadius="16dp" /> </shape></item> </selector>

circlebuttoninactive.xml

1. <?xml version="1.0" encoding="utf-8"?> 2. <selector xmlns:android="http://schemas.android.com/apk/res/android"> 3. 4. <item android:state_pressed="true"><shape> 5. <solid android:color="#677e86" /> 6. 7. <stroke android:width="3dp" 8. android:color="#4b4c4c" /> 9. 10. <corners android:bottomLeftRadius="16dp" 11. android:bottomRightRadius="16dp" 12. android:topLeftRadius="16dp" 13. android:topRightRadius="16dp" /> 14. </shape></item> 15. <item><shape> 16. <gradient android:angle="270" 17. android:endColor="@android:color/darker_gray" 18. android:startColor="@android:color/darker_gray" /> 19. 20. <stroke android:width="3dp" 21. android:color="#444" /> 22. 23. <corners android:bottomLeftRadius="16dp" 24. android:bottomRightRadius="16dp" 25. android:topLeftRadius="16dp" 26. android:topRightRadius="16dp" /> 27. </shape></item> 28. 29. </selector>

Konsultias pemrograman android via email [email protected]

44

colorbutton.xml

1. <?xml version="1.0" encoding="utf-8"?> 2. <selector xmlns:android="http://schemas.android.com/apk/res/android"> 3. 4. <item android:state_pressed="true"><shape> 5. <solid android:color="#879548" /> 6. 7. <stroke android:width="2dp" 8. android:color="#4b4c4c" /> 9. 10. <corners android:bottomLeftRadius="4dp" 11. android:bottomRightRadius="4dp" 12. android:topLeftRadius="4dp" 13. android:topRightRadius="4dp" /> 14. </shape></item> 15. <item><shape> 16. <gradient android:angle="270" 17. android:endColor="#879548" 18. android:startColor="#c4e347" /> 19. 20. <stroke android:width="2dp" 21. android:color="#4b4c4c" /> 22. 23. <corners android:bottomLeftRadius="4dp" 24. android:bottomRightRadius="4dp" 25. android:topLeftRadius="4dp" 26. android:topRightRadius="4dp" /> 27. </shape></item> 28. 29. </selector>

roundbutton.xml

1. <?xml version="1.0" encoding="utf-8"?> 2. <selector xmlns:android="http://schemas.android.com/apk/res/android"> 3. 4. <item android:state_pressed="true"><shape> 5. <solid android:color="#262523" /> 6. 7. <stroke android:width="2dp" 8. android:color="#4b4c4c" /> 9. 10. <corners android:bottomLeftRadius="10dp" 11. android:bottomRightRadius="10dp" 12. android:topLeftRadius="10dp" 13. android:topRightRadius="10dp" /> 14. </shape></item> 15. <item><shape> 16. <gradient android:angle="270" 17. android:endColor="#262523" 18. android:startColor="#8c8c8c" /> 19. 20. <stroke android:width="2dp" 21. android:color="#4b4c4c" />

Konsultias pemrograman android via email [email protected]

45

22. 23. 24. 25. 26. 27. 28.

<corners android:bottomLeftRadius="10dp" android:bottomRightRadius="10dp" android:topLeftRadius="10dp" android:topRightRadius="10dp" /> </shape></item>

29. </selector> 3. Pada activity_main.xml, tambahkan tujuh buah button dengan code sebagai berikut
1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 2. xmlns:tools="http://schemas.android.com/tools" 3. android:id="@+id/LinearLayout1" 4. android:layout_width="match_parent" 5. android:layout_height="match_parent" 6. android:layout_gravity="center_horizontal" 7. android:gravity="center_horizontal" 8. android:orientation="vertical" 9. tools:context=".MainActivity" > 10. 11. <TextView 12. android:layout_width="wrap_content" 13. android:layout_height="wrap_content" 14. android:text="@string/hello_world" /> 15. 16. <Button 17. android:id="@+id/button1" 18. android:layout_width="wrap_content" 19. android:layout_height="wrap_content" 20. android:layout_margin="4dp" 21. android:text="Default Button" /> 22. 23. <Button 24. android:id="@+id/button2" 25. style="@style/ButtonText" 26. android:layout_width="wrap_content" 27. android:layout_height="wrap_content" 28. android:layout_margin="4dp" 29. android:background="@drawable/colorbutton" 30. android:padding="8dp" 31. android:text="Colored Button" /> 32. 33. <Button 34. android:id="@+id/button3" 35. style="@style/ButtonWhiteText" 36. android:layout_width="wrap_content" 37. android:layout_height="wrap_content" 38. android:layout_margin="4dp" 39. android:background="@drawable/roundbutton" 40. android:padding="8dp" 41. android:text="Round Button" /> 42. 43. <Button 44. android:id="@+id/Button01" 45. style="@style/ButtonText" 46. android:layout_width="wrap_content" 47. android:layout_height="wrap_content" 48. android:layout_margin="4dp"

Konsultias pemrograman android via email [email protected]

46

49. 50. 51. 52. 53. 54. 55. 56. 57. 58. 59. 60. 61. 62. 63. 64. 65. 66. 67. 68. 69. 70. 71. 72. 73. 74. 75. 76. 77. 78. 79. 80. 81. 82. 83. 84. 85. 86. 87. 88. 89. 90.

android:background="@drawable/colorbutton" android:drawableLeft="@android:drawable/ic_menu_share" android:drawablePadding="5dp" android:padding="8dp" android:paddingRight="10dp" android:text="Share" /> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" > <Button android:id="@+id/button4" style="?android:attr/buttonStyleSmall" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="5dp" android:background="@drawable/circlebutton" android:paddingLeft="11dp" android:paddingRight="11dp" /> <Button android:id="@+id/button5" style="?android:attr/buttonStyleSmall" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="5dp" android:background="@drawable/circlebuttoninactive" android:paddingLeft="11dp" android:paddingRight="11dp" /> <Button android:id="@+id/button6" style="?android:attr/buttonStyleSmall" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="5dp" android:background="@drawable/circlebuttoninactive" android:paddingLeft="11dp" android:paddingRight="11dp" /> </LinearLayout>

91. </LinearLayout> 4. Finish!

Konsultias pemrograman android via email [email protected]

47

6.3. Membuat custom editteks Selain mengcustomize button, kita juga bisa membuat tampilan EditText sendiri. Dengan mengcustom seperti ini, aplikasi yang akan kita bangun nantinya akan terlihat lebih menarik. Hasil akhir aplikasi ini seperti Gambar 6.2.

Gambar 6.2. Tampilan aplikasi CustomFieldTextApp 1. Buat project baru Application Name CustomFieldTextApp Project Name CustomFieldTextApp Package Name com.custom.edittext 2. Buat folder drawable, tambahkan masing-masing file xml berikut a. fillcolor.xml
1. <?xml version="1.0" encoding="utf-8"?> 2. <shape xmlns:android="http://schemas.android.com/apk/res/android" > 3. <corners android:radius="5dp"/> 4. <stroke android:width="1dp" 5. android:color="#44433A"/> 6. <solid android:color="#2D0000FF"/> 7. </shape>

Konsultias pemrograman android via email [email protected]

48

b. leftroundborder.xml
1. <?xml version="1.0" encoding="utf-8"?> 2. <shape xmlns:android="http://schemas.android.com/apk/res/android" > 3. 4. <corners 5. android:bottomLeftRadius="5dp" 6. android:bottomRightRadius="0dp" 7. android:topLeftRadius="5dp" 8. android:topRightRadius="0dp" /> 9. 10. <stroke 11. android:width="1dp" 12. android:color="#44433A" /> 13. 14. <solid android:color="#FFF" /> 15. 16. </shape>

c. rightroundborder.xml
1. <?xml version="1.0" encoding="utf-8"?> 2. <shape xmlns:android="http://schemas.android.com/apk/res/android" > 3. 4. <corners 5. android:bottomLeftRadius="0dp" 6. android:bottomRightRadius="5dp" 7. android:topLeftRadius="0dp" 8. android:topRightRadius="5dp" /> 9. 10. <stroke 11. android:width="1dp" 12. android:color="#44433A" /> 13. 14. <solid android:color="#FFF" /> 15. 16. </shape>

d. noborder.xml
1. <?xml version="1.0" encoding="utf-8"?> 2. <shape xmlns:android="http://schemas.android.com/apk/res/android" > 3. 4. <stroke android:color="@android:color/transparent" /> 5. 6. <solid android:color="@android:color/transparent" /> 7. 8. </shape>

Konsultias pemrograman android via email [email protected]

49

e. oval.xml
1. <?xml version="1.0" encoding="utf-8"?> 2. <shape xmlns:android="http://schemas.android.com/apk/res/android" > 3. <corners android:radius="50dp"/> 4. <stroke android:width="1dp" 5. android:color="#44433A"/> 6. <solid android:color="#FFF"/> 7. 8. </shape>

f.

round.xml

1. <?xml version="1.0" encoding="utf-8"?> 2. <shape xmlns:android="http://schemas.android.com/apk/res/android" > 3. <corners android:radius="5dp"/> 4. <stroke android:width="1dp" 5. android:color="#44433A"/> 6. <solid android:color="#FFF"/> 7. 8. </shape>

3. Tambahkan lima EditText pada activity_main.xml dengna code seperti berikut

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 2. xmlns:tools="http://schemas.android.com/tools" 3. android:id="@+id/LinearLayout1" 4. android:layout_width="match_parent" 5. android:layout_height="match_parent" 6. android:orientation="vertical" 7. tools:context=".MainActivity" > 8. 9. <TextView 10. android:layout_width="wrap_content" 11. android:layout_height="wrap_content" 12. android:text="@string/hello_world" /> 13. 14. <EditText 15. android:id="@+id/editText1" 16. android:layout_width="match_parent" 17. android:layout_height="wrap_content" 18. android:layout_margin="8dp" 19. android:background="@drawable/round" 20. android:ems="10" 21. android:hint="Round Corners" 22. android:padding="8dp" > 23. 24. <requestFocus /> 25. </EditText> 26. 27. <EditText 28. android:id="@+id/EditText01" 29. android:layout_width="match_parent" 30. android:layout_height="wrap_content" 31. android:layout_margin="8dp" 32. android:background="@drawable/oval"

Konsultias pemrograman android via email [email protected]

50

33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45. 46. 47. 48. 49. 50. 51. 52. 53. 54. 55. 56. 57. 58. 59. 60. 61. 62. 63. 64. 65. 66. 67. 68. 69. 70. 71. 72. 73. 74. 75. 76. 77. 78. 79. 80. 81. 82. 83. 84. 85. 86. 87. 88. 89.

android:ems="10" android:hint="oval" android:padding="8dp" /> <EditText android:id="@+id/EditText02" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="8dp" android:background="@drawable/fillcolor" android:ems="10" android:hint="oval" android:padding="8dp" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="8dp" android:background="@drawable/round" > <EditText android:id="@+id/editText2" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_weight="1" android:background="@drawable/noborder" android:ems="10" /> <ImageView android:id="@+id/imageView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@android:drawable/ic_menu_search" /> </LinearLayout> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_margin="8dp" android:gravity="center" android:orientation="horizontal" > <EditText android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:background="@drawable/leftroundborder" android:hint="search" android:padding="8dp" android:singleLine="true" /> <ImageView android:layout_width="40dp" android:layout_height="41dp" android:layout_marginLeft="-1dp" android:background="@drawable/rightroundborder" android:padding="5dp"

Konsultias pemrograman android via email [email protected]

51

90. 91. 92.

android:src="@android:drawable/ic_menu_search" /> </LinearLayout>

93. </LinearLayout>

4. Selesai.

Konsultias pemrograman android via email [email protected]

52