Tugas Minggu 9 PPB I

Nama    : Tegar Ganang Satrio Priambodo

NRP       : 5025201002

Kelas     : PPB I

Membuat Aplikasi Woof

Pada tugas pertemuan 9 ini akan membuat woof yang berisi gambar hewan peliharaan dengan referensi berikut

Pertama tama kita load starter project pada branch starter di github dalam bentuk ZIP yang di ekstrak. Selanjutnya load project pada android studio. Setelah semua resource sudah siap selanjutnya kita akan mulai memodifikasi starter project.

Penambahan Warna Tema Terang dan Gelap

Saat ini tema terang dan gelap menjadi pertimbangan dalam mengembangkan aplikasi android, untuk project kali ini sudah tersedia referensi warna tiap tema pada file Color.Kt pada folder ui.theme. 

	package com.example.woof.ui.theme
	import androidx.compose.ui.graphics.Color
	val md_theme_light_primary = Color(0xFF006C4C)
	val md_theme_light_onPrimary = Color(0xFFFFFFFF)
	val md_theme_light_primaryContainer = Color(0xFF89F8C7)
	val md_theme_light_onPrimaryContainer = Color(0xFF002114)
	val md_theme_light_secondary = Color(0xFF4D6357)
	val md_theme_light_onSecondary = Color(0xFFFFFFFF)
	val md_theme_light_secondaryContainer = Color(0xFFCFE9D9)
	val md_theme_light_onSecondaryContainer = Color(0xFF092016)
	val md_theme_light_tertiary = Color(0xFF3D6373)
	val md_theme_light_onTertiary = Color(0xFFFFFFFF)
	val md_theme_light_tertiaryContainer = Color(0xFFC1E8FB)
	val md_theme_light_onTertiaryContainer = Color(0xFF001F29)
	val md_theme_light_error = Color(0xFFBA1A1A)
	val md_theme_light_errorContainer = Color(0xFFFFDAD6)
	val md_theme_light_onError = Color(0xFFFFFFFF)
	val md_theme_light_onErrorContainer = Color(0xFF410002)
	val md_theme_light_background = Color(0xFFFBFDF9)
	val md_theme_light_onBackground = Color(0xFF191C1A)
	val md_theme_light_surface = Color(0xFFFBFDF9)
	val md_theme_light_onSurface = Color(0xFF191C1A)
	val md_theme_light_surfaceVariant = Color(0xFFDBE5DD)
	val md_theme_light_onSurfaceVariant = Color(0xFF404943)
	val md_theme_light_outline = Color(0xFF707973)
	val md_theme_light_inverseOnSurface = Color(0xFFEFF1ED)
	val md_theme_light_inverseSurface = Color(0xFF2E312F)
	val md_theme_light_inversePrimary = Color(0xFF6CDBAC)
	val md_theme_light_shadow = Color(0xFF000000)
	val md_theme_light_surfaceTint = Color(0xFF006C4C)
	val md_theme_light_outlineVariant = Color(0xFFBFC9C2)
	val md_theme_light_scrim = Color(0xFF000000)
	val md_theme_dark_primary = Color(0xFF6CDBAC)
	val md_theme_dark_onPrimary = Color(0xFF003826)
	val md_theme_dark_primaryContainer = Color(0xFF005138)
	val md_theme_dark_onPrimaryContainer = Color(0xFF89F8C7)
	val md_theme_dark_secondary = Color(0xFFB3CCBE)
	val md_theme_dark_onSecondary = Color(0xFF1F352A)
	val md_theme_dark_secondaryContainer = Color(0xFF354B40)
	val md_theme_dark_onSecondaryContainer = Color(0xFFCFE9D9)
	val md_theme_dark_tertiary = Color(0xFFA5CCDF)
	val md_theme_dark_onTertiary = Color(0xFF073543)
	val md_theme_dark_tertiaryContainer = Color(0xFF244C5B)
	val md_theme_dark_onTertiaryContainer = Color(0xFFC1E8FB)
	val md_theme_dark_error = Color(0xFFFFB4AB)
	val md_theme_dark_errorContainer = Color(0xFF93000A)
	val md_theme_dark_onError = Color(0xFF690005)
	val md_theme_dark_onErrorContainer = Color(0xFFFFDAD6)
	val md_theme_dark_background = Color(0xFF191C1A)
	val md_theme_dark_onBackground = Color(0xFFE1E3DF)
	val md_theme_dark_surface = Color(0xFF191C1A)
	val md_theme_dark_onSurface = Color(0xFFE1E3DF)
	val md_theme_dark_surfaceVariant = Color(0xFF404943)
	val md_theme_dark_onSurfaceVariant = Color(0xFFBFC9C2)
	val md_theme_dark_outline = Color(0xFF8A938C)
	val md_theme_dark_inverseOnSurface = Color(0xFF191C1A)
	val md_theme_dark_inverseSurface = Color(0xFFE1E3DF)
	val md_theme_dark_inversePrimary = Color(0xFF006C4C)
	val md_theme_dark_shadow = Color(0xFF000000)
	val md_theme_dark_surfaceTint = Color(0xFF6CDBAC)
	val md_theme_dark_outlineVariant = Color(0xFF404943)
	val md_theme_dark_scrim = Color(0xFF000000)

view raw Color.kt hosted with ❤ by GitHub

Selanjutnya pada file Theme.kt ditambahkan kode seperti berikut. Terdapat metode composable WoofTheme sebagai program penentuan tema dengan melihat variabel dynamicColor apakah tema pada sistem smartphone di setting tema gelap atau terang.

	package com.example.woof.ui.theme
	import android.app.Activity
	import android.os.Build
	import android.view.View
	import androidx.compose.foundation.isSystemInDarkTheme
	import androidx.compose.material3.MaterialTheme
	import androidx.compose.material3.darkColorScheme
	import androidx.compose.material3.dynamicDarkColorScheme
	import androidx.compose.material3.dynamicLightColorScheme
	import androidx.compose.material3.lightColorScheme
	import androidx.compose.runtime.Composable
	import androidx.compose.runtime.SideEffect
	import androidx.compose.ui.graphics.Color
	import androidx.compose.ui.graphics.toArgb
	import androidx.compose.ui.platform.LocalContext
	import androidx.compose.ui.platform.LocalView
	import androidx.core.view.WindowCompat
	private val LightColors = lightColorScheme(
	primary = md_theme_light_primary,
	onPrimary = md_theme_light_onPrimary,
	primaryContainer = md_theme_light_primaryContainer,
	onPrimaryContainer = md_theme_light_onPrimaryContainer,
	secondary = md_theme_light_secondary,
	onSecondary = md_theme_light_onSecondary,
	secondaryContainer = md_theme_light_secondaryContainer,
	onSecondaryContainer = md_theme_light_onSecondaryContainer,
	tertiary = md_theme_light_tertiary,
	onTertiary = md_theme_light_onTertiary,
	tertiaryContainer = md_theme_light_tertiaryContainer,
	onTertiaryContainer = md_theme_light_onTertiaryContainer,
	error = md_theme_light_error,
	errorContainer = md_theme_light_errorContainer,
	onError = md_theme_light_onError,
	onErrorContainer = md_theme_light_onErrorContainer,
	background = md_theme_light_background,
	onBackground = md_theme_light_onBackground,
	surface = md_theme_light_surface,
	onSurface = md_theme_light_onSurface,
	surfaceVariant = md_theme_light_surfaceVariant,
	onSurfaceVariant = md_theme_light_onSurfaceVariant,
	outline = md_theme_light_outline,
	inverseOnSurface = md_theme_light_inverseOnSurface,
	inverseSurface = md_theme_light_inverseSurface,
	inversePrimary = md_theme_light_inversePrimary,
	surfaceTint = md_theme_light_surfaceTint,
	outlineVariant = md_theme_light_outlineVariant,
	scrim = md_theme_light_scrim,
	)
	private val DarkColors = darkColorScheme(
	primary = md_theme_dark_primary,
	onPrimary = md_theme_dark_onPrimary,
	primaryContainer = md_theme_dark_primaryContainer,
	onPrimaryContainer = md_theme_dark_onPrimaryContainer,
	secondary = md_theme_dark_secondary,
	onSecondary = md_theme_dark_onSecondary,
	secondaryContainer = md_theme_dark_secondaryContainer,
	onSecondaryContainer = md_theme_dark_onSecondaryContainer,
	tertiary = md_theme_dark_tertiary,
	onTertiary = md_theme_dark_onTertiary,
	tertiaryContainer = md_theme_dark_tertiaryContainer,
	onTertiaryContainer = md_theme_dark_onTertiaryContainer,
	error = md_theme_dark_error,
	errorContainer = md_theme_dark_errorContainer,
	onError = md_theme_dark_onError,
	onErrorContainer = md_theme_dark_onErrorContainer,
	background = md_theme_dark_background,
	onBackground = md_theme_dark_onBackground,
	surface = md_theme_dark_surface,
	onSurface = md_theme_dark_onSurface,
	surfaceVariant = md_theme_dark_surfaceVariant,
	onSurfaceVariant = md_theme_dark_onSurfaceVariant,
	outline = md_theme_dark_outline,
	inverseOnSurface = md_theme_dark_inverseOnSurface,
	inverseSurface = md_theme_dark_inverseSurface,
	inversePrimary = md_theme_dark_inversePrimary,
	surfaceTint = md_theme_dark_surfaceTint,
	outlineVariant = md_theme_dark_outlineVariant,
	scrim = md_theme_dark_scrim,
	)
	@Composable
	fun WoofTheme(
	darkTheme: Boolean = isSystemInDarkTheme(),
	// Dynamic color is available on Android 12+
	dynamicColor: Boolean = false,
	content: @Composable () -> Unit
	) {
	val colorScheme = when {
	dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
	val context = LocalContext.current
	if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
	}
	darkTheme -> DarkColors
	else -> LightColors
	}
	val view = LocalView.current
	if (!view.isInEditMode) {
	SideEffect {
	setUpEdgeToEdge(view, darkTheme)
	}
	}
	MaterialTheme(
	colorScheme = colorScheme,
	shapes = Shapes,
	typography = Typography,
	content = content
	)
	}
	private fun setUpEdgeToEdge(view: View, darkTheme: Boolean) {
	val window = (view.context as Activity).window
	WindowCompat.setDecorFitsSystemWindows(window, false)
	window.statusBarColor = Color.Transparent.toArgb()
	val navigationBarColor = when {
	Build.VERSION.SDK_INT >= 29 -> Color.Transparent.toArgb()
	Build.VERSION.SDK_INT >= 26 -> Color(0xFF, 0xFF, 0xFF, 0x63).toArgb()
	// Min sdk version for this app is 24, this block is for SDK versions 24 and 25
	else -> Color(0x00, 0x00, 0x00, 0x50).toArgb()
	}
	window.navigationBarColor = navigationBarColor
	val controller = WindowCompat.getInsetsController(window, view)
	controller.isAppearanceLightStatusBars = !darkTheme
	controller.isAppearanceLightNavigationBars = !darkTheme
	}

view raw Theme.kt hosted with ❤ by GitHub

Menambah Bentuk Tiap Card

Untuk mengubah bentuk perlu memodifikasi kode pada Shape.kt dan MainActivity.kt. Pada card tiap hewan peliharaan dibuat tampilan dengan sudut rounded. 

	package com.example.woof.ui.theme
	import androidx.compose.foundation.shape.RoundedCornerShape
	import androidx.compose.material3.Shapes
	import androidx.compose.ui.unit.dp
	val Shapes = Shapes(
	small = RoundedCornerShape(50.dp),
	medium = RoundedCornerShape(bottomStart = 16.dp, topEnd = 16.dp)
	)

view raw Shape.kt hosted with ❤ by GitHub

Menambah Tipografi

Agar tampilan semakin menarik perlu penggunaan font yang tepat. pada studi kasus ini kita gunakan font style Montserrat dan Abril Fatface yang bisa di unduh pada google font. Jika sudah di doenload dan di import, selanjutnya modifikasi file Type.kt untuk menggunakan font yang dibutuhkan.

	package com.example.woof.ui.theme
	import androidx.compose.material3.Typography
	import androidx.compose.ui.text.TextStyle
	import androidx.compose.ui.unit.sp
	import androidx.compose.ui.text.font.Font
	import androidx.compose.ui.text.font.FontFamily
	import com.example.woof.R
	import androidx.compose.ui.text.font.FontWeight
	val AbrilFatface = FontFamily(
	Font(R.font.abril_fatface_regular)
	)
	val Montserrat = FontFamily(
	Font(R.font.montserrat_regular),
	Font(R.font.montserrat_bold, FontWeight.Bold)
	)
	val Typography = Typography(
	displayLarge = TextStyle(
	fontFamily = AbrilFatface,
	fontWeight = FontWeight.Normal,
	fontSize = 36.sp
	),
	displayMedium = TextStyle(
	fontFamily = Montserrat,
	fontWeight = FontWeight.Bold,
	fontSize = 20.sp
	),
	labelSmall = TextStyle(
	fontFamily = Montserrat,
	fontWeight = FontWeight.Bold,
	fontSize = 14.sp
	),
	bodyLarge = TextStyle(
	fontFamily = Montserrat,
	fontWeight = FontWeight.Normal,
	fontSize = 14.sp
	)
	)

view raw Type.kt hosted with ❤ by GitHub

Menambahkan Header

	package com.example.woof
	import android.os.Bundle
	import androidx.activity.ComponentActivity
	import androidx.activity.compose.setContent
	import androidx.annotation.DrawableRes
	import androidx.annotation.StringRes
	import androidx.compose.foundation.Image
	import androidx.compose.foundation.layout.Column
	import androidx.compose.foundation.layout.Row
	import androidx.compose.foundation.layout.fillMaxSize
	import androidx.compose.foundation.layout.fillMaxWidth
	import androidx.compose.foundation.layout.padding
	import androidx.compose.foundation.layout.size
	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.Scaffold
	import androidx.compose.material3.Surface
	import androidx.compose.material3.Text
	import androidx.compose.runtime.Composable
	import androidx.compose.ui.Modifier
	import androidx.compose.ui.res.dimensionResource
	import androidx.compose.ui.res.painterResource
	import androidx.compose.ui.res.stringResource
	import androidx.compose.ui.tooling.preview.Preview
	import com.example.woof.data.Dog
	import com.example.woof.data.dogs
	import com.example.woof.ui.theme.WoofTheme
	import androidx.compose.ui.draw.clip
	import androidx.compose.ui.layout.ContentScale
	import androidx.compose.material3.CenterAlignedTopAppBar
	import androidx.compose.material3.ExperimentalMaterial3Api
	import androidx.compose.ui.Alignment
	class MainActivity : ComponentActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
	super.onCreate(savedInstanceState)
	setContent {
	WoofTheme {
	// A surface container using the 'background' color from the theme
	Surface(
	modifier = Modifier.fillMaxSize()
	) {
	WoofApp()
	}
	}
	}
	}
	}
	@Composable
	fun WoofApp() {
	Scaffold(
	topBar = {
	WoofTopAppBar()
	}
	) { it ->
	LazyColumn(contentPadding = it) {
	items(dogs) {
	DogItem(
	dog = it,
	modifier = Modifier.padding(dimensionResource(R.dimen.padding_small))
	)
	}
	}
	}
	}
	@Composable
	fun DogItem(
	dog: Dog,
	modifier: Modifier = Modifier
	) {
	Card(modifier = modifier) {
	Row(
	modifier = Modifier
	.fillMaxWidth()
	.padding(dimensionResource(id = R.dimen.padding_small))
	) {
	DogIcon(dog.imageResourceId)
	DogInformation(dog.name, dog.age)
	}
	}
	}
	/**
	* Composable that displays a photo of a dog.
	*
	* @param dogIcon is the resource ID for the image of the dog
	* @param modifier modifiers to set to this composable
	*/
	@Composable
	fun DogIcon(
	@DrawableRes dogIcon: Int,
	modifier: Modifier = Modifier
	) {
	Image(
	modifier = modifier
	.size(dimensionResource(R.dimen.image_size))
	.padding(dimensionResource(R.dimen.padding_small))
	.clip(MaterialTheme.shapes.small),
	contentScale = ContentScale.Crop,
	painter = painterResource(dogIcon),
	contentDescription = null
	)
	}
	@Composable
	fun DogInformation(
	@StringRes dogName: Int,
	dogAge: Int,
	modifier: Modifier = Modifier
	) {
	Column(modifier = modifier) {
	Text(
	text = stringResource(dogName),
	style = MaterialTheme.typography.displayMedium,
	modifier = Modifier.padding(top = dimensionResource(id = R.dimen.padding_small))
	)
	Text(
	text = stringResource(R.string.years_old, dogAge),
	style = MaterialTheme.typography.bodyLarge
	)
	}
	}
	@Preview
	@Composable
	fun WoofPreview() {
	WoofTheme(darkTheme = false) {
	WoofApp()
	}
	}
	@OptIn(ExperimentalMaterial3Api::class)
	@Composable
	fun WoofTopAppBar(modifier: Modifier = Modifier) {
	CenterAlignedTopAppBar(
	title = {
	Row(
	verticalAlignment = Alignment.CenterVertically
	) {
	Image(
	modifier = Modifier
	.size(dimensionResource(id = R.dimen.image_size))
	.padding(dimensionResource(id = R.dimen.padding_small)),
	painter = painterResource(R.drawable.ic_woof_logo),
	contentDescription = null
	)
	Text(
	text = stringResource(R.string.app_name),
	style = MaterialTheme.typography.displayLarge
	)
	}
	},
	modifier = modifier
	)
	}

view raw MainActivity.kt hosted with ❤ by GitHub

Hasil dan Video Demo