Lanjutan pbo desain user interface dengan editor berbasis ide java
Dengan fasilitas project explorer, programmer dapat memilih atau membuka project yang pernah dibuat dengan cepat.
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.
project yang pernah dibuat dengan cepat.
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.
H. Membuat Project Sederhana dengan Editor IDE Java
Unt Intuk 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 XIRPL
atau nama lainnya. 2. Buatlah sebuah paket dalam project tersebut dengan nam Latihan.
3. Selanjutnya, tambahkan frame di dalamnya dengan klik kanan dan pilih JFrame Form.
4. Berilah nama frame tersebut Luas_Persegi.
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.
Setelah Anda mengikuti langkah-langkah yang dijelaskan sebelumnya, artinya Anda telah dapat membuat sebuah project sederhana yang menerapkan interface pada Java. Untuk meningkatkan kemampuan Anda, cobalah kembangkan project tersebut sesuai keinginan Anda. Anda juga dapat berlatih dengan mengikuti tutorial dan study case yang tersedia di internet.
I Mengenal Android Studio
ndroid adalah sebuah sistem operasi mobile (mobile A Loperating 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 Anda instal. Pada tutorial ini, beri tanda centang pada semua komponen, kemudian klik Next.
package com.example.myapplication
import android.os.Bundle
import com.google.android.material. anackbar
import androidx.appcompat.app.
AppCompatActivity import android.view.Menu
Import android.view.MenuItem
Import kotlink. .android.synthetic.main.
activity main.
11 class MainActivity: AppCompatActivity()
13 override fun Bundle 7) ( onCreate(savedInstanceState
14 super.onCreate(savedInstanceState)
15 setContentView(R.layout.activity main)
16 setSupportActionBar (toolbar)
17 18 fab.setOnClickListener {
view->
19 Snackbar.make (view, "Replace with your on action", Snackbar.LENGTH_LONG)
21.setAction ("Action", null).show()
24 override fun onCreateOptionsMenu (menu: Menu): Boolean (
26 return true
25 menuInflater.inflate(R.menu.menu_main, menu
29 override fun onOptionsItemSelected(item: MenuItem): Boolean (
30 return when (item.itemId) {
31 R.id.action_settings -> true
32 else super.onOptionsItemSelected(item)
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 XL 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"?>
<resources>
<color name="colorPrimary">#008577</
color>
<color name "color Primary Dark">#00574B</
color>
<color name="colorAccent">#D81B60</
color>
</resources>
2) dimens.xml
dimens.xml digunakan untuk mengatur margin aplikasi yang dibuat. Bentuk default dari dimens.xml adalah sebagai berikut.
<resources>
<dimen name "fab_margin">16dp</dimen>
</resources>
3) strings.xml
strings.xml digunakan untuk mengatur teks dari aplikasi yang dibuat. Bentuk default dari strings.xml adalah sebagai berikut.
<resources>
<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.<- Base application theme. cstyle name "AppTheme" parent "Theme.
AppCompat.Light. DarkActionBar">
<customize your theme here. --> <item name "colorPrimary">@color/
colorPrimary</item> <item name="colorPrimary Dark">@color/
colorPrimary Dark</item> citem name "colorAccent">@color/ colorAccent</item>
</style>
<style name="AppTheme. NoActionBar">
<item name "windowActionBar">false</
item>
<item name "windowNoTitle">true</item> </style>
<style name "AppTheme AppBarOverlay" parent "ThemeOverlay.AppCompat.Dark. ActionBar" />
<style name="App Theme. PopupOverlay" parent "ThemeOverlay.AppCompat.Light" />
</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="andruid.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, buildToolsVersion, 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.
Membuat Aplikasi Android Sederhana
P ada subbab sebelumnya, Anda telah belajar mengenal Android Studio, mulai dari kebutuhan sistem, tahapan instalasi, struktur program, hingga membuat project baru.
Pada subbab ini, Anda akan mencoba membuat aplikasi sederhana serta menjalankannya pada emulator dan perangkat Android secara langsung.
J . Membuat Aplikasi Sederhana dengan Android Studio
Setelah Anda memahami cara membuat project baru dengan Android Studio, Anda akan belajar mendesain tampilan dan menambahkan kode pada project Android yang telah Anda buat. 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 appres→ layout. Pada menu layout, terdapat dua file, yaitu activity main.xml dan content_main.xml. File activity_main.xml
digunakan untuk menampilkan bagian seperti toolbar dan floating bar. Adapun menampilkan bagian isi atau konten dari layout.
C Untuk mengatur layout pada content_main.xml, klik menu appres layout content_main.xml. Pada menu ini, Anda akan membuat layout seperti berikut.
d. Pada layout tersebut, terdapat disa tipe layout yang yaitu relative layout dan linear layout. Relative layout adalah desain tampilan aplikasi dengan tata letak itu, linear lovout adalah desain tampilan aplikasi dengan tata letak (layout) horizontal atau vertikal. Desain tampilan hanya dapatun (vertikal), berbed menyamping (horizonlan atau menurun (vercarl) berbeda dengan relative layout yang dapat dilakukan secara
e Pada 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.
chxml version="1.0" encodär xmins
GelativeLayout less.android.com/apk/res/android ans:tools="http://schemas.android.conf
xmlns:app="http://schemas.android.com/ary tools"
ces-auto"
android:layout width="match parent android:layout height="match parent"
android:paddingleft="@dimen/activity horizontal margin"
android:paddingRight="@dimen/activity horizontal margin" android:paddingTop-"@dimen/activity
5
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">
13
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">
20
21 <LinearLayout
22 android:orientation="vertical" 23 android:layout_width="match_parent"
24 android:layout_height="wrap_content"
25 android:id="@+id/linearLayout"
android:layout_centerVertical="true" 26 android:layout_alignRight="8+id/clear"
26 android:paddingBottom="32dp" 27
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"
37 android:layout_centerVertical="true" />
38
36 android:id="@+id/textView2"
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"
akandenidisingiline
47
anartilayout selght-wrap tent
Si android:textAppearance usidrats
textAppearancelledžus
andeeiditext"Lebez
3 androidtids9+id/textView3
St android:layout interesticel trus
EditText
android:isyout width-match parant
se android:layout beight="wrap content" 58 android:input Types numberinumbertecinal
so androidrema "10" 6 android:id="9+id/inputLebar"
42 android:layout below "@+id/linearLayout"
63 android:layout_alignParentLeft"true" is android:layout alignParentStart="true"
65 android:layout alignParentRight-"true" 66 android:layout alignParentEnd="true"
67 android:singleLine="true" />
00 <TextView
70 android:layout_width="wrap_content"
71 android:layout_height="wrap content
72 android:textAppearance="?android:attr/
textAppearanceMedium" 13 android:text="Luas Persegi Panjang"
74 android:paddingTop "72dp"
75 android:id="@+id/textView4"
76 android:layout below="@+id/editText2"
77 androidrlayout alignParentieft="true"
78 android:layout_alignParentStart="true" />
79
80 <TextView
51 android:layout_width="wrap_content"
32 android:layout height="wrap_content"
83 android:textAppearance="android:attr/ textAppearancelarge"
#4 android:text="0"
85 android:layout gravity="end" 16 android:textAlignment="textEnd"
87 android:textSize="64dp"
#8 android:id="@+id/hasil"
19 android:layout_above="@+id/button"
90 android:layout alignParentLeft="true" 91 android:layout alignParentStart="true"
92 android:layout alignParentRight="tdroid:layout alignParentEnd="true" 94 android:layout below="@+id/textView4" />
95
96 </LinearLayout>
97
96 Button
99 android:layout width="160dp" 100 android:layout height="wrap contents
101 android:text="PROSES" 102 android:textColor="#FFFFFF"
103 android:id="@+id/button"
104 androidzonClick="hitunglass"
105 android:background="geolar/colorAccent 106 android:layout below="@+id/LinearLayouts
107 android:layout alignParentLeft="true" 108 android:layout alignParentStart="true"
100
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="#FF8833"
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.
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 wmins: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
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 androidrid+id/toolbar"
18 amiroid:layout width="match parent" 19 androidrlayout heighton Pattr/act LonBart
19 android:backgrounds/
21 app-popup Theme-style/AppTheme PopupOverlay
23 </android.support.design.widget. AppsarLayout>
24
<include Layout-glayout/content main
26
2</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 xml. activity_main.
Berikut adalah kode program untuk MainActivity.java
package com.eximple.user.naogundeterr
1234
import android.on.Rumitier
import android.support.design.widget.
FloatinghotionButtons
import android.support.design.widget.
Snackbars
import android.support.v7.app.
AppCompatActivity:
import android.support.v7.widget.Tonibarz
Leport android.view.View Import android.view.Menüz
import android.view.Memultumi import android.widget. EditText
12 import android.widget.TextView;
13
14 public class MainActivity extends AppCompatActivity( 15
té private EditText panjang: 17 private EditText lebar
18 private TextView hasil
19 20 @Override
23 protected void onCreate(Bundle savedInstanceState)
22 super.onCreate(savedInstanceState); 23 setContentView(R.layout.activity main)
24 Toolbar toolbar (Toolbar) findViewById(R.id.toolbar);
25 set SupportActionBar (tonibar);
26 panjang (EditText) findViewById(R. id.inputPanjang);
27 lebar (EditText) findViewById(R.
id.inputLebar): hasil (TextView) findViewById(R. id.hasilly
32 public void hitungLuas (View v)
33 String strPanjang panjang-getText(). toString();
34 String strlebar toString(); lebar.getText().
35
36 float val Panjang = Flost. parseFloat(strPanjang):
37 ficat vallebar Float. parseFloat (strlebar):
38
39 float valdasilvalPanjang vallebar:
40
41 displayluas (valHasil)?
主 43
48 public void displayluas (float valhas
45 String strhasil
46 stranilvaldasily
47 48 hasil.setText(strHanills
50 St public void clearbata (Vie
52 panjang.setText("")
53 lehar.setText():
54 hasil.setText("0"1
#Override
59 public boolean onCreateOptionsMenu (Menu
menu)
60 // Inflate the menur this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu)
62 return true
65 #Overzide
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_settingal
74 return true:
77 super.onOptionsItemSelected(item);
Penjelasan kode program tersebut adalah sebagai berikut.
1) Mendeklarasikan variabel dan komponen user interface yang digunakan pada file content main.xml.
Activity estands
private EditText panjang private BditText Inberr
private TextView hasil
protected void onCreate(Bundle savedInstancetate) super.onCreate(savedInstancetatel
setContentView(R.layout.activity maint:
Toolbar toolbar Toolbarl findViewById(R.id.toolbar):
setSupportActionBar(toolbar)
panjang (EditText) findViewById(R. id.input. Panjang)
Jebar (EditText) findViewByIGER.
id.inputLebar):
hasil (TextView) findViewById(R.
2) Menambahkan method untuk melakukan penghitungan luas persegi panjang, jika tombol dengan id "+id/ button" ditekan.
public void hitungluas (View
String strPanjang toString(): panjang.getText()
String striebar lebar.getText().
toString();
float vai Panjang 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) I String strhasil = ""; strHasil valHasil:
hasil.setText(strHasil):
Komentar
Posting Komentar