DAFTAR PUSTAKA

LINEAR LAYOUT

1. Layout

2. Code
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#78b5ff"
android:orientation="vertical">

<TextView
android:id="@+id/judul"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textColor="#ffffff"
android:gravity="center_horizontal"
android:textSize="30dp"
android:background="#003270"
android:textAppearance="@style/TextAppearance.AppCompat.Large"
android:text="Biodata Mahasiswa" />

<View
android:id="@+id/divider"
android:layout_width="match_parent"
android:layout_height="10dp"
android:background="?android:attr/listDivider"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#deedff"
android:layout_margin="10dp">

<TextView
android:id="@+id/nama"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:textStyle="bold"
android:text="Nama (NPM)"
android:textColor="#000000"
android:textSize="15dp" />

<View
android:id="@+id/divider1"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="?android:attr/listDivider" />

<EditText
android:id="@+id/editNama"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:ems="10"
android:inputType="textPersonName"
android:textSize="15dp"
android:textColor="#828282"
android:text="Masukkan Nama Lengkap (NPM)" />
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#deedff"
android:layout_margin="10dp">

<TextView
android:id="@+id/ttl"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:textStyle="bold"
android:text="Tempat Tanggal Lahir"
android:textColor="#000000"
android:textSize="15dp" />

<View
android:id="@+id/divider2"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="?android:attr/listDivider" />

<EditText
android:id="@+id/editTTL"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:ems="10"
android:inputType="textPersonName"
android:textSize="15dp"
android:textColor="#828282"
android:text="Tempat, Tanggal Lahir" />
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#deedff"
android:layout_margin="10dp">
<TextView
android:id="@+id/jkel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:textStyle="bold"
android:text="Jenis Kelamin"
android:textColor="#000000"
android:textSize="15dp" />
<View
android:id="@+id/divider3"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="?android:attr/listDivider" />
<RadioGroup
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RadioButton
android:id="@+id/lakilaki"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:text="Laki - Laki" />
<RadioButton
android:id="@+id/perempuan"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:text="Perempuan" />
</RadioGroup>
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#deedff"
android:layout_margin="10dp">

<TextView
android:id="@+id/alamat"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:textStyle="bold"
android:text="Alamat"
android:textColor="#000000"
android:textSize="15dp" />

<View
android:id="@+id/divider4"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="?android:attr/listDivider" />

<EditText
android:id="@+id/editAlamat"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
 android:ems="10"
android:inputType="textPersonName"
android:textSize="15dp"
android:textColor="#828282"
android:text="Masukkan Alamat" />
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#deedff"
android:layout_margin="10dp">

<TextView
android:id="@+id/prodi"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:textStyle="bold"
android:text="Program Studi"
android:textColor="#000000"
android:textSize="15dp" />

<View
android:id="@+id/divider5"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="?android:attr/listDivider" />

<EditText
android:id="@+id/editProdi"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:ems="10"
android:inputType="textPersonName"
android:textSize="15dp"
android:textColor="#828282"
android:text="Masukkan Program Studi" />
</LinearLayout>

<Button
android:id="@+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_margin="10dp"
android:text="Submit" />

</LinearLayout>

3. Penjelasan Code Linear Layout

Untuk membuat sebuah tampilan seperti hasil layout diatas, kita memerlukan settingan
beberapa kode agar dapat menghasilkan tampilan sesuai dengan tampilan desain
tersebut. Sesuai dengan judulnya, saya menggunakan tag
<LinearLayout></LinearLayout>, kemudian diikuti dengan kode lainnya, berikut code
yang digunakan :
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
 android:background="#deedff"
android:layout_margin="10dp">

Pada kode diatas digunakan untuk mensetting menyesuaikan panjang dan tinggi
layout agar sesuai dengan layar, mengatur tinggi margin, mengubah warna background.

Kemudian kode untuk membuat judul “Biodata Mahasiswa”. Berikut kode dalam
pembuatan judul tersebut.
<TextView
android:id="@+id/judul"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textColor="#ffffff"
android:gravity="center_horizontal"
android:textSize="30dp"
android:background="#003270"
android:textAppearance="@style/TextAppearance.AppCompat.Large"
android:text="Biodata Mahasiswa" />
Pada kode diatas menyatakan bahwa judul memiliki id judul dengan lebar layar
match_parent dan tinggi layar wrap_content, kemudian dengan style tulisan bold, lalu
warna tulisan berwarna putih dengan teks berada ditengah dengan ukuran 30dp dengan
background #003270 yang bertuliskan Biodata Mahasiswa

Kemudian untuk menampilkan kolom nama, tempat tanggal lahir, alamat, dan
program studi menggunakan kode sebagai berikut
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#deedff"
android:layout_margin="10dp">

<TextView
android:id="@+id/nama"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:textStyle="bold"
android:text="Nama (NPM)"
android:textColor="#000000"
android:textSize="15dp" />

<View
android:id="@+id/divider1"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="?android:attr/listDivider" />

<EditText
android:id="@+id/editNama"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:ems="10"
android:inputType="textPersonName"
android:textSize="15dp"
android:textColor="#828282"
android:text="Masukkan Nama Lengkap (NPM)" />
</LinearLayout>
Pada kode diatas terdapat kode dengan dibungkus dengan LinearLayout kemudian
untuk menampilkan tulisan menggunakan TextView. Dengan menggunakan id nama,
lebar layout match_parent dan tinggi layout wrap_content. Lalu ada padding memiliki
jarak sekelilingnya 10dp. Dengan gaya tulisannya bold, menggunakan warna font
#00000 dan ukuran tulisannya 15dp lalu tulisan yang akan ditampilkan adalah Nama
(NPM), Alamat, Tempat tanggal lahir dan Program Studi.

Sedangkan untuk kode menampilkan Radio Button pada Jenis kelamin

menggunakan kode sebagai berikut
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#deedff"
android:layout_margin="10dp">
<TextView
android:id="@+id/jkel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:textStyle="bold"
android:text="Jenis Kelamin"
android:textColor="#000000"
android:textSize="15dp" />
<View
android:id="@+id/divider3"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="?android:attr/listDivider" />
<RadioGroup
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RadioButton
android:id="@+id/lakilaki"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:text="Laki - Laki" />
<RadioButton
android:id="@+id/perempuan"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:text="Perempuan" />
</RadioGroup>
</LinearLayout>

Pada kode diatas terdapat kode dengan dibungkus dengan LinearLayout kemudian
untuk menampilkan tulisan menggunakan TextView. Dengan menggunakan id jkel, lebar
layout match_parent dan tinggi layout wrap_content. Lalu ada padding memiliki jarak
sekelilingnya 10dp. Dengan gaya tulisannya bold, menggunakan warna font #00000 dan
ukuran tulisannya 15dp lalu tulisan yang akan ditampilkan adalah Laki – Laki dan
Perempuan.
Untuk menggunakan radio button maka dengan menggunakan buka tutup tag
RadioGroup kemudian ada RadioButton untuk memilih salah satu tombol.

<Button
android:id="@+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_margin="10dp"
 android:text="Submit" />

Kode tersebut adalah kode default ketika pallete button digunakan, dengan
hanya cukup mengganti text yang ditampilkan, android:text="Submit", dan id dari
button, android:id="@+id/button". Namun, sebelum kode button ini dibuat,
diatasnya terdapat kode untuk memberikan space atau jarak antara button dengan
form diatasnya, yaitu sebagai berikut:
<Space
android:layout_width="match_parent"
android:layout_height="16dp" />
Kode tersebut menyatakan tinggi atau jarak vertikal antara button dengan form di
atasnya yaitu 16dp sementara lebar dari space itu sendiri yaitu menyesuaikan
dengan layar.
 RELATIVE LAYOUT

1. Layout

2. Code

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

<RelativeLayout
xmlns: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="#78b5ff"
>
<TextView
android:id="@+id/add"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:layout_marginBottom="25dp"
android:layout_centerHorizontal="true"
android:fontFamily="serif-monospace"
android:gravity="center_horizontal"
android:layout_margin="10dp"
android:text="PROFIL MAHASISWA"
android:textSize="25dp"
android:background="#ffff"
android:padding="10dp"
 android:textStyle="bold" />

<ImageView
android:id="@+id/pic"
android:layout_width="190dp"
android:layout_height="233dp"
android:layout_below="@id/add"
android:layout_centerHorizontal="true"
android:clickable="true"
tools:srcCompat="@drawable/foto_profil" />

<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/floatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/pic"
android:layout_marginLeft="-33dp"
android:layout_marginTop="-56dp"
android:layout_marginRight="-30dp"
android:layout_marginBottom="-30dp"
android:layout_toRightOf="@id/pic"
android:clickable="true"
app:srcCompat="@android:drawable/ic_menu_camera" />

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/floatingActionButton"
android:layout_marginHorizontal="10dp"
android:layout_marginStart="10dp"
android:layout_marginTop="52dp"
android:layout_marginEnd="10dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="10dp"
android:background="#ffffff"
android:orientation="vertical">

<TextView
android:id="@+id/nama"
android:layout_width="wrap_content"
android:layout_height="37dp"
android:layout_marginLeft="15dp"
android:layout_marginTop="20dp"
android:gravity="center_vertical"
android:text="Nama" />
<EditText
android:id="@+id/editNama"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginLeft="35dp"
android:layout_marginTop="20dp"
android:layout_marginRight="10dp"
android:layout_toRightOf="@id/nama"
android:ems="10"
android:inputType="textPersonName"
android:text="" />

<TextView
android:id="@+id/username"
android:layout_width="wrap_content"
android:layout_height="48dp"
android:layout_below="@id/nama"
android:layout_marginLeft="15dp"
android:layout_marginTop="4dp"
android:gravity="center_vertical"
android:text="Username" />
<EditText
android:id="@+id/editUsername"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/editNama"
android:layout_alignParentRight="true"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_toRightOf="@id/username"
android:ems="10"
android:inputType="textPersonName" />

<TextView
android:id="@+id/pass"
android:layout_width="wrap_content"
android:layout_height="37dp"
android:layout_marginTop="4dp"
android:layout_below="@id/username"
android:layout_marginLeft="15dp"
android:gravity="center_vertical"
android:text="Password" />
<EditText
android:id="@+id/editTextTextPassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/editUsername"
android:layout_alignParentRight="true"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_toRightOf="@id/pass"
android:ems="10"
android:inputType="textPassword" />

<TextView
android:id="@+id/ttl"
android:layout_width="wrap_content"
android:layout_height="48dp"
android:layout_below="@id/pass"
android:layout_marginLeft="15dp"
android:layout_marginTop="4dp"
android:gravity="center_vertical"
android:text="TTL" />

<EditText
android:id="@+id/editTtl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/editTextTextPassword"
android:layout_alignParentRight="true"
android:layout_marginLeft="47dp"
android:layout_marginRight="10dp"
android:layout_toRightOf="@id/ttl"
android:ems="10"
android:inputType="textEmailAddress" />

<TextView
android:id="@+id/jkel"
android:layout_width="wrap_content"
android:layout_height="48dp"
android:layout_below="@id/ttl"
android:layout_marginLeft="15dp"
android:gravity="center_vertical"
android:text="Jkel" />

<EditText
android:id="@+id/editJkel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
 android:layout_below="@id/editTtl"
android:layout_alignParentRight="true"
android:layout_marginLeft="45dp"
android:layout_marginRight="10dp"
android:layout_toRightOf="@id/jkel"
android:ems="10"
android:inputType="textPersonName" />

<TextView
android:id="@+id/alamat"
android:layout_width="wrap_content"
android:layout_height="48dp"
android:layout_below="@id/jkel"
android:layout_marginLeft="15dp"
android:layout_marginBottom="20dp"
android:gravity="center_vertical"
android:text="Alamat" />

<EditText
android:id="@+id/editAlamat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/editJkel"
android:layout_alignParentRight="true"
android:layout_marginLeft="27dp"
android:layout_marginRight="10dp"
android:layout_toRightOf="@id/alamat"
android:ems="10"
android:inputType="textPersonName" />

<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/alamat"
android:layout_centerHorizontal="true"
android:layout_marginBottom="30dp"
android:text="Submit" />
</RelativeLayout>
</RelativeLayout>

3. Penjelasan Code Linear Layout

Untuk membuat sebuah tampilan seperti hasil layout diatas, kita memerlukan settingan
beberapa kode agar dapat menghasilkan tampilan sesuai dengan tampilan desain
tersebut. Sesuai dengan judulnya, saya menggunakan tag
<RelativeLayout></RelativeLayout>, kemudian diikuti dengan kode lainnya, berikut code
yang digunakan :
<RelativeLayout
xmlns: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="#78b5ff">

Pada kode diatas digunakan untuk mensetting menyesuaikan panjang dan tinggi
layout agar sesuai dengan layar, mengatur tinggi margin, mengubah warna background.

Kemudian kode untuk membuat judul “Profil Mahasiswa”. Berikut kode dalam
pembuatan judul tersebut.
 <TextView
android:id="@+id/add"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:layout_marginBottom="25dp"
android:layout_centerHorizontal="true"
android:fontFamily="serif-monospace"
android:gravity="center_horizontal"
android:layout_margin="10dp"
android:text="PROFIL MAHASISWA"
android:textSize="25dp"
android:background="#ffff"
android:padding="10dp"
android:textStyle="bold" />

Pada kode diatas menyatakan bahwa judul memiliki id add dengan lebar layar
match_parent dan tinggi layar wrap_content, kemudian dengan style tulisan bold, lalu
warna tulisan berwarna hitam dengan teks berada ditengah dengan ukuran 25dp dengan
background #003270 yang bertuliskan Profil Mahasiwa berserta kode lainnya yang
mendukung untuk membuat tampilan seperti hasil desain pada layout tersebut.

Kemudian kode yang digunakan untuk menampilkan gambar pada halaman

tersebut adalah dengan menggunakan kode sebagai berikut
<ImageView
android:id="@+id/pic"
android:layout_width="190dp"
android:layout_height="233dp"
android:layout_below="@id/add"
android:layout_centerHorizontal="true"
android:clickable="true"
tools:srcCompat="@drawable/foto_profil" />

<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/floatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/pic"
android:layout_marginLeft="-33dp"
android:layout_marginTop="-56dp"
android:layout_marginRight="-30dp"
android:layout_marginBottom="-30dp"
android:layout_toRightOf="@id/pic"
android:clickable="true"
app:srcCompat="@android:drawable/ic_menu_camera" />

Untuk menampilkan gambar, dengan menggunakan kode buka tutup imageView.

Yang mempunyai id pic, memiliki ukuran lebar 190dp dan tinggi 233dp. Letaknya sesudah id
add, dengan letaknya berada tengah Horizontal dengan nilai true dan bisa ditekan bernilai
benar. Untuk memanggil gambar tersebut dengna menggunakan perintah srcCompat yang
gambarnya berada pada @drawable/foto_profil.
Lalu ada icon camera agar bisa di tekan dengan menggunakan perintah kode seperti
berikut
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/floatingActionButton"
 android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/pic"
android:layout_marginLeft="-33dp"
android:layout_marginTop="-56dp"
android:layout_marginRight="-30dp"
android:layout_marginBottom="-30dp"
android:layout_toRightOf="@id/pic"
android:clickable="true"
app:srcCompat="@android:drawable/ic_menu_camera" />

Kemudian tahap selanjutnya adalah, membuat tag RelativeLayout untuk membungkus

sebuah kode yang nantinya berisikan Nama, Username, TTL, Password, Alamat. Kodenya
sebagai berikut :
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/floatingActionButton"
android:layout_marginHorizontal="10dp"
android:layout_marginStart="10dp"
android:layout_marginTop="52dp"
android:layout_marginEnd="10dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="10dp"
android:background="#ffffff"
android:orientation="vertical">

Lalu untuk membuat tampilan Nama, Username, Password, TTL, Prodi, Alamat dengan
menggunakan kode yang sama, perbedaannya hanya pada pemanggilan id nya saja
<TextView
android:id="@+id/nama"
android:layout_width="wrap_content"
android:layout_height="37dp"
android:layout_marginLeft="15dp"
android:layout_marginTop="20dp"
android:gravity="center_vertical"
android:text="Nama" />
<EditText
android:id="@+id/editNama"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginLeft="35dp"
android:layout_marginTop="20dp"
android:layout_marginRight="10dp"
android:layout_toRightOf="@id/nama"
android:ems="10"
android:inputType="textPersonName"
android:text="" />

Button ini diletakkan tepat di bawah TextView dengan id “alamat”, android:layout_below=

"@id/alamat", serta diletakkan di tengah secara horizontal, android:layout_centerHorizontal="true".
Dan agar tidak terlalu mepet dengan pinggir RelativeLayout bawahnya, diberikan kode
android:layout_marginBottom="30dp".
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/alamat"
android:layout_centerHorizontal="true"
android:layout_marginBottom="30dp"
android:text="Submit" />