LAPORAN PRAKTIKUM

MOBILE APPLICATION

Disusun Oleh :

Nama : Dwi Fadilah

NPM : 1061909
Kelas : 3 TRPL
Semester : 5 (Ganjil)
Jurusan : Teknik Elektro dan Informatika

POLITEKNIK MANUFAKTUR NEGERI BANGKA BELITUNG

Kawasan Industri Air Kantung Sungailiat, Bangka 33211
Telp. (0717) 93586, Fax (0717) 93585
TAHUN AJARAN 2021 / 2022
Penjelasan Koding Relative Layout :

Gambar diatas merupakan hasil dari koding Android Studio dengan menggunakan layout
relative. Layout relative merupakan layout yang berfungsi untuk mengatur tata letak
komponen atau widget aplikasi android dengan cara relative (secara bebas) tidak hanya
vertikal atau horizontal saja seperti pada linear layout.
Untuk menghasilkan tampilan diatas, kita perlu menambahkan XML pada layout kemudian
memberikan namanya sesuai dengan pengguna inginkan. Disini saya memberikan nama pada
XML saya yaitu layout_relative. Setelah selesai, masuk ke kodingan XML dan ubah
background yang ada pada design dengan warna lilac atau dengan kode #C6A1CF.
Masuk pada bagian design, untuk menambahkan TextView pilih di bagian Pallete Common
dan pilih Textview. Textview disini berfungsi untuk menampilkan tulisan yang ada pada
layout. Disini saya memiliki beberapa TextView dengan fungsi yang berbeda-beda, seperti:
1. Buat Akun Lmail
2. Ini Cepat dan Mudah
3. Nama Depan
4. Nama Belakang
5. Nama Pengguna
6. Password
7. Konfirmasi
Kemudian saya juga menambahkan beberapa PlainText yang berfungsi untuk menginput atau
menambahkan kata dan kalimat sesuai dengan perintah TextView sebelahnya. Beberapa
PlainText yang saya buat, seperti:
1. PlainText1 disebelah Nama Depan
2. PlainText2 disebelah Nama Belakang
3. PlainText3 disebelah Nama Pengguna
Selain PlainText, saya juga menambahkan PalleteText Password yang berfungsi untuk
menginput Password. Pada Layout saya, Password digunakan pada:
1. Password1 disebelah Password
2. Password2 disebelah Konfirmasi
Selanjutnya, saya menambahkan button daftar yang ada pada bagian ButtonPallete Button.
Terakhir saya menambahkan gambar pada kedua sisi dibagian atas.

Pertama, pada bagian Code TextView1 / Buat Akun Lmail saya menambahkan:
android:layout_marginLeft="145dp"

Yang berfungsi untuk memberikan jarak pada tulisan yang dibuat.

Kedua, pada bagian Code TextView2 / Ini Cepat dan Mudah saya menambahkan:
android:layout_below="@id/textView2"
android:layout_marginLeft="130dp"
android:layout_marginTop="10dp"
Fungsi layout_below untuk membuat code TextView2 mengikuti code yang ada setelah
TextView1. Layout_marginleft berfungsi untuk memberi jarak tulisan agar bisa berpindah
dari sebelah kiri dan disini jarak layout_marginleft saya yaitu ada 130dp. Terakhir, pada
layout_margintop berfungsi untuk memberikan jarak antara textView1 dan textView2. Jarak
antara TextView2 dan TextView1 saya adalah 10dp.

Ketiga, pada bagian Code TextView3 / Nama Depan saya menambahkan:

android:layout_marginLeft="10dp"
android:layout_below="@id/textView3"
android:layout_marginTop="35dp"

Fungsi Layout_marginleft untuk memberi jarak tulisan agar bisa berpindah dari sebelah kiri
dan disini jarak layout_marginleft saya yaitu ada 10dp. Layout_below untuk membuat code
TextView3 mengikuti code yang ada setelah TextView2. Terakhir, pada layout_margintop
berfungsi untuk memberikan jarak antara textView3 dan textView2. Jarak antara TextView3
dan TextView2 saya adalah 35dp.

Keempat, pada bagian Code EditText1 saya menambahkan:

android:layout_marginLeft="40dp"
android:layout_marginTop="70dp"
android:layout_toRightOf="@id/textView5"

Fungsi Layout_marginleft untuk memberi jarak tulisan agar bisa berpindah dari sebelah kiri
dan disini jarak layout_marginleft saya yaitu ada 40dp. pada layout_margintop berfungsi
untuk memberikan jarak antara EditText1 dan textView3. Jarak antara EditText1 dan
TextView3 saya adalah 70dp. Terakhir ada layout_toRightOf berfungsi untuk memberikan
jarak antara TextView3 dan EditText1.
Kelima, pada bagian CodeTextView4 / Nama Belakang saya menambahkan
android:layout_marginLeft="10dp"
android:layout_below="@id/textView5"
android:layout_marginTop="30dp"

Fungsi Layout_marginleft untuk memberi jarak tulisan agar bisa berpindah dari sebelah kiri
dan disini jarak layout_marginleft saya yaitu ada 10dp. Layout_below untuk membuat code
TextView4 mengikuti code yang ada setelah TextView3. Terakhir, pada layout_margintop
berfungsi untuk memberikan jarak antara textView4 dan textView3. Jarak antara TextView4
dan TextView3 saya adalah 30dp.
Keempat, pada bagian Code EditText2 saya menambahkan:
android:layout_marginLeft="40dp"
android:layout_marginTop="120dp"
android:layout_toRightOf="@id/textView5"

Fungsi Layout_marginleft untuk memberi jarak tulisan agar bisa berpindah dari sebelah kiri
dan disini jarak layout_marginleft saya yaitu ada 40dp. pada layout_margintop berfungsi
untuk memberikan jarak antara EditText2 dan textView3. Jarak antara EditText2 dan
TextView3 saya adalah 120dp. Terakhir ada layout_toRightOf berfungsi untuk memberikan
jarak antara TextView4 dan EditText2.

Kelima, pada bagian CodeTextView5 / Nama Pengguna saya menambahkan

android:layout_marginLeft="10dp"
android:layout_below="@id/textView6"
android:layout_marginTop="30dp"

Fungsi Layout_marginleft untuk memberi jarak tulisan agar bisa berpindah dari sebelah kiri
dan disini jarak layout_marginleft saya yaitu ada 10dp. Layout_below untuk membuat code
TextView5 mengikuti code yang ada setelah TextView4. Terakhir, pada layout_margintop
berfungsi untuk memberikan jarak antara textView5 dan textView4. Jarak antara TextView5
dan TextView4 saya adalah 30dp.

Keenam, pada bagian Code EditText3 saya menambahkan:

android:layout_marginLeft="40dp"
android:layout_marginTop="170dp"
android:layout_toRightOf="@id/textView5"
android:hint="\@lmail.com"

Fungsi Layout_marginleft untuk memberi jarak tulisan agar bisa berpindah dari sebelah kiri
dan disini jarak layout_marginleft saya yaitu ada 40dp. pada layout_margintop berfungsi
untuk memberikan jarak antara EditText3 dan textView3. Jarak antara EditText3 dan
TextView3 saya adalah 170dp. Ada layout_toRightOf berfungsi untuk memberikan jarak
antara TextView5 dan EditText3. Terakhir ada hint, yang berfungsi untuk memberikan
petunjuk sesuai dengan hint yang dibuat pada code.
Ketujuh, pada bagian CodeTextView6 / Password saya menambahkan
android:layout_marginLeft="10dp"
android:layout_below="@id/textView8"
android:layout_marginTop="30dp"

Fungsi Layout_marginleft untuk memberi jarak tulisan agar bisa berpindah dari sebelah kiri
dan disini jarak layout_marginleft saya yaitu ada 10dp. Layout_below untuk membuat code
TextView6 mengikuti code yang ada setelah TextView5. Terakhir, pada layout_margintop
berfungsi untuk memberikan jarak antara textView6 dan textView5. Jarak antara TextView6
dan TextView5 saya adalah 30dp.

Kedelapan, pada bagian Code EditText4 saya menambahkan:

android:layout_marginLeft="20dp"
android:layout_marginTop="210dp"
android:layout_toRightOf="@id/textView8"

Fungsi Layout_marginleft untuk memberi jarak tulisan agar bisa berpindah dari sebelah kiri
dan disini jarak layout_marginleft saya yaitu ada 20dp. pada layout_margintop berfungsi
untuk memberikan jarak antara EditText4 dan textView5. Jarak antara EditText4 dan
TextView5 saya adalah 210dp. Ada layout_toRightOf berfungsi untuk memberikan jarak
antara TextView6 dan EditText4.

Kesembilan, pada bagian CodeTextView7 / Konfirmasi saya menambahkan

android:layout_marginLeft="10dp"
android:layout_below="@id/textView9"
android:layout_marginTop="30dp"

Fungsi Layout_marginleft untuk memberi jarak tulisan agar bisa berpindah dari sebelah kiri
dan disini jarak layout_marginleft saya yaitu ada 10dp. Layout_below untuk membuat code
TextView7 mengikuti code yang ada setelah TextView6. Terakhir, pada layout_margintop
berfungsi untuk memberikan jarak antara textView7 dan textView6. Jarak antara TextView7
dan TextView6 saya adalah 30dp.
Kesepuluh, pada bagian Code EditText5 saya menambahkan:
android:layout_marginLeft="60dp"
android:layout_marginTop="260dp"
android:layout_toRightOf="@id/textView8"

Fungsi Layout_marginleft untuk memberi jarak tulisan agar bisa berpindah dari sebelah kiri
dan disini jarak layout_marginleft saya yaitu ada 60dp. Pada layout_margintop berfungsi
untuk memberikan jarak antara EditText5 dan textView4. Jarak antara EditText5 dan
TextView4 saya adalah 260dp. Ada layout_toRightOf berfungsi untuk memberikan jarak
antara TextView7 dan EditText5.

Selanjutnya pada bagian button saya menambahkan:

android:layout_below="@id/textView10"
android:layout_marginTop="30dp"
android:layout_marginLeft="135dp"

Fungsi layout_below untuk untuk membuat kode button mengikuti kode yang ada setelah
TextView7 pada konfirmasi. Pada layout_margintop berfungsi untuk memberikan jarak
antara textView7 dengan button. Jarak yang saya buat disini ada 30dp. Terakhir saya
membuat layout_marginleft dengan jarak 135dp.
Terakhir, ada dua ImageView yang berfungsi untuk menambahkan gambar pada desain.
Dengan code seperti dibawah ini:
<ImageView
android:layout_width="80dp"
android:layout_height="130dp"
android:layout_marginLeft="270dp"
android:layout_marginTop="-25dp"
android:src="@drawable/lmail" />

<ImageView
android:layout_width="80dp"
android:layout_height="130dp"
android:layout_marginLeft="27dp"
android:layout_marginTop="-25dp"
android:src="@drawable/lmail" />

Untuk mengubah ukuran gambar menggunakan layout_width dan layout_height. Untuk

mengubah posisi gambar menggunakan layout_marginLeft dan layout_marginTop. Terakhir,
untuk memanggil gambar menggunakan src.
Source Code Lengkap Relative Layout :

<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#C6A1CF"
>

<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="145dp"
android:text="Buat Akun Lmail" />

<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/textView2"
android:layout_marginLeft="130dp"
android:layout_marginTop="10dp"
android:text="Ini Cepat dan Mudah" />

<TextView
android:id="@+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_below="@id/textView3"
android:layout_marginTop="35dp"
android:text="Nama Depan" />

<EditText
android:id="@+id/editTextTextPersonName3"
android:layout_width="268dp"
android:layout_height="wrap_content"
android:layout_marginLeft="40dp"
android:layout_marginTop="70dp"
android:layout_toRightOf="@id/textView5"
android:ems="10"
android:inputType="textPersonName"
android:text="" />
<TextView
android:id="@+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_below="@id/textView5"
android:layout_marginTop="30dp"
android:text="Nama Belakang" />

<EditText
android:id="@+id/editTextTextPersonName4"
android:layout_width="267dp"
android:layout_height="wrap_content"
android:layout_marginLeft="40dp"
android:layout_marginTop="120dp"
android:layout_toRightOf="@id/textView5"
android:ems="10"
android:inputType="textPersonName"
android:text="" />

<TextView
android:id="@+id/textView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_below="@id/textView6"
android:layout_marginTop="30dp"
android:text="Nama Pengguna" />

<EditText
android:id="@+id/editTextTextPersonName5"
android:layout_width="265dp"
android:layout_height="wrap_content"
android:layout_marginLeft="40dp"
android:layout_marginTop="170dp"
android:layout_toRightOf="@id/textView5"
android:ems="10"
android:hint="\@lmail.com"
android:inputType="textPersonName"
android:text="" />
<TextView
android:id="@+id/textView9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_below="@id/textView8"
android:layout_marginTop="30dp"
android:text="Password" />

<EditText
android:id="@+id/editTextTextPassword"
android:layout_width="261dp"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginTop="210dp"
android:layout_toRightOf="@id/textView8"
android:ems="10"
android:inputType="textPassword" />

<TextView
android:id="@+id/textView10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_below="@id/textView9"
android:layout_marginTop="30dp"
android:text="Konfirmasi" />

<EditText
android:id="@+id/editTextTextPassword2"
android:layout_width="262dp"
android:layout_height="wrap_content"
android:layout_marginLeft="60dp"
android:layout_marginTop="260dp"
android:layout_toRightOf="@id/textView9"
android:ems="10"
android:inputType="textPassword" />

<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/textView10"
android:layout_marginTop="30dp"
android:layout_marginLeft="135dp"
android:text="DAFTAR" />
 <ImageView
android:layout_width="80dp"
android:layout_height="130dp"
android:layout_marginLeft="270dp"
android:layout_marginTop="-25dp"
android:src="@drawable/lmail" />

<ImageView
android:layout_width="80dp"
android:layout_height="130dp"
android:layout_marginLeft="27dp"
android:layout_marginTop="-25dp"
android:src="@drawable/lmail" />
</RelativeLayout>
Penjelasan Koding Linear Layout :
Linear layourt merupakan salah satu jenis ViewGroup yang ada di android studio dan dapat
digunakan sebagai root xml dalam memulai sebuah desain tampilan pengguna. Linear layout
dibagi menjadi 2 orientasi yaitu ada horizontal dan vertikal
1. Horizontal

Hasil diatas merupakan hasil dari Linear Layout Horizontal. Pada Linear Layout Horizontal
ini menggunakan 2 Pallete pada design yaitu ada EditText dan Button. Agar orientasi
horizontal berhasil, pastikan orientation pada code benar untuk horizontal.
Untuk yang pertama, ada EditText yang digunakan untuk menginput tulisan atau kata saat
program di run nantinya. Kemudian ada 2 button, dimana button pertama berfungsi untuk
Log in atau masuk dan button kedua berfungsi untuk cancel atau membatalkan inputan yang
dimasuk. Hasil dari code orientasi horizontal ini dapat kita lihat mulai dari kiri ke kanan.
 2. Vertikal

Hasil diatas merupakan hasil dari Linear Layout Vertikal. Pada Linear Layout Vertikal ini
juga menggunakan 2 Pallete pada design yaitu EditText dan Button. Pastikan orientation pada
code benar untuk vertikal.
Ada EditText yang digunakan untuk menginput tulisan atau kata saat program di run nantinya.
Kemudian ada 2 button, dimana button pertama berfungsi untuk Log in atau masuk dan
button kedua berfungsi untuk cancel atau membatalkan inputan yang dimasuk. Hasil dari
code orientasi vertikal ini dapat kita lihat mulai dari atas ke bawah.
Source Code Lengkap Linear Layout :
1. Horizontal
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">

<EditText
android:id="@+id/edittext1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="Masukan Nama"
android:inputType="text" />

<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Log In" />

<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cancel" />
</LinearLayout>
 2. Vertical
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText
android:id="@+id/edittext1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="Masukan Text"
android:inputType="text" />

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/button1"
android:text="Log In" />

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/button2"
android:text="Cancel" />
</LinearLayout>