epic/18-details-photo-screen

app/build.gradle.kts

@@ -43,14 +43,17 @@ android {
 dependencies {
   implementation(projects.core.commonUi)
   implementation(projects.core.data)
+  implementation(projects.features.home.domain)
   implementation(projects.features.home.ui)
+  implementation(projects.features.detail.ui)
 
   implementation(libs.androidx.core.splashscreen)
   implementation(libs.androidx.core.ktx)
 
   implementation(libs.androidx.activity.compose)
 
   implementation(libs.androidx.compose.material3)
+  implementation(libs.androidx.navigation.compose)
 
   implementation(libs.coil.kt)
 

app/src/main/AndroidManifest.xml

@@ -15,6 +15,7 @@
         android:roundIcon="@mipmap/ic_launcher_round"
         android:supportsRtl="true"
         android:theme="@style/Theme.PurrfectPics.Splash"
+        android:windowSoftInputMode="adjustResize"
         tools:targetApi="31">
 
         <activity

app/src/main/kotlin/com/manuelnunez/apps/MainActivity.kt

@@ -3,11 +3,12 @@ package com.manuelnunez.apps
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
+import androidx.activity.enableEdgeToEdge
 import androidx.activity.viewModels
 import androidx.core.splashscreen.SplashScreen.Companion.installSplashScreen
-import com.manuelnunez.apps.core.ui.component.MainGradientBackground
+import androidx.navigation.compose.rememberNavController
 import com.manuelnunez.apps.core.ui.theme.MainTheme
-import com.manuelnunez.apps.features.home.ui.HomeView
+import com.manuelnunez.apps.navigation.MainNavigation
 import dagger.hilt.android.AndroidEntryPoint
 
 @AndroidEntryPoint
@@ -20,10 +21,11 @@ class MainActivity : ComponentActivity() {
 
     splashScreen.setKeepOnScreenCondition { viewModel.isLoading.value }
 
+    enableEdgeToEdge()
+
     setContent {
-      MainTheme(disableDynamicTheming = true) {
-        MainGradientBackground { HomeView(navigateToDetails = {}, navigateToSeeMore = {}) }
-      }
+      val navController = rememberNavController()
+      MainTheme { MainNavigation(navController = navController) }
     }
   }
 }

app/src/main/kotlin/com/manuelnunez/apps/navigation/MainNavigation.kt

@@ -0,0 +1,22 @@
+package com.manuelnunez.apps.navigation
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.navigation.NavHostController
+import androidx.navigation.compose.NavHost
+import com.manuelnunez.apps.feature.detail.ui.navigation.detailScreen
+import com.manuelnunez.apps.feature.detail.ui.navigation.navigateToDetail
+import com.manuelnunez.apps.features.home.ui.navigation.HOME_ROUTE
+import com.manuelnunez.apps.features.home.ui.navigation.homeScreen
+
+@Composable
+fun MainNavigation(
+    modifier: Modifier = Modifier,
+    navController: NavHostController,
+    startDestination: String = HOME_ROUTE,
+) {
+  NavHost(modifier = modifier, navController = navController, startDestination = startDestination) {
+    homeScreen(navigateToDetails = navController::navigateToDetail, navigateToSeeMore = {})
+    detailScreen(onBackClick = { navController.navigateUp() })
+  }
+}

app/src/main/res/values/splash.xml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources xmlns:tools="http://schemas.android.com/tools">
+
+    <style name="NightAdjusted.Theme.Splash" parent="Theme.SplashScreen">
+        <item name="android:windowLightStatusBar" tools:targetApi="23">true</item>
+        <item name="android:windowLightNavigationBar" tools:targetApi="27">true</item>
+    </style>
+
+    <style name="Theme.PurrfectPics.Splash" parent="NightAdjusted.Theme.Splash">
+        <item name="windowSplashScreenAnimatedIcon">@drawable/ic_splash</item>
+        <item name="postSplashScreenTheme">@style/Theme.PurrfectPics</item>
+    </style>
+</resources>

app/src/main/res/values/themes.xml

@@ -1,16 +1,6 @@
-<resources xmlns:tools="http://schemas.android.com/tools">
+<resources>
     <!-- Base application theme. -->
     <style name="NightAdjusted.Theme.PurrfectPics" parent="android:Theme.Material.Light.NoActionBar" />
 
     <style name="Theme.PurrfectPics" parent="NightAdjusted.Theme.PurrfectPics" />
-
-    <style name="NightAdjusted.Theme.Splash" parent="Theme.SplashScreen">
-        <item name="android:windowLightStatusBar" tools:targetApi="23">true</item>
-        <item name="android:windowLightNavigationBar" tools:targetApi="27">true</item>
-    </style>
-
-    <style name="Theme.PurrfectPics.Splash" parent="NightAdjusted.Theme.Splash">
-        <item name="windowSplashScreenAnimatedIcon">@drawable/ic_splash</item>
-        <item name="postSplashScreenTheme">@style/Theme.PurrfectPics</item>
-    </style>
 </resources>

core/common-ui/build.gradle.kts

@@ -29,6 +29,8 @@ dependencies {
 
   implementation(libs.coil.kt.compose)
 
+  implementation(libs.androidx.navigation.compose)
+
   // Compose
   val composeBom = platform(libs.androidx.compose.bom)
   implementation(composeBom)

core/common-ui/src/main/kotlin/com/manuelnunez/apps/core/ui/Navigation.kt

@@ -0,0 +1,18 @@
+package com.manuelnunez.apps.core.ui
+
+import android.os.Bundle
+import androidx.navigation.NavController
+import androidx.navigation.NavOptions
+import androidx.navigation.Navigator
+
+fun NavController.navigate(
+    route: String,
+    args: Bundle,
+    navOptions: NavOptions? = null,
+    navigatorExtras: Navigator.Extras? = null
+) {
+  val nodeId = graph.findNode(route = route)?.id
+  if (nodeId != null) {
+    navigate(nodeId, args, navOptions, navigatorExtras)
+  }
+}

core/common-ui/src/main/kotlin/com/manuelnunez/apps/core/ui/component/AdaptableVerticalGrid.kt

@@ -0,0 +1,30 @@
+package com.manuelnunez.apps.core.ui.component
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalConfiguration
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import kotlin.math.roundToInt
+
+@Composable
+fun AdaptableVerticalGrid(
+    modifier: Modifier = Modifier,
+    decoration: AdaptableVerticalGridDecoration,
+    content: @Composable () -> Unit
+) {
+  val config = LocalConfiguration.current
+
+  val screenWidth =
+      config.screenWidthDp.dp - (decoration.gridPadding - decoration.itemHorizontalMargin) * 2
+  val columns =
+      (screenWidth / (decoration.itemWidth + decoration.itemHorizontalMargin * 2)).roundToInt()
+
+  VerticalGrid(modifier, columns, content)
+}
+
+data class AdaptableVerticalGridDecoration(
+    val gridPadding: Dp,
+    val itemWidth: Dp,
+    val itemHorizontalMargin: Dp,
+)

core/common-ui/src/main/kotlin/com/manuelnunez/apps/core/ui/component/Background.kt

@@ -1,6 +1,5 @@
 package com.manuelnunez.apps.core.ui.component
 
-import android.content.res.Configuration
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.size
@@ -15,13 +14,13 @@ import androidx.compose.ui.draw.drawWithCache
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import com.manuelnunez.apps.core.ui.theme.GradientColors
 import com.manuelnunez.apps.core.ui.theme.LocalBackgroundTheme
 import com.manuelnunez.apps.core.ui.theme.LocalGradientColors
 import com.manuelnunez.apps.core.ui.theme.MainTheme
+import com.manuelnunez.apps.core.ui.utils.ThemePreviews
 import kotlin.math.tan
 
 /**
@@ -124,37 +123,29 @@ fun MainGradientBackground(
   }
 }
 
-/**
- * Multipreview annotation that represents light and dark themes. Add this annotation to a
- * composable to render the both themes.
- */
-@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO, name = "Light theme")
-@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES, name = "Dark theme")
-annotation class ThemePreviews
-
 @ThemePreviews
 @Composable
-fun BackgroundDefault() {
+fun BackgroundDefaultPreview() {
   MainTheme(disableDynamicTheming = true) { MainBackground(Modifier.size(100.dp), content = {}) }
 }
 
 @ThemePreviews
 @Composable
-fun BackgroundDynamic() {
+fun BackgroundDynamicPreview() {
   MainTheme(disableDynamicTheming = false) { MainBackground(Modifier.size(100.dp), content = {}) }
 }
 
 @ThemePreviews
 @Composable
-fun GradientBackgroundDefault() {
+fun GradientBackgroundDefaultPreview() {
   MainTheme(disableDynamicTheming = true) {
     MainGradientBackground(Modifier.size(100.dp), content = {})
   }
 }
 
 @ThemePreviews
 @Composable
-fun GradientBackgroundDynamic() {
+fun GradientBackgroundDynamicPreview() {
   MainTheme(disableDynamicTheming = false) {
     MainGradientBackground(Modifier.size(100.dp), content = {})
   }

core/common-ui/src/main/kotlin/com/manuelnunez/apps/core/ui/component/DynamicAsyncImage.kt

@@ -26,8 +26,8 @@ import com.manuelnunez.apps.core.ui.R
 /** A wrapper around [AsyncImage] which determines the colorFilter based on the theme */
 @Composable
 fun DynamicAsyncImage(
-    imageUrl: String,
     modifier: Modifier = Modifier,
+    imageUrl: String,
     contentDescription: String,
     placeholder: Painter = painterResource(R.drawable.ic_broken_image),
     contentScale: ContentScale = ContentScale.Crop
@@ -42,6 +42,7 @@ fun DynamicAsyncImage(
             isError = state is Error
           })
   val isLocalInspection = LocalInspectionMode.current
+
   Box(
       modifier = modifier,
       contentAlignment = Alignment.Center,
@@ -53,6 +54,7 @@ fun DynamicAsyncImage(
           color = MaterialTheme.colorScheme.tertiary,
       )
     }
+
     Image(
         modifier = modifier,
         painter = if (isError.not() && !isLocalInspection) imageLoader else placeholder,

core/common-ui/src/main/kotlin/com/manuelnunez/apps/core/ui/component/ImageCard.kt

@@ -0,0 +1,48 @@
+package com.manuelnunez.apps.core.ui.component
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.CardElevation
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.semantics.contentDescription
+import androidx.compose.ui.semantics.semantics
+import com.manuelnunez.apps.core.ui.theme.MainTheme
+import com.manuelnunez.apps.core.ui.utils.ThemePreviews
+
+@Composable
+fun ImageCard(
+    modifier: Modifier = Modifier,
+    imageUrl: String,
+    cardContentDescription: String,
+    elevation: CardElevation = CardDefaults.cardElevation(),
+    contentScale: ContentScale = ContentScale.Crop,
+    onClick: (() -> Unit)? = null,
+) {
+  Card(
+      modifier =
+          modifier.clickable(onClick = { onClick?.invoke() }).semantics {
+            contentDescription = cardContentDescription
+          },
+      elevation = elevation) {
+        DynamicAsyncImage(
+            modifier = Modifier.fillMaxSize(),
+            imageUrl = imageUrl,
+            contentDescription = "",
+            contentScale = contentScale)
+      }
+}
+
+@ThemePreviews
+@Composable
+fun ImageCardPreview() {
+  MainTheme {
+    ImageCard(
+        onClick = {},
+        cardContentDescription = "",
+        imageUrl = "https://picsum.photos/id/237/200/300")
+  }
+}

core/common-ui/src/main/kotlin/com/manuelnunez/apps/core/ui/component/TextCard.kt

@@ -0,0 +1,37 @@
+package com.manuelnunez.apps.core.ui.component
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.semantics.contentDescription
+import androidx.compose.ui.semantics.semantics
+import com.manuelnunez.apps.core.ui.theme.MainTheme
+import com.manuelnunez.apps.core.ui.utils.ThemePreviews
+
+@Composable
+fun TextCard(modifier: Modifier = Modifier, text: String, onClick: () -> Unit) {
+  Card(
+      colors =
+          CardDefaults.cardColors().copy(containerColor = MaterialTheme.colorScheme.onBackground),
+      modifier =
+          modifier.clickable(onClick = { onClick.invoke() }).semantics {
+            contentDescription = text
+          }) {
+        Box(contentAlignment = Alignment.Center, modifier = Modifier.fillMaxSize()) {
+          Text(text = text, color = MaterialTheme.colorScheme.background)
+        }
+      }
+}
+
+@ThemePreviews
+@Composable
+fun TextCardPreview() {
+  MainTheme { TextCard(onClick = {}, text = "See more") }
+}

core/common-ui/src/main/kotlin/com/manuelnunez/apps/core/ui/component/TitleText.kt

@@ -0,0 +1,23 @@
+package com.manuelnunez.apps.core.ui.component
+
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import com.manuelnunez.apps.core.ui.theme.MainTheme
+import com.manuelnunez.apps.core.ui.utils.ThemePreviews
+
+@Composable
+fun TitleText(modifier: Modifier = Modifier, title: String) {
+  Text(
+      modifier = modifier,
+      text = title,
+      color = MaterialTheme.colorScheme.onSurface,
+      style = MaterialTheme.typography.titleLarge)
+}
+
+@ThemePreviews
+@Composable
+fun TitleTextPreview() {
+  MainTheme { TitleText(title = "See more") }
+}