A Guide to Android UI Layouts

(1)

MODUL 2

Antarmuka Pengguna

Dosen Pengampu : Dede Husen, M.Kom

Disusun oleh :

Nama : Nanda Aprillia Lestari Mufti

NIM : 20210810159

Kelas : TINFC-2021-02

PROGRAM STUDI TEKNIK INFORMATIKA FAKULTAS ILMU KOMPUTER

UNIVERSITAS KUNINGAN 2024

(2)

I PRE TEST

1. Jelaskan Perbedaan LinearLayout dan RelativeLayout ? Jawab :

LinearLayout dan RelativeLayout adalah dua jenis layout yang sering digunakan dalam pengembangan aplikasi Android untuk mengatur tata letak (layout) dari elemen-elemen antarmuka pengguna (UI).

a) LinearLayout adalah tata letak yang sederhana dan sering digunakan untuk mengatur elemen-elemen dalam satu arah (vertikal atau horizontal). Dalam LinearLayout, elemen-elemen ditempatkan secara berurutan satu demi satu dalam satu baris (horizontal) atau satu kolom (vertikal).

b) RelativeLayout adalah tata letak yang lebih fleksibel yang memungkinkan Kita menempatkan elemen-elemen relatif terhadap elemen lain atau relatif terhadap parent container. Dalam RelativeLayout, Kita dapat menentukan hubungan posisi antara elemen-elemen, seperti berada di atas, di bawah, di samping, atau di tengah elemen lain.

RelativeLayout memungkinkan tata letak yang lebih kompleks dan fleksibel dibandingkan LinearLayout.

Dalam pemilihan antara LinearLayout dan RelativeLayout, pertimbangkan kompleksitas tata letak yang ingin Kita buat. Jika tata letak cukup sederhana dan dalam satu arah, LinearLayout mungkin lebih cocok. Namun, jika Kita perlu tata letak yang lebih fleksibel dan kompleks, terutama dengan elemen-elemen yang saling terkait dalam posisi, maka RelativeLayout bisa menjadi pilihan yang lebih baik.

(3)

II

PRAKTIKUM

 Membuat sebuah project baru

 Menambahkan script berikut pada direktori res/layout/activity_main.xml

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

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

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:background="@color/white">

<LinearLayout

android:orientation="vertical">

<LinearLayout

android:layout_marginLeft="5dp"

android:layout_marginTop="5dp"

android:layout_marginRight="5dp"

android:layout_marginBottom="5dp"

<TextView

android:layout_height="wrap_content"

(4)

android:text="Masukan Nama Anda :"

android:textColor="#000000" />

<EditText

android:id="@+id/nama"

android:textColor="@color/black"

android:hint="Isikan Nama Lengkap Anda" />

<TextView

android:text="Sudah Menikah ?"

<CheckBox

android:id="@+id/menikah"

android:text="Menikah"

<TextView

android:text="Golongan"

<RadioGroup

android:id="@+id/rgGolongan"

android:layout_width="wrap_content"

(5)

android:orientation="horizontal">

<RadioButton

android:id="@+id/rbGolongan1"

android:checked="true"

android:text="Golongan 1"

<RadioButton

</RadioGroup>

<Button

android:id="@+id/hitung"

android:background="@color/colorAccent"

android:onClick="hitung"

android:text="Hitung Gaji" />

<TextView

android:id="@+id/outputNama"

android:gravity="center"

android:text=""

android:textColor="#000000"

(6)

android:textSize="20dp" />

<TextView

android:id="@+id/outputStatus"

android:text=""

<TextView

android:id="@+id/outputGaji"

</LinearLayout>

</ScrollView>

 Menambahkan script berikut pada direktori java/com.example.praktikummodul2 /MainActivity.java

package com.example.praktikummodul2;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

import android.view.View;

import android.widget.Button;

import android.widget.CheckBox;

import android.widget.EditText;

import android.widget.RadioButton;

import android.widget.RadioGroup;

import android.widget.TextView;

(7)

import com.example.praktikummodul2.R;

public class MainActivity extends AppCompatActivity { int gajiStatus, gajiGolongan;

RadioGroup golongan;

CheckBox status;

@Override

public void onCreate(Bundle

savedInstanceState) { super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

}

public void hitung(View v) {

EditText nama = (EditText) findViewById(R.id.nama);

TextView outputNama = (TextView) findViewById(R.id.outputNama);

String name = nama.getText().toString();

outputNama.setText("Total Gaji Anda " + name);

status = (CheckBox) findViewById(R.id.menikah);

if (status.isChecked()) { gajiStatus = 500000;

} else { gajiStatus = 0;

}

golongan = (RadioGroup) findViewById(R.id.rgGolongan);

int gol =

golongan.getCheckedRadioButtonId();

if (gol == R.id.rbGolongan1) { gajiGolongan = 1000000;

} else if (gol == R.id.rbGolongan2) { gajiGolongan =

2000000;

} ;

int totalGaji = gajiStatus + gajiGolongan;

(8)

TextView total = (TextView) findViewById(R.id.outputGaji);

total.setText(String.valueOf(totalGaji));

} }

 Menjalankan program menggunakan device Samsung SM-A105G

(9)

 Proses Upload ke Github

(10)

(11)

(12)

III POST TEST

1. Jelaskan maksud dari script : android:onClick=”hitung” ? Jawab :

Script `android:onClick="hitung"` merupakan atribut yang digunakan dalam file XML untuk menghubungkan sebuah elemen UI (seperti button) dengan metode Java yang akan dipanggil saat elemen tersebut diklik. Dalam konteks ini, ketika elemen tersebut (biasanya button) diklik, maka metode `hitung` pada kelas `MainActivity` akan dipanggil.

Secara lebih spesifik, `android:onClick="hitung"` akan terhubung dengan method

`hitung(View v)` pada kelas `MainActivity`. Dengan demikian, setiap kali elemen yang terhubung dengan atribut `android:onClick="hitung"` diklik, method `hitung(View v)` akan dijalankan.

(13)

IV TUGAS

1. Pada hasil yang didapat hanya menampilkan Nama dan Total Gaji, buat agar Status dan Golongan tampil pada layar juga !

Jawab :

 Modifikasi script praktikum pada direktori res/layout/activity_main.xml

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

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

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@color/white">

<LinearLayout

android:layout_width="match_parent"

android:orientation="vertical"

android:padding="16dp">

<LinearLayout

android:layout_marginLeft="5dp"

android:layout_marginRight="5dp"

android:layout_marginBottom="5dp"

<TextView

android:text="Masukan Nama Anda :"

(14)

<EditText

android:id="@+id/nama"

android:textColor="@color/black"

android:hint="Isikan Nama Lengkap Anda" />

<TextView

android:text="Sudah Menikah ?"

<CheckBox

android:id="@+id/menikah"

android:text="Menikah"

<TextView

android:text="Golongan"

<RadioGroup

android:id="@+id/rgGolongan"

android:orientation="horizontal">

<RadioButton

(15)

android:checked="true"

<RadioButton

</RadioGroup>

<Button

android:id="@+id/hitung"

android:background="@color/colorAccent"

android:onClick="hitung"

android:text="Hitung Gaji" />

<TextView

android:id="@+id/hasilperhitungan"

android:layout_gravity="center"

<TextView

android:id="@+id/outputNama"

(16)

android:text=""

<TextView

android:id="@+id/outputStatus"

android:text=""

<TextView

android:id="@+id/outputGolongan"

android:text=""

<TextView

android:id="@+id/outputGaji"

android:text=""

</LinearLayout>

</ScrollView>

(17)

 Modifikasi script praktikum pada direktori java/com.example.praktikummodul2 /MainActivity.java sehingga seperti berikut

package com.example.praktikummodul2;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

import android.view.View;

import android.widget.Button;

import android.widget.CheckBox;

import android.widget.EditText;

import android.widget.RadioButton;

import android.widget.RadioGroup;

import android.widget.TextView;

public class MainActivity

extends AppCompatActivity { int gajiStatus, gajiGolongan;

RadioGroup golongan;

CheckBox status;

@Override

public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

}

public void hitung(View v) {

EditText nama = (EditText) findViewById(R.id.nama);

TextView outputNama = (TextView) findViewById(R.id.outputNama);

String name = nama.getText().toString();

outputNama.setText("Nama\t\t\t\t\t: " + name);

status = (CheckBox) findViewById(R.id.menikah);

String statusText = status.isChecked() ? "Status\t\t\t\t\t: Menikah" : "Status\t\t\t\t\t\t:

Belum Menikah";

golongan = (RadioGroup) findViewById(R.id.rgGolongan);

(18)

int gol = golongan.getCheckedRadioButtonId();

String golonganText = "";

if (gol == R.id.rbGolongan1) { golonganText = "Golongan\t\t: 1";

} else if (gol == R.id.rbGolongan2) { golonganText = "Golongan\t\t: 2";

}

gajiStatus = status.isChecked() ? 500000 : 0;

gajiGolongan = gol == R.id.rbGolongan1 ? 1000000 : (gol == R.id.rbGolongan2 ? 2000000 : 0);

int totalGaji = gajiStatus + gajiGolongan;

TextView total = (TextView) findViewById(R.id.outputGaji);

total.setText("Total Gaji\t\t: " + totalGaji);

TextView statusView = (TextView) findViewById(R.id.outputStatus);

statusView.setText(statusText);

TextView golonganView = (TextView) findViewById(R.id.outputGolongan);

golonganView.setText(golonganText);

TextView hasilPerhitungan = (TextView) findViewById(R.id.hasilperhitungan);

hasilPerhitungan.setText("HASIL PERHITUNGAN\n");

} }

(19)

 Menjalankan program menggunakan device Samsung SM-A105G

(20)

 Proses Upload ke Github

(21)

Link Github :

https://github.com/nandapril27/Aplikasi-Perhitungan-Gaji-Modul-2-PAB.git