Tutorial Android Dasar

7/26/2019 Tutorial Android Dasar

1/19

TUTORIAL ANDROIDMembangun Aplikasi Calculator Untuk Android

Indra Widiatmojo

25 Mei 2014


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 :


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.


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


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


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


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/19

7


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.


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.


9/19

9

android:layout_height="wrap_content"android:text="@string/lbl_defould"

android:textAppearance="?android:attr/textAppearanceMedium"/>


10/19

10

android:text="@string/load_default"/>


11/19

11

android:background="@drawable/bg_button"android:onClick="buttonBagi"

android:text="@string/bagi"/>


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


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"));


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);


}

publicvoidbuttonQuadrat(View e) {operator="quadrat";txtNumber2.setVisibility(View.VISIBLE);txtNumber1.setVisibility(View.GONE);

txtNumber2.requestFocus();}

publicvoidbuttonMOD(View e) {operator="Mod";txtNumber2.setVisibility(View.VISIBLE);


}

publicvoidButtonSamaDengan(View e) {

try{ hasil_proses();}

catch(Exception err) {lblHasil.setText(String.valueOf("Error"));

}}


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{


hasil=Math.tan(number1);

lblHasil.setText(String.valueOf(hasil));}


}

}

publicvoidbuttonSQRT(View e) {try{


hasil=Math.sqrt(number1);lblHasil.setText(String.valueOf(hasil));

}



}

publicvoidbuttonLog(View e) {

try{ number1=Double.parseDouble(txtNumber1.getText().toString());

hasil=Math.log(number1);lblHasil.setText(String.valueOf(hasil));

}



16/19

16


}

publicvoidbuttonPHI(View e) {

try{number1=Double.parseDouble(txtNumber1.getText().toString());

hasil=Math.PI*(number1);lblHasil.setText(String.valueOf(hasil));

}



}

publicvoidbuttonAtan(View e) {try{


hasil=Math.atan(number1);lblHasil.setText(String.valueOf(hasil));

}


}}

publicvoidbuttonExp(View e) {try{


hasil=Math.exp(number1);

lblHasil.setText(String.valueOf(hasil));}



}

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;}


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.


18/19

18

Setelah SDK berjalan, buka aplikasi menunya dan cari aplikasi calculatornya seperti pada gambardibawah ini


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.

Tutorial Android Dasar

Documents

Transcript of Tutorial Android Dasar