Membuat Aplikasi Inputan
Membuat Aplikasi Inputan
Membuat Aplikasi Inputan
Oleh:
Putu Adhika Dharmesta 1605551037
Sebuah aplikasi yang baik harus dapat menerima sebuah inputan. Baik itu inputan dari peripheral
ataupun inputan dari pengguna aplikasi tersebut. Aplikasi yang saya buat adalah sebuah aplikasi
data diri yang dapat menerima inputan pengguna melalui keyboard lalu menampilkan hasil inputan
tersebut pada tampilan yang berbeda. Adapun tampilan dari aplikasi saya adalah sebagai berikut.
Gambar 1 memperlihatkan tampilan antarmuka dari aplikasi saya. Terdapat 4 jenis inputan yang
digunakan yaitu edit text, date picker, radio button, dan spinner.
Gambar 2 Date Picker
Gambar 2 merupakan tampilan date picker yang digunakan pada aplikasi ini. Untuk menambahkan
date picker diperlukan untuk menambahkan compile 'com.android.support:design:25.0.0'
pada build gradle project kita.
Gambar 3 Spinner
Gambar 3 merupakan tampilan dari spinner yang sudah dibuat. Untuk membuat spinner kita
perlu membuat sebuah array string pada file string.xml agar dapat menampilkan semua
pilihan yang diinginkan. Semua antarmuka ini dibuat didalam file activity_main.xml.
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Data Diri"
android:textSize="26dp"
android:layout_marginBottom="30dp"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical"
android:paddingLeft="20dp"
android:paddingRight="20dp">
<android.support.design.widget.TextInputLayout
android:id="@+id/layout_nama"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp">
<EditText
android:id="@+id/input_nama"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Nama"/>
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="@+id/layout_email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp">
<EditText
android:id="@+id/input_email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="Email"
android:inputType="textEmailAddress"/>
</android.support.design.widget.TextInputLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/tanggalLahir_textview"
android:paddingRight="15dp"
android:text="Tanggal Lahir"
android:textSize="15dp"
android:layout_marginTop="24dp" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="16dp"
android:orientation="horizontal">
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="15dp"
android:layout_marginRight="20dp"
android:onClick="setDate"
android:text="Atur Tanggal Lahir" />
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="@+id/button1"
android:layout_below="@+id/textView2"
android:layout_marginTop="15dp"
android:text="@string/date_selected"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/gender_textview"
android:paddingRight="15dp"
android:text="Jenis Kelamin"
android:textSize="15dp"
android:layout_marginTop="10dp" />
<RadioGroup
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="@+id/gender_textview"
android:orientation="horizontal">
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/laki-laki_btn"
android:text="Laki-laki"/>
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/perempuan_btn"
android:text="Perempuan"/>
</RadioGroup>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/Agama_textview"
android:paddingRight="15dp"
android:text="Agama"
android:textSize="15dp"
android:layout_marginTop="15dp" />
<Spinner
android:id="@+id/spinner"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_toRightOf="@+id/country"
></Spinner>
<Button
android:id="@+id/simpan_btn"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="25dp"
android:text="SIMPAN"
/>
</LinearLayout>
</LinearLayout>
Kode Program 1 activity_main.xml
Kode program diatas merupakan kode program dari file activity_main.xml. File ini ditujukan
untuk mendesain antarmuka dari tampilan. Untuk proses dibelakangnya dibuat kodingan sebagai
berikut.
package com.example.adhikadharmesta.user_input;
import android.app.DatePickerDialog;
import android.app.Dialog;
import android.content.Context;
import android.content.Intent;
import android.os.Vibrator;
import android.support.design.widget.TextInputLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.EditText;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.Spinner;
import android.widget.TextView;
import android.widget.Toast;
import java.util.Calendar;
import android.widget.DatePicker;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
spinner = (Spinner)findViewById(R.id.spinner);
adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
// masukan adapter ke dalam spinner
spinner.setAdapter(adapter);
spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
@Override
public void onItemSelected(AdapterView<?> parent, View view, int pos,
long l) {
Toast.makeText(getBaseContext(),parent.getItemAtPosition(pos)+"
selected", Toast.LENGTH_LONG).show();
}
@Override
public void onNothingSelected(AdapterView<?> adapterView) {
}
});
//deklarasi intent
Intent i = new Intent(MainActivity.this, data_diri.class);
//deklarasi bundle untuk membawa data ke activity baru
Bundle b = new Bundle();
//memparse setiap variabel
b.putString("parse_nama", var_nama);
b.putString("parse_email", var_email);
b.putString("parse_tanggalLahir", var_tanggalLahir);
b.putString("parse_gender", var_gender);
b.putString("parse_agama", var_agama);
i.putExtras(b);
startActivity(i);
Toast.makeText(getApplicationContext(), "Data Berhasil Disimpan",
Toast.LENGTH_SHORT).show();
}
});
@SuppressWarnings("deprecation")
public void setDate(View view) {
showDialog(999);
//akan menampilkan teks ketika kalendar muncul setelah menekan tombol
Toast.makeText(getApplicationContext(), "Pilih Tangal", Toast.LENGTH_SHORT)
.show();
}
@Override
protected Dialog onCreateDialog(int id) {
// TODO Auto-generated method stub
if (id == 999) {
return new DatePickerDialog(this, myDateListener, year, month, day);
}
return null;
}
private DatePickerDialog.OnDateSetListener myDateListener = new
DatePickerDialog.OnDateSetListener() {
@Override
public void onDateSet(DatePicker arg0, int arg1, int arg2, int arg3) {
// TODO Auto-generated method stub
// arg1 = year
// arg2 = month
// arg3 = day
showDate(arg1, arg2+1, arg3);
}
};
Kode program diatas merupakan kode program MainActivity.java. Setiap kegiatan yang
membutuhkan algoritma dan proses dilakukan disini.. Kode program ini juga berkesinambungan
dengan kode program pada activity lainnya karena pada tombol simpan terdapat perintah intent
untuk mengarah ke activity lainnya.
package com.example.adhikadharmesta.user_input;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.TextView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_data_diri);
Bundle b = getIntent().getExtras();
nama = b.getString("parse_nama");
email = b.getString("parse_email");
tanggalLahir = b.getString("parse_tanggalLahir");
gender = b.getString("parse_gender");
agama = b.getString("parse_agama");
hasil_nama.setText(nama);
hasil_email.setText(email);
hasil_tanggalLahir.setText(tanggalLahir);
hasil_gender.setText(gender);
hasil_agama.setText(agama);
}
}
Kode Program 3 data_diri.java
Kode program diatas merupakan kode program dari file data_diri.java. Terlihat bahwa kode
program menerima parse variabel yang dilakukan pada kode program 2 untuk nantinya
ditampilkan pada file xml yang terhubung pada kode program ini.
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Data Diri"
android:textSize="26dp"
android:layout_marginBottom="80dp"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="180dp"
android:background="#eceff1"
android:orientation="horizontal">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Nama" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Email" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Tanggal Lahir" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Jenis Kelamin" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Agama" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text=":" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text=":" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text=":" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text=":" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text=":" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp">
<TextView
android:id="@+id/hasil_nama"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" />
<TextView
android:id="@+id/hasil_email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" />
<TextView
android:id="@+id/hasil_Tanggal_lahir"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" />
<TextView
android:id="@+id/hasil_gender"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" />
<TextView
android:id="@+id/hasil_agama"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
Kode Program 4 activity_data_diri.xml
Kode program diatas adalah kode program dari file activity_data_diri.xml. Pada kode
program ini akan ditampilkan variabel yang sebelumnya sudah di parse dari kode program
MainActivity.java ke data_diri.java. Namun disini saya menemukan sebuah masalah. Di
program saya mendesain agar setelah tombol simpan di klik maka akan beralih ke halaman yang
lainnya lalu menampilkan hasil dari inputan. Namun kenyataannya pada saat aplikasi dijalankan
dan data sudah diinput oleh pengguna lalu pengguna menekan tombol simpan, yang terjadi adalah
aplikasi langsung keluar sendiri dengan pesan sebagai berikut.
Gambar 4 Pesan Error
Setelah mengisi data diri pada form lalu menekan tombol simpan, maka yang muncul adalah pesan
tersebut. Program akan keluar dan menampilkan pesan error tersebut.