LAPORAN

WORKSHOP MOBILE APPLICATION

(TIF130707)
MINGGU 5

SEMESTER III

Implementasi Fragment

Kelompok:
C3

Nama Anggota:
Rurin Nur Haliza (E41222052)
Atilah Lazuardi Azra (E41222103)
Syamaidzar Adani Syah (E41222120)
Shela Wahyu Nur Widodo (E41222227)
Mohammad Ilham Islamy (E41222887)

Dosen Pengampu:
Raditya Arief Pratama ., S.kom., M.Eng.

PROGRAM STUDI TEKNIK INFORMATIKA KAMPUS 3 NGANJUK

JURUSAN TEKNOLOGI INFORMASI
POLITEKNIK NEGERI JEMBER
TAHUN 2023
 Fragment
Activity_fragment.xml

Keterangan
• LinearLayout: Ini adalah elemen tampilan utama yang digunakan untuk
mengelompokkan elemen-elemen tampilan lainnya secara vertikal. Dalam hal ini,
LinearLayout memiliki beberapa atribut:
o xmlns:android: Ini adalah atribut yang mendefinisikan namespace untuk
elemen-elemen Android.
o xmlns:app: Ini adalah atribut yang mendefinisikan namespace tambahan untuk
elemen-elemen aplikasi (biasanya digunakan untuk komponen dari library atau
pustaka pihak ketiga).
o xmlns:tools: Ini adalah atribut yang mendefinisikan namespace tambahan yang
sering digunakan oleh alat pengembangan (tools) saat merancang tampilan.
 o android:layout_width dan android:layout_height: Menentukan lebar dan tinggi
dari LinearLayout, yang dalam kasus ini disetel sebagai "match_parent," yang
berarti mengisi seluruh ruang yang tersedia di dalam kontainer induknya.
o android:orientation: Menentukan tata letak anak-anak LinearLayout secara
vertikal, yang berarti elemen-elemen akan ditata secara berurutan dari atas ke
bawah.
• Button: elemen yang mewakili tombol dalam tampilan. Dalam kode tersebut, ada
dua elemen <Button>:

o android:id: Ini adalah atribut yang memberikan ID unik kepada tombol

tersebut. ID ini digunakan untuk mengidentifikasi tombol ini dalam kode Java.
o android:layout_width dan android:layout_height: Menentukan lebar dan tinggi
tombol, yang disetel sebagai "match_parent" untuk lebar (agar mengisi seluruh
lebar layar) dan "wrap_content" untuk tinggi (agar mengikuti tinggi konten
tombol).
o android:text: Isi teks yang akan ditampilkan pada tombol.
o android:textColor dan android:textSize: Menentukan warna teks dan ukuran
teks pada tombol.
• FrameLayout: Ini adalah elemen tampilan yang digunakan untuk menampung
fragmen atau tampilan lainnya. Dalam kode ini:

o android:id: Ini adalah atribut yang memberikan ID unik kepada FrameLayout.

ID ini digunakan untuk mengidentifikasi FrameLayout ini dalam kode Java
Anda.
o android:layout_width dan android:layout_height: Menentukan lebar dan tinggi
FrameLayout, yang disetel sebagai "match_parent" untuk mengisi seluruh
ruang yang tersedia.
acara18.java

Keterangan
o Package dan Imports: Kode dimulai dengan mendefinisikan paket aplikasi
Anda (com.example.acara_14) dan beberapa import yang diperlukan dari
kerangka kerja Android.
o acara18 Class: Ini adalah kelas utama yang mewarisi dari AppCompatActivity,
yang merupakan salah satu kelas dasar yang digunakan dalam pengembangan
aplikasi Android.
o Deklarasi Variabel: Dalam kelas acara18, dua objek Button dideklarasikan
sebagai btnFirstFragment dan btnSecondFragment. Ini akan digunakan untuk
mengendalikan dua tombol yang ada di tata letak XML.
o onCreate() Method: Ini adalah metode yang dieksekusi ketika aktivitas
dimulai. Di dalamnya:
a. super.onCreate(savedInstanceState);: Ini memanggil metode onCreate
dari kelas dasar (AppCompatActivity) untuk melakukan persiapan dasar
untuk aktivitas.
b. setContentView(R.layout.activity_fragment);: Ini mengatur tampilan
aktivitas dengan menghubungkannya dengan layout XML yang telah
disebutkan sebelumnya (activity_fragment.xml).
c. btnFirstFragment dan btnSecondFragment diinisialisasi dengan tombol
yang sesuai dari tata letak XML.
 d. setOnClickListener digunakan untuk menetapkan tindakan yang akan
diambil ketika tombol-tombol ini diklik.
o loadFragment() Method: Ini adalah metode yang digunakan untuk
menggantikan konten di dalam FrameLayout dengan fragmen yang sesuai. Di
dalam metode ini:
a. FragmentManager (fm) digunakan untuk mengelola fragmen di aktivitas.
b. FragmentTransaction (fragmentTransaction) digunakan untuk memulai
transaksi fragmen.
c. fragmentTransaction.replace(R.id.frameLayout, fragment); digunakan
untuk menggantikan konten di dalam FrameLayout (dalam layout XML)
dengan fragmen yang diberikan.
d. fragmentTransaction.commit(); digunakan untuk menyelesaikan
transaksi dan menggantikan fragmen.

FirstFragment.class

Keterangan :
o Package dan Imports: Kode dimulai dengan mendefinisikan paket aplikasi
Anda (com.example.acara_14) dan beberapa import yang diperlukan dari
kerangka kerja Android.
o FirstFragment Class: Ini adalah kelas yang mewarisi dari Fragment, yang
merupakan kelas dasar untuk membuat fragmen di Android.
o Variabel-variabel: Dalam kelas FirstFragment, ada dua variabel yang
dideklarasikan:
a. View view;: Variabel ini digunakan untuk menyimpan tampilan yang
akan dikembalikan oleh metode onCreateView.
b. Button firstButton;: Variabel ini digunakan untuk merujuk ke tombol
yang ada dalam tampilan fragmen.
o onCreateView() Method: Ini adalah metode yang wajib ada dalam setiap
fragmen dan akan dipanggil ketika fragmen diperlukan untuk menggambar
tampilannya. Di dalamnya:
a. LayoutInflater inflater: Objek ini digunakan untuk menginflasi
(mengubah) XML layout menjadi tampilan Java yang dapat
dimanipulasi.
b. ViewGroup container: Ini adalah tampilan yang berisi fragmen, dalam
hal ini FrameLayout yang telah didefinisikan dalam tata letak utama.
c. Bundle saveInstanceState: Ini adalah objek yang dapat digunakan
untuk mengambil data yang mungkin disimpan saat konfigurasi
perangkat berubah (seperti rotasi layar).
d. view = inflater.inflate(R.layout.fragment_first, container, false);: Ini
menginflasi layout XML yang disebutkan dalam
R.layout.fragment_first menjadi objek View. Hasilnya akan digunakan
untuk menampilkan fragmen ini.
e. firstButton = view.findViewById(R.id.firstButton);: Ini adalah cara
untuk merujuk ke tombol yang ada dalam tampilan fragmen
menggunakan ID yang sesuai.
f. firstButton.setOnClickListener(): Ini menambahkan tindakan yang
akan diambil saat tombol tersebut diklik. Dalam hal ini, ketika tombol
diklik, akan muncul pesan toast yang menampilkan teks "First
Fragment" selama 3 detik.
g. Terakhir, metode onCreateView mengembalikan objek view yang telah
diisi dengan tampilan yang telah diubah sesuai dengan layout XML.
Tampilan ini akan ditampilkan di dalam FrameLayout pada aktivitas
utama.
SecondFragment.class

Keterangan
o Package dan Imports: Kode dimulai dengan mendefinisikan paket aplikasi
Anda (com.example.acara_14) dan beberapa import yang diperlukan dari
kerangka kerja Android.
o SecondFragment Class: Ini adalah kelas yang mewarisi dari Fragment, yang
merupakan kelas dasar untuk membuat fragmen di Android.
o Variabel-variabel: Dalam kelas SecondFragment, ada dua variabel yang
dideklarasikan:
a. View view;: Variabel ini digunakan untuk menyimpan tampilan yang akan
dikembalikan oleh metode onCreateView.
b. Button SecondButton;: Variabel ini digunakan untuk merujuk ke tombol
yang ada dalam tampilan fragmen.
o onCreateView() Method: Ini adalah metode yang wajib ada dalam setiap
fragmen dan akan dipanggil ketika fragmen diperlukan untuk menggambar
tampilannya. Di dalamnya:
a. LayoutInflater inflater: Objek ini digunakan untuk menginflasi
(mengubah) XML layout menjadi tampilan Java yang dapat dimanipulasi.
b. ViewGroup container: Ini adalah tampilan yang berisi fragmen, dalam hal
ini FrameLayout yang telah didefinisikan dalam tata letak utama.
c. Bundle saveInstanceState: Ini adalah objek yang dapat digunakan untuk
mengambil data yang mungkin disimpan saat konfigurasi perangkat
berubah (seperti rotasi layar).
d. view = inflater.inflate(R.layout.fragment_second, container, false);: Ini
menginflasi layout XML yang disebutkan dalam
R.layout.fragment_second menjadi objek View. Hasilnya akan digunakan
untuk menampilkan fragmen ini.
 e. SecondButton = view.findViewById(R.id.secondbutton);: Ini adalah cara
untuk merujuk ke tombol yang ada dalam tampilan fragmen menggunakan
ID yang sesuai.
f. SecondButton.setOnClickListener(): Ini menambahkan tindakan yang
akan diambil saat tombol tersebut diklik. Dalam hal ini, ketika tombol
diklik, akan muncul pesan toast yang menampilkan teks "Second
Fragment" selama 3 detik.
g. Terakhir, metode onCreateView mengembalikan objek view yang telah
diisi dengan tampilan yang telah diubah sesuai dengan layout XML.
Tampilan ini akan ditampilkan di dalam FrameLayout pada aktivitas
utama.

Fragmenti_first.xml
Keterangan :
o RelativeLayout: Ini adalah elemen tampilan yang digunakan untuk mengatur
tampilan elemen-elemen anaknya berdasarkan hubungan relatif terhadap satu
sama lain atau terhadap elemen induknya. Dalam kasus ini, RelativeLayout
adalah elemen tampilan utama yang digunakan untuk mengelompokkan
elemen-elemen tampilan lainnya.
a. android:layout_width dan android:layout_height: Menentukan lebar dan
tinggi dari RelativeLayout, yang disetel sebagai "match_parent," yang
berarti mengisi seluruh ruang yang tersedia di dalam kontainer induknya.
b. xmlns:tools: Ini adalah atribut yang mendefinisikan namespace
tambahan yang sering digunakan oleh alat pengembangan (tools) saat
merancang tampilan.

o TextView: Ini adalah elemen yang digunakan untuk menampilkan teks pada
tampilan. Dalam kode ini:

a. android:id: Ini adalah atribut yang memberikan ID unik kepada

TextView. ID ini dapat digunakan untuk mengidentifikasi TextView ini
dalam kode Java jika perlu.
b. android:layout_width dan android:layout_height: Menentukan lebar dan
tinggi TextView, yang disetel sebagai "wrap_content," yang berarti akan
mengikuti ukuran konten teksnya.
c. android:layout_centerHorizontal="true": Ini menempatkan TextView
secara horizontal di tengah RelativeLayout.
d. android:layout_marginTop="100dp": Ini memberikan jarak atas (margin
atas) sebanyak 100dp dari bagian atas RelativeLayout.
e. android:text: Isi teks yang akan ditampilkan oleh TextView, yaitu "this is
First Fragments."
f. android:textColor: Menentukan warna teks dalam TextView.
g. android:textSize: Menentukan ukuran teks dalam TextView.

o Button: Ini adalah elemen yang mewakili tombol dalam tampilan. Dalam kode
ini:
a. android:id: Ini adalah atribut yang memberikan ID unik kepada Button.
ID ini dapat digunakan untuk mengidentifikasi Button ini dalam kode
Java jika perlu.
b. android:layout_width dan android:layout_height: Menentukan lebar dan
tinggi Button, yang disetel sebagai "wrap_content" untuk tinggi dan
"match_parent" untuk lebar (agar tombol mengisi seluruh lebar layar).
c. android:layout_centerInParent="true": Ini menempatkan Button di
tengah RelativeLayout secara horizontal dan vertikal.
d. android:layout_marginLeft="20dp" dan
android:layout_marginRight="20dp": Ini memberikan margin sebanyak
20dp di sebelah kiri dan kanan tombol.
 e. android:text: Isi teks yang akan ditampilkan oleh tombol, yaitu "First
Fragment."
f. android:textColor: Menentukan warna teks pada tombol.
g. android:textSize: Menentukan ukuran teks pada tombol.
h. android:textStyle="bold": Ini membuat teks pada tombol menjadi tebal
(bold).

Fragment_second.xml

Keterangan :
o RelativeLayout: Ini adalah elemen tampilan yang digunakan untuk mengatur
tampilan elemen-elemen anaknya berdasarkan hubungan relatif terhadap satu
sama lain atau terhadap elemen induknya. Dalam kasus ini, RelativeLayout
adalah elemen tampilan utama yang digunakan untuk mengelompokkan
elemen-elemen tampilan lainnya.
 a. android:layout_width dan android:layout_height: Menentukan lebar dan
tinggi dari RelativeLayout, yang disetel sebagai "match_parent," yang
berarti mengisi seluruh ruang yang tersedia di dalam kontainer induknya.
b. xmlns:tools: Ini adalah atribut yang mendefinisikan namespace
tambahan yang sering digunakan oleh alat pengembangan (tools) saat
merancang tampilan.

o TextView: Ini adalah elemen yang digunakan untuk menampilkan teks pada
tampilan. Dalam kode ini:
a. android:id: Ini adalah atribut yang memberikan ID unik kepada
TextView. ID ini dapat digunakan untuk mengidentifikasi TextView ini
dalam kode Java jika perlu.
b. android:layout_width dan android:layout_height: Menentukan lebar dan
tinggi TextView, yang disetel sebagai "wrap_content," yang berarti akan
mengikuti ukuran konten teksnya.
c. android:layout_centerHorizontal="true": Ini menempatkan TextView
secara horizontal di tengah RelativeLayout.
d. android:layout_marginTop="100dp": Ini memberikan jarak atas (margin
atas) sebanyak 100dp dari bagian atas RelativeLayout.
e. android:text: Isi teks yang akan ditampilkan oleh TextView, yaitu "this is
Second Fragments."
f. android:textColor: Menentukan warna teks dalam TextView.
g. android:textSize: Menentukan ukuran teks dalam TextView.

o Button: Ini adalah elemen yang mewakili tombol dalam tampilan. Dalam kode
ini:
a. android:id: Ini adalah atribut yang memberikan ID unik kepada Button.
ID ini dapat digunakan untuk mengidentifikasi Button ini dalam kode
Java jika perlu.
b. android:layout_width dan android:layout_height: Menentukan lebar dan
tinggi Button, yang disetel sebagai "wrap_content" untuk tinggi dan
"match_parent" untuk lebar (agar tombol mengisi seluruh lebar layar).
c. android:layout_centerInParent="true": Ini menempatkan Button di
tengah RelativeLayout secara horizontal dan vertikal.
d. android:layout_marginLeft="20dp" dan
android:layout_marginRight="20dp": Ini memberikan margin sebanyak
20dp di sebelah kiri dan kanan tombol.
e. android:text: Isi teks yang akan ditampilkan oleh tombol, yaitu "Second
Fragment."
f. android:textColor: Menentukan warna teks pada tombol.
g. android:textSize: Menentukan ukuran teks pada tombol.
h. android:textStyle="bold": Ini membuat teks pada tombol menjadi tebal
(bold).

Color value
Keterangan :
o <resources>: Ini adalah elemen root (akar) dari file sumber daya warna.
Semua definisi warna akan ditempatkan di dalam elemen ini.

o <color>: Ini adalah elemen yang digunakan untuk mendefinisikan warna.

Setiap elemen <color> memiliki dua atribut utama:

a. name: Ini adalah atribut yang memberikan nama unik untuk warna
tersebut. Nama ini akan digunakan untuk merujuk ke warna ini dari kode
XML atau kode Java dalam aplikasi Anda.

b. Isi elemen <color>: Ini adalah nilai warna yang didefinisikan dalam
format RGBA (merah, hijau, biru, dan alpha/transparansi). Format nilai
warna adalah dalam format heksadesimal ARGB (Alpha, Red, Green,
Blue), di mana nilai alpha mendefinisikan tingkat transparansi dan nilai
merah, hijau, dan biru mendefinisikan komponen warna. Dalam contoh
Anda, nilai-nilai warna ditulis dalam format heksadesimal dengan
awalan #FF, yang menunjukkan bahwa nilai alpha penuh (tidak ada
transparansi). Setelahnya, terdapat enam digit heksadesimal yang
menggambarkan warna merah, hijau, dan biru.
Output
Rurin Nur Haliza

Atilah Lazuardi Azra

Syamaidzar Adani Syah

Shela Wahyu Nur Widodo

Mohammad Ilham Islamy

Link Github : https://github.com/syamadanisyah/LokerApp.git