LABORATORIUM PEMBELAJARAN ILMU KOMPUTER
FAKULTAS ILMU KOMPUTER
UNIVERSITAS BRAWIJAYA
BAB : JETPACK COMPOSE
NAMA : ROENRICO JOBEL
NIM : 215150207111087
TANGGAL : 10/10/2023
ASISTEN : - I KOMANG ANANDA WIDIASTANA
- BAHRUM NISAR
TUGAS 1
A. Soal
Buatlah sebuat project aplikasi compose sederhana yang
menampilkan artikel tentang library Jetpack.
B. Source Code
[Link]
1 package [Link].psi5_1
2
3 import [Link]
4 import [Link]
5 import [Link]
6 import [Link]
7 import [Link].*
8 import [Link]
9 import [Link].material3.*
import [Link]
0 import [Link]
10 import [Link]
11 import [Link]
12 import [Link]
13 import [Link]
import [Link]
14 import [Link]
15 import [Link]
16 import [Link]
17
18 class MainActivity : ComponentActivity() {
19 override fun onCreate(savedInstanceState:
20 Bundle?) {
21 [Link](savedInstanceState)
22 setContent {
Surface(
23 modifier =
24 [Link](),
25 color =
26 [Link]
27 ) {
28 ArticleScreen()
29 }
30 }
31 }
32 }
33 @Composable
34 fun ArticleScreen() {
35 LazyColumn {
36 item {
37 // Setel gambar untuk mengisi lebar
38 seluruh layar.
39 Image(
40 painter = painterResource(id =
41 [Link].bg_compose_background),
42 contentDescription = null,
43 modifier = Modifier
44 .fillMaxWidth()
45 .height([Link])
46 .clip(shape =
47 [Link]),
48 contentScale = [Link]
49 )
50 }
51 item {
52 // Setel composable Text pertama
53 Text(
54 text = "Jetpack Compose tutorial",
55 fontSize = [Link],
56 fontWeight = [Link],
57 modifier = [Link]([Link])
58 )
59 }
60 item {
61 // Setel composable Text kedua
62 Text(
63 text = "Jetpack Compose is a modern
64 toolkit for building native Android UI. Compose
65 simplifies and accelerates UI development on
66 Android with less code, powerful tools, and
67 intuitive Kotlin APIs.",
68 modifier = Modifier
69 .padding([Link])
70 .fillMaxWidth(),
71 textAlign = [Link]
72 )
73 }
74 item {
75 // Setel composable Text ketiga
76 Text(
77 text = "In this tutorial, you build
78 a simple UI component with declarative functions.
79 You call Compose functions to say what elements you
80 want and the Compose compiler does the rest.
81 Compose is built around Composable functions. These
82 functions let you define your app\'s UI
83 programmatically because they let you describe how
84 it should look and provide data dependencies,
85 rather than focus on the process of the UI\\'s
86 construction, such as initializing an element and
87 then attaching it to a parent. To create a
88 Composable function, you add the @Composable
89 annotation to the function name.",
90 modifier = Modifier
91 .padding([Link])
92 .fillMaxWidth(),
93 textAlign = [Link]
94 )
95 }
96 }
97 }
98
99 @Preview(showBackground = true)
100 @Composable
101 fun PreviewArticleScreen() {
102 ArticleScreen()
103 }
C. Screenshot
D. Penjelasan
Aplikasi ini adalah implementasi sederhana dari Jetpack Compose yang
menampilkan artikel dengan gambar latar belakang dan beberapa teks. Dalam
`MainActivity`, activity utama disiapkan dan kontennya ditetapkan dengan
menggunakan fungsi `setContent`. Fungsi `ArticleScreen()` adalah composable
function yang menggunakan `LazyColumn` untuk menampilkan elemen secara
berurutan, seperti gambar latar belakang, judul artikel, dan dua paragraf teks.
PreviewArticleScreen() adalah fungsi composable untuk tampilan pratinjau.
Pengaturan seperti penggunaan padding, pemformatan teks, dan penggunaan
warna dari `MaterialTheme` diimplementasikan sesuai dengan pedoman yang
telah diberikan sebelumnya..
TUGAS 2
A. Soal
Buatlah sebuah project aplikasi compose sederhana yang
menampilkan tampilan halaman yang dibagi menjadi 4 kuadran.
B. Source Code
[Link]
1 package [Link].psi5_1
2
3 import [Link]
4 import [Link]
5 import [Link]
6 import [Link]
7 import [Link].*
8 import [Link]
9 import [Link].material3.*
import [Link]
0 import [Link]
10 import [Link]
11 import [Link]
12 import [Link]
13 import [Link]
import [Link]
14 import [Link]
15 import [Link]
16 import [Link]
17
18 class MainActivity : ComponentActivity() {
19 override fun onCreate(savedInstanceState:
20 Bundle?) {
21 [Link](savedInstanceState)
22 setContent {
Surface(
23 modifier =
24 [Link](),
25 color =
26 [Link]
27 ) {
28 ArticleScreen()
29 }
30 }
31 }
32 }
33 @Composable
34 fun ArticleScreen() {
35 LazyColumn {
36 item {
37 // Setel gambar untuk mengisi lebar
38 seluruh layar.
39 Image(
40 painter = painterResource(id =
41 [Link].bg_compose_background),
42 contentDescription = null,
43 modifier = Modifier
44 .fillMaxWidth()
45 .height([Link])
46 .clip(shape =
47 [Link]),
48 contentScale = [Link]
49 )
50 }
51 item {
52 // Setel composable Text pertama
53 Text(
54 text = "Jetpack Compose tutorial",
55 fontSize = [Link],
56 fontWeight = [Link],
57 modifier = [Link]([Link])
58 )
59 }
60 item {
61 // Setel composable Text kedua
62 Text(
63 text = "Jetpack Compose is a modern
64 toolkit for building native Android UI. Compose
65 simplifies and accelerates UI development on
66 Android with less code, powerful tools, and
67 intuitive Kotlin APIs.",
68 modifier = Modifier
69 .padding([Link])
70 .fillMaxWidth(),
71 textAlign = [Link]
72 )
73 }
74 item {
75 // Setel composable Text ketiga
76 Text(
77 text = "In this tutorial, you build
78 a simple UI component with declarative functions.
79 You call Compose functions to say what elements you
80 want and the Compose compiler does the rest.
81 Compose is built around Composable functions. These
82 functions let you define your app\'s UI
83 programmatically because they let you describe how
84 it should look and provide data dependencies,
85 rather than focus on the process of the UI\\'s
86 construction, such as initializing an element and
87 then attaching it to a parent. To create a
88 Composable function, you add the @Composable
89 annotation to the function name.",
90 modifier = Modifier
91 .padding([Link])
92 .fillMaxWidth(),
93 textAlign = [Link]
94 )
95 }
96 }
97 }
98
99 @Preview(showBackground = true)
100 @Composable
101 fun PreviewArticleScreen() {
102 ArticleScreen()
103 }
C. Screenshot
D. Penjelasan
Aplikasi ini adalah implementasi sederhana dari Jetpack Compose yang
menampilkan artikel dengan gambar latar belakang dan beberapa teks. Dalam
`MainActivity`, activity utama disiapkan dan kontennya ditetapkan dengan
menggunakan fungsi `setContent`. Fungsi `ArticleScreen()` adalah composable
function yang menggunakan `LazyColumn` untuk menampilkan elemen secara
berurutan, seperti gambar latar belakang, judul artikel, dan dua paragraf teks.
PreviewArticleScreen() adalah fungsi composable untuk tampilan pratinjau.
Pengaturan seperti penggunaan padding, pemformatan teks, dan penggunaan
warna dari `MaterialTheme` diimplementasikan sesuai dengan pedoman yang
telah diberikan sebelumnya..