PPB TUGAS 7

 

Pemrograman Perangkat Bergerak - I

Material Design

Aisyah Nurhalimah - 5025201081 

Materi Material Design

    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")
	}
	}
	}
	}
	}
	}
	}
	}

view raw MainActivity-7.kt hosted with ❤ by GitHub

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,
	)
	}

view raw WaterBottle.kt hosted with ❤ by GitHub

PPB TUGAS 6

   

Pemrograman Perangkat Bergerak - I

Memahami Bahasa Kotlin

Aisyah Nurhalimah - 5025201081 

Memahami Bahasa Kotlin

    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")
	}
	}
	}
	}

view raw MyCalculator hosted with ❤ by GitHub

PPB TUGAS 5

  

Pemrograman Perangkat Bergerak - I

Membuat Halaman Login

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
	}
	)
	}
	}
	}

view raw LoginScreen hosted with ❤ by GitHub

Hasil halaman login sederhana : 

Referensi : 

Tutorial Halaman Login Sederhana

PPB - TUGAS 4

 

Pemrograman Perangkat Bergerak - I

Komponen Button

Aisyah Nurhalimah - 5025201081 

Komponen Button

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)
	}
	}
	}

view raw diceRoller hosted with ❤ by GitHub

Berikut adalah tampilan source code diatas: 

Berikut adalah tampilan ketika ditekan 'roll', akan merubah nilai dadu: 

PPB - TUGAS 3

 

Pemrograman Perangkat Bergerak - I

Aplikasi Ulang Tahun Sederhana

Aisyah Nurhalimah - 5025201081 

Mengenal Composable

    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")
	}
	}

view raw hbdApp hosted with ❤ by GitHub

Berikut adalah hasil dari source code diatas: