Laporan praktikum pemrograman visual (Android) ini membahas tentang pembuatan beberapa aplikasi dasar menggunakan bahasa pemrograman Java untuk platform Android. Aplikasi yang dibuat antara lain hello word, date picker, digital clock, dan display image. [/ringkasan]

1. LAPORAN
PRAKTIKUM PEMROGRAMAN VISUAL (ANDROID)
OLEH : ABAS DJUMADI
131311001
TEKNIK INFORMATIKA
POLITEKNIK GORONTALO
2013

2. Apa itu android ?
Android adalah sebuah teknologi yang sangat terkenal saat ini. Salah satu penyebab terkenalnya
teknologi ini karena merupakan teknologi yang menganut paham open source yang artinya semua bisa
mengembangkannya.
Hello Droid
Aplikasi yang akan kita buat petama ini adalah aplikasi yang akan memunculkan kata Hello Droid.
Untuk menampilkan kata Hello Droid sangatlah mudah, karena kita hanya perlu membuat android
project baru dan mengganti string Hello Word menjadi Hello Droid. Adapun langkah-langkah
membuat project android adalah sebagai berikut :
1. Buka Eclipse
2. Klik File > New > Other > Android > Android Aplication Project
3. Klik Next

3. 4. Silahkan tentukan nama aplikasinya, nama project, dan nama package yang akan kita gunakan
setelah itu klik Next

5. 5. Klik Next

6. 6. Klik Next
7. Pilih Blank Activity dan Klik Next

7. 8. Tentukan Nama Activitinya kemudian klik Finish
9. Langkah selanjutnya ubah value hello_word yang ada dalam file string.xml menjadi Hello
Droid.

8. 10. Jalankan project dengan cara klik kanan pada project tersebut Run As > Android Aplication.
Hasilnya seperti gambar dibawah ini :
Date Time Picker
Date Time Picker merupakan aplikasi android yang memungkinkan kita untuk mengatur tanggal dan
waktu. Namun aplikasi ini masih belum maksimal, karena hasilnya tidak akan mengubah tanggal dan
waktu pada android itu sendiri. Namun ini bisa dijadikan media pembelajaran awal, yang penting kita
sudah tahu bahwa beginilah caranya untuk membuat sebuah aplikasi android untuk tanggal dan waktu.
Adapun langkah demi langkah untuk membuatnya adalah sebagai berikut :
1. Buka Eclipse
2. Klik File > New > Other > Android> Android Application Project

9. 3. Klik Next

10. 4. Ikuti Instruksi gambar diatas kemudian klik Next.

11. 5. Klik Next

12. 6. Klik Next

13. 7. Pilih dan klik Blank Activity kemudian klik Next

14. 8. Ganti Acitivity Namenya sesuai yang terlihat pada gambar diatas dan klik Finish
Setelah propses pembuatan project selesai, sekarang kita akan mengedit file
activity_date_time_picker.xml yang ada didalam folder res>layout

15. File ini tidak mutlak dengan nama tersebut tergantung nama apa yang kita masukkan pada Layout
Name.
activity_date_time_picker.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<Button
android:id="@+id/datepickerbutton"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="DatePicker"/>
<Button
android:id="@+id/timepickerbutton"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="TimePicker"/>
</LinearLayout>
Pada Graphical Layout akan terlihat seperti gambar dibawah ini :
Setelah itu kita akan mengubah isi DateTimePicker.java yang ada dalam src. Pahamilah gambar
dibawah ini :

16. DateTimePicker.java
package abas.android.datetimepicker;
import java.util.Calendar;
import abas.android.datetimepicker.DateTimePicker;
import abas.android.datetimepicker.R;
import android.app.Activity;
import android.app.DatePickerDialog;
import android.app.Dialog;
import android.app.TimePickerDialog;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.DatePicker;
import android.widget.TimePicker;
import android.widget.Toast;
public class DateTimePicker extends Activity {
private int myYear, myMonth, myDay, myHour, myMinute;
static final int ID_DATEPICKER=0;
static final int ID_TIMEPICKER=1;
//private static final Context DateTimePicker = null;
//private static final Context TimePicker = null;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_date_time_picker);
Button datePickerButton = (Button)findViewById(R.id.datepickerbutton);
Button timePickerButton = (Button)findViewById(R.id.timepickerbutton);
datePickerButton.setOnClickListener(datePickerButtonOnClickListener);
timePickerButton.setOnClickListener(timePickerButtonOnClickListener);
}
private Button.OnClickListener datePickerButtonOnClickListener
=new Button.OnClickListener(){
public void onClick(View v){
final Calendar c = Calendar.getInstance();
myYear =c.get(Calendar.YEAR);
myMonth =c.get(Calendar.MONTH);
myDay = c.get(Calendar.DAY_OF_MONTH);
showDialog(ID_DATEPICKER);
}
};
private Button.OnClickListener timePickerButtonOnClickListener

17. = new Button.OnClickListener(){
public void onClick(View v){
final Calendar c = Calendar.getInstance();
myHour=c.get(Calendar.HOUR_OF_DAY);
myMinute=c.get(Calendar.MINUTE);
showDialog(ID_TIMEPICKER);
}
};
@Override
protected Dialog onCreateDialog(int id){
switch(id){
case ID_DATEPICKER:
Toast.makeText(DateTimePicker.this,
"-onCreateDialog(ID_DATEPICKER)-",
Toast.LENGTH_LONG).show();
//OnDateSetListener myDateSetListener = null;
return new DatePickerDialog(this,
myDateListener,
myYear, myMonth, myDay);
case ID_TIMEPICKER:
Toast.makeText(DateTimePicker.this,
"-onCreatDialog (ID_TIMEPICKER)",
Toast.LENGTH_LONG).show();
return new TimePickerDialog(this,
myTimeSetListener,
myHour,myMinute,false);
default:
return null;
}
}
private DatePickerDialog.OnDateSetListener myDateListener
= new DatePickerDialog.OnDateSetListener() {
public void onDateSet(DatePicker view, int year, int monthOfYear,
int dayOfMonth) {
// TODO Auto-generated method stub
String date = "Year: " + String.valueOf(year)+"n"
+"Month: "+String.valueOf(monthOfYear+1)+"n"
+"Day :"+String.valueOf(dayOfMonth);
Toast.makeText(DateTimePicker.this, date,
Toast.LENGTH_LONG).show();
}
};
private TimePickerDialog.OnTimeSetListener myTimeSetListener
= new TimePickerDialog.OnTimeSetListener() {
public void onTimeSet(TimePicker view, int hourOfDay, int minute) {
// TODO Auto-generated method stub

18. String time="Hour: "+String.valueOf(hourOfDay)+"n"
+"Minute : "+ String.valueOf(minute);
Toast.makeText(DateTimePicker.this, time,
Toast.LENGTH_LONG).show();
}
};
}
Hasil Runing Program

19. Digital Analog Clock
Pada latihan ini kita akan mencoba membuat program android berupa jam digital dan analog.
Seperti biasa buatlah sebuah project dengan nama yang anda inginkan kemudian pada activitinya isikan
seperti berikut :
activity_analog_clock.xml //nama aktivity
<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=".AnalogClock" >
<AnalogClock
android:id="@+id/analogClock1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="17dp"
android:layout_marginTop="15dp" />

20. <DigitalClock
android:id="@+id/digitalClock1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/analogClock1"
android:layout_marginLeft="19dp"
android:layout_marginTop="52dp"
android:text="DigitalClock" />
</RelativeLayout>
Pada Graphical Layout akan tampak seperti gambar dibawah ini :
Auto link
Pada latihan kali ini saya membuat aplikasi auto link. Untuk membuat aplikasi auto link kita
tidak perlu lagi untuk membuka eclips baru, kita hanya perlu membuat project baru. Adapun untuk
pembutan project baru sudah saya jelaskan pada postingan saya sebelumnya pada pembuatan Date and
Time Picker. Nah teman-teman masih ingatkah pembuatan project baru ? Hhmmm..... jika teman-teman
sudah pada lupa silahkan klik pada link ini :)
Nah setelah membuat project baru kita langsung saja pada pemasukan codingnya. Masukkan
coding berikut pada activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

21. android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Who are you?"
/>
<EditText
android:id = "@+id/whoareyou"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Phone number is?"
/>
<EditText
android:id = "@+id/phonenumberIs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="email is?"
/>
<EditText
android:id = "@+id/emailIs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="web Site is?"
/>
<EditText
android:id = "@+id/websiteIs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<TextView

22. android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="address is?"
/>
<EditText
android:id = "@+id/addressIs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="right|bottom"
>
<Button
android:id = "@+id/ok"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="OK" />
<Button
android:id = "@+id/cancel_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cancel" />
</LinearLayout>
</LinearLayout>
Setelah itu masukkan coding berikut pada class AutoLink.java pastikan nama Packege dan Class pada
project AutoLink sama seperti yang ada pada coding berikut ini :
package android.autoLink;
import com.example.autolink.R;
import android.app.Activity;
import android.os.Bundle;
import android.widget.Button;
import android.widget.TextView;
import android.widget.EditText;
import android.view.View;
public class AutoLink extends Activity {
private
Button okButton;

23. Button cancel1Button;
EditText textName;
EditText textPhonenumberIs;
EditText textEmailIs;
EditText textWebsiteIs;
EditText textAddressIs;
Button backButton;
Button cancel2Button;
TextView nameField;
TextView phonenumberField;
TextView emailField;
TextView websiteField;
TextView addressField;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
startLayout1();
}
private Button.OnClickListener okOnClickListener =
new Button.OnClickListener(){
public void onClick(View v) {
textName = (EditText) findViewById(R.id.whoareyou);
CharSequence textName_value = textName.getText();
textPhonenumberIs =
(EditText) findViewById(R.id.phonenumberIs);
CharSequence textPhonenumberIs_value =
textPhonenumberIs.getText();
textEmailIs = (EditText) findViewById(R.id.emailIs);
CharSequence textEmailIs_value = textEmailIs.getText();
textWebsiteIs = (EditText) findViewById(R.id.websiteIs);
CharSequence textWebsiteIs_value = textWebsiteIs.getText();
textAddressIs = (EditText) findViewById(R.id.addressIs);
CharSequence textAddressIs_value = textAddressIs.getText();
startLayout2();
nameField = (TextView) findViewById(R.id.whoareyou);
nameField.setText("Hello "+textName_value);
phonenumberField = (TextView) findViewById(R.id.phonenumberIs);
phonenumberField.setText("Phone Number: "
+textPhonenumberIs_value);
emailField = (TextView) findViewById(R.id.emailIs);
emailField.setText("Email: "+textEmailIs_value);
websiteField = (TextView) findViewById(R.id.websiteIs);
websiteField.setText("Website: "+textWebsiteIs_value);

24. addressField = (TextView) findViewById(R.id.addressIs);
addressField.setText("Address: "+textAddressIs_value);
}
};
private Button.OnClickListener backOnClickListener =
new Button.OnClickListener(){
public void onClick(View v) {
startLayout1();
}
};
private Button.OnClickListener cancelOnClickListener =
new Button.OnClickListener(){
public void onClick(View v) {
finish();
}
};
private void startLayout1(){
setContentView(R.layout.activity_main);
okButton = (Button) findViewById(R.id.ok);
okButton.setOnClickListener(okOnClickListener);
cancel1Button = (Button) findViewById(R.id.cancel_1);
cancel1Button.setOnClickListener(cancelOnClickListener);
};
private void startLayout2(){
setContentView(R.layout.activity_main);
backButton = (Button) findViewById(R.id.cancel_1);
backButton.setOnClickListener(backOnClickListener);
cancel2Button = (Button) findViewById(R.id.cancel_1);
cancel2Button.setOnClickListener(cancelOnClickListener);
};
}
Setelah semua coding di masukkan ssekarang kita akan memulai untuk menjalankan aplikasi tadi
dengan cara klik kanan pada project yang telah di buat kemudian pilih Run As > Run Configuration,
kemudian pada jendela Run Configuration maka silahkan pilih saja Run. Maka hasilnya akan seperti
berikut ini :

25. Display Image
Pada latihan kali ini saya membuat aplikkasi Display Image, dimana sesuai dengan namanya yaitu
Display Image maka aplikasi ini berfungsi untuk menampilkan gambar pada android. Karena untuk
pembuatan project baru saya rasa teman-teman sudah pada tahu maka kita langsung saja pada
pemasukkan coding pada pembuatan aplikasi ini.
Masukkan coding berikut pada jendela activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/gridview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"

26. android:columnWidth="90dp"
android:stretchMode="columnWidth"
android:gravity="center"
/>
Kemudian masukkan coding berikut pada class.java dan pastikan nama package dan class sama seperti
yang terdapat pada coding berikut ini
package abas.android.displayimage;
import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.Toast;
import android.widget.AdapterView.OnItemClickListener;
public class MainActivity extends Activity {
Integer[] imageIDs = {
R.drawable.pic1,
R.drawable.pic5,
R.drawable.pic7,
R.drawable.pic11,
R.drawable.pic14,
R.drawable.pic15,
R.drawable.pic17,
R.drawable.pic18,
R.drawable.pic19,
R.drawable.pic22,
R.drawable.pic23,
R.drawable.pic24,
R.drawable.pic26,
R.drawable.pic27,
R.drawable.pic29,
R.drawable.pic30,
R.drawable.pic31,
R.drawable.pic32,

27. R.drawable.pic33,
R.drawable.pic34,
R.drawable.pic35,
R.drawable.pic36
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
GridView gridView = (GridView) findViewById(R.id.gridview);
gridView.setAdapter(new ImageAdapter(this));
gridView.setOnItemClickListener(new OnItemClickListener()
{
public void onItemClick(AdapterView parent,
View v, int position, long id)
{
Toast.makeText(getBaseContext(),
"pic" + (position + 1) + " selected",
Toast.LENGTH_SHORT).show();
}
});
}
public class ImageAdapter extends BaseAdapter
{
private Context context;
public ImageAdapter(Context c){
context=c;
}
@Override
public int getCount() {
// TODO Auto-generated method stub
return imageIDs.length;
}
@Override
public Object getItem(int position) {
// TODO Auto-generated method stub
return position;
}
@Override

28. public long getItemId(int position) {
// TODO Auto-generated method stub
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
// TODO Auto-generated method stub
ImageView imageView;
if(convertView==null){
imageView = new ImageView(context);
imageView.setLayoutParams(new GridView.LayoutParams(85,85));
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setPadding(5, 5, 5, 5);
} else {
imageView=(ImageView)convertView;
}
imageView.setImageResource(imageIDs[position]);
return imageView;
}
}
}
Setelah semuanya selesai dan tidak terdapat error maka hasil runningnya akan seperti pada gambar
berikut :

29. GOOD LUCK !