Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
85 changes: 73 additions & 12 deletions app/src/main/java/com/example/woof/MainActivity.kt
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import androidx.activity.compose.setContent
import androidx.annotation.DrawableRes
import androidx.annotation.StringRes
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
Expand All @@ -30,10 +31,18 @@ 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.CenterAlignedTopAppBar
import androidx.compose.material3.ExperimentalMaterial3Api
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.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.dimensionResource
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
Expand Down Expand Up @@ -63,11 +72,22 @@ class MainActivity : ComponentActivity() {
*/
@Composable
fun WoofApp() {
LazyColumn {
items(dogs) {
DogItem(dog = it)
}
}
Scaffold (
topBar = {
WoofTopAppBar()
}
){

it -> LazyColumn (contentPadding = it) {
items(dogs) {
DogItem (
dog = it,
modifier = Modifier.padding(dimensionResource(R.dimen.padding_small))
)
}

}
}
}

/**
Expand All @@ -81,14 +101,20 @@ fun DogItem(
dog: Dog,
modifier: Modifier = Modifier
) {
Row(
Card(
modifier = modifier
.fillMaxWidth()
.padding(dimensionResource(R.dimen.padding_small))

) {
DogIcon(dog.imageResourceId)
DogInformation(dog.name, dog.age)
Row(
modifier = modifier
.fillMaxWidth()
.padding(dimensionResource(id = R.dimen.padding_small))
) {
DogIcon(dog.imageResourceId)
DogInformation(dog.name, dog.age)
}
}

}

/**
Expand All @@ -105,13 +131,16 @@ fun DogIcon(
Image(
modifier = modifier
.size(dimensionResource(R.dimen.image_size))
.padding(dimensionResource(R.dimen.padding_small)),
.padding(dimensionResource(R.dimen.padding_small)).clip(
MaterialTheme.shapes.small
),
contentScale = ContentScale.Crop,
painter = painterResource(dogIcon),

// Content Description is not needed here - image is decorative, and setting a null content
// description allows accessibility services to skip this element during navigation.

contentDescription = null
contentDescription = null,
)
}

Expand All @@ -131,14 +160,46 @@ fun DogInformation(
Column(modifier = modifier) {
Text(
text = stringResource(dogName),
style = MaterialTheme.typography.displayMedium,
modifier = Modifier.padding(top = dimensionResource(R.dimen.padding_small))
)
Text(
text = stringResource(R.string.years_old, dogAge),
style = MaterialTheme.typography.bodyLarge
)
}
}



@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 = "App Logo"
)
Text(
text = stringResource(R.string.app_name),
style = MaterialTheme.typography.displayLarge
)

}
}

,
modifier = modifier,
)
}

/**
* Composable that displays what the UI of the app looks like in light theme in the design tab.
*/
Expand Down
229 changes: 223 additions & 6 deletions app/src/main/java/com/example/woof/ui/theme/Color.kt
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,227 @@ package com.example.woof.ui.theme

import androidx.compose.ui.graphics.Color

val Purple80 = Color(0xFFD0BCFF)
val PurpleGrey80 = Color(0xFFCCC2DC)
val Pink80 = Color(0xFFEFB8C8)

val Purple40 = Color(0xFF6650a4)
val PurpleGrey40 = Color(0xFF625b71)
val Pink40 = Color(0xFF7D5260)
val primaryLight = Color(0xFF1F6A4E)
val onPrimaryLight = Color(0xFFFFFFFF)
val primaryContainerLight = Color(0xFFA8F2CE)
val onPrimaryContainerLight = Color(0xFF005138)
val secondaryLight = Color(0xFF4D6357)
val onSecondaryLight = Color(0xFFFFFFFF)
val secondaryContainerLight = Color(0xFFCFE9D9)
val onSecondaryContainerLight = Color(0xFF354B40)
val tertiaryLight = Color(0xFF3D6373)
val onTertiaryLight = Color(0xFFFFFFFF)
val tertiaryContainerLight = Color(0xFFC1E8FB)
val onTertiaryContainerLight = Color(0xFF244C5B)
val errorLight = Color(0xFFBA1A1A)
val onErrorLight = Color(0xFFFFFFFF)
val errorContainerLight = Color(0xFFFFDAD6)
val onErrorContainerLight = Color(0xFF93000A)
val backgroundLight = Color(0xFFF5FBF5)
val onBackgroundLight = Color(0xFF171D1A)
val surfaceLight = Color(0xFFF5FBF5)
val onSurfaceLight = Color(0xFF171D1A)
val surfaceVariantLight = Color(0xFFDBE5DD)
val onSurfaceVariantLight = Color(0xFF404943)
val outlineLight = Color(0xFF707973)
val outlineVariantLight = Color(0xFFBFC9C2)
val scrimLight = Color(0xFF000000)
val inverseSurfaceLight = Color(0xFF2C322E)
val inverseOnSurfaceLight = Color(0xFFEDF2EC)
val inversePrimaryLight = Color(0xFF8DD5B3)
val surfaceDimLight = Color(0xFFD6DBD6)
val surfaceBrightLight = Color(0xFFF5FBF5)
val surfaceContainerLowestLight = Color(0xFFFFFFFF)
val surfaceContainerLowLight = Color(0xFFEFF5EF)
val surfaceContainerLight = Color(0xFFEAEFEA)
val surfaceContainerHighLight = Color(0xFFE4EAE4)
val surfaceContainerHighestLight = Color(0xFFDEE4DE)

val primaryLightMediumContrast = Color(0xFF003F2B)
val onPrimaryLightMediumContrast = Color(0xFFFFFFFF)
val primaryContainerLightMediumContrast = Color(0xFF317A5C)
val onPrimaryContainerLightMediumContrast = Color(0xFFFFFFFF)
val secondaryLightMediumContrast = Color(0xFF253B30)
val onSecondaryLightMediumContrast = Color(0xFFFFFFFF)
val secondaryContainerLightMediumContrast = Color(0xFF5B7266)
val onSecondaryContainerLightMediumContrast = Color(0xFFFFFFFF)
val tertiaryLightMediumContrast = Color(0xFF103B4A)
val onTertiaryLightMediumContrast = Color(0xFFFFFFFF)
val tertiaryContainerLightMediumContrast = Color(0xFF4C7283)
val onTertiaryContainerLightMediumContrast = Color(0xFFFFFFFF)
val errorLightMediumContrast = Color(0xFF740006)
val onErrorLightMediumContrast = Color(0xFFFFFFFF)
val errorContainerLightMediumContrast = Color(0xFFCF2C27)
val onErrorContainerLightMediumContrast = Color(0xFFFFFFFF)
val backgroundLightMediumContrast = Color(0xFFF5FBF5)
val onBackgroundLightMediumContrast = Color(0xFF171D1A)
val surfaceLightMediumContrast = Color(0xFFF5FBF5)
val onSurfaceLightMediumContrast = Color(0xFF0D120F)
val surfaceVariantLightMediumContrast = Color(0xFFDBE5DD)
val onSurfaceVariantLightMediumContrast = Color(0xFF2F3833)
val outlineLightMediumContrast = Color(0xFF4C554F)
val outlineVariantLightMediumContrast = Color(0xFF666F69)
val scrimLightMediumContrast = Color(0xFF000000)
val inverseSurfaceLightMediumContrast = Color(0xFF2C322E)
val inverseOnSurfaceLightMediumContrast = Color(0xFFEDF2EC)
val inversePrimaryLightMediumContrast = Color(0xFF8DD5B3)
val surfaceDimLightMediumContrast = Color(0xFFC2C8C3)
val surfaceBrightLightMediumContrast = Color(0xFFF5FBF5)
val surfaceContainerLowestLightMediumContrast = Color(0xFFFFFFFF)
val surfaceContainerLowLightMediumContrast = Color(0xFFEFF5EF)
val surfaceContainerLightMediumContrast = Color(0xFFE4EAE4)
val surfaceContainerHighLightMediumContrast = Color(0xFFD9DED9)
val surfaceContainerHighestLightMediumContrast = Color(0xFFCDD3CE)

val primaryLightHighContrast = Color(0xFF003322)
val onPrimaryLightHighContrast = Color(0xFFFFFFFF)
val primaryContainerLightHighContrast = Color(0xFF00543A)
val onPrimaryContainerLightHighContrast = Color(0xFFFFFFFF)
val secondaryLightHighContrast = Color(0xFF1B3026)
val onSecondaryLightHighContrast = Color(0xFFFFFFFF)
val secondaryContainerLightHighContrast = Color(0xFF384E43)
val onSecondaryContainerLightHighContrast = Color(0xFFFFFFFF)
val tertiaryLightHighContrast = Color(0xFF01303F)
val onTertiaryLightHighContrast = Color(0xFFFFFFFF)
val tertiaryContainerLightHighContrast = Color(0xFF274E5D)
val onTertiaryContainerLightHighContrast = Color(0xFFFFFFFF)
val errorLightHighContrast = Color(0xFF600004)
val onErrorLightHighContrast = Color(0xFFFFFFFF)
val errorContainerLightHighContrast = Color(0xFF98000A)
val onErrorContainerLightHighContrast = Color(0xFFFFFFFF)
val backgroundLightHighContrast = Color(0xFFF5FBF5)
val onBackgroundLightHighContrast = Color(0xFF171D1A)
val surfaceLightHighContrast = Color(0xFFF5FBF5)
val onSurfaceLightHighContrast = Color(0xFF000000)
val surfaceVariantLightHighContrast = Color(0xFFDBE5DD)
val onSurfaceVariantLightHighContrast = Color(0xFF000000)
val outlineLightHighContrast = Color(0xFF252E29)
val outlineVariantLightHighContrast = Color(0xFF424B46)
val scrimLightHighContrast = Color(0xFF000000)
val inverseSurfaceLightHighContrast = Color(0xFF2C322E)
val inverseOnSurfaceLightHighContrast = Color(0xFFFFFFFF)
val inversePrimaryLightHighContrast = Color(0xFF8DD5B3)
val surfaceDimLightHighContrast = Color(0xFFB4BAB5)
val surfaceBrightLightHighContrast = Color(0xFFF5FBF5)
val surfaceContainerLowestLightHighContrast = Color(0xFFFFFFFF)
val surfaceContainerLowLightHighContrast = Color(0xFFEDF2EC)
val surfaceContainerLightHighContrast = Color(0xFFDEE4DE)
val surfaceContainerHighLightHighContrast = Color(0xFFD0D6D0)
val surfaceContainerHighestLightHighContrast = Color(0xFFC2C8C3)

val primaryDark = Color(0xFF8DD5B3)
val onPrimaryDark = Color(0xFF003826)
val primaryContainerDark = Color(0xFF005138)
val onPrimaryContainerDark = Color(0xFFA8F2CE)
val secondaryDark = Color(0xFFB3CCBE)
val onSecondaryDark = Color(0xFF1F352A)
val secondaryContainerDark = Color(0xFF354B40)
val onSecondaryContainerDark = Color(0xFFCFE9D9)
val tertiaryDark = Color(0xFFA5CCDF)
val onTertiaryDark = Color(0xFF073543)
val tertiaryContainerDark = Color(0xFF244C5B)
val onTertiaryContainerDark = Color(0xFFC1E8FB)
val errorDark = Color(0xFFFFB4AB)
val onErrorDark = Color(0xFF690005)
val errorContainerDark = Color(0xFF93000A)
val onErrorContainerDark = Color(0xFFFFDAD6)
val backgroundDark = Color(0xFF0F1512)
val onBackgroundDark = Color(0xFFDEE4DE)
val surfaceDark = Color(0xFF0F1512)
val onSurfaceDark = Color(0xFFDEE4DE)
val surfaceVariantDark = Color(0xFF404943)
val onSurfaceVariantDark = Color(0xFFBFC9C2)
val outlineDark = Color(0xFF8A938C)
val outlineVariantDark = Color(0xFF404943)
val scrimDark = Color(0xFF000000)
val inverseSurfaceDark = Color(0xFFDEE4DE)
val inverseOnSurfaceDark = Color(0xFF2C322E)
val inversePrimaryDark = Color(0xFF1F6A4E)
val surfaceDimDark = Color(0xFF0F1512)
val surfaceBrightDark = Color(0xFF353B37)
val surfaceContainerLowestDark = Color(0xFF0A0F0C)
val surfaceContainerLowDark = Color(0xFF171D1A)
val surfaceContainerDark = Color(0xFF1B211E)
val surfaceContainerHighDark = Color(0xFF252B28)
val surfaceContainerHighestDark = Color(0xFF303632)

val primaryDarkMediumContrast = Color(0xFFA2ECC8)
val onPrimaryDarkMediumContrast = Color(0xFF002C1D)
val primaryContainerDarkMediumContrast = Color(0xFF579E7F)
val onPrimaryContainerDarkMediumContrast = Color(0xFF000000)
val secondaryDarkMediumContrast = Color(0xFFC9E2D3)
val onSecondaryDarkMediumContrast = Color(0xFF142A20)
val secondaryContainerDarkMediumContrast = Color(0xFF7E9689)
val onSecondaryContainerDarkMediumContrast = Color(0xFF000000)
val tertiaryDarkMediumContrast = Color(0xFFBBE2F5)
val onTertiaryDarkMediumContrast = Color(0xFF002A37)
val tertiaryContainerDarkMediumContrast = Color(0xFF7096A7)
val onTertiaryContainerDarkMediumContrast = Color(0xFF000000)
val errorDarkMediumContrast = Color(0xFFFFD2CC)
val onErrorDarkMediumContrast = Color(0xFF540003)
val errorContainerDarkMediumContrast = Color(0xFFFF5449)
val onErrorContainerDarkMediumContrast = Color(0xFF000000)
val backgroundDarkMediumContrast = Color(0xFF0F1512)
val onBackgroundDarkMediumContrast = Color(0xFFDEE4DE)
val surfaceDarkMediumContrast = Color(0xFF0F1512)
val onSurfaceDarkMediumContrast = Color(0xFFFFFFFF)
val surfaceVariantDarkMediumContrast = Color(0xFF404943)
val onSurfaceVariantDarkMediumContrast = Color(0xFFD5DFD7)
val outlineDarkMediumContrast = Color(0xFFABB4AD)
val outlineVariantDarkMediumContrast = Color(0xFF89938C)
val scrimDarkMediumContrast = Color(0xFF000000)
val inverseSurfaceDarkMediumContrast = Color(0xFFDEE4DE)
val inverseOnSurfaceDarkMediumContrast = Color(0xFF252B28)
val inversePrimaryDarkMediumContrast = Color(0xFF005339)
val surfaceDimDarkMediumContrast = Color(0xFF0F1512)
val surfaceBrightDarkMediumContrast = Color(0xFF404642)
val surfaceContainerLowestDarkMediumContrast = Color(0xFF040806)
val surfaceContainerLowDarkMediumContrast = Color(0xFF191F1C)
val surfaceContainerDarkMediumContrast = Color(0xFF232926)
val surfaceContainerHighDarkMediumContrast = Color(0xFF2E3430)
val surfaceContainerHighestDarkMediumContrast = Color(0xFF393F3B)

val primaryDarkHighContrast = Color(0xFFB9FFDC)
val onPrimaryDarkHighContrast = Color(0xFF000000)
val primaryContainerDarkHighContrast = Color(0xFF89D1AF)
val onPrimaryContainerDarkHighContrast = Color(0xFF000E07)
val secondaryDarkHighContrast = Color(0xFFDCF6E6)
val onSecondaryDarkHighContrast = Color(0xFF000000)
val secondaryContainerDarkHighContrast = Color(0xFFB0C8BA)
val onSecondaryContainerDarkHighContrast = Color(0xFF000E07)
val tertiaryDarkHighContrast = Color(0xFFDDF3FF)
val onTertiaryDarkHighContrast = Color(0xFF000000)
val tertiaryContainerDarkHighContrast = Color(0xFFA1C8DB)
val onTertiaryContainerDarkHighContrast = Color(0xFF000D14)
val errorDarkHighContrast = Color(0xFFFFECE9)
val onErrorDarkHighContrast = Color(0xFF000000)
val errorContainerDarkHighContrast = Color(0xFFFFAEA4)
val onErrorContainerDarkHighContrast = Color(0xFF220001)
val backgroundDarkHighContrast = Color(0xFF0F1512)
val onBackgroundDarkHighContrast = Color(0xFFDEE4DE)
val surfaceDarkHighContrast = Color(0xFF0F1512)
val onSurfaceDarkHighContrast = Color(0xFFFFFFFF)
val surfaceVariantDarkHighContrast = Color(0xFF404943)
val onSurfaceVariantDarkHighContrast = Color(0xFFFFFFFF)
val outlineDarkHighContrast = Color(0xFFE9F2EB)
val outlineVariantDarkHighContrast = Color(0xFFBBC5BE)
val scrimDarkHighContrast = Color(0xFF000000)
val inverseSurfaceDarkHighContrast = Color(0xFFDEE4DE)
val inverseOnSurfaceDarkHighContrast = Color(0xFF000000)
val inversePrimaryDarkHighContrast = Color(0xFF005339)
val surfaceDimDarkHighContrast = Color(0xFF0F1512)
val surfaceBrightDarkHighContrast = Color(0xFF4B514D)
val surfaceContainerLowestDarkHighContrast = Color(0xFF000000)
val surfaceContainerLowDarkHighContrast = Color(0xFF1B211E)
val surfaceContainerDarkHighContrast = Color(0xFF2C322E)
val surfaceContainerHighDarkHighContrast = Color(0xFF373D39)
val surfaceContainerHighestDarkHighContrast = Color(0xFF424844)








4 changes: 4 additions & 0 deletions app/src/main/java/com/example/woof/ui/theme/Shape.kt
Original file line number Diff line number Diff line change
Expand Up @@ -21,4 +21,8 @@ import androidx.compose.ui.unit.dp

val Shapes = Shapes(
small = RoundedCornerShape(50.dp),
medium = RoundedCornerShape(
bottomStart = 16.dp,
topEnd = 16.dp
)
)
Loading