Nama : Akma Ghani Aidyn

NIM : L0122011

Analisis Kode

Pada praktikum kali ini, membuat sebuah aplikasi bertemakan F1, yang menerapkan
RecyclerView dan layout yang terdiri dari gambar, judul, dan deskripsi. Serta juga terdapat
fungsi on click pada setiap item. Lalu aplikasi ini juga dibuat kompatibel dengan dark/light
theme.

MainActivity.kt
package com.pab.f1app

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView

class MainActivity : AppCompatActivity() {

private lateinit var recyclerView: RecyclerView

private lateinit var adapter: MyAdapter

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)

// Set the Toolbar as the app bar for the activity

setSupportActionBar(findViewById(R.id.toolbar))

recyclerView = findViewById(R.id.recyclerView)
recyclerView.layoutManager = LinearLayoutManager(this)
adapter = MyAdapter(this, generateDummyData())
recyclerView.adapter = adapter
}

private fun generateDummyData(): List<DataModel> {

val dataList = ArrayList<DataModel>()
val driversRedBull = listOf("Sergio Perez", "Max Verstappen")
val driversFerrari = listOf("Charles Leclerc", "Carlos Sainz")
val driversMcLaren = listOf("Oscar Piastri", "Lando Noris")
val driversMercedes = listOf("Lewis Hamilton", "George Russell")
val driversAstonMartin = listOf("Lance Stroll", "Fernando
Alonso")
val driversRB = listOf("Daniel Ricciardo", "Yuki Tsunoda")
val driversHaas = listOf("Kevin Magnussen", "Nico Hulkenberg")
val driversWilliams = listOf("Alexander Albon", "Logan Sergeant")
val driversKickSauber = listOf("Zhou Guanyu", "Valtteri Bottas")
val driversAlpine = listOf("Esteban Ocon", "Pierre Gasly")

dataList.add(DataModel(R.drawable.redbull, "Red Bull Racing",

"Oracle Red Bull Racing, headquartered in Milton Keynes, United Kingdom,
operates under the leadership of Team Chief Christian Horner and
Technical Chief Pierre Waché. The team's chassis, designated RB20, is
powered by the Honda RBPT engine. Since their inaugural entry into
Formula One in 1997, they have clinched six World Championships. Their
track record boasts an impressive 116 first-place finishes, accompanied
by 99 pole positions and 97 fastest laps.", driversRedBull))
dataList.add(DataModel(R.drawable.ferrari, "Ferrari", "Scuderia
Ferrari, based in Maranello, Italy, is overseen by Team Chief Frédéric
Vasseur and Technical Chiefs Enrico Cardile and Enrico Gualtieri. The
team competes with the SF-24 chassis powered by a Ferrari engine. Since
its inaugural entry into Formula One in 1950, Scuderia Ferrari has
clinched an impressive 16 World Championships. Their track record
includes 245 first-place finishes, 249 pole positions, and 261 fastest
laps, solidifying their position as one of the most successful teams in
the history of Formula One racing.", driversFerrari))
dataList.add(DataModel(R.drawable.mclaren, "McLaren", "The
McLaren Formula 1 Team, headquartered in Woking, United Kingdom, is led
by Team Chief Andrea Stella and Technical Chiefs Peter Prodromou and Neil
Houldey. Their chassis, designated MCL38, is powered by a Mercedes
engine. Since their debut in 1966, the team has secured eight World
Championships. With 183 first-place finishes, 156 pole positions, and 165
fastest laps, McLaren Formula 1 Team continues to be a formidable force
in the world of motorsport.", driversMcLaren))
dataList.add(DataModel(R.drawable.mercedes, "Mercedes", "The
Mercedes-AMG PETRONAS F1 Team, headquartered in Brackley, United Kingdom,
operates under the leadership of Team Chief Toto Wolff and Technical
Chief James Allison. Their chassis, known as W15, is powered by a
Mercedes engine. Since their debut in 1970, the team has clinched eight
World Championships. With 116 first-place finishes, 129 pole positions,
and 96 fastest laps, the Mercedes-AMG PETRONAS F1 Team continues to
dominate the Formula 1 circuit, showcasing their relentless pursuit of
excellence.", driversMercedes))
dataList.add(DataModel(R.drawable.astonmartin, "Aston Martin",
"The Aston Martin Aramco F1 Team, headquartered in Silverstone, United
Kingdom, is led by Team Chief Mike Krack and Technical Chief Dan Fallows.
Their chassis, named AMR24, is powered by a Mercedes engine. The team
made its debut in 2018 and has not yet won any World Championships.
However, they have achieved one first-place finish, one pole position,
and one fastest lap. Despite being relatively new to the Formula 1 scene,
the Aston Martin Aramco F1 Team shows promise and determination as they
strive for success in the competitive world of motorsport.",
driversAstonMartin))
dataList.add(DataModel(R.drawable.rb, "RB", "The Visa Cash App RB
Formula One Team, headquartered in Faenza, Italy, is led by Team Chief
Laurent Mekies and Technical Chief Jody Egginton. Their chassis,
designated VCARB 01, is powered by a Honda RBPT engine. The team made its
first entry into Formula One in 1985 and has not yet secured any World
Championships. However, they have achieved two first-place finishes, one
pole position, and three fastest laps. As they continue to compete, the
Visa Cash App RB Formula One Team demonstrates their potential and
commitment to success in the dynamic world of Formula One racing.",
driversRB))
dataList.add(DataModel(R.drawable.haas, "Haas F1 Team", "The
MoneyGram Haas F1 Team, based in Kannapolis, United States, is under the
leadership of Team Chief Ayao Komatsu and Technical Chief Andrea De
Zordo. Their chassis, known as VF-24, is equipped with a Ferrari power
unit. Since their debut in 2016, the team has not yet secured any World
Championships. However, they have achieved one fourth-place finish, one
pole position, and two fastest laps. Despite not yet reaching the
pinnacle of success in Formula One, the MoneyGram Haas F1 Team continues
to demonstrate their competitive spirit and dedication to excellence on
the racetrack.", driversHaas))
dataList.add(DataModel(R.drawable.williams, "Williams", "Williams
Racing, headquartered in Grove, United Kingdom, operates under the
leadership of Team Chief James Vowles and Technical Chief Pat Fry. Their
chassis, designated FW46, is powered by a Mercedes engine. Since their
debut in 1978, Williams Racing has clinched nine World Championships.
Their track record includes an impressive 114 first-place finishes, along
with 128 pole positions and 133 fastest laps, showcasing their enduring
legacy and competitiveness in Formula One racing.", driversWilliams))
dataList.add(DataModel(R.drawable.kicksauber, "Kick Sauber", "The
Stake F1 Team Kick Sauber, headquartered in Hinwil, Switzerland, is led
by Team Chief Alessandro Alunni Bravi and Technical Chief James Key.
Their chassis, designated C44, is powered by a Ferrari engine. The team
made its debut in Formula One in 1993 and has not yet secured any World
Championships. However, they have achieved one first-place finish, one
pole position, and seven fastest laps. With their competitive spirit and
dedication to performance, the Stake F1 Team Kick Sauber aims to continue
making strides in the world of Formula One racing.", driversKickSauber))
dataList.add(DataModel(R.drawable.alpine, "Alpine", "The BWT
Alpine F1 Team, headquartered in Enstone, United Kingdom, is led by Team
Chief Bruno Famin and Technical Chiefs Joe Burnell, David Wheater, and
Ciaron Pilbeam. Their chassis, known as A524, is powered by a Renault
engine. Since their debut in 1986, the team has secured two World
Championships. With an impressive 21 first-place finishes, 20 pole
positions, and 15 fastest laps, the BWT Alpine F1 Team continues to
demonstrate their prowess and commitment to excellence in the world of
Formula One racing.", driversAlpine))

return dataList
}
}

1. Inisialisasi RecyclerView: Pada langkah pertama, kita mendeklarasikan dan

menginisialisasi objek RecyclerView. RecyclerView adalah komponen tampilan yang
digunakan untuk menampilkan daftar data dalam format yang efisien secara memori.

2. Penyusunan Layout Manager: Layout Manager adalah komponen yang mengatur

tata letak (layout) dari item-item dalam RecyclerView. Dalam kode tersebut, digunakan
LinearLayoutManager yang mengatur item-item dalam daftar vertikal, satu di bawah
yang lain.

3. Pembuatan Adapter: Adapter adalah komponen yang bertanggung jawab untuk

mengatur data ke dalam RecyclerView. Dalam langkah ini, adapter diinisialisasi dan
disesuaikan dengan data yang ingin ditampilkan. Setiap item dalam RecyclerView
akan diperbarui oleh adapter sesuai dengan data yang ada.

4. Pengaturan Adapter ke RecyclerView: Setelah adapter dibuat, langkah selanjutnya

adalah menghubungkan adapter tersebut ke RecyclerView. Hal ini memungkinkan
RecyclerView untuk menampilkan data yang dikelola oleh adapter.

5. Pengisian Data: Data yang ingin ditampilkan dalam RecyclerView perlu disiapkan
terlebih dahulu. Dalam kode tersebut, terdapat method generateDummyData() yang
menghasilkan daftar data dummy yang akan ditampilkan dalam RecyclerView. Data
ini dapat berupa daftar tim Formula 1 beserta detailnya seperti nama tim, deskripsi,
dan pembalapnya.
MyAdapter.kt
package com.pab.f1app

import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView
import android.content.res.Configuration

class MyAdapter(private val context: Context, private val dataList:

List<DataModel>) :
RecyclerView.Adapter<MyAdapter.MyViewHolder>() {

// Set to keep track of expanded item positions

private val expandedPositions = HashSet<Int>()

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int):

MyViewHolder {
val view = LayoutInflater.from(parent.context)
.inflate(R.layout.item_layout, parent, false)
return MyViewHolder(view)
}

override fun getItemCount(): Int {

return dataList.size
}

override fun onBindViewHolder(holder: MyViewHolder, position: Int) {

val data = dataList[position]
holder.imageView.setImageResource(data.imageUrl)
holder.titleTextView.text = data.title
holder.descriptionTextView.text = data.description

// Check if the current item is expanded or not

val isExpanded = expandedPositions.contains(position)
holder.driverLabelTextView.visibility = if (isExpanded)
View.VISIBLE else View.GONE
holder.driverTextView.visibility = if (isExpanded) View.VISIBLE
else View.GONE

// Set the driverTextView text with driver names only

holder.driverTextView.text = data.drivers.joinToString("\n")

// Set the expand/collapse icon based on the expansion state and

day/night mode
val expandIconResId = if (isExpanded) R.drawable.show_less else
R.drawable.show_more
val collapseIconResId = if (isExpanded)
R.drawable.show_less_night else R.drawable.show_more_night
val iconResId = if (isNightMode()) collapseIconResId else
expandIconResId
holder.expandCollapseIcon.setImageResource(iconResId)

// Set the maxLines property of descriptionTextView based on

expansion state
holder.descriptionTextView.maxLines = if (isExpanded)
Integer.MAX_VALUE else 3
 // Set an OnClickListener to the card view
holder.itemView.setOnClickListener {
// Toggle expansion state of the clicked item
if (isExpanded) {
expandedPositions.remove(position)
} else {
expandedPositions.add(position)
}
notifyItemChanged(position)
}
}

private fun isNightMode(): Boolean {

return when (context.resources.configuration.uiMode and
Configuration.UI_MODE_NIGHT_MASK) {
Configuration.UI_MODE_NIGHT_YES -> true
Configuration.UI_MODE_NIGHT_NO -> false
else -> false
}
}

inner class MyViewHolder(itemView: View) :

RecyclerView.ViewHolder(itemView) {
val titleTextView: TextView =
itemView.findViewById(R.id.titleTextView)
val descriptionTextView: TextView =
itemView.findViewById(R.id.descriptionTextView)
val imageView: ImageView = itemView.findViewById(R.id.imageView)
val driverTextView: TextView =
itemView.findViewById(R.id.driverTextView)
val expandCollapseIcon: ImageView =
itemView.findViewById(R.id.expandCollapseIcon)
val driverLabelTextView: TextView =
itemView.findViewById(R.id.driverLabel)
}
}

1. Konstruktor:

• Menerima dua parameter: context yang merupakan objek Context dari aktivitas
yang menggunakan adapter ini, dan dataList yang merupakan List dari
DataModel yang akan ditampilkan dalam RecyclerView.

2. onCreateViewHolder():

• Dipanggil untuk membuat instance baru dari ViewHolder.

• Inflate layout dari item tampilan menggunakan LayoutInflater dan

mengembalikan instance dari MyViewHolder yang berisi referensi ke tampilan
item.

3. getItemCount():

• Mengembalikan jumlah total item dalam daftar.

• Jumlah item adalah panjang dari dataList.

4. onBindViewHolder():
 • Dipanggil untuk menetapkan data ke tampilan ViewHolder pada posisi tertentu.

• Mengambil data dari dataList pada posisi tertentu dan mengatur tampilan
ViewHolder sesuai dengan data tersebut.

5. ViewHolder Inner Class:

• Mendefinisikan tampilan yang akan digunakan dalam ViewHolder.

• ViewHolder memegang referensi ke tampilan yang akan diatur dan ditampilkan

untuk setiap item dalam RecyclerView.

Kelas MyAdapter.kt bertanggung jawab untuk menghubungkan data dengan tampilan

untuk setiap item dalam RecyclerView.

DataModel.kt
package com.pab.f1app

data class DataModel(val imageUrl: Int, val title: String, val

description: String, val drivers: List<String>)

1. DataModel Class:

• Ini adalah kelas data (data class) Kotlin yang dideklarasikan dengan kata kunci
data class.

• Kelas ini memiliki empat properti: imageUrl (Integer), title (String), description
(String), dan drivers (List<String>).

• Properti-properti tersebut merepresentasikan informasi tentang sebuah tim

Formula 1, termasuk gambar/logo tim, nama tim, deskripsi, dan daftar
pembalapnya.

2. imageUrl:

• Menyimpan referensi ke gambar/logo tim Formula 1.

• Tipe datanya adalah Int, yang mungkin merujuk ke resource gambar di aplikasi
Android.

3. title:

• Menyimpan nama atau judul dari tim Formula 1.

• Tipe datanya adalah String.

4. description:

• Menyimpan deskripsi atau informasi singkat tentang tim Formula 1.

• Tipe datanya adalah String.

5. drivers:

• Menyimpan daftar nama pembalap yang membela tim Formula 1 tersebut.

 • Tipe datanya adalah List<String>, yang berisi daftar nama-nama pembalap
dalam bentuk String.

Kelas DataModel bertindak sebagai struktur data untuk menyimpan informasi tentang
setiap tim Formula 1 yang akan ditampilkan dalam aplikasi.

activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<!-- Toolbar -->

<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#E10600"
android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
app:layout_constraintTop_toTopOf="parent"
android:paddingStart="16dp"
android:paddingEnd="16dp" >

<ImageView
android:id="@+id/toolbar_icon"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="@drawable/f1_logo"
android:scaleType="centerInside"
android:layout_gravity="right"/>

</androidx.appcompat.widget.Toolbar>

<!-- RecyclerView -->

<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="@id/toolbar"
app:layout_constraintBottom_toBottomOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

1. ConstraintLayout:

• Ini adalah root layout yang digunakan untuk mengatur tata letak tampilan.

• Menggunakan androidx.constraintlayout.widget.ConstraintLayout.

2. Toolbar:
 • Toolbar adalah komponen UI yang digunakan sebagai app bar di atas layar.

• Diatur dengan id toolbar.

• Lebar dan tinggi diatur sebagai match_parent.

• Background diatur sebagai warna merah (#E10600) dan menggunakan tema

overlay dari ActionBar.

• Terdapat sebuah ImageView di dalam Toolbar yang menampilkan logo tim

Formula 1.

3. RecyclerView:

• RecyclerView adalah komponen tampilan yang digunakan untuk menampilkan

daftar item secara efisien.

• Diatur dengan id recyclerView.

• Lebar diatur sebagai match_parent dan tinggi diatur sebagai 0dp agar
mengambil sisa ruang di layar.

• Diletakkan di bawah Toolbar dengan menggunakan constraint

app:layout_constraintTop_toBottomOf="@id/toolbar".

• Diberi constraint untuk mengisi sisa ruang di layar dengan

app:layout_constraintBottom_toBottomOf="parent".

File activity_main.xml bertanggung jawab untuk menentukan tata letak tampilan yang
akan ditampilkan dalam aktivitas MainActivity, termasuk Toolbar dan RecyclerView.

Item_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
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="wrap_content"
android:layout_margin="8dp"
app:cardCornerRadius="8dp"
app:cardElevation="4dp">

<LinearLayout
style="@style/ItemBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="16dp">

<ImageView
android:id="@+id/imageView"
android:layout_width="100dp"
android:layout_height="100dp"
android:scaleType="centerCrop" />

<TextView
 android:id="@+id/titleTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
android:textStyle="bold"
style="@style/TextColor"
android:layout_marginTop="8dp" />

<TextView
android:id="@+id/descriptionTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="3"
android:ellipsize="end"
style="@style/TextColor"
android:layout_marginTop="8dp"/>

<TextView
android:id="@+id/driverLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:text="Drivers:"
android:textSize="16dp"
style="@style/TextColor"
android:layout_marginTop="8dp"
android:visibility="gone" />

<TextView
android:id="@+id/driverTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
style="@style/TextColor" />

<ImageView
android:id="@+id/expandCollapseIcon"
android:layout_width="45dp"
android:layout_height="45dp"
android:src="@drawable/show_more"
android:layout_gravity="end"
android:padding="8dp"
android:visibility="visible" />

</LinearLayout>

</androidx.cardview.widget.CardView>

1. CardView:

• Digunakan sebagai container untuk menampilkan setiap item dalam bentuk

kartu.

• Lebar diatur sebagai match_parent dan tinggi diatur sebagai wrap_content.

• Margin sebesar 8dp untuk memberikan jarak antara setiap item.

• Memiliki sudut radius (cornerRadius) sebesar 8dp dan elevasi (elevation)

sebesar 4dp untuk memberikan efek bayangan.
2. LinearLayout:

• Digunakan sebagai container untuk mengatur tampilan dalam item.

• Lebar diatur sebagai match_parent dan tinggi diatur sebagai wrap_content.

• Orientasi diatur sebagai vertical untuk menempatkan tampilan secara vertikal.

• Padding sebesar 16dp untuk memberikan jarak antara konten dengan tepi
CardView.

3. ImageView (imageView):

• Digunakan untuk menampilkan gambar/logo tim Formula 1.

• Lebar dan tinggi diatur sebagai 100dp.

• ScaleType diatur sebagai centerCrop untuk memotong dan menyesuaikan

gambar ke dalam ImageView.

4. TextView (titleTextView):

• Digunakan untuk menampilkan nama tim Formula 1.

• Ukuran teks diatur sebagai 18sp dengan gaya tebal.

5. TextView (descriptionTextView):

• Digunakan untuk menampilkan deskripsi singkat tentang tim Formula 1.

• Maksimum 3 baris teks ditampilkan dengan pengaturan maxLines.

6. TextView (driverLabel):

• Digunakan sebagai label untuk menunjukkan daftar pembalap.

• Ditampilkan dengan ukuran teks 16sp dan gaya tebal.

• Secara default, visibility diatur sebagai gone.

7. TextView (driverTextView):

• Digunakan untuk menampilkan daftar pembalap tim Formula 1.

• Secara default, visibility diatur sebagai gone.

8. ImageView (expandCollapseIcon):

• Digunakan sebagai ikon untuk mengindikasikan status item yang diperluas

atau disusutkan.

• Digunakan sebagai tombol untuk memperluas atau menyusutkan item.

• Gambar ikon ditetapkan berdasarkan status ekspansi menggunakan sumber

daya drawable.
Item_box_dark.xml

File item_box_dark.xml adalah file drawable XML yang mendefinisikan bentuk latar
belakang untuk item dalam mode gelap (dark mode) di aplikasi Android.

1. Shape:

• Digunakan untuk mendefinisikan bentuk latar belakang.

• Dideklarasikan sebagai bentuk persegi panjang (rectangle) dengan

menggunakan atribut android:shape="rectangle".

2. Solid Color:

• Ditentukan sebagai warna latar belakang item.

• Diatur menggunakan atribut <solid> dengan nilai

android:color="@android:color/black", yang mewakili warna hitam bawaan dari
tema Android.

3. Stroke:

• Digunakan untuk menentukan warna dan lebar garis pinggir.

• Diatur menggunakan atribut <stroke> dengan lebar 1dp (android:width="1dp")

dan warna putih (android:color="#FFFFFF").

4. Corners:

• Digunakan untuk mengatur sudut radius dari latar belakang.

• Diatur menggunakan atribut <corners> dengan radius sebesar 8dp

(android:radius="8dp"), memberikan sudut yang lebih halus pada latar
belakang.
Item_box_light

File item_box_light.xml adalah file drawable XML yang mendefinisikan bentuk latar
belakang untuk item dalam mode terang (light mode) di aplikasi Android. Berikut adalah
penjelasan poin-poin dari file tersebut:

1. Shape:

• Digunakan untuk mendefinisikan bentuk latar belakang.

• Dideklarasikan sebagai bentuk persegi panjang (rectangle) dengan

menggunakan atribut android:shape="rectangle".

2. Solid Color:

• Ditentukan sebagai warna latar belakang item.

• Diatur menggunakan atribut <solid> dengan nilai

android:color="@android:color/white", yang mewakili warna putih bawaan dari
tema Android.

3. Stroke:

• Digunakan untuk menentukan warna dan lebar garis pinggir.

• Diatur menggunakan atribut <stroke> dengan lebar 1dp (android:width="1dp")

dan warna hitam (android:color="#000000").

4. Corners:

• Digunakan untuk mengatur sudut radius dari latar belakang.

• Diatur menggunakan atribut <corners> dengan radius sebesar 8dp

(android:radius="8dp"), memberikan sudut yang lebih halus pada latar
belakang.
themes.xml

1. Theme.F1App:

• Tema dasar (base) dari aplikasi dengan nama Theme.F1App.

• Menggunakan tema Theme.AppCompat.DayNight.NoActionBar sebagai tema

induk (parent), yang memungkinkan aplikasi untuk beradaptasi dengan mode
gelap (dark mode) secara otomatis.

• Saat ini belum ada penyesuaian tambahan pada tema terang (light mode),
namun dapat disesuaikan sesuai kebutuhan dengan menghapus komentar dan
menambahkan item yang diperlukan.

2. TextColor:

• Menentukan warna teks yang akan digunakan dalam aplikasi.

• Diatur sebagai warna hitam (@color/black), yang akan digunakan sebagai

warna teks default.

3. ItemBox:

• Menentukan latar belakang (background) dari item dalam RecyclerView.

• Menggunakan drawable item_box_light.xml sebagai latar belakang item dalam

mode terang (light mode).

• Saat aplikasi berjalan dalam mode gelap (dark mode), latar belakang item akan
beradaptasi dengan menggunakan drawable yang berbeda.

File themes.xml digunakan untuk mengatur tema-tema yang akan diterapkan dalam
aplikasi Android, termasuk tema dasar aplikasi dan pengaturan-pengaturan tambahan seperti
warna teks dan latar belakang item.
Themes.xml(night)

1. Theme.F1App:

• Tema dasar (base) dari aplikasi saat berjalan dalam mode gelap dengan nama
Theme.F1App.

• Menggunakan tema Theme.AppCompat.DayNight.NoActionBar sebagai tema

induk (parent), yang memungkinkan aplikasi untuk beradaptasi dengan mode
gelap (dark mode) secara otomatis.

• Saat ini belum ada penyesuaian tambahan pada tema gelap, namun dapat
disesuaikan sesuai kebutuhan dengan menghapus komentar dan
menambahkan item yang diperlukan.

2. TextColor:

• Menentukan warna teks yang akan digunakan dalam mode gelap.

• Diatur sebagai warna putih (@color/white), yang akan digunakan sebagai

warna teks default dalam mode gelap.

3. ItemBox:

• Menentukan latar belakang (background) dari item dalam RecyclerView saat

berada dalam mode gelap.

• Menggunakan drawable item_box_dark.xml sebagai latar belakang item dalam

mode gelap.

• Saat aplikasi berjalan dalam mode gelap, latar belakang item akan
menggunakan drawable yang sesuai.

File themes.xml (night) digunakan untuk mengatur tema-tema yang akan diterapkan
dalam mode gelap (dark mode) dalam aplikasi Android, termasuk tema dasar aplikasi dan
pengaturan-pengaturan tambahan seperti warna teks dan latar belakang item.
Tampilan Aplikasi

• Light Theme
Berikut adalah tampilan aplikasi versi light theme nya. Pada default akan menampilkan
image, judul, dan deskripsi yang dibatasi 3 line, lalu pada fungsi on click akan
mengexpand deskripsi tersebut.
• Dark Theme
Berikut adalah tampilan aplikasi versi dark theme nya.