Membuat Proyek Baru
Buatlah proyek baru dengan nama Kalkulator Sederhana. Berikut caranya :
Pilih Start a new Android Studio project untuk membuat suatu proyek android yang baru.
Kemudian kalian akan diminta untuk memilih template activity, maka pilihlah Empty Activity, dan tekan Next.
Beri nama untuk nama proyek, yaitu Kalkulator Sederhana, dan pilih minimal SDK android yang digunakan dalam proses pembuatan aplikasi. (Misalnya, API Level 21 : Lollipop 5.0). Kemudian, tekan Finish.
Tunggu sampai proses gradle selesai. Kemungkinan akan memakan waktu yang cukup lama, bergantung pada kecepatan komputer atau laptop kalian. Jika sudah selesai, kaian akan melihat dua tab terbuka, yaitu MainActivity.java dan activity_main.xml.
MainActivity merupakan kelas Java berupa aktivitas yang menjadi tampilan saat kalian menggunakan aplikasi android kalian. Aktivitas-lah yang memungkinkan kalian untuk berinteraksi dengan aplikasi, sedangkan activity_main.xml merupakan layout yang membentuk desain tampilan dari aktivitas tersebut. File activity dan lainnya yang berekstensi file .java menggunakan bahasa pemrograman Java, sedangkan file layout xml, menggunakan bahasa XML yang terdiri dari tag-tag.
Mempersiapkan values proyek
Dalam pembuatan proyek, baiknya kita mempersiapkan nilai-nilai atau values yang akan gunakan, seperti Strings, Colors, Dimensi, dll. Values tersebut dapat kita temukan pada struktur proyek android.
Dalam proyek ini, kita akan mengubah values colors dengan menambah beberapa warna, yaitu colorGray (#817B7D) dan colorWhite (#FFFFFF). Untuk mencari nilai hexadecimal warna, kalian dapat melihat pada website w3schools dan lainnya.
Kemudian, kita akan membuat file dimens.xml karena secara default, android studio tidak menyediakan file tersebut pada folder values sehingga perlu dibuat secara manual.
Klik kanan pada folder values, kemudian pilih New->Values resource file dan sesuaikan isinya dengan nilai dibawah ini.
Mempersiapkan tampilan Kalkulator
Sekarang, kita akan mengubah tampilan aplikasi kalkulator kita. Buka file layout activity_main.xml. Ubah kode xml sebelumnya menjadi seperi dibawah ini.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorGray"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="@dimen/default_margin">
<EditText
android:id="@+id/et_first_number"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorWhite"
android:padding="@dimen/editttext_padding"
android:hint="Masukkan Angka"/>
<EditText
android:id="@+id/et_second_number"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorWhite"
android:padding="@dimen/editttext_padding"
android:layout_marginTop="@dimen/default_margin"
android:hint="Masukkan Angka"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="4">
<Button
android:id="@+id/btn_add"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/default_margin"
android:text="+"
android:textAllCaps="false"
android:textSize="20sp"/>
<Button
android:id="@+id/btn_minus"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/default_margin"
android:text="-"
android:textAllCaps="false"
android:textSize="20sp"/>
<Button
android:id="@+id/btn_multiply"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/default_margin"
android:text="x"
android:textAllCaps="false"
android:textSize="20sp"/>
<Button
android:id="@+id/btn_divided"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/default_margin"
android:text="/"
android:textAllCaps="false"
android:textSize="20sp"/>
</LinearLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hasil :"
android:textColor="@color/colorWhite"
android:layout_marginTop="@dimen/default_margin"
android:textSize="20sp"/>
<TextView
android:id="@+id/tv_result"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20sp"
android:background="@color/colorWhite"
android:padding="@dimen/editttext_padding"
android:layout_marginTop="10dp"
android:text="0"/>
</LinearLayout>
</RelativeLayout>
Berikut adalah hasil tampilan dari xml yang telah kita buat.
Tag pertama kali yang memiliki atribut
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
pada umumnya merupakan parent layout. Dalam konteks ini, parent layout-nya adalah <RelativeLayout>…</RelativeLayout>. Layout tersebut diisi dengan Layout dan View yang menjadi child-nya, yaitu LinearLayout. LinearLayout juga menjadi parent dari EditText, LinearLayout, dan TextView. Ilustrasi dari hirarki tampilan tersebut adalah sebagai berikut.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
…
android:background="@color/colorGray"
tools:context=".MainActivity">
Pada atribut background, nilai yang digunakan direferensikan dari nilai colors yang kita tambahkan sebelumnya di file colors.xml. @values_name/values adalah cara pemanggilan values yang kita buat sevelumnya, contohnya seperti di atas (@color/colorGray), atau jika memanggil dimens, gunakan @dimen/[nama_value], dan strings maka @string/[nama_value].
Membuat fungsi pada aktivitas MainActivity
Disini kita akan menghubungkan layout dengan aktivitas. Hal ini secara default sudah dibuat saat membuat aktivitas baru. Pada aktivitas tersebut, view sudah dibuat secara otomatis, dengan fungsi setContentView(R.layout.activity_main) dan pada layout tersebut juga sudah ada atribut tools:context:”.MainActivity”
Sekarang, kita akan menghubungkan view dari layout tersebut ke dalam aktivitas agar user dapat berinteraksi dengan baik dengan aktivitas tersebut.
Inisialisasikan view yang kita gunakan, seperi button, edittext, dan textview.
private EditText etFirstNum, etSecondNum;
private Button btnAdd, btnMinus, btnMultiply, btnDivided;
private TextView tvResult;
Kemudian hubungkan masing-masing variabel tersebut dengan view-nya di file layout.
etFirstNum = findViewById(R.id.et_first_number);
etSecondNum = findViewById(R.id.et_second_number);
btnAdd = findViewById(R.id.btn_add);
btnMinus = findViewById(R.id.btn_minus);
btnMultiply = findViewById(R.id.btn_multiply);
btnDivided = findViewById(R.id.btn_divided);
tvResult = findViewById(R.id.tv_result);
Agar fungsi penjumlahan, pengurangan, perkalian dan pembagian dapat berjalan, kita akan membuat fungsinya.
private double add(double firstNum, double secondNum){
return firstNum + secondNum;
}
private double minus(double firstNum, double secondNum){
return firstNum - secondNum;
}
private double multiply(double firstNum, double secondNum){
return firstNum * secondNum;
}
private double divided(double firstNum, double secondNum){
return firstNum / secondNum;
}
variabel firstNum dan secondNum berisi nilai input yang kita berikan pada kedua input text (Edittext). Nilai tersbut kita peroleh dari kode etFirstNum.getText().toString()
dan etSecondNum.getText().toString().
Nilai yang diperoleh masih berupa string sehingga kita perlu mengubah string tersebut (melakukan cast) menjadi double agar dapat melakukan kalkulasi dengan cara Double.parseDouble(etSecondNum.getText().toString()).
Dalam hal ini, kalkulasi belum dapat dilakukan karena button belum di-set jika ada aksi klik dari user sehingga perlu ditambahkan :
btnAdd.setOnClickListener(this);
btnMinus.setOnClickListener(this);
btnMultiply.setOnClickListener(this);
btnDivided.setOnClickListener(this);
dengan meng-implements View.OnClickListener pada MainActivity.
public class MainActivity extends AppCompatActivity implements View.OnClickListener
sehingga kita harus melakukan override fungsi onClick(View view), kemudian tambahkan fungsi berikut agar setiap tombol yang diklik berjalan dengan baik.
@Override
public void onClick(View view) {
if (etFirstNum.getText().toString().isEmpty()){
etFirstNum.setText("0");
}
if (etSecondNum.getText().toString().isEmpty()){
etSecondNum.setText("0");
}
double firstNum = Double.parseDouble(etFirstNum.getText().toString());
double secondNum = Double.parseDouble(etSecondNum.getText().toString());
switch (view.getId()){
case R.id.btn_add :
result=add(firstNum, secondNum);
break;
case R.id.btn_minus :
result=minus(firstNum, secondNum);
break;
case R.id.btn_multiply:
result=multiply(firstNum, secondNum);
break;
case R.id.btn_divided:
result=divided(firstNum, secondNum);
}
tvResult.setText(String.valueOf(result));
}
Kode tvResult.setText(String.valueOf(result)); bertujuan untuk menampilkan hasil kalkulasi ke dalam TextView result.
Jika digabungkan, isi MainActivity akan menjadi seperti ini.
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private EditText etFirstNum, etSecondNum;
private Button btnAdd, btnMinus, btnMultiply, btnDivided;
private TextView tvResult;
private double result=0;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
setInit();
}
private void setInit(){
etFirstNum = findViewById(R.id.et_first_number);
etSecondNum = findViewById(R.id.et_second_number);
btnAdd = findViewById(R.id.btn_add);
btnMinus = findViewById(R.id.btn_minus);
btnMultiply = findViewById(R.id.btn_multiply);
btnDivided = findViewById(R.id.btn_divided);
tvResult = findViewById(R.id.tv_result);
btnAdd.setOnClickListener(this);
btnMinus.setOnClickListener(this);
btnMultiply.setOnClickListener(this);
btnDivided.setOnClickListener(this);
}
@Override
public void onClick(View view) {
if (etFirstNum.getText().toString().isEmpty()){
etFirstNum.setText("0");
}
if (etSecondNum.getText().toString().isEmpty()){
etSecondNum.setText("0");
}
double firstNum = Double.parseDouble(etFirstNum.getText().toString());
double secondNum = Double.parseDouble(etSecondNum.getText().toString());
switch (view.getId()){
case R.id.btn_add :
result=add(firstNum, secondNum);
break;
case R.id.btn_minus :
result=minus(firstNum, secondNum);
break;
case R.id.btn_multiply:
result=multiply(firstNum, secondNum);
break;
case R.id.btn_divided:
result=divided(firstNum, secondNum);
}
tvResult.setText(String.valueOf(result));
}
private double add(double firstNum, double secondNum){
return firstNum + secondNum;
}
private double minus(double firstNum, double secondNum){
return firstNum - secondNum;
}
private double multiply(double firstNum, double secondNum){
return firstNum * secondNum;
}
private double divided(double firstNum, double secondNum){
return firstNum / secondNum;
}
}
Nah, jika sudah lengkap, sudah waktunya untuk
menjalankan aplikasi yang Kalkulator Sederhana kita.
Comments
Post a Comment