BAB I

PENDAHULUAN

1.1 Latar Belakang

Aplikasi merupakan perangkat lunak yang terdapat pada sebuah komputer
ataupun smartphone yang menggabungkan beberapa fitur tertentu dan nantinya
dapat diakses oleh pengguna. Dalam pembuatan aplikasi tentunya melewati tahap
perancangan yang melibatkan desain User Interface (UI) dan XML (Extensible
Markup Language) layout, Widget, dan Selection Widget. User Interface
merupakan tampilan antarmuka yang mempermudah pengguna berinteraksi
dengan suatu perangkat atau aplikasi. Komponen-komponen UI mencakup
elemen-elemen seperti tombol, teks, gambar, dan area input. Tujuan utama dari
desain UI adalah menciptakan lingkungan yang intuitif, mudah dipahami, dan
menyediakan navigasi yang lancar. Semakin berkembangnya teknologi,
pengembang perangkat lunak menggunakan berbagai alat dan teknologi, seperti
XML layout dan widget, menciptakan UI yang responsif dan menarik.
Dalam pengembangan aplikasi android, XML layout digunakan untuk
mendefinisikan tata letak antarmuka pengguna. Widget merupakan elemen
antarmuka yang memberikan fungsi atau tampilan khusus, seperti tombol, teks,
atau daftar. Penggunaan seleksi dalam antarmuka dapat dilakukan melalui
selection widget, yang memungkinkan pengguna untuk memilih opsi atau item
tertentu dari data. Kelebihan dari penggunaan selection widget adalah
meningkatkan pengalaman pengguna dengan memberikan kemudahan dalam
aksesibilitas terhadap informasi yang tersedia dalam aplikasi.

1.2 Tujuan Praktikum

1. Mahasiswa mengenal dan bisa menerapkan layout pada aplikasi android.
2. Mahasiswa mengenal dan bisa menerapkan widget pada aplikasi android.
3. Mahasiswa mengenal dan bisa menerapkan selection widget pada
aplikasi android.
 BAB II
DASAR TEORI

2.1 Layout
Dalam pembuatan sebuah interface di android, diperlukan beberapa elemen
penting. Diantaranya terdapat sebuah elemen dasar, yakni layout yang merupakan
arsitektur user interface dalam „activity‟. Layout pada android berbasis XML
(Extensible Markup Language), merupakan sebuah spesifikasi dari hubungan
antar widget, di mana container dijelaskan dalam format XML. Layout digunakan
pada sistem android untuk menampilkan user interface di dalam device yang
berbeda-beda. Setiap activity yang telah dibuat juga termasuk file XML layout
yang menggunakan RelativeLayoutcomponent. File XML layout merupakan
sebuah template yang nantinya akan menjadi gambaran terkait bagaimana bentuk
tampilan layar yang telah dibuat.

2.1.1 Linear Layout

LinearLayout merupakan layout yang tampilannya satu arah, baik
secara horizontal maupun vertikal, LinearLayout adalah salah satu jenis
layout di android yang digunakan untuk mengatur tata letak elemen
antarmuka pengguna secara linier atau sejajar. Programmer dapat
menetapkan arah tata letak dengan atribut “Android:orientation”. Layout ini
dapat melakukan spesifikasi “weight” dari masing-masing child view yang
mengontrol ukuran relatifnya di dalam space yang tersedia.

2.1.2 Relative Layout

RelativeLayout merupakan kolompok tampilan yang menampilkan
tampilan turunan di posisi relative. Posisi setiap tampilan dapat ditentukan
sebagai posisi relative. Terhadap elemen yang setara (seperti di sebelah kiri
atau di bawah tampilan lain) atau di posisi relative terhadap RelativeLayout
induk (seperti sejajar dengan bagian bawah, kiri, atau tengah).
 2.1.3 Table Layout
TableLayout adalah sebuah ViewGroup yang meletakkan komponen
pada baris dan kolom. Layout ini digunakan untuk membangun user interface
(tampilan antarmuka). TableLayout terdiri dari dua (2) komponen yakni, row
(baris) atau column (kolom). Row pada dasarnya digunakan untuk
menyimpan satu jenis record, sedangkan kolom adalah sub-bagian yang
terbagi dari setiap baris dan satu baris dapat menampung beberapa jenis
kolom.

2.1.4 Frame Layout

FrameLayout adalah layout yang digunakan untuk membuat objek
yang saling bertindihan. Layout ini merupakan layout XML yang paling
sederhana. FrameLayout menyisipkan widget ke dalam widget lain. Tampilan
pada layout ini akan menampilkan satu view saja. Contohnya saat
programmer membuat button di atas image.

2.2 Widget
Widget atau basic widget merupakan elemen antarmuka pada android yang
dapat disematkan di berbagai bagian halaman aplikasi , seperti layar utama. Jenis
widget meliputi tombol, teks, gambar, dan lainnya, dengan kemampuan
penyesuaian ukuran dan tata letak menyesuaikan pada perangkat dan versi
android. Pengaturan widget dapat dilakukan melalui file XML dan
diimplementasikan menggunakan class AppWidgetProvider yang didefinisikan
dalam file “AndroidManifest.XML”.

2.2.1 Label
Widget antara lain adalah label, sebagaimana yang dimaksud dalam
android seperti TextView. Seperti kebanyakan GUI (Graphical User
Interface) toolkit, label merupakan potongan teks yang tidak dapat diedit
langsung oleh user. Biasanya digunakan untuk mengidentifikasi widget yang
berdekatan seperti, “Name:” merupakan label dari sebuah field di mana akan
diisi sebuah nama.
 2.2.2 Button
Widget button adalah widget yang dapat memiliki action click pada
tampilannya. Elemen ini merupakan elemen antarmuka pengguna yang
ditempatkan di dalam widget untuk memberikan fungsionalitas tambahan
pada halaman aplikasi. Penggunaan widget button pada android dapat
melibatkan pembuatan widget dengan tombol yang, ketika ditekan akan
membuka halaman selanjutnya pada aplikasi atau dapat memicu tindakan
khusus lainnya sesuai dengan kebutuhan aplikasi.

2.2.3 Image View dan Image Button

ImageView dan ImageButton adalah dua komponen antarmuka
pengguna (widget) pada android yang digunakan untuk menampilkan gambar
atau ikon. Penggunaan „ImageView‟ dapat berupa menampilkan logo aplikasi
atau gambar dekoratif, sedangkan „ImageButton‟ digunakan ketika
programmer ingin menciptakan tombol yang memiliki tampilan gambar dan
dapat merespons saat tombol di tekan.

2.2.4 Edit Text

Widget ini merupakan salah satu komponen antarmuka pengguna pada
android yang dapat digunakan untuk mengizinkan pengguna meng-input teks
atau data melalui antarmuka pengguna aplikasi. EditText memberikan area
atau tempat pada pengguna agar mudah dalam mengetik, mengedit, atau
meng-input informasi teks.

2.3 Selection Widget

android menawarkan sebuah framework yang fleksibel untuk menentukan
pilihan-pilihan yang tersedia pada beberapa widget. Lebih spesifiknya, android
menawarkan sebuah framework dari data adapter yang menyediakan sebuah
interface umum untuk daftar pemilihan, mulai dari static array, hingga database
contents. Selection views merupakan widget untuk merepresentasikan daftar
pilihan-pilihan yang di-handle oleh sebuah adapter untuk menyuplai pilihan yang
sebenarnya.
2.3.1 List View
ListView pada android adalah sebuah tampilan yang menampung
sejumlah item dan menampilkannya dalam gulir vertikal. Setiap item dalam
ListView umumnya diisi menggunakan adapter yang mengambil konten dari
sumber data seperti array atau database. Selain itu, pengembang dapat
menyesuaikan tampilan setiap item menggunakan layout yang didefinisikan
secara terpisah. Ini memberikan fleksibilitas dalam merancang antarmuka
pengguna yang sesuai dengan kebutuhan aplikasi. ListView juga mendukung
manajemen interaksi pengguna, seperti menanggapi klik item tertentu

2.3.2 Spinner
Spinner pada android adalah sebuah tampilan yang mirip sama
dengan menu dropdown yang digunakan untuk memilih satu opsi dari daftar
opsi. Spinner menyediakan cara mudah untuk memilih satu item dari daftar
item dan menampilkan daftar dropdown dari semua nilai ketika di-click.
Spinner dapat disesuaikan dengan berbagai properti dan gaya, memungkinkan
pengembang untuk mengintegrasikannya dengan desain keseluruhan aplikasi
android.
 BAB IV
IMPLEMENTASI

4.1 Kegiatan Praktikum

4.1.1 Linear Layout
a) Code program
<?XML version="1.0" encoding="utf-8"?>
<LinearLayout
XMLns:Android="http://schemas.Android.com/apk/res/Androi
d"
XMLns:app="http://schemas.Android.com/apk/res-auto"
XMLns:tools="http://schemas.Android.com/tools"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:orientation="vertikal"
tools:context=".MainActivity">
<TextView
Android:id="@+id/textView"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:text="Nama"

Android:textAppearance="?Android:attr/textAppearanceLarge
" />
<EditText
Android:id="@+id/editText"
Android:layout_width="203dp"
Android:layout_height="wrap_content"
Android:layout_alignParentEnd="true"
Android:layout_alignParentRight="true"
Android:layout_toRightOf="@id/button" />
<Button
Android:id="@+id/button"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:layout_below="@id/textView"
Android:text="New Button" />
Pada textbox di atas memaparkan code mengenai tampilan
XML layout yang berupa LinearLayout yang di atur secara
horizontal. Dalam LinearLayout di atas terdapat 3 elemen dari
widget yang properti layout-nya sudah ditentukan.
 b) Output

Gambar 1.1 Output LinearLayout.

Pada gambar di atas menampilkan tampilan emulator

LinearLayout yang orientasinya dapat diatur menjadi horizontal
ataupun vertikal. Terdapat tiga elemen utama dalam layout ini:
TextView, EditText, dan Button. TextView menampilkan teks
besar dengan "@+id/textView". EditText adalah elemen input teks
yang ditempatkan di bawah button dan sejajar ke kanan. Button
menampilkan teks "Button" dan ditempatkan di sebelah kiri atas
layar.

4.1.2 Widget ImageView dan ImageButton

a) Code program
<?XML version="1.0" encoding="utf-8"?>
<Androidx.constraintlayout.widget.ConstraintLayout

XMLns:Android="http://schemas.Android.com/apk/res/Androi
d"
XMLns:app="http://schemas.Android.com/apk/res-auto"
XMLns:tools="http://schemas.Android.com/tools"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
tools:context=".widget">
<ImageView
Android:layout_width="wrap_content"
 Android:src="@drawable/imgview"
tools:ignore="MissingConstraints"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="0dp"/>
<ImageButton
Android:layout_width="286dp"
Android:layout_height="108dp"
Android:id="@+id/imageButton"
Android:contentDescription="@string/app_name"
Android:src="@drawable/imgbutton"
tools:ignore="MissingConstraints"
tools:layout_editor_absoluteX="76dp"
tools:layout_editor_absoluteY="516dp" />
</Androidx.constraintlayout.widget.ConstraintLayout>
Pada textbox di atas berisikan code mengenai antarmuka
pengguna (UI) menggunakan ConstraintLayout dalam android.
Dua elemen utama dalam layout ini adalah ImageView dan
ImageButton. ImageView menampilkan gambar dari sumber daya
drawable dengan atribut „src’, sedangkan ImageButton berukuran
“286x108dp” dan menampilkan gambar dari sumber daya lainnya.
Dalam ConstraintLayout, pengaturan posisi elemen-elemen ini
menggunakan atribut tools:layout_editor_absoluteX dan
tools:layout_editor_absoluteY, yang diberikan nilai absolute untuk
tujuan tata letak dalam editor design.

b) Output

Gambar 1.2 Output widget.

 Pada gambar di atas menampilkan tampilan emulator widget
dengan dua elemen image yakni ImageView dan ImageButton.
Pada gambar terdapat hasil yang mana memiliki tampilan
ConstraintLayout, dan posisi ImageButton harusnya terletak
dibawah ImageView, namun jika dijalankan di emulator terdapat
kesalahan.

4.1.3 Selection Widget ListView

a) Code program
<?XML version="1.0" encoding="utf-8"?>
<LinearLayout
XMLns:Android="http://schemas.Android.com/apk/res/Androi
d"
XMLns:app="http://schemas.Android.com/apk/res-auto"
XMLns:tools="http://schemas.Android.com/tools"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:orientation="vertikal"
tools:context=".MainActivity">
<ListView
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
Android:id="@+id/listview"/>
</LinearLayout>
Pada textbox di atas menampilkan code yang berisikan
tentang tampilan salah satu elemen selection widget, yakni
ListView. Code di atas menjelaskan bahwa layout yang digunakan
ialah LinearLayout dan konten nya diatur menjadi
“match_parent”, sedangkan orientasinya berbentuk vertikal.
Tampilan ListView di atas . ListView ini diidentifikasi dengan
“@+id/listview" untuk referensi dalam kode Java. Dengan
menggunakan LinearLayout dan ListView, sesuai untuk
menampilkan daftar item, seperti yang digunakan dalam contoh
kode Java sebelumnya untuk menampilkan daftar jurusan.

package com.example.myapplication;
import Androidx.appcompat.app.AppCompatActivity;
import Android.os.Bundle;
import Android.widget.ArrayAdapter;
 import Android.widget.ListView;
public class selection_widget extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_selection_widget);
ListView lv = (ListView) findViewById(R.id.listview);
String[] about = {"Teknik Informatika", "Multimedia
Broadcasting", "Animasi", "Otomotif", "Griya Kayu",
"Pengolahan Batu", "Pengolahan Hasil Laut",
"Telekomunikasi", "Elektronika", "Mekatronika", "Kimia",
"Fisika", "Matematika", "Perkapalan"};
ArrayAdapter<String> adapter=new
ArrayAdapter<>(this,
Android.R.layout.simple_list_item_1,about);
lv.setAdapter(adapter);
}
}

Code yang tertera pada textbox di atas mengilustrasikan

implementasi sederhana dari sebuah activity dalam aplikasi
android yang menggunakan selection widget, yaitu ListView.
Sebuah array string "about" dibuat untuk menampung daftar opsi
yang akan ditampilkan dalam ListView. Menggunakan
ArrayAdapter, data dari array "about" dihubungkan dengan
ListView, dan tampilan setiap item dalam ListView disesuaikan
dengan layout bawaan android.R.layout.simple_list_item_1.
Hasilnya adalah aplikasi yang, ketika dijalankan, akan
menampilkan daftar jurusan dalam bentuk ListView yang dapat
digulirkan, memberikan pengguna opsi untuk memilih dari daftar.
.
b) Output
 Gambar 1.3 Output selection widget.
Pada gambar di atas menampilkan output dari code XML dan
Java dalam bentuk device manager melalui tampilan smartphone,
yang mana berisikan salah satu elemen dari selection widget,
yakni ListView, terdapat 14 jurusan yang data nya sudah diatur
(di-input) di Java menggunakan ArrayAdpter.

4.2 Tugas Praktikum

4.2.1 Soal
1. Implementasikan wireframe yang sudah kalian buat ke aplikasi
berdasarkan dasar teori yang sudah dipelajari!
4.2.2 Jawaban
1. Wireframe Pengantar Aplikasi
a) Code program
<?XML version="1.0" encoding="utf-8"?>
<RelativeLayoutXMLns:Android=http://schemas.Android.com/apk/
res/Android XMLns:app="http://schemas.Android.com/apk/res-
auto"
XMLns:tools="http://schemas.Android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#aa0101">
<ImageView
android:id="@+id/logoImageView"
android:layout_width="300dp"
android:layout_height="300dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="40dp"
android:src="@drawable/sglogo"/>
<ImageView
android:id="@+id/studatext"
android:layout_width="120dp"
android:layout_height="150dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="-130dp"
android:layout_below="@+id/logoImageView"
android:src="@drawable/studagra"/>
 <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="WELCOME to STUDAGRA"
android:textColor="@color/white"
android:textSize="30sp"
android:textStyle="bold|italic"
android:layout_marginTop="-40dp"
android:layout_below="@+id/studatext"/>
<LinearLayout
android:id="@+id/button"
android:layout_below="@+id/studatext"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertikal"
android:padding="20dp">
<com.google.Android.material.button.MaterialButton
android:layout_width="match_parent"
android:layout_height="80dp"
android:text="Login"
android:textSize="25sp"
android:textStyle="bold"
android:backgroundTint="#778760"
app:cornerRadius="32dp"/>
<com.google.Android.material.button.MaterialButton
android:layout_width="match_parent"
android:layout_height="80dp"
aAndroid:text="REGISTER"
android:textSize="25sp"
android:textStyle="bold"
android:backgroundTint="#334423"
app:cornerRadius="32dp"/>
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:textColor="@color/white"
android:layout_marginBottom="15dp"
android:drawableStart="@drawable/copyright"
android:text=" CopyRight"/>
</RelativeLayout>

Textbox di atas berisikan XML code mengenai desain tata

letak dari wireframe yang dibuat pada tugas pendahuluan.
Terdapat beberapa elemen UI, seperti ImageView, TextView, dll.
 b) Output

Gambar 1.4 Output wireframe pengantar aplikasi.

Pada gambar di atas menampilkan tampilan dalam bentuk

emulator dari wireframe pengantar aplikasi hasil dari code
sebelumnya yang berbentuk RelativeLayout. Pada bagian desain
terdapat logo aplikasi dan dibawahnya terdapat teks “WELCOME
to STUDAGRA”. Kemudian terdapat dua material button yang
berisikan teks “LOGIN” dan “REGISTER” yang terdapat di dalam
LinearLayout. Di bagian paling bawah terdapat TextView dengan
teks “CopyRight”.

2. Wireframe Login
a) Code program
<?XML version="1.0" encoding="utf-8"?>
<RelativeLayout

XMLns:Android="http://schemas.Android.com/apk/res/Androi
d"
XMLns:app="http://schemas.Android.com/apk/res-auto"
XMLns:tools="http://schemas.Android.com/tools"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
tools:context=".login"
Android:background="#aa0101">
<ImageView
Android:id="@+id/logoImageView"
Android:layout_width="100dp"
Android:layout_centerHorizontal="true"
Android:layout_marginTop="50dp"
Android:src="@drawable/sglogo" />
<Androidx.cardview.widget.CardView
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:layout_alignParentBottom="true"
app:cardCornerRadius="35sp"
Android:layout_marginBottom="20dp"
Android:layout_marginLeft="20dp"
Android:layout_marginRight="20dp">
<LinearLayout
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
Android:orientation="vertikal"
Android:background="#FFFFFF"
Android:padding="20dp">
<TextView
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:text="Welcome Studies!"
Android:textColor="#aa1010"
Android:textSize="32sp"
Android:textStyle="bold" />
<TextView
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:text="Please login with your information"
Android:textStyle="bold"
Android:alpha="0.7" />
<View
Android:layout_width="wrap_content"
Android:layout_height="30dp"/>
<TextView
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:textColor="#334423"
Android:text="Email Address"
Android:textSize="18sp"
Android:alpha="0.7"
Android:textStyle="bold" />
<EditText
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
Android:layout_marginBottom="20dp"
Android:layout_marginTop="6dp"
Android:background="#998b47"
Android:inputType="textEmailAddress"
Android:padding="15dp"
Android:hint="type your email here"
Android:alpha="0.7"
Android:textSize="15sp"
Android:textStyle="italic"
Android:drawablePadding="10dp" />
<View
Android:layout_width="wrap_content"
Android:layout_height="30dp"
Android:layout_marginTop="-28dp"/>
<TextView
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:text="Password"
Android:textColor="#334423"
Android:textSize="18sp"
Android:alpha="0.7"
Android:textStyle="bold" />
<EditText
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
Android:layout_marginTop="6dp"
Android:layout_marginBottom="20dp"
Android:alpha="0.7"
Android:background="#998b47"
Android:drawablePadding="10dp"
Android:hint="type your password here"
Android:inputType="textPassword"
Android:padding="15dp"
Android:textSize="15sp"
Android:textStyle="italic" />
<RelativeLayout
Android:layout_width="wrap_content"
Android:layout_height="wrap_content">
<CheckBox
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:text="Remember me"
Android:layout_centerVertikal="true"
Android:alpha="0.7"
Android:layout_marginTop="-10dp" />
<TextView
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:text="I forgot my password"
Android:layout_alignParentEnd="true"
Android:layout_centerVertikal="true"/>
 </RelativeLayout>
<View
Android:layout_width="wrap_content"
Android:layout_height="10dp"/>
<com.google.Android.material.button.MaterialButton
Android:layout_width="match_parent"
Android:layout_height="60dp"
Android:text="Login"
Android:textSize="18sp"
Android:textStyle="bold"
Android:backgroundTint="#aa1010"
app:cornerRadius="32dp"/>
<View
Android:layout_width="wrap_content"
Android:layout_height="10dp"/>
<TextView
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:text="Or Login with"
Android:textStyle="bold"
Android:layout_gravity="center"
Android:alpha="0.7"/>
<LinearLayout
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
Android:orientation="horizontal"
Android:gravity="center"
Android:layout_marginTop="10dp"
Android:layout_marginBottom="15dp">
<ImageView
Android:layout_width="30dp"
Android:layout_height="30dp"
Android:layout_margin="12dp"
Android:background="@drawable/insta"/>
<ImageView
Android:layout_width="30dp"
Android:layout_height="30dp"
Android:layout_margin="12dp"
Android:background="@drawable/google"/>
<ImageView
Android:layout_width="30dp"
Android:layout_height="30dp"
Android:layout_margin="12dp"
Android:background="@drawable/facebook"/>
</LinearLayout>
</LinearLayout>
</Androidx.cardview.widget.CardView>
</RelativeLayout>
 Textbox di atas berisikan code mengenai tata letak antarmuka
penggguna untuk halaman login dalam aplikasi android dengan
bahasa XML. Layout utama adalah RelativeLayout yang di
dalamnya terdapat elemen UI, seperti ImageView, CardView,
TextView, MaterialButton, dan CheckBox.

b) Output

Gambar 1.5 Output wireframe login page.

Pada gambar di atas menampilkan tampilan dalam bentuk

emulator dari wireframe antarmuka pengguna untuk halaman
login. Desain ini terdiri dari elemen-elemen utama seperti logo di
bagian atas tengah, kemudian terdapat pesan selamat datang dan
instruksi login, dua kolom untuk memasukkan alamat email dan
kata sandi, serta opsi "Ingat Saya" Terdapat juga tombol "Login"
yang menonjol untuk memulai proses login. Selain itu, terdapat
opsi untuk mengakses ulang kata sandi jika terlupa. Pengguna
dapat juga memilih untuk login melalui media sosial seperti
Instagram, Google, dan Facebook dengan meng-click ikon yang
sesuai di bagian bawah tampilan.
3. Wireframe Home Page
a) Code program
<?XML version="1.0" encoding="utf-8"?>
<RelativeLayout
XMLns:Android="http://schemas.Android.com/apk/res/Androi
d" XMLns:app="http://schemas.Android.com/apk/res-auto"
XMLns:tools="http://schemas.Android.com/tools"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
tools:context=".homepage"
Android:background="#aa1010">
<Androidx.coordinatorlayout.widget.CoordinatorLayout
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:background="#aa1010">
<FrameLayout
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:id="@+id/FrameLayout" />
<com.google.Android.material.bottomappbar.BottomAppBar
Android:id="@+id/bottomAppbar"
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
Android:layout_gravity="bottom"
Android:backgroundTint="#ffff"
app:fabCradleMargin="10dp"
app:fabCradleRoundedCornerRadius="50dp">
<com.google.Android.material.bottomnavigation.BottomNavi
gationView
Android:id="@+id/bottomNavbar"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:layout_marginEnd="20dp"
Android:background="@Android:color/transparent"
app:labelVisibilityMode="labeled"
app:menu="@menu/menu"/>
</com.google.Android.material.bottomappbar.BottomAppBar
>
<com.google.Android.material.floatingactionbutton.FloatingA
ctionButton
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:backgroundTint="#ffff"
Android:src="@drawable/scan"
app:layout_anchor="@id/bottomAppbar"
Android:tint="@color/black"/>
</Androidx.coordinatorlayout.widget.CoordinatorLayout>
<View
Android:id="@+id/top_view"
Android:layout_width="match_parent"
Android:layout_height="60dp"
Android:background="#ffff" />
<RelativeLayout
Android:layout_width="wrap_content"
Android:layout_height="wrap_content">
<TextView
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:drawableStart="@drawable/ham_menu"
Android:drawableEnd="@drawable/search"
Android:drawablePadding="168dp"
Android:layout_marginTop="20dp"
Android:layout_marginLeft="15dp"/>
<TextView
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:text="Hi Jennie!"
Android:textColor="#000"
Android:textSize="25sp"
Android:textStyle="bold"
Android:layout_centerHorizontal="true"
Android:layout_marginTop="16dp"
Android:layout_marginRight="270dp"/>
</RelativeLayout>
<Androidx.cardview.widget.CardView
Android:layout_below="@+id/top_view"
Android:layout_width="match_parent"
Android:layout_height="150dp"
app:cardCornerRadius="25dp"
Android:layout_marginTop="20dp"
Android:layout_marginRight="12dp"
Android:layout_marginLeft="12dp"
app:cardElevation="12dp">
<LinearLayout
Android:layout_height="match_parent"
Android:layout_width="match_parent"
Android:orientation="vertikal"
Android:layout_gravity="center_horizontal">
<Androidx.cardview.widget.CardView
Android:layout_width="110dp"
Android:layout_height="match_parent"
Android:backgroundTint="#778760">
<ImageView
Android:layout_width="80dp"
Android:layout_height="80dp"
 Android:layout_marginLeft="15dp"
Android:background="@drawable/profile"
Android:layout_marginTop="40dp" />
</Androidx.cardview.widget.CardView>
</LinearLayout>
</Androidx.cardview.widget.CardView>
</RelativeLayout>

Textbox di atas berisikan XML code untuk antarmuka

pengguna halaman utama atau home page dengan layout
utamanya adalah RelativeLayout. Sama seperti halaman-halaman
sebelumnya, code di atas memiliki banyak elemen UI yang
responsif. Kemudian pada bagian bottom page terdapat code
navbar menu, yang mana code nya harus dibuat terlebih dahulu
dengan membuat folder baru di „res‟ dengan nama „menu’
kemudian programmer dapat meng-input-kan code untuk
memunculkan ikon ataupun judul ikon pada navbar tersebut.

b) Output

Gambar 1.6 Output wireframe home page.

Pada gambar di atas menampilkan tampilan desain dalam

bentuk emulator dari wireframe halaman utama yang masih
belum sempurna. Terdapat berbagai macam elemen UI.
 BAB V
PENUTUP

5.1 Analisa
Pada modul ini, dapat dianalisa bahwa pemahaman terhadap konsep User
Interface (UI) dalam pengembangan aplikasi android menjadi lebih mendalam.
XML layout digunakan sebagai alat untuk mendefinisikan tata letak antarmuka
pengguna, dan pemahaman terhadap struktur file XML menjadi kunci dalam
merancang antarmuka yang efektif. Widget, khususnya Selection Widget seperti
ListView, digunakan untuk menampilkan dan mengelola data dalam bentuk daftar,
memberikan pengguna pengalaman yang intuitif dalam memilih opsi. Proses
integrasi antara XML layout dan Java code memainkan peran penting dalam
menghubungkan desain antarmuka dengan logika pemrograman.

5.2 Kesimpulan
Dari modul praktikum ini dapat disimpulkan bahwa pemahaman konsep
User Interface, XML layout, dan Widget adalah hal penting dalam merancang
antarmuka pengguna dalam aplikasi android. XML layout menjadi alat yang kuat
untuk menentukan tata letak dan struktur antarmuka pengguna, sedangkan Widget
menyediakan komponen-komponen yang memungkinkan integrasi elemen-elemen
interaktif ke dalam aplikasi. Selection Widget, yang merupakan bagian dari
Widget, dapat menambah pengetahuan pengguna dengan menyediakan pilihan
yang dapat dipilih dalam bentuk dropdown menu atau daftar.

5.3 Saran
Diharapkan dengan adanya laporan mengenai “User Interface, XML layout,
Widget, Selection Widget” ini, praktikan selanjutnya dapat menguasai materi dan
konsep praktikum. praktikan diharapkan dapat mengaplikasikan pemahaman
mereka untuk merancang aplikasi melalui penguasaan materi “User Interface,
XML layout, Widget, Selection Widget”.