PEMROGRAMAN
MOBILE
“PEMBUATAN APLIKASI MULTISCREEN”
Disusun Oleh:
Benedikta Bella Adityana 12.12.0080
SI 12 B
Blog: bdcprograming.blogspot.com
STMIK AMIKOM PURWOKERTO
TAHUN 2013/2014
BAB I
MEMBUAT
PROJECT APLIKASI ANDROID
Berikut
ini adalah cara membuat berbagai macam aplikasi android sederhana seperti Kalkulator,
Linear, CheckBox, Listview, TabLayout, ImagesView, dan MultiScreen.
Membuat Project android baru pada Eclipse, langkah-langkahnya
yaitu:
- Setelah masuk ke aplikasi Eclipse, pilih menu File – New – Android Application Project, seperti gambar di bawah ini:
- Setelah itu, pada tampilan seperti di bawah ini, beri nama project android yang akan dibuat. Contoh di bawah ini saya beri nama MultiScreen’Android. Setelah mengubah nama aplikasi dan package sesuai dengan yang diinginkan, klik Next.
- Kemudian secara default akan muncul tampilan seperti di bawah ini. Klik Next
- Pilih icon yang akan mewakili aplikasi yang kita buat. Jika sudah sesuai, klik Next.
- Untuk melanjutkan, klik Next.
- Untuk menyelesaikan pembuatan project baru ini, klik Finish.
- Tampilan project aplikasi kita akan muncul seperti gambar di bawah ini.
- Untuk menjalankan android emulator, pilih menu Windows – Android Virtual Device Manager – pilih device yang telah kita buat – Start – Launch. Maka akan muncul tampilan emulator seperti di bawah ini:
BAB II
MEMBUAT APLIKASI MULTI SCREEN
- Pada activity_main.xml ketikan kode program seperti di bawah ini:
- Maka tampilan pada graphical layout akan menjadi seperti di bawah ini:
- Buat graphical layout menjadi seperti gambar di bawah ini:
- Langkah selanjutnya yaitu membuat form. Pada bagian Package Explorer, pilih src – New – Other – Android – Android Activity – beri nama form-2 pada activity name – Finish.
- Setelah itu, pada ActivityMain.java, ketikan kode program di bawah ini:
<RelativeLayoutxmlns: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">
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="40dp"
android:layout_marginTop="40dp"
android:text="@string/x"/>
</RelativeLayout>
package android.multiscreenandroid;
importandroid.os.Bundle;
importandroid.app.Activity;
importandroid.content.Intent;
importandroid.view.Menu;
importandroid.view.View;
importandroid.widget.Button;
publicclassMainActivityextends Activity {
Button btn1;
@Override
protectedvoidonCreate(Bundle
savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
btn1=(Button)findViewById(R.id.button1);
btn1.setOnClickListener(newView.OnClickListener() {
@Override
publicvoidonClick(View
arg0) {
// TODO Auto-generated method stub
Intent form2=newIntent(getBaseContext(),Form2.class);
startActivity(form2);
}
});
}
@Override
publicbooleanonCreateOptionsMenu(Menu
menu) {
// Inflate
the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
returntrue;
}
BAB III
MEMBUAT APLIKASI KALKULATOR
1. Setelah kita membuat form2 pada project
MutiApp tersebut, buat aplikasi pertama yaitu aplikasi Kalkulator. Pada
activity_form2.xml (package explorer – res – layout – activity_form2.xml) ,
ketikan kode program seperti di bawah ini:
<TableLayout android:orientation="vertical"
android:layout_height="wrap_content"
android:layout_width="fill_parent">
<TableRow android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/tableRow1"
android:layout_weight="1">
<TextView android:id="@+id/textview1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="angka1"></TextView>
<EditText android:text=" "
android:layout_height="wrap_content"
android:id="@+id/angka1"
android:inputType="numberDecimal"
android:layout_width="40dip"></EditText>
</TableRow>
<TableRow android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/tableRow1"
android:layout_weight="1">
<TextView android:id="@+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Angka 2"></TextView>
<EditText android:text=" "
android:layout_height="wrap_content"
android:id="@+id/angka2"
android:layout_width="50dip"></EditText>
</TableRow>
<View android:background="#FF909090"
android:layout_width="wrap_content"
android:id="@+id/view1"
android:layout_height="2dip"></View>
<View android:background="#FF909090"
android:layout_width="wrap_content"
android:id="@+id/view1"
android:layout_height="2dip"></View>
<TableRow android:id="@+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="@+id/tambah"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="50dip"
android:layout_marginTop="7dip"
android:gravity="center_vertical|left"
android:tag="reset
all"
android:text="Tambah"
/>
<Button
android:id="@+id/bagi"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="50dip"
android:layout_marginTop="7dip"
android:gravity="center_vertical|left"
android:tag="reset
all"
android:text="Bagi"
/>
</TableRow>
<TableRow android:id="@+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="@+id/kurang"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="50dip"
android:layout_marginTop="7dip"
android:gravity="center_vertical|left"
android:tag="reset
all"
android:text="Kurang"
/>
<Button
android:id="@+id/kali"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="50dip"
android:layout_marginTop="7dip"
android:gravity="center_vertical|left"
android:tag="reset
all"
android:text="Kali"
/>
</TableRow>
<TableRow
android:id="@+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<Button
android:id="@+id/reset"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="50dip"
android:layout_marginTop="7dip"
android:gravity="left|center_vertical"
android:tag="reset
all"
android:text="Reset"
/>
</TableRow>
<View android:background="#FF909090"
android:layout_width="wrap_content"
android:id="@+id/view1"
android:layout_height="2dip"></View>
<TableRow android:id="@+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView android:id="@+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Hasil :"
android:maxLines="2"
android:textStyle="bold"
android:textSize="15dip"></TextView>
<TextView android:text=""
android:layout_height="wrap_content"
android:id="@+id/hasil"
android:textStyle="bold"
android:textSize="20dip"
android:layout_width="wrap_content"></TextView>
</TableRow>
<TextView android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:maxLines="2"
android:textStyle="bold"
android:textSize="15dip"
android:id="@+id/hemat"
android:gravity="center_horizontal"
android:paddingTop="10dip"></TextView>
</TableLayout>
</RelativeLayout>
1. Pada form2.java (package explorer pilih src –
form2.java ) ketikan kode
program di bawah ini:
public class form2 extends Activity {
EditText angka1, angka2;
TextView hasil;
Editable isiangka1, isiangka2;
Button rset;
Button tmbah;
Button krang;
Button kli;
Button bgi;
@Override
protected void onCreate(Bundle
savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main_tugas_kalkulator);
hasil = (TextView) findViewById(R.id.hasil);
angka1 = (EditText) findViewById(R.id.angka1);
angka2 = (EditText) findViewById(R.id.angka2);
rset = (Button) findViewById(R.id.reset);
rset.setOnClickListener(new itung());
tmbah = (Button) findViewById(R.id.tambah);
tmbah.setOnClickListener(new itung());
krang = (Button) findViewById(R.id.kurang);
krang.setOnClickListener(new itung());
bgi = (Button) findViewById(R.id.bagi);
bgi.setOnClickListener(new itung());
kli = (Button) findViewById(R.id.kali);
kli.setOnClickListener(new itung());
}
private class itung implements OnClickListener{
public void onClick(View v){
try{
switch(v.getId()){
case R.id.tambah:
Double a = Double.parseDouble(angka1.getText().toString());
Double b = Double.parseDouble(angka2.getText().toString());
double hsl= a + b;
DecimalFormat df = new DecimalFormat("@@##");
hasil.setText(df.format(hsl));
break;
case R.id.kurang:
Double c = Double.parseDouble(angka1.getText().toString());
Double d= Double.parseDouble(angka2.getText().toString());
double hsll= c - d;
DecimalFormat dff = new DecimalFormat("@@##");
hasil.setText(dff.format(hsll));
break;
case R.id.kali:
Double e = Double.parseDouble(angka1.getText().toString());
Double f= Double.parseDouble(angka2.getText().toString());
double hslll= e * f;
DecimalFormat dfff = new DecimalFormat("@@##");
hasil.setText(dfff.format(hslll));
break;
case R.id.bagi:
Double g = Double.parseDouble(angka1.getText().toString());
Double h= Double.parseDouble(angka2.getText().toString());
double hsllll= g / h;
DecimalFormat dffff = new DecimalFormat("@@##");
hasil.setText(dffff.format(hsllll));
break;
case R.id.reset:
angka1.setText("");
angka2.setText("");
hasil.setText("");
break;
}
}catch (Exception e){
}
3. Output dari aplikasi
kalkulator pada saat dijalankan adalah seperti di bawah ini:
BAB IV
MEMBUAT APLIKASI LINEAR
1.
Buat satu buah form baru untuk menampung
aplikasi Linear. Pada activity_form3.xml (package explorer – res –
layout – activity_form3.xml) , ketikan kode program seperti di bawah ini:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
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"
>
<RadioGroup
android:id="@+id/orientation"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5px">
<RadioButton
android:id="@+id/horizontal"
android:text="horizontal"/>
<RadioButton
android:id="@+id/vertical"
android:text="vertical"/>
</RadioGroup>
<RadioGroup
android:id="@+id/gravity"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="5px">
<RadioButton
android:id="@+id/left"
android:text="left"/>
<RadioButton
android:id="@+id/center"
android:text="center"/>
<RadioButton
android:id="@+id/right"
android:text="right"/>
</RadioGroup>
</LinearLayout>
1.
Pada
form3.java (package
explorer pilih src – form3.java )
ketikan kode program di bawah ini:
import android.os.Bundle;
import
android.app.Activity;
import
android.view.Gravity;
import android.view.Menu;
import
android.widget.LinearLayout;
import
android.widget.RadioGroup;
import
android.widget.RadioGroup.OnCheckedChangeListener;
public class form3 extends Activity implements
OnCheckedChangeListener {
private RadioGroup orientation, gravity;
@Override
protected void onCreate(Bundle
savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
kontent();
}
public void kontent () {
orientation = (RadioGroup) findViewById(R.id.orientation);
orientation.setOnCheckedChangeListener(this);
gravity = (RadioGroup) findViewById(R.id.gravity);
gravity.setOnCheckedChangeListener(this);
}
@Override
public boolean
onCreateOptionsMenu(Menu menu) {
// Inflate the
menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
@Override
public void onCheckedChanged(RadioGroup arg0, int cinta) {
// TODO Auto-generated method stub
switch (cinta) {
case R.id.horizontal:
orientation.setOrientation(LinearLayout.HORIZONTAL);
break;
case R.id.vertical:
orientation.setOrientation(LinearLayout.VERTICAL);
break;
case R.id.left:
gravity.setGravity(Gravity.LEFT);
break;
case R.id.center:
gravity.setGravity(Gravity.CENTER);
break;
case R.id.right:
gravity.setGravity(Gravity.RIGHT);
break;
}
}
Output dari aplikasi Linear pada saat dijalankan
yaitu seperti gambar di bawah ini:
BAB V
MEMBUAT APLIKASI LIST VIEW & CHECK BOX
LIST VIEW
1.
Buat satu buah form baru untuk menampung
aplikasi ListView. Pada activity_form4.xml (package
explorer – res – layout – activity_form4.xml) , ketikan kode program seperti di
bawah ini:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:id="@+id/yangDipilih"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
<ListView
android:id="@android:id/list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:drawSelectorOnTop="false"
/>
</LinearLayout>
2.
Pada
form4.java (package
explorer pilih src – form4.java )
ketikan kode program di bawah ini:
import android.os.Bundle;
import
android.app.Activity;
import
android.app.ListActivity;
import android.view.Menu;
import android.view.View;
import
android.widget.ArrayAdapter;
import
android.widget.ListView;
import
android.widget.TextView;
import
android.widget.Toast;
public class form4 extends Activity {
TextView seleksi;
String[] pilihan = { "Senin", "Selasa", "Rabu", "Kamis", "Jum'at",
"Sabtu","minggu"};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
setListAdapter(new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1, pilihan));
}
public void onListItemClick(ListView parent, View v, int posisi, long id) {
Toast.makeText(getBaseContext(),
"anda memilih
" + pilihan[posisi], Toast.LENGTH_LONG).show();
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the
menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main,
menu);
return true;
}
Output aplikasi
ListView adalah:
CHECK BOX
1.
Buat
satu buah form baru untuk menampung aplikasi CheckBox. Pada
activity_form5.xml (package explorer – res – layout – activity_form5.xml) ,
ketikan kode program seperti di bawah ini:
<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"
>
<CheckBox
android:id="@+id/check"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/checkBox"
>
</CheckBox>
</RelativeLayout>
2.
Pada
form5.java (package
explorer pilih src – form5.java )
ketikan kode program di bawah ini:
import android.os.Bundle;
import
android.app.Activity;
import android.view.Menu;
import
android.widget.CheckBox;
import
android.widget.CompoundButton;
import
android.widget.CompoundButton.OnCheckedChangeListener;
public class form5 extends Activity implements
OnCheckedChangeListener {
//memesan
variabel
CheckBox cb;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//proses
instansiasi / pencarian id
cb = (CheckBox) findViewById(R.id.check);
//proses set cb
dg checked agr proses centang'a berfungsi
cb.setOnCheckedChangeListener(this);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the
menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
@Override
public void onCheckedChanged(CompoundButton arg0, boolean dicek) {
// TODO Auto-generated method stub
if (dicek){
cb.setText("horree,aku dicentang");
} else {
cb.setText("Aku Tidak di centang;(");
}
}
Output aplikasi Check Box ketika dijalankan
adalah seperti gambar di bawah ini:
BAB VI
MEMBUAT APLIKASI TABLE LAYOUT
1.
Buat satu buah form baru untuk menampung
aplikasi TableLayout. Pada activity_form6.xml (package
explorer – res – layout – activity_form6.xml) , ketikan kode program seperti di
bawah ini:
<TableLayoutxmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/TableLayout1"
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">
<TableRow>
<Button
android:id="@+id/bckbutton"
android:text="Back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</TableRow>
<TableRow>
<TextView
android:text="First Name :"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
/>
<EditText
android:width="100px"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</TableRow>
<TableRow>
<TextView
android:text="Last Name :"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
/>
<EditText
android:width="100px"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</TableRow>
<TableRow>
<Button
android:id="@+id/btnpanjang"
android:text="Button Panjang"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_span="4"
/>
</TableRow>
</TableLayout>
2.
Pada form6.java (package explorer pilih src – form6.java ) ketikan kode program di bawah ini:
import android.os.Bundle;
import
android.app.Activity;
import android.view.Menu;
public class form6 extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the
menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
}
Output aplikasi Table Layout ketika dijalankan yaitu:
BAB VII
MEMBUAT APLIKASI IMAGE VIEW
1.
Buat
satu buah form baru untuk menampung aplikasi ImageView. Pada
activity_form7.xml (package explorer – res – layout – activity_form7.xml) ,
ketikan kode program seperti di bawah ini:
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/TableLayout1"
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"
>
<TableRow>
<RelativeLayout >
<Button
android:id="@+id/view2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="view2"
android:height="75dp"
android:width="135dp"/>
<Button
android:id="@+id/view1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="view1"
android:width="135dp"
android:height="150dp"
android:layout_toRightOf="@id/view2"
/>
<Button
android:id="@+id/view3"
android:text="view3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/view2"
android:height="75dp"
android:width="135dp"/>
</RelativeLayout>
</TableRow>
<TableRow >
<RelativeLayout >
<Button
android:id="@+id/view4"
android:text="view4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:height="80dp"
android:width="270dp"/>
</RelativeLayout>
</TableRow>
<TableRow >
<RelativeLayout >
<Button
android:id="@+id/view5"
android:text="view5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:width="135dp"
android:height="150dp"/>
<Button
android:id="@+id/view6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="view6"
android:height="75dp"
android:width="135dp"
android:layout_toRightOf="@id/view5"/>
<Button
android:id="@+id/view7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="@+id/view6"
android:height="75dp"
android:text="view7"
android:width="135dp"
/>
</RelativeLayout>
</TableRow>
</TableLayout>
Output dari aplikasi
ketika dijalankan yaitu:



















