Materi PMBO Bab 2 Kelas XII RPL: Merancang User Interface Part 4

September 22, 2024

F. Mengenal ActionListener Java

Secara singkat, pengertian ActionListener adalah sebuah teknik untuk mengeksekusi sebuah perintah yang ditimbulkan karena adanya aktivitas pada komponen class (AWT atau Swing). Dalam pemrograman objek, disebut pula dengan istilah event-driven atau sebuah efek yang ditimbulkan karena efek aktivitas tertentu. Untuk mengimplementasi ActionListener dalam Java dibutuhkan sebuah method untuk mengimplementasikannya, yaitu menggunakan ActionPerformed (), serta meng-import library java.awt.event.*.

Perhatikan kode program berikut.

1. import java.awt.*;

2. import java.awt.event.*;

4. public class kali_kali extends Frame

implements ActionListener{

5. TextField tf1, tf2, tf3;

6. Button b1;

8. kali_kali () {

10. tf1 = new TextField ();

11. tf1.setBounds (50, 50, 150, 20);

12. tf2 = new TextField ();

13. tf2.setBounds (50, 100, 150, 20);

14. tf3 = new TextField ();

15. tf3.setBounds (50, 150, 150, 20);

16. tf3.setEditable (false);

17. b1 = new Button ("LUAS SEGI PANJANG");

18. b1.setBounds (50, 200, 200, 50);

19. b1.addActionListener (this);

20.

21. add(tf1);

22. add(tf2);

23. add(tf3);

24. add(b1);

25. setSize (300, 300);

26. setLayout (null);

27. setVisible (true);

28. }

29.

30. public void actionPerformed (ActionEvent e) {

31. String s1 = tf1.getText ();

32. String s2 = tf2.getText ();

33. int a = integer.parseInt (s1);

34. int b = integer.parseInt (s2);

35. int c = 0 ;

36. c = a * b;

37. String result = String.valueOf (c);

38. tf3.setText (result);

39. }

40.

41. public static void main (String [] args) {

42. new kali_kali ();

43. }

44. }

Hasil kompilasi kode program tersebut adalah sebagai berikut.

Versi JStudio

1). Kode program.

2). Hasil kompilasi kode program.

G. Desain User Interface dengan Editor Berbasis IDE Java

Selain menggunakan basis text coding dalam mendesain tampilan program, programmer dapat pula mendesain tampilan dengan menggunakan komponen yang telah disediakan oleh aplikasi text editor Java, antara lain NetBeans dan Java-Editor. Dengan menggunakan aplikasi desain secara langsung, akan membantu programmer dalam melakukan desain tampilan program. Dalam IDE atau Integrated Development Environment, programmer dapat secara langsung memasukkan komponen yang dibutuhkan dan akan secara otomatis membentuk ActionListener. Hal inilah yang dalam pemrograman visual disebut dengan event-driven.

Bagian yang harus dipahami oleh desainer tampilan program dalam menggunakan editor berbasis IDE adalah sebagai berikut.

1. Project Explorer

Project Explorer merupakan bagian yang berfungsi menampilkan project yang sedang dibuat.

2. Lembar Kerja Desain

Lembar kerja desain dalam IDE editor merupakan bagian penting dalam desain aplikasi.

3. Palette Component

Palette Component adalah bagian yang memungkinkan programmer memilih komponen-komponen yang akan dipasangkan di lembar kerja atau frame.

4. Lembar Source Code

Adalah bagian untuk programmer mengimplementasikan kode program yang dibutuhkan.

H. Membuat Project Sederhana dengan Editor IDE Java

Untuk membuat sebuah program sederhana dengan menggunakan Java IDE sangat mudah.

Berikut contoh membuat desain aplikasi sederhana menggunakan NetBeans.

1. Persiapkan sebuah project dengan nama teguh_XIRPLA atau nama lainnya.

2. Buatlah sebuah paket dalam project tersebut dengan nama Latihan.

3. Selanjutnya, tambahkan frame di dalamnya dengan klik kanan dan pilih JFrame Form.

4. Berilah nama frame tersebut Luas_Persegi.

5. Setelah itu, klik Finish.

6. Masukkan komponen dan ubahlah teks dan label pada komponen tersebut.

Catatan:

a. Komponen yang diambil dari AWT palette.

b. Untuk mengubah property komponen tersebut lakukan dengan cara klik kanan pada komponen, pilih Properties, kemudian ubahlah property pada setiap komponen.

7. Double click pada tombol PROSES, lalu tambahkan syntax berikut.

8. Jalankan program dengan memilih Run. Untuk melakukan penghitungan luas persegi panjang menggunakan program tersebut, masukkan Nilai Panjang dan Nilai Lebar. Setelah itu, klik PROSES untuk menghitung luas persegi panjang.

I. Mengenal Android Studio

Android adalah sebuah sistem operasi mobile (mobile operating system) yang dikembangkan melalui sistem operasi Linux. Saat ini, Android telah menjadi salah satu sistem operasi yang andal, serta banyak digunakan oleh para pengembang software atau software developer.

Untuk membuat sebuah aplikasi Android, dibutuhkan sebuah tools pengembang Android. Salah satu tools Android IDE yang cukup andal dan sering digunakan adalah Android Studio. Untuk melakukan instalasi Android Studio, Anda memerlukan komputer dengan spesifikasi sistem minimal sebagai berikut.

1. Sistem Operasi.

a. Microsoft® Windows® 8/7/Vista/2003 (32 atau 64 bit)

b. Mac OS X 10.10 (Yosemile) atau lebih tinggi, sampai dengan 10.14 (Mojave)

C. GNOME atau KDE desktop

2. Software pendukung.

a. Java JDK5 atau versi terakhir

b. Java Runtime Environment (JRE) 6

C. Android Studio yang dapat diunduh dari situs resmi pengembang Android secara online (https://developer. android.com/studio)

3. Spesifikasi lainnya.

a. RAM minimal 4 GB, disarankan 8 GB

b. Ruang penyimpanan minimal 2 GB, disarankan 4 GB (500 MB untuk IDE dan 1,5 GB untuk Android SDK dan emulator)

C. Resolusi layar minimal 1280 x 800 piksel

1. Instalasi Android Studio

Seperti sebuah aplikasi pengembang dengan basic desktop lainnya, Android Studio perlu diinstal ke komputer yang akan digunakan untuk mengembangkan software. Langkah-langkah instalasi Android Studio adalah sebagai berikut.

a. Jalankan Android Studio dengan double click file instalasi Android Studio.

b. Tunggu beberapa saat hingga terlihat tampilan awal instalasi Android Studio. Selanjutnya, klik Next untuk memulai proses instalasi.

c. Selanjutnya, akan muncul tampilan pilihan komponen yang akan diinstal pada Android Studio. Beri tanda centang pada komponen yang ingin diinstal. Pada tutorial ini, beri tanda centang pada semua komponen, kemudian klik Next.

d. Setelah itu, muncul tampilan License Agreement, klik I Agree untuk melanjutkan proses instalasi.

e. Selanjutnya, aturlah direktori instalasi Android Studio dan Android Studio SDK.

f. Langkah selanjutnya adalah melakukan setting emulator Android Studio.

g. Jika emulator telah terpasang, langkah selanjutnya adalah instalasi aplikasi yang berjalan secara otomatis.

h. Jika instalasi sudah selesai, klik Finish.

i. Saat menggunakan atau menjalankan aplikasi Android Studio, akan tampil halaman update materi Android Component. Oleh karena itu, salah satu syarat untuk menggunakan Android Studio adalah terhubung dengan jaringan internet agar dapat melakukan update, upload, atau compile materi Android.

2. Mengenal Struktur Pemrograman Android

Berikut adalah struktur pemrograman dan penyimpanan folder terkait dalam Android Studio.

Penjelasan struktur program Android Studio adalah sebagai berikut.

a. Java

Bagian ini digunakan untuk menyimpan file-file yang berisi source code Java yang dibuat oleh programmer dan dipisahkan berdasarkan nama package. Bagian utama dari program akan disimpan dalam file MainActivity.java. Bentuk default dari MainActivity.java adalah sebagai berikut.

1. package com.example.myapplication

3. import android.os.Bundle

4. import com.google.android.material.

snackbar. Snackbar

5. import androidx.appcompat.app. AppCompatActivity

6. import android.view.Menu

7. import android.view.MenuItem

9. importkotlinx.android.synthetic.

main.activity_main.*

10.

11. class MainActivity: AppCompatActivity() {

12.

13. override fun onCreate(savedInstanceState: Bundle?){

14. super.onCreate(savedInstanceState)

15. setContentView(R.layout.activity_main)

16. set SupportActionBar (toolbar)

17.

18. fab.setOnClickListener {

19. view ->

20. Snackbar.make (view, "Replace with your own action", Snackbar.LENGTH_LONG)

21. setAction("Action", null).show()

22. }

23. }

24. override fun onCreateOptionsMenu (menu: Menu): Boolean {

25. menuInflater.inflate

(R.menu.menu_main, menu)

26. return true

27. }

28.

29. override fun onOptionsItemSelected(item: MenuItem): Boolean (

30. return when (item.itemId) {

31. R.id.action_settings -> true

32. else -> super.onOptionsItemSelected(item)

33. }

34. }

35. }

b. res/drawable-hdpi

Bagian ini merupakan folder untuk menyimpan drawable object atau desain dari objek yang dibuat dalam format .jpg atau .png.

c. res/layout

Bagian ini merupakan folder untuk menyimpan file-file user interface.

d. res/menu

Bagian ini merupakan folder untuk menyimpan file XML yang membentuk menu dari aplikasi.

e. res/mipmap

Bagian ini merupakan folder yang dikhususkan untuk menyimpan ikon aplikasi.

f. res/values

Bagian ini digunakan untuk menyimpan file XML, seperti colors, dimens, strings, dan styles.

Berikut adalah penjelasan dari masing-masing file tersebut.

1). colors.xml

colors.xml digunakan untuk mengatur warna dari status bar, teks, dan pengaturan warna lainnya. Bentuk default dari colors.xml adalah sebagai berikut.

<?xml version="1.0" encoding="utf-8"?>

<color name="colorPrimary">#008577</

color>

<color name="colorAccent">#DB1B60</

color>

</resources>

2). dimens.xml

dimens.xml digunakan untuk mengatur margin aplikasi yang dibuat. Bentuk default dari dimens.xml adalah sebagai berikut.

<</resources>

3). strings.xml

strings.xml digunakan untuk mengatur teks dari aplikasi yang dibuat. Bentuk default dari strings.xml adalah sebagai berikut.

<string name="app_name">My

Application</string>

<string name="action_

settings">Settings</string>

</resources>

4). styles.xml

styles.xml digunakan untuk memberi nama pada warna setelah dimasukkan (mix color) atau setelah warna di-setting pada colors.xml. Bentuk default dari styles.xml adalah sebagai berikut.

AppCompat.Light.DarkActionBar">

<item name="colorPrimary">@color/

colorPrimary</item>

<item name="colorPrimaryDark">@color/

colorPrimary Dark</item>

<item name="colorAccent">@color/

colorAccent</item>

</style>

<item name="windowActionBar">false</

item>

</style>

parent="ThemeOverlay.AppCompat.Dark.

ActionBar" />

</resources>

5). AndroidManifest.xml

AndroidManifest.xml merupakan tempat menyimpan manifest aplikasi, karakter, atau jenis dari aplikasi yang terdiri atas application name, icon, theme, dan user permission. Bentuk default dari AndroidManifest.xml adalah sebagai berikut.

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.

android.com/apk/res/android" package="com. example.myapplication">

<application

android:allowBackup="true"

android:icon="@mipmap/ic_launcher"

android:label="@string/app_name"

android:roundIcon="@mipmap/ic_launcher

round"

android:supportsRtl="true"

android:theme="@style/AppTheme">

<activity

android:name=".MainActivity"

android:label="@string/app_name"

android:theme="@style/AppTheme.

NoActionBar">

<intent-filter>

<action android:name="android.intent.

action.MAIN" />

<category android:name="android.intent.

category.LAUNCHER " />

</intent-filter>

</activity>

</application>

</manifest>

6). build.gradle

build.gradle adalah tempat menyimpan file project yang telah ter-generate atau terkompilasi, antara lain compileSdkVersion, buildTools Version, applicationid, minSdkVersion, targetSdkVersion, versionCode, dan versionName. build.gradle digunakan untuk mengidentifikasi versi OS, SDK, dan library yang akan digunakan dalam aplikasi.

3. Membuat Project Android

Untuk membuat project dengan menggunakan Android Studio, langkah-langkahnya adalah sebagai berikut.

a. Klik File, kemudian New dan pilih New Project. Selanjutnya, pada halaman Welcome to Android Studio, klik Start a new Android Studio project.

b. Pada halaman Create New Project, tentukan nama aplikasi, domain, dan direktori penyimpanan project.

c. Setelah itu, pilih tipe minimal Android SDK yang didukung oleh project yang dikembangkan, kemudian klik Next.

d. Selanjutnya, isikan jenis project (form activity) pada bagian Activity Name, Layout Name, Title, dan Menu Resource Name, kemudian klik Finish.

J. Membuat Aplikasi Android Sederhana

1. Membuat Aplikasi Sederhana dengan Android Studio

Pada tutorial ini, Anda akan membuat aplikasi sederhana untuk menghitung luas persegi panjang. Langkah-langkahnya adalah sebagai berikut.

a. Buatlah sebuah project di Android Studio dengan nama BangunDatar. Selanjutnya, aturlah minimal Android SDK yang didukung, yaitu API 8: Android 2.2 (Froyo).

b. Sebagai langkah awal, Anda akan membuat layout dari aplikasi. Untuk melakukannya, klik menu app → res → layout. Pada menu layout, terdapat dua file, yaitu activity_ main.xml dan content_main.xml. File activity_main.xml digunakan untuk menampilkan bagian luar dari layout, seperti toolbar dan floating bar. Adapun content_main.xml menampilkan bagian isi atau konten dari layout.

c. Untuk mengatur layout pada content_main.xml, klik menu app --> res --> layout --> content_main.xml. Pada menu ini, anda akan membuat layout seperti berikut.

d. Pada layout tersebut, terdapat dua tipe layout yang digunakan, yaitu relative layout dan linear layout. Relative layout adalah desain tampilan aplikasi dengan tata letak (layout) secara bebas sesuai dengan aturan user. Sementara itu, linear layout adalah desain tampilan aplikasi dengan tata letak (layout) horizontal atau vertikal. Desain tampilan hanya dapat dimasukkan secara menyamping (horizontal) atau menurun (vertikal), berbeda dengan relative layout yang dapat dilakukan secara bebas.

e. Pada Gambar 2.56, Anda dapat melihat tampilan Design dari content_main.xml. Anda dapat menambahkan konten layout dengan menarik komponen yang terdapat di menu Pallete di sebelah kiri layar. Aturlah komponen seperti contoh yang ada. Setelah itu, klik Text untuk melihat kode yang dihasilkan.

Kode tersebut dihasilkan dari komponen-komponen yang telah Anda atur sebelumnya. Pada bagian ini, Anda juga dapat menambahkan komponen atau pengaturan dengan menggunakan kode xml. Berikut adalah contoh kode yang dihasilkan.

1. <?xml version="1.0" encoding="utf-8"?>

2. <RelativeLayout xmlns:android="http:// schemas.android.com/apk/res/android"

3. xmlns:tools="http://schemas.android.com/ tools"

4. xmlns:app="http://schemas.android.

com/apk/ res-auto"

5. android:layout_width="match_parent"

6. android:layout_height="match_parent"

7. android:paddingLeft="@dimen/activity_ horizontal_margin"

8. android:paddingRight="@dimen/activity_ horizontal_margin"

9. android:paddingTop="@dimen/activity_

vertical margin"

10. android:paddingBottom="

@dimen/activity_ vertical_margin"

11. app:layout_behavior="@string/appbar_

scrolling view behavior"

12. tools:showIn-"@layout/activity_main" tools:context=".MainActivity">

14. <RelativeLayout

15. android:layout_width="match_parent"

16. android:layout_height="match_parent"

17. android:layout_alignParentTop="true"

18. android:layout_alignParentLeft="true"

19. android:layout_alignParentStart="true">

21. <LinearLayout

22. android:orientation="vertical"

23. android:layout_width="match_parent"

24. android:layout_height="wrap_content"

25. android:id="@+id/linearLayout"

26. android:paddingBottom="32dp"

27. android:layout_centerVertical="true"

android:layout_ce

28. android:layout_alignRight="@+id/clear"

29. android:layout_alignEnd="@+id/clear"> 30.

31. <TextView

32. android:layout_width="wrap_content"

33. android:layout_height="wrap content"

34. android:textAppearance="?android:attr/ textAppearanceMedium"

35. android:text="Panjang"

36. android:id="@+id/textView2"

37. android:layout_centerVertical="true" />

38.

39. <EditText

40. android:layout_width="match_parent"

41. android:layout_height="wrap_content"

42. android:inputType="number

[numberDecimal"

43. android:ems="10"

44. android:id="@+id/inputPanjang"

45. android:layout_gravity="right"

46. android:singleline="true" />

48. <TextView

49. android:layout_width="wrap_content"

50. android:layout_height="wrap_content"

51. android:textAppearance="?android:attr/ textAppearanceMedium"

52. android:text="Lebar"

53. android:id="@+id/textView3"

54. android:layout_CenterVertical="true" />

55.

56. <EditText

57. android:layout_width="match_parent"

58. android:layout_height="wrap_content"

59. android:inputType="number numberDecimal"

60. android:ems="10"

61. android:id="@+id/inputLebar"

62. android:layout_below="@+id/

linearLayout"

63. android:layout_alignParentLeft="true"

64. android:layout_alignParentStart="true"

65. android:layout alignParentRight "true"

66. android:layout_alignParentEnd="true"

67. android:singleLine="true" />

68.

69. <TextView

70. android:layout_width="wrap_content"

71. android:layout_height="wrap_content"

72. android:textAppearance""?android:attr/ textAppearanceMedium"

73. android:text="Luas Persegi Panjang"

74. android:paddingTop" "72dp"

75. android:id="@+id/textView4"

76. android:layout_below="@+id/editText2"

77. android:layout_alignParentLeft="true"

78.android:layout_alignParentStart="true" />

79.

80. <TextView

81. android:layout_width="wrap_content"

82. android:layout_height="wrap_content"

83. android:textAppearance""?android:attr/

textAppearanceLarge"

84. android:text="0"

85. android:layout_gravity="end"

86. android:textAlignment="textEnd"

87. android:textSize="64dp"

88. android:id="@+id/hasil"

89. android:layout_above="@+id/button"

90. android:layout_alignParentLeft="true"

91. android:layout_alignParentStart="true"

92. android:layout alignParentRight="true" 93. android:layout_alignParentEnd="true"

94. android:layout_below="@+id/textView4" />

95.

96. </LinearLayout>

97.

98. <Button

99. android:layout_width="160dp"

100. android:layout_height="wrap_content"

101. android:text="PROSES"

102. android:textColor="#FFFFFF"

103. android:id="@+id/button"

104. android:onClick="hitungLuas"

105. android:background="@color/

colorAccent"

106. android:layout_below="@+id/

linearLayout"

107. android:layout_alignParentLeft="true"

108. android:layout_alignParentStart="true" />

109.

110. <Button

111. android:layout_width="160dp"

112. android:layout_height="wrap_content"

113. android:text="CLEAR"

114. android:textColor="#FFFFFF"

115. android:id="@+id/clear"

116. android:onClick="clearData"

117. android:background="#FFBB33"

118. android:layout_alignTop="@+id/button"

119. android:layout_alignParentRight="true" 120. android:layout_alignParentEnd="true" />

121.

122. </RelativeLayout>

123.

124. </RelativeLayout>

f. Perhatikan pada tombol atau button dengan id "@+id/ button" dan "@+id/clear" tersebut. Terdapat perintah onClick dengan isi hitungLuas dan clearData. Kedua hal tersebut adalah nama method yang akan dipanggil jika tombol tersebut ditekan. Fungsi dari kedua method tersebut akan dijelaskan berikutnya.

g. Pada kode program tersebut, relative layout digunakan sebagai tipe layout yang digunakan sebagai layout dasar dalam pengaturan konten. Adapun linear layout digunakan sebagai layout untuk mengatur letak konten input dan output, yaitu TextView dan EditText. Dengan menggunakan linear layout, konten dapat tersusun secara linear vertikal.

h. Selanjutnya, lakukan pengaturan layout pada activity_main.xml, dengan cara klik menu app --> res --> layout --> activity_main.xml. Pada file ini, akan dilakukan pengaturan toolbar.

i. Setelah itu, klik Text untuk menambahkan kode program dan pengaturan pada tampilan tersebut.

Perhatikan kode program berikut.

1. <?xml version="1.0" encoding="utf-8"?>

2. <android.support.design.widget. CoordinatorLayout

3. xmlns:android="http://schemas.

android.com/ apk/res/android"

4. xmlns:app="http://schemas.android.

com/apk/ res-auto"

5. xmlns:tools="http://schemas.android.com/ tools"

6. android:layout_width="match_parent"

7. android:layout_height="match_parent"

8. android:fitsSystemWindows="true"

9. tools:context=".MainActivity">

10.

11. <android.support.design.widget.

AppBarLayout

12. android:layout_height="wrap_content"

13. android:layout_width="match_parent"

14. android:theme="@style/AppTheme.

AppBarOverlay">

15.

16. <android.support.v7.widget.Toolbar

17. android:id="@+id/toolbar"

18. android:layout_width="match_parent"

19. android:layout_height="?attr/actionBarSize"

20. android:background="?attr/

colorPrimary"

21. app:popupTheme="@style/AppTheme. PopupOverlay" />

22.

23. </android.support.design.widget. AppBarLayout>

24.

25. <include layout="@layout/content_main" />

26.

27. </android.support.design.widget. CoordinatorLayout>

Kode program tersebut digunakan untuk mengatur toolbar, seperti ukuran panjang, lebar, warna, dan style. Perhatikan baris 25 pada kode program tersebut, terdapat perintah <include layout="@layout/ content_main" />. Perintah tersebut digunakan untuk memasukkan layout yang terdapat pada file content_main. xml. Dengan demikian, ketika kedua file layout digabungkan, akan muncul tampilan aplikasi yang dilengkapi toolbar, kolom input user, hasil penghitungan, serta tombol penghitungan dan reset, seperti yang ditunjukkan Gambar 2.53 (Halaman 73).

j. Setelah mengatur layout dari aplikasi, selanjutnya adalah menambahkan kode untuk melakukan penghitungan luas persegi panjang. Pada project structure, klik menu app→java→com.example.user.bangundatar → activity_main. xml.

Berikut adalah kode program untuk MainActivity.java.

1. package com.example.user.bangundatar:

3. import android.os.Bundle;

4. import android.support.design.widget. FloatingActionButton;

5. import android.support.design.widget. Snackbar:

6. import android.support.v7.app.

AppCompatActivity:

7. import android.support.v7.widget.Toolbar/

8. import android.view.View;

9. import android.view.Menu:

10. import android.view.MenuItem;

11. import android.widget.EditText;

12. import android.widget.TextView;

13.

14. public class MainActivity extends AppCompatActivity {

15.

16. private EditText panjang;

17. private EditText lebar:

18. private TextView hasil:

19.

20. @Override

21. protected void onCreate(Bundle savedInstanceState) {

22. super.onCreate(savedInstanceState);

23. setContentView(R.layout.activity_main);

24. Toolbar toolbar (Toolbar) findViewById(R.id.toolbar);

25. setSupportActionBar (toolbar);

26. panjang = (EditText) findViewById(R. id.input Panjang);

27. lebar (EditText) findViewById(R. id.inputLebar);

28. hasil (TextView) findViewById(R. id.hasil);

29.

30. }

32. public void hitungLuas (View v) {

33. String strPanjang panjang.getText(). toString();

34. String strlebar toString(); lebar.getText().

35.

36. float valPanjang Float. parseFloat (strPanjang);

37. float valLebar Float. parseFloat (strLebar);

38.

39. float valHasil valPanjang vallebar:

40.

41. displayLuas (valHasil)/;

42. }

43.

44. public void displayLuas (float valHasil) {

45. String strHasil = "";

46. strHasil = "" + valHasil;

47.

48. hasil.setText(strHasil);

49. }

50.

51. public void clearData (View v) {

52. panjang.setText("");

53. lebar.setText("");

54. hasil.setText("0");

55. }

56.

57.

58. @Override

59. public boolean onCreateOptionsMenu (Menu menu) (

60. // Inflate the menu; this adds items to the action bar if it is present.

61. getMenuInflater().inflate(R.menu.menu_

main, menu);

62. return true;

63. }

64.

65. @Override

66. public boolean onOptionsItemSelected (MenuItem item) {

67. // Handle action bar item clicks here. The action bar will

68. // automatically handle clicks on the Home/Up button, so long

69. // as you specify a parent activity in AndroidManifest.xml.

70. int id item.getItemId();

71.

72. //noinspection SimplifiableIfStatement

73. / if (id R.id.action_settings) {

74. return true;

75. }

76. */

77. return super.onOptionsItemSelected(item);

78. }

79. }

Penjelasan kode program tersebut adalah sebagai berikut.

1). Mendeklarasikan variabel dan komponen user interface yang digunakan pada file content_main.xml.

public class MainActivity extends AppCompatActivity {

private EditText panjang,

private EditText lebar:

private TextView hasil;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Toolbar toolbar (Toolbar) findViewById(R.id.toolbar);

setSupportActionBar (toolbar);

panjang (EditText) findViewById(R. id.inputPanjang):

lebar (EditText) findViewById(R. id.inputLebar);

hasil (TextView) findViewById(R. id.hasil);

}

2). Menambahkan method untuk melakukan penghitungan luas persegi panjang, jika tombol dengan id "@+id/ button" ditekan.

public void hitungLuas (View v) {

String strPanjang toString(); panjang.getText().

String strLebar toString(); lebar.getText().

float valPanjang Float. parseFloat (strPanjang);

float vallebar Float.

parseFloat(strLebar);

float valHasil valPanjang valLebar;

displayLuas (valHasil);

}

3). Menambahkan method untuk menampilkan hasil penghitungan luas persegi panjang.

public void displayLuas (float valHasil) {

String strhasil = "";

strHasil = "" + valHasil;

hasil.setText(strHasil);

}

4). Menambahkan method yang akan mereset kembali kolom input dan hasil penghitungan, jika tombol dengan id "@+id/clear" ditekan.

public void clearData (View v) {

panjang.setText("");

lebar.setText("");

hasil.setText("0");

}

k. Setelah mengatur layout dan menambahkan kode, Anda dapat melakukan beberapa pengaturan tambahan agar aplikasi Anda tampak lebih menarik. Anda dapat mengubah pengaturan warna aplikasi dengan mengeklik menu app → res→ values → colors.xml.

Setelah itu, tambahkan kode program berikut.

<?xml version="1.0" encoding="utf-8"?>

<color name="colorPrimary">#009688</color> <color name="colorPrimaryDark">#00796B</

color>

</resources>

Daftar color name tersebut adalah daftar warna yang digunakan pada program. Contohnya colorPrimary adalah warna yang akan digunakan pada toolbar, colorPrimaryBar adalah warna pada status bar, dan colorAccent adalah warna yang muncul sebagai highlight ketika kolom input (EditText) ditekan. Anda dapat membuat pengaturan warna sendiri dengan menambahkan color name sesuai format yang ada.

i. Anda juga dapat mengubah pengaturan string sehingga tidak harus menulis kembali string yang sama secara berulang. Klik menu app → res → values → strings.xml.

Setelah itu, tambahkan kode berikut.

<string name="app_name">Luas Persegi Panjang</string>

<</resources>

m. Setelah melakukan langkah-langkah tersebut, Pada tutorial berikutnya, Anda akan belajar menjalankan aplikasi tersebut dengan emulator dan perangkat Android secara langsung.

2. Mengaktifkan Android Virtual Device (AVD)

Android Virtual Device atau AVD adalah sebuah komponen yang disediakan oleh Android Studio untuk menjalankan emulator pada komputer. Langkah-langkah konfigurasi AVD adalah sebagai berikut.

a. Klik tombol AVD configuration.

b. Lalu pilih jenis device yyang akan digunakan, kemudian klik Next.

c. Langkah selanjutnya adalah melakukan konfigurasi Android Image. Pilih System Image yang diinginkan kemudian klik Next.

Jika terjadi error pada bagian ini, kunjungi situs http://www.phonearena.com untuk mencari image atau model sistem Android yang sesuai dengan pilihan programmer.

3. Menjalankan Aplikasi dengan Emulator

Untuk mengetahui hasil desain layout project Android yang telah dibuat, lakukan kompilasi pada project. Langkah-langkah untuk mengompilasi desain project Android Studio pada AVD adalah sebagai berikut.

a. Klik tombol Run untuk memulai kompilasi.

b. Pastikan bahwa launch emulator telah terpilih, kemudian klik ok.

c. Hasil dari kompilasi adalah sebagai berikut.

Selain dijalankan melalui emulator, hasil desain dapat pula dijalankan secara langsung pada perangkat Android yang disambungkan dengan komputer. Langkah-langkahnya adalah sebagai berikut.

4. Menjalankan Aplikasi Sederhana pada Perangkat Android

Untuk menjalankan project pada perangkat Android, terlebih dahulu pastikan perangkat memiliki versi sistem operasi Android yang minimal sama dengan versi SDK yang telah diatur sebelumnya. Setelah itu, sambungkan perangkat Android ke komputer dengan menggunakan kabel data.

a. Klik pada tombol Android Device Monitor.

b. Jika perangkat terkoneksi dengan baik, akan tampil pada tab Device.

c. Setelah itu, pilih perangkat yang telah terkoneksi tersebut pada menu Choose a running device.

d. Klik Ok, kemudian secara otomatis hasil desain akan tampil pada perangkat Android yang telah terpasang tersebut.

Muhammad Hujjatul Isdihar

Mhisdihar

Materi PMBO Bab 2 Kelas XII RPL: Merancang User Interface Part 4

Materi PMBO Bab 2 Kelas XII RPL: Merancang User Interface Part 4

F. Mengenal ActionListener Java

Versi JStudio

G. Desain User Interface dengan Editor Berbasis IDE Java

1. Project Explorer

2. Lembar Kerja Desain

3. Palette Component

4. Lembar Source Code

H. Membuat Project Sederhana dengan Editor IDE Java

Catatan:

I. Mengenal Android Studio

1. Instalasi Android Studio

2. Mengenal Struktur Pemrograman Android

a. Java

b. res/drawable-hdpi

c. res/layout

d. res/menu

e. res/mipmap

f. res/values

1). colors.xml

2). dimens.xml

3). strings.xml

4). styles.xml

5). AndroidManifest.xml

6). build.gradle

3. Membuat Project Android

J. Membuat Aplikasi Android Sederhana

1. Membuat Aplikasi Sederhana dengan Android Studio

2. Mengaktifkan Android Virtual Device (AVD)

3. Menjalankan Aplikasi dengan Emulator

4. Menjalankan Aplikasi Sederhana pada Perangkat Android

Follow Us