LAPORAN PRAKTIKUM PEMROGRAMAN VISUAL (ANDROID)

OLEH : ABAS DJUMADI 131311001

TEKNIK INFORMATIKAPOLITEKNIK GORONTALO

2013

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 DroidAplikasi 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 Eclipse2. Klik File > New > Other > Android > Android Aplication Project

3. Klik Next

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

5. Klik Next

6. Klik Next

7. Pilih Blank Activity dan Klik Next

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

Droid.

10. Jalankan project dengan cara klik kanan pada project tersebut Run As > Android Aplication. Hasilnya seperti gambar dibawah ini :

Date Time PickerDate 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 Eclipse2. Klik File > New > Other > Android> Android Application Project

3. Klik Next

4. Ikuti Instruksi gambar diatas kemudian klik Next.

5. Klik Next

6. Klik Next

7. Pilih dan klik Blank Activity kemudian klik Next

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

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" />

</ Linea rLayout>

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 :

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

= 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 stubString 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

String time="Hour: "+String.valueOf(hourOfDay)+"\n"+"Minute : "+ String.valueOf(minute);

Toast.makeText(DateTimePicker.this, time, Toast.LENGTH_LONG).show();

}};

}

Hasil Runing Program

Digital Analog ClockPada 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" />

<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"

android:orientation="vertical"android:layout_width="fill_parent"android:layout_height="fill_parent"><TextViewandroid: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"/><TextViewandroid: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"/><TextViewandroid: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"/><TextViewandroid: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

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"/><LinearLayoutandroid: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" /><Buttonandroid: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 {privateButton okButton;

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. */@Overridepublic 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);

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 :

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"

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,

R.drawable.pic33,R.drawable.pic34,R.drawable.pic35,R.drawable.pic36};

@Overrideprotected 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;}

@Overridepublic int getCount() {

// TODO Auto-generated method stubreturn imageIDs.length;

}

@Overridepublic Object getItem(int position) {

// TODO Auto-generated method stubreturn position;

}

@Override

public long getItemId(int position) {// TODO Auto-generated method stubreturn position;

}

@Overridepublic View getView(int position, View convertView, ViewGroup parent) {

// TODO Auto-generated method stubImageView 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 :

GOOD LUCK !