Aisyah Nurhalimah - 5025201081
Pada pertemuan hari ini, diberikan tugas untuk mengimplementasikan aplikasi music menggunakan Flutter.
Aisyah Nurhalimah - 5025201081
Pada pertemuan hari ini, diberikan tugas mempelajari acitivities dan intent dengan mengimplementasikan aplikasi dessert clicker. Referensi yang digunakan dapat ditemukan di link berikut ini Tahapan siklus proses Aktivitas Berikut adalah hasil dari implementasi aplikasi dessert clicker:
Source Code file MainActivity.kt dapat dilihat pada kode dibawah ini:
| /* | |
| * Copyright (C) 2023 The Android Open Source Project | |
| * | |
| * Licensed under the Apache License, Version 2.0 (the "License"); | |
| * you may not use this file except in compliance with the License. | |
| * You may obtain a copy of the License at | |
| * | |
| * http://www.apache.org/licenses/LICENSE-2.0 | |
| * | |
| * Unless required by applicable law or agreed to in writing, software | |
| * distributed under the License is distributed on an "AS IS" BASIS, | |
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | |
| * See the License for the specific language governing permissions and | |
| * limitations under the License. | |
| */ | |
| package com.example.dessertclicker | |
| import android.content.ActivityNotFoundException | |
| import android.content.Context | |
| import android.content.Intent | |
| import android.os.Bundle | |
| import android.util.Log | |
| import android.widget.Toast | |
| import androidx.activity.ComponentActivity | |
| import androidx.activity.compose.setContent | |
| import androidx.activity.enableEdgeToEdge | |
| import androidx.annotation.DrawableRes | |
| import androidx.compose.foundation.Image | |
| import androidx.compose.foundation.background | |
| import androidx.compose.foundation.clickable | |
| import androidx.compose.foundation.layout.Arrangement | |
| import androidx.compose.foundation.layout.Box | |
| import androidx.compose.foundation.layout.Column | |
| import androidx.compose.foundation.layout.Row | |
| import androidx.compose.foundation.layout.WindowInsets | |
| import androidx.compose.foundation.layout.asPaddingValues | |
| import androidx.compose.foundation.layout.calculateEndPadding | |
| import androidx.compose.foundation.layout.calculateStartPadding | |
| import androidx.compose.foundation.layout.fillMaxSize | |
| import androidx.compose.foundation.layout.fillMaxWidth | |
| import androidx.compose.foundation.layout.height | |
| import androidx.compose.foundation.layout.padding | |
| import androidx.compose.foundation.layout.safeDrawing | |
| import androidx.compose.foundation.layout.statusBarsPadding | |
| import androidx.compose.foundation.layout.width | |
| import androidx.compose.material.icons.Icons | |
| import androidx.compose.material.icons.filled.Share | |
| import androidx.compose.material3.Scaffold | |
| import androidx.compose.material3.Icon | |
| import androidx.compose.material3.IconButton | |
| import androidx.compose.material3.MaterialTheme | |
| import androidx.compose.material3.Surface | |
| import androidx.compose.material3.Text | |
| import androidx.compose.runtime.Composable | |
| import androidx.compose.runtime.getValue | |
| import androidx.compose.runtime.mutableStateOf | |
| import androidx.compose.runtime.saveable.rememberSaveable | |
| import androidx.compose.runtime.setValue | |
| import androidx.compose.ui.Alignment | |
| import androidx.compose.ui.Modifier | |
| import androidx.compose.ui.layout.ContentScale | |
| import androidx.compose.ui.platform.LocalContext | |
| import androidx.compose.ui.platform.LocalLayoutDirection | |
| import androidx.compose.ui.res.dimensionResource | |
| import androidx.compose.ui.res.painterResource | |
| import androidx.compose.ui.res.stringResource | |
| import androidx.compose.ui.text.style.TextAlign | |
| import androidx.compose.ui.tooling.preview.Preview | |
| import androidx.core.content.ContextCompat | |
| import com.example.dessertclicker.data.Datasource | |
| import com.example.dessertclicker.model.Dessert | |
| import com.example.dessertclicker.ui.theme.DessertClickerTheme | |
| // Tag for logging | |
| private const val TAG = "MainActivity" | |
| class MainActivity : ComponentActivity() { | |
| override fun onCreate(savedInstanceState: Bundle?) { | |
| enableEdgeToEdge() | |
| super.onCreate(savedInstanceState) | |
| Log.d(TAG, "onCreate Called") | |
| setContent { | |
| DessertClickerTheme { | |
| // A surface container using the 'background' color from the theme | |
| Surface( | |
| modifier = Modifier | |
| .fillMaxSize() | |
| .statusBarsPadding(), | |
| ) { | |
| DessertClickerApp(desserts = Datasource.dessertList) | |
| } | |
| } | |
| } | |
| } | |
| override fun onStart() { | |
| super.onStart() | |
| Log.d(TAG, "onStart Called") | |
| } | |
| override fun onResume() { | |
| super.onResume() | |
| Log.d(TAG, "onResume Called") | |
| } | |
| override fun onRestart() { | |
| super.onRestart() | |
| Log.d(TAG, "onRestart Called") | |
| } | |
| override fun onPause() { | |
| super.onPause() | |
| Log.d(TAG, "onPause Called") | |
| } | |
| override fun onStop() { | |
| super.onStop() | |
| Log.d(TAG, "onStop Called") | |
| } | |
| override fun onDestroy() { | |
| super.onDestroy() | |
| Log.d(TAG, "onDestroy Called") | |
| } | |
| } | |
| /** | |
| * Determine which dessert to show. | |
| */ | |
| fun determineDessertToShow( | |
| desserts: List<Dessert>, | |
| dessertsSold: Int | |
| ): Dessert { | |
| var dessertToShow = desserts.first() | |
| for (dessert in desserts) { | |
| if (dessertsSold >= dessert.startProductionAmount) { | |
| dessertToShow = dessert | |
| } else { | |
| // The list of desserts is sorted by startProductionAmount. As you sell more desserts, | |
| // you'll start producing more expensive desserts as determined by startProductionAmount | |
| // We know to break as soon as we see a dessert who's "startProductionAmount" is greater | |
| // than the amount sold. | |
| break | |
| } | |
| } | |
| return dessertToShow | |
| } | |
| /** | |
| * Share desserts sold information using ACTION_SEND intent | |
| */ | |
| private fun shareSoldDessertsInformation(intentContext: Context, dessertsSold: Int, revenue: Int) { | |
| val sendIntent = Intent().apply { | |
| action = Intent.ACTION_SEND | |
| putExtra( | |
| Intent.EXTRA_TEXT, | |
| intentContext.getString(R.string.share_text, dessertsSold, revenue) | |
| ) | |
| type = "text/plain" | |
| } | |
| val shareIntent = Intent.createChooser(sendIntent, null) | |
| try { | |
| ContextCompat.startActivity(intentContext, shareIntent, null) | |
| } catch (e: ActivityNotFoundException) { | |
| Toast.makeText( | |
| intentContext, | |
| intentContext.getString(R.string.sharing_not_available), | |
| Toast.LENGTH_LONG | |
| ).show() | |
| } | |
| } | |
| @Composable | |
| private fun DessertClickerApp( | |
| desserts: List<Dessert> | |
| ) { | |
| var revenue by rememberSaveable { mutableStateOf(0) } | |
| var dessertsSold by rememberSaveable { mutableStateOf(0) } | |
| val currentDessertIndex by rememberSaveable { mutableStateOf(0) } | |
| var currentDessertPrice by rememberSaveable { | |
| mutableStateOf(desserts[currentDessertIndex].price) | |
| } | |
| var currentDessertImageId by rememberSaveable { | |
| mutableStateOf(desserts[currentDessertIndex].imageId) | |
| } | |
| Scaffold( | |
| topBar = { | |
| val intentContext = LocalContext.current | |
| val layoutDirection = LocalLayoutDirection.current | |
| DessertClickerAppBar( | |
| onShareButtonClicked = { | |
| shareSoldDessertsInformation( | |
| intentContext = intentContext, | |
| dessertsSold = dessertsSold, | |
| revenue = revenue | |
| ) | |
| }, | |
| modifier = Modifier | |
| .fillMaxWidth() | |
| .padding( | |
| start = WindowInsets.safeDrawing.asPaddingValues() | |
| .calculateStartPadding(layoutDirection), | |
| end = WindowInsets.safeDrawing.asPaddingValues() | |
| .calculateEndPadding(layoutDirection), | |
| ) | |
| .background(MaterialTheme.colorScheme.primary) | |
| ) | |
| } | |
| ) { contentPadding -> | |
| DessertClickerScreen( | |
| revenue = revenue, | |
| dessertsSold = dessertsSold, | |
| dessertImageId = currentDessertImageId, | |
| onDessertClicked = { | |
| // Update the revenue | |
| revenue += currentDessertPrice | |
| dessertsSold++ | |
| // Show the next dessert | |
| val dessertToShow = determineDessertToShow(desserts, dessertsSold) | |
| currentDessertImageId = dessertToShow.imageId | |
| currentDessertPrice = dessertToShow.price | |
| }, | |
| modifier = Modifier.padding(contentPadding) | |
| ) | |
| } | |
| } | |
| @Composable | |
| private fun DessertClickerAppBar( | |
| onShareButtonClicked: () -> Unit, | |
| modifier: Modifier = Modifier | |
| ) { | |
| Row( | |
| modifier = modifier, | |
| horizontalArrangement = Arrangement.SpaceBetween, | |
| verticalAlignment = Alignment.CenterVertically, | |
| ) { | |
| Text( | |
| text = stringResource(R.string.app_name), | |
| modifier = Modifier.padding(start = dimensionResource(R.dimen.padding_medium)), | |
| color = MaterialTheme.colorScheme.onPrimary, | |
| style = MaterialTheme.typography.titleLarge, | |
| ) | |
| IconButton( | |
| onClick = onShareButtonClicked, | |
| modifier = Modifier.padding(end = dimensionResource(R.dimen.padding_medium)), | |
| ) { | |
| Icon( | |
| imageVector = Icons.Filled.Share, | |
| contentDescription = stringResource(R.string.share), | |
| tint = MaterialTheme.colorScheme.onPrimary | |
| ) | |
| } | |
| } | |
| } | |
| @Composable | |
| fun DessertClickerScreen( | |
| revenue: Int, | |
| dessertsSold: Int, | |
| @DrawableRes dessertImageId: Int, | |
| onDessertClicked: () -> Unit, | |
| modifier: Modifier = Modifier | |
| ) { | |
| Box(modifier = modifier) { | |
| Image( | |
| painter = painterResource(R.drawable.bakery_back), | |
| contentDescription = null, | |
| contentScale = ContentScale.Crop | |
| ) | |
| Column { | |
| Box( | |
| modifier = Modifier | |
| .weight(1f) | |
| .fillMaxWidth(), | |
| ) { | |
| Image( | |
| painter = painterResource(dessertImageId), | |
| contentDescription = null, | |
| modifier = Modifier | |
| .width(dimensionResource(R.dimen.image_size)) | |
| .height(dimensionResource(R.dimen.image_size)) | |
| .align(Alignment.Center) | |
| .clickable { onDessertClicked() }, | |
| contentScale = ContentScale.Crop, | |
| ) | |
| } | |
| TransactionInfo( | |
| revenue = revenue, | |
| dessertsSold = dessertsSold, | |
| modifier = Modifier.background(MaterialTheme.colorScheme.secondaryContainer) | |
| ) | |
| } | |
| } | |
| } | |
| @Composable | |
| private fun TransactionInfo( | |
| revenue: Int, | |
| dessertsSold: Int, | |
| modifier: Modifier = Modifier | |
| ) { | |
| Column(modifier = modifier) { | |
| DessertsSoldInfo( | |
| dessertsSold = dessertsSold, | |
| modifier = Modifier | |
| .fillMaxWidth() | |
| .padding(dimensionResource(R.dimen.padding_medium)) | |
| ) | |
| RevenueInfo( | |
| revenue = revenue, | |
| modifier = Modifier | |
| .fillMaxWidth() | |
| .padding(dimensionResource(R.dimen.padding_medium)) | |
| ) | |
| } | |
| } | |
| @Composable | |
| private fun RevenueInfo(revenue: Int, modifier: Modifier = Modifier) { | |
| Row( | |
| modifier = modifier, | |
| horizontalArrangement = Arrangement.SpaceBetween, | |
| ) { | |
| Text( | |
| text = stringResource(R.string.total_revenue), | |
| style = MaterialTheme.typography.headlineMedium, | |
| color = MaterialTheme.colorScheme.onSecondaryContainer | |
| ) | |
| Text( | |
| text = "$${revenue}", | |
| textAlign = TextAlign.Right, | |
| style = MaterialTheme.typography.headlineMedium, | |
| color = MaterialTheme.colorScheme.onSecondaryContainer | |
| ) | |
| } | |
| } | |
| @Composable | |
| private fun DessertsSoldInfo(dessertsSold: Int, modifier: Modifier = Modifier) { | |
| Row( | |
| modifier = modifier, | |
| horizontalArrangement = Arrangement.SpaceBetween, | |
| ) { | |
| Text( | |
| text = stringResource(R.string.dessert_sold), | |
| style = MaterialTheme.typography.titleLarge, | |
| color = MaterialTheme.colorScheme.onSecondaryContainer | |
| ) | |
| Text( | |
| text = dessertsSold.toString(), | |
| style = MaterialTheme.typography.titleLarge, | |
| color = MaterialTheme.colorScheme.onSecondaryContainer | |
| ) | |
| } | |
| } | |
| @Preview | |
| @Composable | |
| fun MyDessertClickerAppPreview() { | |
| DessertClickerTheme { | |
| DessertClickerApp(listOf(Dessert(R.drawable.cupcake, 5, 0))) | |
| } | |
| } |
Aisyah Nurhalimah - 5025201081
Pada pertemuan hari ini, diberikan tugas untuk membuat aplikasi Woof. Aplikasi Woof sendiri merupakan sebuah aplikasi yang menampilkan daftar anjing dengan menggunakan Desain Material untuk membuat tampilan dan pengalaman aplikasi yang menarik. Referensi latihan dapat dilihat pada link berikut ini Penerapan Tema Material dengan Jetpack Compose.
Setelah mendownload file yang ada pada referensi diatas, dilakukan beberapa perubahan kode.
Aisyah Nurhalimah - 5025201081
Pada pertemuan hari ini, diberikan ujian tengah semester. Untuk pengerjaan nomor 1-3 soal dan jawaban ada pada link di atas. Untuk nomor selanjutnya, diminta untuk meredesign aplikasi yang dipilih, mengimplementasikannya, dan mendokumentasikannya. Aplikasi yang dipilih sendiri yaitu TIX ID, merupakan salah satu aplikasi e-ticketing bioskop yang ada di Indonesia. Berikut adalah dokumentasi dari ujian tengah semester ini:
- Halaman Login
Link Github: Github-MovieApp
Link Youtube: Demo-MovieApp
Aisyah Nurhalimah - 5025201081
Pada pertemuan hari ini, diberikan tugas untuk membuat aplikasi sederhana yang dapat menampilkan daftar afirmasi. Langkah awal dalam mengonfigurasi antarmuka pengguna (UI) untuk menampilkan daftar tersebut adalah dengan membuat List Item, yang merupakan komponen dasar dari daftar tersebut. Setiap List Item akan terdiri dari dua elemen utama, yaitu sebuah gambar yang mengilustrasikan atau menambahkan dimensi visual, dan sebuah string yang berisi teks afirmasi.
Data yang digunakan untuk membuat setiap item dalam daftar ini sudah disediakan dalam bentuk kode awal pada cabang 'starter', Download ZIP. Setelah mendownload, buka project di android studio dan coba run program. Selanjutnya, buat file baru mada folder com.example.affirmation, dan beri nama 'model'. Buat file baru pada folder terebut dengan nama Affirmation. Berikut adalah kode untuk file affirmation.kt.
| package com.example.affirmations.model | |
| import androidx.annotation.DrawableRes | |
| import androidx.annotation.StringRes | |
| data class Affirmation( | |
| @StringRes val stringResourceId: Int, | |
| @DrawableRes val imageResourceId: Int | |
| ) |
Selanjutnya isikan kode DataSource.kt pada folder com.example.affirmation.data:
| /* | |
| * Copyright (C) 2023 The Android Open Source Project | |
| * | |
| * Licensed under the Apache License, Version 2.0 (the "License"); | |
| * you may not use this file except in compliance with the License. | |
| * You may obtain a copy of the License at | |
| * | |
| * https://www.apache.org/licenses/LICENSE-2.0 | |
| * | |
| * Unless required by applicable law or agreed to in writing, software | |
| * distributed under the License is distributed on an "AS IS" BASIS, | |
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | |
| * See the License for the specific language governing permissions and | |
| * limitations under the License. | |
| */ | |
| package com.example.affirmations.data | |
| import com.example.affirmations.R | |
| import com.example.affirmations.model.Affirmation | |
| /** | |
| * [Datasource] generates a list of [Affirmation] | |
| */ | |
| class Datasource() { | |
| fun loadAffirmations(): List<Affirmation> { | |
| return listOf<Affirmation>( | |
| Affirmation(R.string.affirmation1, R.drawable.image1), | |
| Affirmation(R.string.affirmation2, R.drawable.image2), | |
| Affirmation(R.string.affirmation3, R.drawable.image3), | |
| Affirmation(R.string.affirmation4, R.drawable.image4), | |
| Affirmation(R.string.affirmation5, R.drawable.image5), | |
| Affirmation(R.string.affirmation6, R.drawable.image6), | |
| Affirmation(R.string.affirmation7, R.drawable.image7), | |
| Affirmation(R.string.affirmation8, R.drawable.image8), | |
| Affirmation(R.string.affirmation9, R.drawable.image9), | |
| Affirmation(R.string.affirmation10, R.drawable.image10)) | |
| } | |
| } |
Setelah itu, buat kartu item daftar pada file MainActivity.kt. Kartu ini berguna untukmenampilkan gambar dengan teks di bawahnya. Tata letak vertikal ini dibuat menggunakan composable Column yang digabungkan dalam composable Card. Berikut adalah source codenya:
| package com.example.affirmations | |
| import android.os.Bundle | |
| import androidx.activity.ComponentActivity | |
| import androidx.activity.compose.setContent | |
| import androidx.compose.foundation.Image | |
| import androidx.compose.foundation.layout.Column | |
| import androidx.compose.foundation.layout.fillMaxSize | |
| import androidx.compose.foundation.layout.fillMaxWidth | |
| import androidx.compose.foundation.layout.height | |
| import androidx.compose.foundation.layout.padding | |
| import androidx.compose.foundation.lazy.LazyColumn | |
| import androidx.compose.foundation.lazy.items | |
| import androidx.compose.material3.Card | |
| import androidx.compose.material3.MaterialTheme | |
| import androidx.compose.material3.Surface | |
| import androidx.compose.material3.Text | |
| import androidx.compose.runtime.Composable | |
| import androidx.compose.ui.Modifier | |
| import androidx.compose.ui.layout.ContentScale | |
| import androidx.compose.ui.platform.LocalContext | |
| import androidx.compose.ui.res.painterResource | |
| import androidx.compose.ui.res.stringResource | |
| import androidx.compose.ui.tooling.preview.Preview | |
| import androidx.compose.ui.unit.dp | |
| import com.example.affirmations.data.Datasource | |
| import com.example.affirmations.model.Affirmation | |
| import com.example.affirmations.ui.theme.AffirmationsTheme | |
| class MainActivity : ComponentActivity() { | |
| override fun onCreate(savedInstanceState: Bundle?) { | |
| super.onCreate(savedInstanceState) | |
| setContent { | |
| AffirmationsTheme { | |
| // A surface container using the 'background' color from the theme | |
| Surface( | |
| modifier = Modifier.fillMaxSize(), | |
| color = MaterialTheme.colorScheme.background | |
| ) { | |
| AffirmationsApp() | |
| } | |
| } | |
| } | |
| } | |
| } | |
| @Composable | |
| fun AffirmationsApp() { | |
| AffirmationList( | |
| affirmationList = Datasource().loadAffirmations(), | |
| ) | |
| } | |
| @Composable | |
| fun AffirmationCard(affirmation: Affirmation, modifier: Modifier = Modifier) { | |
| Card(modifier = modifier) { | |
| Column { | |
| Image( | |
| painter = painterResource(id = affirmation.imageResourceId), | |
| contentDescription = stringResource(id = affirmation.stringResourceId), | |
| modifier = Modifier | |
| .fillMaxWidth() | |
| .height(194.dp), | |
| contentScale = ContentScale.Crop | |
| ) | |
| Text( | |
| text = LocalContext.current.getString(affirmation.stringResourceId), | |
| modifier = Modifier.padding(16.dp), | |
| style = MaterialTheme.typography.headlineSmall | |
| ) | |
| } | |
| } | |
| } | |
| @Composable | |
| fun AffirmationList(affirmationList: List<Affirmation>, modifier: Modifier = Modifier) { | |
| LazyColumn(modifier = modifier) { | |
| items(affirmationList) { affirmation -> | |
| AffirmationCard( | |
| affirmation = affirmation, | |
| modifier = Modifier.padding(8.dp) | |
| ) | |
| } | |
| } | |
| } | |
| @Preview | |
| @Composable | |
| fun AffirmationCardPreview() { | |
| AffirmationCard(affirmation = Affirmation(R.string.affirmation1, R.drawable.image1)) | |
| } |
Berikut adalah demo dari aplikasi Affirmation:
Aisyah Nurhalimah - 5025201081
Material Design adalah sebuah gaya desain terbaru dari Google yang memiliki prinsip desain itu harus seperti sebuah kertas pada kenyataannya. Desain dengan Material Design pada prinsip nya bertujuan untuk memberikan fokus yang jelas kepada pengguna dengan menyediakan suatu struktur. Struktur disini lebih kepada menampilkan apa yang penting berada didepan daripada yang tidak penting. Pada pertemuan ini diminta untuk membuat sebuah aplikasi water bottle dengan mengikuti referensi ini.
Seperti pada tugas sebelumnya, buatlah projek baru dengan jenis Empty Activity, lalu beri nama yang sesuai. Pada bagian minimum SDK gunakan API 26 Oreo Android 8.0, lalu klik Finish. Selanjutnya ubah code pada file MainActivity.kt dan WaterBottle.kt.
Hasil:
Source code:
MainActivity.kt
| package com.example.waterbottle | |
| import android.os.Bundle | |
| import androidx.activity.ComponentActivity | |
| import androidx.activity.compose.setContent | |
| import androidx.compose.foundation.layout.Arrangement | |
| import androidx.compose.foundation.layout.Column | |
| import androidx.compose.foundation.layout.Row | |
| import androidx.compose.foundation.layout.Spacer | |
| import androidx.compose.foundation.layout.fillMaxSize | |
| import androidx.compose.foundation.layout.height | |
| import androidx.compose.foundation.layout.width | |
| import androidx.compose.material3.Button | |
| import androidx.compose.material3.ButtonDefaults | |
| import androidx.compose.material3.MaterialTheme | |
| import androidx.compose.material3.Surface | |
| import androidx.compose.material3.Text | |
| import androidx.compose.runtime.Composable | |
| import androidx.compose.runtime.getValue | |
| import androidx.compose.runtime.mutableStateOf | |
| import androidx.compose.runtime.remember | |
| import androidx.compose.runtime.setValue | |
| import androidx.compose.ui.Alignment | |
| import androidx.compose.ui.Modifier | |
| import androidx.compose.ui.graphics.Color | |
| import androidx.compose.ui.tooling.preview.Preview | |
| import androidx.compose.ui.unit.dp | |
| import com.example.waterbottle.ui.theme.WaterBottleTheme | |
| class MainActivity : ComponentActivity() { | |
| override fun onCreate(savedInstanceState: Bundle?) { | |
| super.onCreate(savedInstanceState) | |
| setContent { | |
| WaterBottleTheme { | |
| // A surface container using the 'background' color from the theme | |
| Surface( | |
| modifier = Modifier.fillMaxSize(), | |
| color = MaterialTheme.colorScheme.background | |
| ) { | |
| var totalWaterAmount = remember{ | |
| 2400 | |
| } | |
| var usedAmount by remember { | |
| mutableStateOf(400) | |
| } | |
| var incrementWaterAmount = 200 | |
| var unitValue = "ml" | |
| Column ( | |
| modifier = Modifier.fillMaxSize(), | |
| horizontalAlignment = Alignment.CenterHorizontally, | |
| verticalArrangement = Arrangement.Center | |
| ){ | |
| WaterBottle(totalWaterAmount = totalWaterAmount, unit = "", usedWaterAmount = usedAmount, modifier = Modifier.width(250.dp)) | |
| Spacer(modifier = Modifier.height(20.dp)) | |
| Text(text = "Total amount is: $totalWaterAmount $unitValue") | |
| Row { | |
| Button(onClick = { | |
| if (usedAmount < totalWaterAmount){ | |
| usedAmount += incrementWaterAmount | |
| } | |
| }, colors = ButtonDefaults.buttonColors(containerColor = Color(0xff279EFF)) | |
| ) { | |
| Text(text = "Drink") | |
| } | |
| Spacer(modifier = Modifier.width(20.dp)) | |
| Button(onClick = { usedAmount = 0 }, | |
| colors = ButtonDefaults.buttonColors(containerColor = Color(0xff22649B)) | |
| ) | |
| { | |
| Text(text = "Reset") | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } |
WaterBottle.kt
| package com.example.waterbottle | |
| import androidx.compose.animation.core.animateFloatAsState | |
| import androidx.compose.animation.core.animateIntAsState | |
| import androidx.compose.animation.core.tween | |
| import androidx.compose.foundation.Canvas | |
| import androidx.compose.foundation.layout.Box | |
| import androidx.compose.foundation.layout.fillMaxHeight | |
| import androidx.compose.foundation.layout.fillMaxSize | |
| import androidx.compose.foundation.layout.height | |
| import androidx.compose.foundation.layout.width | |
| import androidx.compose.material3.Text | |
| import androidx.compose.runtime.Composable | |
| import androidx.compose.ui.Alignment | |
| import androidx.compose.ui.Modifier | |
| import androidx.compose.ui.geometry.CornerRadius | |
| import androidx.compose.ui.geometry.Offset | |
| import androidx.compose.ui.geometry.Size | |
| import androidx.compose.ui.graphics.Color | |
| import androidx.compose.ui.graphics.Path | |
| import androidx.compose.ui.graphics.drawscope.clipPath | |
| import androidx.compose.ui.text.SpanStyle | |
| import androidx.compose.ui.text.buildAnnotatedString | |
| import androidx.compose.ui.text.withStyle | |
| import androidx.compose.ui.tooling.preview.Preview | |
| import androidx.compose.ui.unit.dp | |
| import androidx.compose.ui.unit.sp | |
| @Composable | |
| fun WaterBottle( | |
| modifier: Modifier = Modifier, | |
| totalWaterAmount: Int, | |
| unit: String, | |
| usedWaterAmount: Int, | |
| waterColor: Color = Color(0xFF6DC8F1), | |
| bottleColor: Color = Color.LightGray, | |
| capColor: Color = Color(0xFF425BFC) | |
| ) { | |
| val waterPercentage = animateFloatAsState( | |
| targetValue = usedWaterAmount.toFloat() / totalWaterAmount.toFloat(), | |
| label = "Water Waves animation", | |
| animationSpec = tween(durationMillis = 1000) | |
| ).value | |
| val usedWaterAmountAnimation = animateIntAsState( | |
| targetValue = usedWaterAmount, | |
| label = "Used water amount animation", | |
| animationSpec = tween(durationMillis = 1000) | |
| ).value | |
| Box(modifier = modifier | |
| .width(200.dp) | |
| .height(600.dp) | |
| ){ | |
| Canvas(modifier = Modifier.fillMaxSize()) { | |
| val width = size.width | |
| val height = size.height | |
| val capWidth = size.width * 0.55f | |
| val capHeight = size.height * 0.13f | |
| val bottleBodyPath = Path().apply{ | |
| moveTo( | |
| x = width * 0.3f, y = height * 0.1f | |
| ) | |
| lineTo( | |
| x = width * 0.3f, y =height * 0.2f | |
| ) | |
| quadraticBezierTo( | |
| x1 = 0f, y1 = height * 0.3f, | |
| x2 = 0f, y2 = height * 0.4f | |
| ) | |
| lineTo( | |
| x = 0f, y = height * 0.95f | |
| ) | |
| quadraticBezierTo( | |
| x1 = 0f, y1 = height, | |
| x2 = width * 0.05f, y2 = height | |
| ) | |
| lineTo( | |
| x = width * 0.95f, y = height | |
| ) | |
| quadraticBezierTo( | |
| x1 = width, y1 = height, | |
| x2 = width, y2 = height * 0.95f | |
| ) | |
| lineTo( | |
| x = width, y = height * 0.4f | |
| ) | |
| quadraticBezierTo( | |
| x1 = width, y1 = height * 0.3f, | |
| x2 = width * 0.7f, y2 = height * 0.2f | |
| ) | |
| lineTo( | |
| x = width * 0.7f, y = height * 0.1f | |
| ) | |
| close() | |
| } | |
| clipPath( | |
| bottleBodyPath | |
| ) { | |
| drawRect( | |
| color = bottleColor, | |
| size = size, | |
| ) | |
| val waterWavesYPosition = (1 - waterPercentage) * size.height | |
| val waterPath = Path().apply { | |
| moveTo( | |
| x = 0f, y = waterWavesYPosition | |
| ) | |
| lineTo( | |
| x = size.width, y = waterWavesYPosition | |
| ) | |
| lineTo( | |
| x = size.width, y = size.height | |
| ) | |
| lineTo( | |
| x = 0f, y = size.height | |
| ) | |
| close() | |
| } | |
| drawPath( | |
| path = waterPath, | |
| color = waterColor | |
| ) | |
| } | |
| drawRoundRect( | |
| color = capColor, | |
| size = Size(capWidth, capHeight), | |
| topLeft = Offset(size.width / 2 - capWidth / 2f, 0f), | |
| cornerRadius = CornerRadius(45f, 45f) | |
| ) | |
| } | |
| val text = buildAnnotatedString { | |
| withStyle( | |
| style = SpanStyle( | |
| color = if (waterPercentage > 0.5f) bottleColor else waterColor, | |
| fontSize = 44.sp | |
| ) | |
| ) { | |
| append(usedWaterAmountAnimation.toString()) | |
| } | |
| withStyle( | |
| style = SpanStyle( | |
| color = if (waterPercentage > 0.5f) bottleColor else waterColor, | |
| fontSize = 22.sp | |
| ) | |
| ) { | |
| append(" ") | |
| append(unit) | |
| } | |
| append("\n") | |
| withStyle( | |
| style = SpanStyle( | |
| color = Color.Black, | |
| fontSize = 16.sp | |
| ) | |
| ) { | |
| append("Water Level: ${String.format("%.0f%%", waterPercentage * 100)}") | |
| } | |
| } | |
| Box( | |
| modifier = Modifier | |
| .fillMaxSize() | |
| .fillMaxHeight(), | |
| contentAlignment = Alignment.Center | |
| ) { | |
| Text(text = text) | |
| } | |
| } | |
| } | |
| @Preview | |
| @Composable | |
| fun WaterBottlePreview() { | |
| WaterBottle( | |
| totalWaterAmount = 2400, | |
| unit = "ml", | |
| usedWaterAmount = 120, | |
| ) | |
| } |
Aisyah Nurhalimah - 5025201081
Pada pertemuan hari ini, diberikan tugas untuk membuat aplikasi sederhana berupa kalkulator. Kalkulator sederhana ini memiliki 4 pilihan operasi yang dapat digunakan, yaitu operasi penumlahan (add), pengurangan (sub), perkalian (mul), dan pembagian (div). Langkah awal yang harus dilakukan adalah membuat proyek baru pada Android Studio. Pilih "New Project" lalu pilih "Empty Activity". Kemudian isikan nama aplikasi yang akan dibuat. Selanjutnya pada file 'MainActiviy.kt', isikan kode yang ada pada bagian akhir blog ini.
Berikut adalah hasilnya:
Berikut adalah source code lengkapnya:
| package com.example.mycalculator | |
| import android.os.Bundle | |
| import android.widget.Toast | |
| import androidx.activity.ComponentActivity | |
| import androidx.activity.compose.setContent | |
| import androidx.compose.foundation.layout.Arrangement | |
| import androidx.compose.foundation.layout.Column | |
| import androidx.compose.foundation.layout.Row | |
| import androidx.compose.foundation.layout.Spacer | |
| import androidx.compose.foundation.layout.fillMaxSize | |
| import androidx.compose.foundation.layout.fillMaxWidth | |
| import androidx.compose.foundation.layout.width | |
| import androidx.compose.material3.Button | |
| import androidx.compose.material3.Text | |
| import androidx.compose.material3.TextField | |
| import androidx.compose.runtime.Composable | |
| import androidx.compose.runtime.getValue | |
| import androidx.compose.runtime.mutableStateOf | |
| import androidx.compose.runtime.remember | |
| import androidx.compose.runtime.setValue | |
| import androidx.compose.ui.Modifier | |
| import androidx.compose.ui.platform.LocalContext | |
| import androidx.compose.ui.unit.dp | |
| class MainActivity : ComponentActivity() { | |
| override fun onCreate(savedInstanceState: Bundle?) { | |
| super.onCreate(savedInstanceState) | |
| setContent { | |
| SimpleCalculator() | |
| } | |
| } | |
| } | |
| @Composable | |
| fun SimpleCalculator() { | |
| var num1 by remember { | |
| mutableStateOf("0") | |
| } | |
| var num2 by remember { | |
| mutableStateOf("0") | |
| } | |
| val context = LocalContext.current | |
| Column { | |
| TextField( | |
| value = num1, | |
| onValueChange = { | |
| num1 = it | |
| }, | |
| modifier = Modifier.fillMaxWidth() | |
| ) | |
| TextField( | |
| value = num2, | |
| onValueChange = { | |
| num2 = it | |
| }, | |
| modifier = Modifier.fillMaxWidth() | |
| ) | |
| Row( | |
| modifier = Modifier | |
| .fillMaxWidth(), | |
| horizontalArrangement = Arrangement.SpaceBetween | |
| ) { | |
| Button(onClick = { | |
| val result = num1.toInt() + num2.toInt() | |
| Toast.makeText(context, "Result for $num1 + $num2 is $result", | |
| Toast.LENGTH_SHORT | |
| ).show() | |
| }) { | |
| Text(text = "Add") | |
| } | |
| Spacer(modifier = Modifier.width(20.dp)) | |
| Button(onClick = { | |
| val result = num1.toInt() - num2.toInt() | |
| Toast.makeText(context, "Result for $num1 - $num2 is $result", | |
| Toast.LENGTH_SHORT | |
| ).show() | |
| }) { | |
| Text(text = "Sub") | |
| } | |
| Spacer(modifier = Modifier.width(20.dp)) | |
| Button(onClick = { | |
| val result = num1.toInt() * num2.toInt() | |
| Toast.makeText(context, "Result for $num1 * $num2 is $result", | |
| Toast.LENGTH_SHORT | |
| ).show() | |
| }) { | |
| Text(text = "Mul") | |
| } | |
| Spacer(modifier = Modifier.width(20.dp)) | |
| Button(onClick = { | |
| val result = num1.toInt() / num2.toInt() | |
| Toast.makeText(context, "Result for $num1 / $num2 is $result", | |
| Toast.LENGTH_SHORT | |
| ).show() | |
| }) { | |
| Text(text = "Div") | |
| } | |
| } | |
| } | |
| } |
Aisyah Nurhalimah - 5025201081
Studi Kasus - Membuat Halaman Login
Pada pertemuan hari ini, diberikan tugas untuk membuat halaman login sederhana seperti yang ada pada link materi diatas. Langkah pertama adalah membuat project baru menggunakan template 'Empty Activity'. Selanjutnya, beri nama project 'MyLogin', dan ubah minimum SDK menjadi 'API 26 ("Oreo"; Android 8.0)'. Lalu buat file baru, klik kanan pada folder 'com.example.mylogin', pilih 'New', pilih 'Kotlin Class/File', lalu beri nama 'LoginScreen' dan pilih 'File', kemudian tekan Enter pada keyboard. Berikut adalah source code dari file LoginScreen.
| package com.example.mylogin | |
| import android.util.Log | |
| import androidx.compose.foundation.Image | |
| import androidx.compose.foundation.clickable | |
| import androidx.compose.foundation.layout.Arrangement | |
| import androidx.compose.foundation.layout.Column | |
| import androidx.compose.foundation.layout.Row | |
| import androidx.compose.foundation.layout.Spacer | |
| import androidx.compose.foundation.layout.fillMaxSize | |
| import androidx.compose.foundation.layout.height | |
| import androidx.compose.foundation.layout.padding | |
| import androidx.compose.foundation.layout.size | |
| import androidx.compose.material3.Button | |
| import androidx.compose.material3.OutlinedTextField | |
| import androidx.compose.material3.Text | |
| import androidx.compose.runtime.Composable | |
| import androidx.compose.runtime.getValue | |
| import androidx.compose.runtime.mutableStateOf | |
| import androidx.compose.runtime.remember | |
| import androidx.compose.runtime.setValue | |
| import androidx.compose.ui.Alignment | |
| import androidx.compose.ui.Modifier | |
| import androidx.compose.ui.res.painterResource | |
| import androidx.compose.ui.text.font.FontWeight | |
| import androidx.compose.ui.text.input.PasswordVisualTransformation | |
| import androidx.compose.ui.unit.dp | |
| import androidx.compose.ui.unit.sp | |
| @Composable | |
| fun LoginScreen(){ | |
| var email by remember { | |
| mutableStateOf("") | |
| } | |
| var password by remember { | |
| mutableStateOf("") | |
| } | |
| Column ( | |
| modifier = Modifier.fillMaxSize(), | |
| verticalArrangement = Arrangement.Center, | |
| horizontalAlignment = Alignment.CenterHorizontally | |
| ) { | |
| Image(painter = painterResource(id = R.drawable.login), contentDescription = "Login Image", | |
| modifier = Modifier.size(250.dp)) | |
| Text(text = "Welcome Back", fontSize = 28.sp, fontWeight = FontWeight.Bold) | |
| Spacer(modifier = Modifier.height(4.dp)) | |
| Text(text = "Login to your account") | |
| Spacer(modifier = Modifier.height(16.dp)) | |
| OutlinedTextField(value = email, onValueChange = { | |
| email = it | |
| }, label = { | |
| Text(text = "Email Address") | |
| }) | |
| Spacer(modifier = Modifier.height(16.dp)) | |
| OutlinedTextField(value = password, onValueChange = { | |
| password = it | |
| }, label = { | |
| Text(text = "Password") | |
| }, visualTransformation = PasswordVisualTransformation()) | |
| Spacer(modifier = Modifier.height(16.dp)) | |
| Button(onClick = { | |
| Log.i("Credential", "Email : $email Password : $password") | |
| }) { | |
| Text(text = "Login") | |
| } | |
| Spacer(modifier = Modifier.height(32.dp)) | |
| Text(text = "Forgot Password?", modifier = Modifier.clickable { | |
| }) | |
| Spacer(modifier = Modifier.height(32.dp)) | |
| Text(text = "Or sign in with") | |
| Row( | |
| modifier = Modifier | |
| .fillMaxSize().padding(40.dp), | |
| horizontalArrangement = Arrangement.SpaceEvenly | |
| ) { | |
| Image(painter = painterResource(id = R.drawable.fb), | |
| contentDescription = "Facebook", | |
| modifier = Modifier.size(60.dp).clickable { | |
| //Facebook clicked | |
| } | |
| ) | |
| Image(painter = painterResource(id = R.drawable.google), | |
| contentDescription = "Google", | |
| modifier = Modifier.size(60.dp).clickable { | |
| //Google clicked | |
| } | |
| ) | |
| Image(painter = painterResource(id = R.drawable.x), | |
| contentDescription = "X", | |
| modifier = Modifier.size(60.dp).clickable { | |
| //Twitter clicked | |
| } | |
| ) | |
| } | |
| } | |
| } |
Hasil halaman login sederhana :
Aisyah Nurhalimah - 5025201081
Membuat aplikasi Dice Roller interaktif (android.com)
Pada pertemuan hari ini, diberikan tugas untuk menambahkan composable Button ke aplikasi Android dengan Compose, menambahkan perilaku composable Button di aplikasi Android dengan Compose, serta membuka dan mengubah kode Activity untuk aplikasi Android. Sehingga untuk memenuhi tugas dengan kriteria yang sudah disebutkan sebelumnya, dibuat aplikasi permainan dadu dengan menekan tombol roll untuk mengubah nilai dadu.
Berikut adalah source code implementasi dice roller yang sudah dibuat:
| package com.example.diceroller | |
| import android.os.Bundle | |
| import androidx.activity.ComponentActivity | |
| import androidx.activity.compose.setContent | |
| import androidx.compose.foundation.Image | |
| import androidx.compose.foundation.layout.Column | |
| import androidx.compose.foundation.layout.Spacer | |
| import androidx.compose.foundation.layout.fillMaxSize | |
| import androidx.compose.foundation.layout.height | |
| import androidx.compose.foundation.layout.padding | |
| import androidx.compose.foundation.layout.width | |
| import androidx.compose.foundation.layout.wrapContentSize | |
| import androidx.compose.material3.Button | |
| import androidx.compose.material3.Text | |
| import androidx.compose.runtime.Composable | |
| import androidx.compose.runtime.getValue | |
| import androidx.compose.runtime.mutableStateOf | |
| import androidx.compose.runtime.remember | |
| import androidx.compose.runtime.setValue | |
| import androidx.compose.ui.Alignment | |
| import androidx.compose.ui.Modifier | |
| import androidx.compose.ui.unit.dp | |
| import androidx.compose.ui.unit.sp | |
| import androidx.compose.ui.res.painterResource | |
| import androidx.compose.ui.res.stringResource | |
| import androidx.compose.ui.text.font.FontWeight | |
| import androidx.compose.ui.tooling.preview.Preview | |
| import com.example.diceroller.ui.theme.DiceRollerTheme | |
| class MainActivity : ComponentActivity() { | |
| override fun onCreate(savedInstanceState: Bundle?) { | |
| super.onCreate(savedInstanceState) | |
| setContent { | |
| DiceRollerTheme { | |
| DiceRollerApp() | |
| } | |
| } | |
| } | |
| } | |
| @Preview(showBackground = true) | |
| @Composable | |
| fun DiceRollerApp(){ | |
| DiceWithButtonAndImage(modifier = Modifier | |
| .fillMaxSize() | |
| .wrapContentSize(Alignment.Center) | |
| ) | |
| } | |
| @Composable | |
| fun DiceWithButtonAndImage(modifier:Modifier = Modifier){ | |
| var result by remember { mutableStateOf( 1) } | |
| val imageResource = when(result) { | |
| 1 -> R.drawable.dice_1 | |
| 2 -> R.drawable.dice_2 | |
| 3 -> R.drawable.dice_3 | |
| 4 -> R.drawable.dice_4 | |
| 5 -> R.drawable.dice_5 | |
| else -> R.drawable.dice_6 | |
| } | |
| Column(modifier = modifier, | |
| horizontalAlignment = Alignment.CenterHorizontally) { | |
| Image( | |
| painter = painterResource(imageResource), | |
| contentDescription = result.toString() | |
| ) | |
| Spacer(modifier = Modifier.height(16.dp)) | |
| Button( | |
| onClick = { result = (1..6).random() }, | |
| modifier = Modifier | |
| .padding(16.dp) | |
| .width(200.dp) | |
| .height(50.dp) | |
| ) { | |
| Text(text = stringResource(R.string.roll), fontSize = 24.sp, fontWeight = FontWeight.Bold) | |
| } | |
| } | |
| } |
Berikut adalah tampilan source code diatas:
Aisyah Nurhalimah - 5025201081
Pada pertemuan kali ini, diberikan tugas untuk menyiapkan aplikasi ulang tahun sederhana menggunakan pendekatan composable. Jetpack Compose adalah toolkit UI modern yang diperkenalkan Google untuk mempermudah pengembangan user interface di platform Android. Dibangun di atas bahasa pemrograman Kotlin, Jetpack Compose mengadopsi pendekatan deklaratif dalam mendesain UI. Dalam kata lain, developer dapat mendeskripsikan tampilan dan UI behavior menggunakan serangkaian fungsi tanpa perlu khawatir tentang detail implementasi. Fungsi Composable adalah elemen dasar dalam membangun UI di Compose. Fungsi ini memiliki beberapa karakteristik penting, yaitu menjelaskan bagian-bagian dari UI, tidak menampilkan elemen apapun secara langsung, mengambil input dan menghasilkan elemen yang akan ditampilkan di layar.
Berikut adalah source code dari tugas kali ini:
| package com.example.hbdapp | |
| import android.os.Bundle | |
| import android.os.Message | |
| import androidx.activity.ComponentActivity | |
| import androidx.activity.compose.setContent | |
| import androidx.compose.foundation.layout.Arrangement | |
| import androidx.compose.foundation.layout.Column | |
| import androidx.compose.foundation.layout.Row | |
| import androidx.compose.foundation.layout.fillMaxSize | |
| import androidx.compose.foundation.layout.padding | |
| import androidx.compose.material3.MaterialTheme | |
| import androidx.compose.material3.Surface | |
| import androidx.compose.material3.Text | |
| import androidx.compose.runtime.Composable | |
| import androidx.compose.ui.Modifier | |
| import androidx.compose.ui.text.style.TextAlign | |
| import androidx.compose.ui.tooling.preview.Preview | |
| import com.example.hbdapp.ui.theme.HbdAppTheme | |
| import androidx.compose.ui.unit.sp | |
| import androidx.compose.ui.Alignment | |
| import androidx.compose.ui.unit.dp | |
| import androidx.compose.ui.graphics.Color | |
| import androidx.compose.foundation.background | |
| import androidx.compose.foundation.layout.fillMaxSize | |
| class MainActivity : ComponentActivity() { | |
| override fun onCreate(savedInstanceState: Bundle?) { | |
| super.onCreate(savedInstanceState) | |
| setContent { | |
| HbdAppTheme { | |
| // A surface container using the 'background' color from the theme | |
| Surface( | |
| modifier = Modifier.fillMaxSize(), | |
| color = MaterialTheme.colorScheme.background | |
| ) { | |
| GreetingText( | |
| message = "Happy Birthday!", | |
| from = "From: Ais" | |
| ) | |
| } | |
| } | |
| } | |
| } | |
| } | |
| @Composable | |
| fun GreetingText( message: String, from: String, modifier: Modifier = Modifier){ | |
| Column ( | |
| verticalArrangement = Arrangement.Center, | |
| modifier = modifier.fillMaxSize().background(Color(0xFFD7E4C0)) | |
| ){ | |
| Text( | |
| text = message, | |
| color = Color(0xFF9B4444), | |
| fontSize = 90.sp, | |
| lineHeight = 120.sp, | |
| textAlign = TextAlign.Center | |
| ) | |
| Text( | |
| text = from, | |
| color = Color(0xFFC68484), | |
| fontSize = 24.sp, | |
| lineHeight = 200.sp | |
| ) | |
| } | |
| } | |
| @Preview(showBackground = true) | |
| @Composable | |
| fun BirthdayCardPreview() { | |
| HbdAppTheme { | |
| GreetingText(message = "Happy Birthday!", from = "From: Ais") | |
| } | |
| } | |
Berikut adalah hasil dari source code diatas:
Aisyah Nurhalimah - 5025201081
Pertemuan kedua pada mata kuliah ini, membahas tentang Jetpack Compose. Jetpack Compose adalah toolkit UI modern yang diperkenalkan Google untuk mempermudah pengembangan user interface di platform Android. Dibangun di atas bahasa pemrograman Kotlin, Jetpack Compose mengadopsi pendekatan deklaratif dalam mendesain UI. Sebagai permulaan, diberikan tugas untuk membuat sebuah program sederhana menggunakan Android Studio.
Langkah pertama adalah menginstal Android Studio Donwload Android Studio, versi terbaru saat ini ialah versi iguana. Selanjutnya ketika aplikasi berhasil terpasang, buka aplikasi lalu pilih 'New Project', lalu akan muncul tampilan seperti berikut ini:
Tampilan tersebut dapat dimodifikasi sesuat kebutuhan dengan mengubah isi file-file yang berada pada directory 'app' seperti 'MainActivity.kt'.
Berikut adalah source code dari uji coba 'Hello Android':
| package com.example.programsederhana | |
| import android.os.Bundle | |
| import androidx.activity.ComponentActivity | |
| import androidx.activity.compose.setContent | |
| import androidx.compose.foundation.layout.fillMaxSize | |
| import androidx.compose.material3.MaterialTheme | |
| import androidx.compose.material3.Surface | |
| import androidx.compose.material3.Text | |
| import androidx.compose.runtime.Composable | |
| import androidx.compose.ui.Alignment | |
| import androidx.compose.foundation.layout.Column | |
| import androidx.compose.foundation.layout.Arrangement | |
| import androidx.compose.ui.Modifier | |
| import androidx.compose.ui.text.TextStyle | |
| import androidx.compose.ui.text.font.FontWeight | |
| import androidx.compose.ui.unit.sp | |
| import androidx.compose.ui.tooling.preview.Preview | |
| import com.example.programsederhana.ui.theme.ProgramSederhanaTheme | |
| class MainActivity : ComponentActivity() { | |
| override fun onCreate(savedInstanceState: Bundle?) { | |
| super.onCreate(savedInstanceState) | |
| setContent { | |
| ProgramSederhanaTheme { | |
| // A surface container using the 'background' color from the theme | |
| Surface( | |
| modifier = Modifier.fillMaxSize(), | |
| color = MaterialTheme.colorScheme.background | |
| ) { | |
| Greeting("Android") | |
| } | |
| } | |
| } | |
| } | |
| } | |
| @Composable | |
| fun Greeting(name: String, modifier: Modifier = Modifier) { | |
| Column( | |
| modifier = modifier.fillMaxSize(), | |
| verticalArrangement = Arrangement.Center, | |
| horizontalAlignment = Alignment.CenterHorizontally | |
| ) { | |
| Text( | |
| text = "Hello $name!", | |
| fontSize = 48.sp, | |
| fontWeight = FontWeight.Bold | |
| ) | |
| } | |
| } | |
| @Preview(showBackground = true) | |
| @Composable | |
| fun GreetingPreview() { | |
| ProgramSederhanaTheme { | |
| Greeting("Android") | |
| } | |
| } |
Berikut adalah hasil dari source code diatas:
Aisyah Nurhalimah - 5025201081
Teknologi Mobile Devices dan Pemrogramannya
Ulasan Sejarah Mobile Phone
Penggunaan handphone di zaman modern ini dapat dibilang cukup penting karena hampir semua kegiatan yang dilakukan terhubung dengan handphone, baik untuk mencatat suatu hal, menghubungi kerabat, mengirimi pesan, dan sebagainya.
Tahun 1973 : Ponsel Pertama
Martin Cooper menjadi sosok penting yang mengenalkan ponsel, seorang karyawan Motorola pada tanggal 3 April 1973, walaupun banyak disebut-sebut penemu telepon genggam adalah sebuah tim dari salah satu divisi Motorola (divisi tempat Cooper bekerja) dengan model pertama adalah DynaTAC. Ide yang dicetuskan oleh Cooper adalah sebuah alat komunikasi yang kecil dan mudah dibawa bepergian secara fleksibel. Sebuah telepon genggam pertama berhasil diselesaikan dengan total bobot seberat dua kilogram. Untuk memproduksinya, Motorola membutuhkan biaya setara dengan US$1 juta.
Tahun 1983 : Motorola DynaTAC
Pada tahun 1983, telepon genggam portabel berharga US$4 ribu (Rp36 juta) setara dengan US$10 ribu (Rp90 juta). 1G merupakan generasi jaringan telepon genggam pertama yang dibuat. Tokoh lain yang diketahui sangat berjasa dalam dunia komunikasi seluler adalah Amos Joel Jr yang lahir di Philadelphia, 12 Maret 1918, ia memang diakui dunia sebagai pakar dalam bidang switching. Karena penemuan Amos Joel inilah penggunaan telepon genggam menjadi nyaman.
Pada tahun ini muncul ponsel generasi terbaru, yakni Motorola DynaTAC 8000X. Berbeda dengan Motorola DynaTAC tahun 1973, ponsel terbaru ini menjadi ponsel pertama yang secara resmi dikomersialkan. Meski sudah mengalami beberapa pembaharuan, namun ponsel ini masih memiliki bobot yang cukup besar, sekitar 793 gram. Baterai yang disematkan pada Motorola DynaTAC 8000X bisa beroperasi selama 8 jam, dengan harga sekitar 4000 dolar AS.
Tahun 1985 : Siemens Mobiltelefon C1
Siemens Mobiltelefon C1 adalah telepon pertama perusahaan Siemens yang memiliki bentuk mirip dengan tas kantor. Memiliki bentuk yang aneh, karena saat itu menjadi cara yanf efektif untuk memiliki cukup daya baterai saat berada di luar kota.
Tahun 1988 : Samsung pertama
Samsung menciptakan SH-100, yang merupakan telepon genggam pertamanya yang dirancang secara resmi di Korea. Layarnya sangat kecil sehingga pesan teks tidak mungkin terlihat. Hanya nomor yang dihubungi atau nomor yang masuk yang dapat dilihat.
Tahun 1989 : Flip Phone Era
Motorola mempekenalkan desain "flip" ke pasar, yaitu Motorola MicroTAC. Merupakan telepon terkecil dan terringgi yang pernah diproduksi sampai saat itu. Dengan bentuk mirip beg kantor, ponsel ini menjadi aneh dan wajar karena menjadi cara yang efektif untuk memiliki cukup daya baterai saat berada di luar kota. Setelah MicroTAC, ponsel menjadi lebih ringan dan kompak.
Tahun 1992 : 2G Phone
Pada tahun 1992, antena dan bodi ponsel telah menyusut dari zaman ponsel bata. Perkembangan signifikan berikutnya adalah Nokia 1011, ponsel GSM (2G) pertama yang diproduksi secara massal, yang diperkenalkan pada tahun 1992.
Tahun 1996 : First Phone With a Keyboard
Nokia Communicator 9000, pertama kali tersedia pada tahun 1996, memiliki keyboard QWERTY. Itu merupakan smartphone pertama Nokia.
Tahun 1999 : Feature Phone EraPada era ini dimulai pada tahun 1999 dimana Nokia merilis ponsel-ponsel yang memiliki kemampuan mengakses halama situs secara nirkabel. Nokia 3310 diperkenalkan dan menjadi handphone terlaris di dunia. Jenis ponsel pada masa ini dikenal dengan feature phone, yang identik dengan fungsi utama telepon dan SMS. Munculnya Sharp J-SH04 semakin menarik perhatian masyarakat. Pasalnya, ponsel pintar ini sudah dilengkapi dengan kamera di dalamnya.
Tahun 2002-sekarang : Smartphone EraTahun 2002 dikenal dengan era smartphone yang dimulai dengan penggunaan ponsel yang memiliki sistem operasi khusus seperti Symbian, dan memiliki fungsi lain selain fungsi telepon biasa seperti pemutar lagu, MMS, dan game. Pada tahun 2007, Apple mengeluarkan iPhone pertama dan memperkenalkan konsep smartphone yang memiliki layar sentuhan. Kemunculan iPhone di tahun ini, membuat ponselnya bisa digunakan untuk mengakses jaringan internet 3G. Awal tahun 2010-an menjadi tahun kejayaan dari BlackBerry. Walaupun pada akhirnya BlackBerry tidak dapat bersaing dengan banyaknya smartphone yang baru rilis. Konsep smartphone dengan layar sentuh lebih menarik perhatian masyarakat dibandingkan dengan Blackberry yang masih setia dengan model keypad QWERTY.
Di era ini juga, kecepatan jaringan internet juga semakin tinggi. Para pengguna smartphone kini bisa menikmati internet yang lebih kencang pada jaringan 4G. Selain mengalami peningkatan pada kualitas layar sentuh dan juga jaringan, smartphone terbaru akhir-akhir ini juga telah menawarkan banyak kelebihan di berbagai aspek lainnya. Mulai dari kapasitas baterai yang awet dengan teknologi fast charging, kapasitas RAM dan ROM yang besar, hingga prosesor yang sangat kencang.
Ulasan Perkembangan Teknologi Pemrograman dalam Perangkat Bergerak
Penemu Handphone dan Sejarah Perkembangan Handphone (gramedia.com)
2 sejarah dan perkembangan teknologi perangkat bergerak.pdf (ub.ac.id)
History Of The Cell Phone (1973 to 2024) - Practically Networked
