Asslamu’alakum wr. Wb.
Ketemu lagi dipostingan selanjutnya.. yaitu membuat
aplikasi dengan menggunakan eclipse. Kali ini saya akan membuat aplikasi “Rumus
Skala Peta”. Gunanya untuk membantu
menghitung dalam pelajaran matematika, yaitu perhitungan pengukuran
skala peta. Berikut adalah tutorial cara membuat aplikasinya.
1. Buka aplikasi android Android Developer Tools/eclipse
2. Kemudian pilih tempat
penyimpanannya, disini saya simpan di folder android adt di Local Disk (C:)
3. Selanjutnya kita akan buat project baru,
caranya klik New >
Android Application Project
4. Beri nama aplikasi/nama project, disini
saya beri nama Nurmala_SkalaPeta,
klik Next
5. Pilih salah satu dari Image, Clipart, dan Text.
Disini saya memilih Clipart,
kemudian klik Choose dan pilih clipart yang diinginkan, klik Next
6. Kemudian akan muncul gambar seperti
dibawah ini, pilih Blank Activity,
klik Next
7. Klik Next
8. Setelah selesai membuat project, buat desain
listview nya dengan cara klik palette Composite, lalu pilih ListView engan cara di drag drop ke desain activity nya.
9. Kemudian (source code) pada activity_main.xml nya seperti berikut, biasanya source code seperti
ini sudah muncul dengan sendirinya, jadi kita tidak perlu mengubahnya lagi
Source Code :
<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"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<ListView
android:id="@+id/mala"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
>
</ListView>
</RelativeLayout>
10. Setelah selesai kemudian kita beri source code pada MainActivity.java seperti berikut
Source Code :
package
com.example.nurmala_skalapeta;
import
com.example.fkyuufu.R;
import
android.os.Bundle;
import android.view.Menu;
import
android.app.ListActivity;
import android.graphics.Color;
import
android.view.View;
import
android.content.Intent;
import
android.widget.*;
public class MainActivity extends ListActivity {
@Override
protected void onCreate(Bundle
savedInstanceState) {
super.onCreate(savedInstanceState);
String[] Menu=new String[]{"Skala", "Jarak
Pada Peta", "Jarak Sebenarnya","Exit"};
this.setListAdapter(new
ArrayAdapter<String>(this,
android.R.layout.simple_list_item_single_choice, Menu));
getListView().setBackgroundResource(R.drawable.pt4);
}
protected void
onListItemClick(ListView l, View v, int position,long id){
Object
o=this.getListAdapter().getItem(position);
String
Keyw=o.toString();
Toast.makeText(this, "Anda
Memilih " + Keyw, Toast.LENGTH_LONG).show();
if (o=="Skala"){
Intent intent= new Intent (this, Skala.class);
startActivity(intent);
} else if (o=="Jarak
Pada Peta"){
Intent intent= new Intent (this, Peta.class);
startActivity(intent);
} else if (o=="Jarak
Sebenarnya"){
Intent intent= new Intent (this, Sebenarnya.class);
startActivity(intent);
} else if (o=="Exit"){
this.finish();
}}}
Kodingan else
if disini berfungsi untuk menghubungkan activity ini dengan activity
selanjutnya
11. Disini saya akan membuat tiga activity lagi, dengan cara
klik project yang dibuat (contoh : klik Nurmala_SkalaPeta > src, kemudian klik kanan pada com.example.nurmala_skalapeta,
pilih New > Other > Android
Activity > Next, maka
akan muncul activity baru, activity ini saya beri nama Peta/Peta.java dan akan muncul activity_peta.xml
seperti gambar dibawah ini
Cara membuat textview Jarak Pada Peta, Skala, Jarak Sebenarnya dibuat dengan cara
klik palette Form Widgets pilih TextView, kemudian drag drop, kemudian
buat button hitung dengan cara klik palette
Form Widgets pilih Button/Small cara nya sama seperti membuat
textview
12. Langkah selanjutnya yaitu buat textfield
untuk memasukkan angka, caranya klik palette
Text Fields pilih yang ada angka 42
nya, kemudian drag drop pada desain activity seperti gambar dibawah ini
13. Berikut adalah Screen Shoot dan Source
Code nya :
Screen shoot activity_peta.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"
android:background="@drawable/pt3"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".Peta" >
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="24dp"
android:text="@string/rpeta" />
<EditText
android:id="@+id/pp1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/textView1"
android:layout_alignBottom="@+id/textView1"
android:layout_alignLeft="@+id/cc2"
android:layout_alignParentRight="true"
android:ems="10"
android:inputType="number"
>
<requestFocus />
</EditText>
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/textView2"
android:layout_marginTop="43dp"
android:text="@string/rskala" />
<EditText
android:id="@+id/cc2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/textView3"
android:layout_alignBottom="@+id/textView3"
android:layout_alignRight="@+id/cc3"
android:layout_toRightOf="@+id/textView3"
android:ems="10"
android:inputType="number"
/>
<Button
android:id="@+id/cc4"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/cc2"
android:layout_marginTop="58dp"
android:layout_toRightOf="@+id/textView3"
android:text="@string/rhitung" />
<EditText
android:id="@+id/cc3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/cc4"
android:layout_centerHorizontal="true"
android:layout_marginTop="33dp"
android:ems="10"
android:inputType="number"
/>
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/textView1"
android:layout_below="@+id/pp1"
android:layout_marginTop="44dp"
android:text="@string/rjarak" />
<TextView
android:id="@+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/cc4"
android:layout_toRightOf="@+id/cc2"
android:text="Cm"
/>
<TextView
android:id="@+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/cc3"
android:layout_alignBottom="@+id/cc3"
android:layout_alignLeft="@+id/textView4"
android:text="Cm"
/>
</RelativeLayout>
14. Screen Shoot & Sorce Code pada Peta.java :
Source Code Peta.java :
package
com.example.nurmala_skalapeta;
import
com.example.fkyuufu.R;
import
android.os.Bundle;
import
android.app.Activity;
import
android.view.Menu;
import
android.view.View;
import
android.widget.*;
public class Peta extends Activity {
EditText
edt1;
EditText
edt2;
EditText
edt3;
Button
htg1;
@Override
protected void onCreate(Bundle
savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_peta);
edt1=(EditText)findViewById(R.id.pp1);
edt2=(EditText)findViewById(R.id.cc2);
edt3=(EditText)findViewById(R.id.cc3);
htg1=(Button)findViewById(R.id.cc4);
htg1.setOnClickListener(new
View.OnClickListener() {
@Override
public void onClick(View v)
{
// TODO
Auto-generated method stub
double bil1=Double.parseDouble(edt1.getText().toString());
double bil2=Double.parseDouble(edt2.getText().toString());
double
hasil=bil1/bil2;
edt3.setText(""+hasil);
}
});
}
@Override
public boolean
onCreateOptionsMenu(Menu menu) {
// Inflate the
menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.peta, menu);
return true;
}
}
15. Untuk dua activity lagi saya buat
dengan nama Skala/ Skala.java dan Sebenarnya/Sebenarnya.java caranya
sama dengan membuat activity Peta/Peta.java
16. Setelah selesai membuat activity,
buat source code pada AndroidManifest.xml
seperti berkut
Source Code AndroidManifest.xml :
<?xml version="1.0"
encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.fkyuufu"
android:versionCode="1"
android:versionName="1.0" >
<uses-sdk
android:minSdkVersion="8"
android:targetSdkVersion="18"
/>
<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name="com.example.nurmala_skalapeta.MainActivity"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN"
/>
<category android:name="android.intent.category.LAUNCHER"
/>
</intent-filter>
</activity>
<activity
android:name="com.example.nurmala_skalapeta.Peta"
android:label="@string/title_activity_peta" >
</activity>
<activity
android:name="com.example.nurmala_skalapeta.Sebenarnya"
android:label="@string/title_activity_sebenarnya"
>
</activity>
<activity
android:name="com.example.nurmala_skalapeta.Skala"
android:label="@string/title_activity_skala" >
</activity>
</application>
</manifest>
17. Pembuatan aplikasi selesai, setelah
selesai run aplikasi dengan cara klik kanan pada project Run As >
Run Configuration maka hasilnya akan
tampil seperti dibawah ini
18. Pembuatan aplikasi selesai, semoga
sedikit ilmu ini bermanfaat dan dapat dimengerti
Terimakasih,
Wassalamu’alaikum Wr.Wb
