7/26/2019 Tutorial Android Dasar
1/19
TUTORIAL ANDROIDMembangun Aplikasi Calculator Untuk Android
Indra Widiatmojo
25 Mei 2014
7/26/2019 Tutorial Android Dasar
2/19
2
Pembuka
Kali ini penulis akan berbagi pengalaman tentang bagaimana cara membuat aplikasi
sederhanan didalam android (smart phone Android) bagi pemula. Disini penulis akan menggunakan
ADT (Android Developer Tools) Eclipse dan SDK Androiduntuk digunakan membuat aplikasi Android.
Saya harap kalian semua sudah mengerti tentang Eclipse atau fitur-fitur didalamnya dan caramemakainya.
Sebagai contoh kali ini penulis akan berbagi cara bagaimana membuat aplikasi Calculator
didalam Android. Untuk membuat aplikasi Calculator tersebut saya akan membagi 2 cara
pengerjaannya yaitu pertama desain interface, dan yang kedua pengkodingan.
Desain Interface
Rencana desain calculator yang akan kita buat adalah sebagai berikut :
Untuk mendesain aplikasi diatas pertama buka Eclipse lalu klik fileNewpilihAndroid
Aplication Projectsehingga akan muncul sebagai berikut :
7/26/2019 Tutorial Android Dasar
3/19
3
IsikanAplication Name, Project Name, dan Package Name setelah diisikan semua kemudian klik next
sampai muncul kotak dialog sebagai berikut :
Fungsi dari kotak dialog tersebut adalah untuk memasukan iconsistem yang akan kita buat ini. Kita
cukup klik browse dan pilih icon dari drive komputer kalian yang kalian suka. Setelah klik finishsehingga project yang yang kita buat akan muncul di bagian explorer Eclipse.
7/26/2019 Tutorial Android Dasar
4/19
4
BukaAndroidManifest.xmldan gantikan source codeyang diblok dengan @android:style/theme.black
seperti pada gambar dibawah ini
Selanjutnya kita akan membuat gradasi warna untuk memperindah interface calculator yangkita buat nantinya. Untuk membuat gradasi kita mulai dari folder projeck Calculator Of Math, pilih res
drawable_hdpi. Pada drawable_hdpi klik kanan pilih NewOtherAndroidAndroid XML File
sehingga akan muncul kotak dialog sebagai berikut
7/26/2019 Tutorial Android Dasar
5/19
5
Pada fileisikan dengan bg_button dan padaroot Elementnya pilih selector setelah itu finish.
Isikan kode XML dibawah ini ke dalam yang ditunjukan oleh anak panah diatas
7/26/2019 Tutorial Android Dasar
6/19
6
Tambahkan XML file kedalam folder drawable_hdpi dengan cara yang sama seperti sebelumnya
dengan nama bg_latar dan pada root Elementnya pilih selector setelah itu finish. Isikan kode XML
dibawah ini ke dalam yang ditunjukan oleh anak panah pada gambar yang ditunjukan sebelumnya
Tambahkan XML file kedalam folder drawable_hdpi dengan cara yang sama seperti sebelumnya
dengan nama bg_latarsoal dan pada root Elementnya pilih selector setelah itu finish. Isikan kode
XML dibawah ini ke dalam yang ditunjukan oleh anak panah pada gambar yang ditunjukan sebelumnya
7/26/2019 Tutorial Android Dasar
7/19
7
Tambahkan XML file kedalam folder drawable_hdpi dengan cara yang sama seperti sebelumnya
dengan nama bg_text dan pada root Elementnya pilih selector setelah itu finish. Isikan kode XML
dibawah ini ke dalam yang ditunjukan oleh anak panah pada gambar yang ditunjukan sebelumnya
Referensi kode warna :
-
http://www.sambidoplang.mobie.in/Warna
- http://www.infoindong.com/2013/01/kode-warna-html.html
Setelah selesai selanjutnya masuk ke res values pilih string.xml yang ada dalam projeckCalculator Of Math.
7/26/2019 Tutorial Android Dasar
8/19
8
Tambahkah code XML dibawah ini di tempat yang ditunjukan oleh anak panah di atas.
medium_textX
:+-
SinCos
Tan=^
SqrtModCE
LogPhi
AtanExp
#ffffff
30spbold#0000003
32
Kode-kode XML diatas nantinya akan dipanggil di setiap komponen-komponen (button,textView, textEdit, dll) pada desain interface calclulator.
Selanjutnya kita akan membuat interface calculator tersebut dengan cara buka folder res
layoutpilih activity_main.xml. Kemudian ganti kode yang ada di dalam activity_main.xmldengankode XML dibawah ini.
7/26/2019 Tutorial Android Dasar
9/19
9
android:layout_height="wrap_content"android:text="@string/lbl_defould"
android:textAppearance="?android:attr/textAppearanceMedium"/>
7/26/2019 Tutorial Android Dasar
10/19
10
android:text="@string/load_default"/>
7/26/2019 Tutorial Android Dasar
11/19
11
android:background="@drawable/bg_button"android:onClick="buttonBagi"
android:text="@string/bagi"/>
7/26/2019 Tutorial Android Dasar
12/19
12
Kode diatas bisa dilihat dalam bentuk navigator seperti pada gambar dibawah ini
Hasil dari koding XML diatas dapat kita liat hasil sementaranya dengan cara membuka GraphicalLayoutpada activity_main.xmlseperti yang ditandai dengan lingkaran merah pada gambar dibawah ini
7/26/2019 Tutorial Android Dasar
13/19
13
Pengkodingan
Dalam pembuat aplikasi Android bahasa pemrograman yang digunakan adalah bahasapemrograman JAVA. Untuk memulainya kita harus membuka folder yang ada didalam projectCalculation Of Math. Buka rsc com.indra.calculationofmath MainActivty.java kemudian tulissemua source codedi bawah ini.
packagecom.indra.calculationofmath;
importandroid.app.Activity;
importandroid.os.Bundle;importandroid.view.View;importandroid.widget.EditText;
importandroid.widget.TextView;
publicclassMainActivity extendsActivity {
EditText txtNumber1, txtNumber2;TextView lblHasil;
doublenumber1, number2, hasil;String operator;
@OverrideprotectedvoidonCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
txtNumber1=(EditText)findViewById(R.id.editText1);txtNumber2=(EditText)findViewById(R.id.editText2);lblHasil=(TextView)findViewById(R.id.textView1);
txtNumber2.setVisibility(View.GONE);
lblHasil.setText(String.valueOf("0"));
7/26/2019 Tutorial Android Dasar
14/19
14
}
publicvoidButtonC(View e) {operator="";lblHasil.setText(String.valueOf("0"));
txtNumber1.setText(String.valueOf(""));txtNumber2.setText(String.valueOf(""));txtNumber1.setVisibility(View.VISIBLE);
txtNumber2.setVisibility(View.GONE);}
publicvoidbuttonKali(View e) {operator="kali";
txtNumber2.setVisibility(View.VISIBLE);txtNumber1.setVisibility(View.GONE);txtNumber2.requestFocus();
}
publicvoidbuttonBagi(View e) {operator="bagi";txtNumber2.setVisibility(View.VISIBLE);
txtNumber1.setVisibility(View.GONE);txtNumber2.requestFocus();
}
publicvoidButtonPlus(View e) {operator="plus";
txtNumber2.setVisibility(View.VISIBLE);txtNumber1.setVisibility(View.GONE);txtNumber2.requestFocus();
}
publicvoidbuttonMin(View e) {operator="min";txtNumber2.setVisibility(View.VISIBLE);
txtNumber1.setVisibility(View.GONE);txtNumber2.requestFocus();
}
publicvoidbuttonQuadrat(View e) {operator="quadrat";txtNumber2.setVisibility(View.VISIBLE);txtNumber1.setVisibility(View.GONE);
txtNumber2.requestFocus();}
publicvoidbuttonMOD(View e) {operator="Mod";txtNumber2.setVisibility(View.VISIBLE);
txtNumber1.setVisibility(View.GONE);txtNumber2.requestFocus();
}
publicvoidButtonSamaDengan(View e) {
try{ hasil_proses();}
catch(Exception err) {lblHasil.setText(String.valueOf("Error"));
}}
7/26/2019 Tutorial Android Dasar
15/19
15
publicvoidButtonSin(View e) {
try{number1=Double.parseDouble(txtNumber1.getText().toString());
hasil=Math.sin(number1);lblHasil.setText(String.valueOf(hasil));
}
catch(Exception err) {
lblHasil.setText(String.valueOf("Invalid Input"));}
}
publicvoidButtonCos(View e) {try{
number1=Double.parseDouble(txtNumber1.getText().toString());
hasil=Math.cos(number1);lblHasil.setText(String.valueOf(hasil));
}
catch(Exception err) {lblHasil.setText(String.valueOf("Invalid Input"));
}}
publicvoidButtonTan(View e) {try{
number1=Double.parseDouble(txtNumber1.getText().toString());
hasil=Math.tan(number1);
lblHasil.setText(String.valueOf(hasil));}
catch(Exception err) {lblHasil.setText(String.valueOf("Invalid Input"));
}
}
publicvoidbuttonSQRT(View e) {try{
number1=Double.parseDouble(txtNumber1.getText().toString());
hasil=Math.sqrt(number1);lblHasil.setText(String.valueOf(hasil));
}
catch(Exception err) {
lblHasil.setText(String.valueOf("Invalid Input"));}
}
publicvoidbuttonLog(View e) {
try{ number1=Double.parseDouble(txtNumber1.getText().toString());
hasil=Math.log(number1);lblHasil.setText(String.valueOf(hasil));
}
catch(Exception err) {
7/26/2019 Tutorial Android Dasar
16/19
16
lblHasil.setText(String.valueOf("Invalid Input"));}
}
publicvoidbuttonPHI(View e) {
try{number1=Double.parseDouble(txtNumber1.getText().toString());
hasil=Math.PI*(number1);lblHasil.setText(String.valueOf(hasil));
}
catch(Exception err) {
lblHasil.setText(String.valueOf("Invalid Input"));}
}
publicvoidbuttonAtan(View e) {try{
number1=Double.parseDouble(txtNumber1.getText().toString());
hasil=Math.atan(number1);lblHasil.setText(String.valueOf(hasil));
}
catch(Exception err) {lblHasil.setText(String.valueOf("Invalid Input"));
}}
publicvoidbuttonExp(View e) {try{
number1=Double.parseDouble(txtNumber1.getText().toString());
hasil=Math.exp(number1);
lblHasil.setText(String.valueOf(hasil));}
catch(Exception err) {
lblHasil.setText(String.valueOf("Invalid Input"));}
}
privatevoidhasil_proses() {number1=Double.parseDouble(txtNumber1.getText().toString());number2=Double.parseDouble(txtNumber2.getText().toString());
if(operator=="kali") {hasil=number1*number2;
}
elseif(operator=="bagi") {hasil=number1/number2;
}
elseif(operator=="plus") {hasil=number1+number2;
}
elseif(operator=="min") {
hasil=number1-number2;}
7/26/2019 Tutorial Android Dasar
17/19
17
elseif(operator=="quadrat") {
hasil=Math.pow(number1, number2);}
elseif(operator=="Mod") {hasil=number1% number2;
}
lblHasil.setText(String.valueOf(hasil));
}}
Setelah source code diatas ditulis secara lengkap dan benar untuk menjalankannya adalah
klik tanda yang ada pada toolbar Eclipse, disamping itu saya juga sarankan bersamaan programtersebut dijalankan juga harus memperhatikan console pada Eclipse untuk mengetahui apakahprogram itu berjalan secara benar atau tidak. Untuk melihat consoleadalah dengan cara klik WindowShowViewConsole. Perhatikan gambar console dibawah ini.
1
2
3
Keterangan :
1. Proses berjalannya SDK / menjalankan SDK
2.
Proses instalasi APK
3. Proses instalasi APK selesai
Proses diatas akan memakan waktu sedikit lama, tergantung spesifikasi komputernya.
Setelah proses compile program setelah dan sukses akan tampil hasilnya sebagai berikut sepertigambar dibawah ini.
7/26/2019 Tutorial Android Dasar
18/19
18
Setelah SDK berjalan, buka aplikasi menunya dan cari aplikasi calculatornya seperti pada gambardibawah ini
7/26/2019 Tutorial Android Dasar
19/19
19
Jalankan programnya dan hasilnya akan seperti dibawah ini
Cara instalasi di smart phone :
Cari direktori penyimpan project Calculation Of Math pada drive komputer, setelah itu buka folder
CalculationOfMath
bin
CalculationOfMath.apk, kemudian copy-paste
CalculationOfMath.apk tersebut kedalam memory smart phone dan selanjutnya jalankan, secaraotomatis APK tersebut akan terinstal di smart phone.
Penutup
Semoga tutorial ini dapat bermanfaat dan dipakai sebagai bahan referensi yang dapatmemberikan wawasan luas dalam bidang IT pada khususya dan diharapkan dapat digunakan oleh parapemula, mahasiswa baru ataupun siapa saja yang meminati bidang IT.