added async images

app/build.gradle

@@ -53,4 +53,5 @@ dependencies {
     implementation "androidx.compose.material:material:$composeLibraryVersion"
     implementation "androidx.activity:activity-compose:1.5.1"
     implementation "com.google.accompanist:accompanist-pager:0.25.1"
+    implementation "io.coil-kt:coil-compose:2.2.1"
 }

app/src/main/AndroidManifest.xml

@@ -3,6 +3,8 @@
     xmlns:tools="http://schemas.android.com/tools"
     package="com.sirekanian.spacetime">
 
+    <uses-permission android:name="android.permission.INTERNET" />
+
     <application
         android:allowBackup="false"
         android:dataExtractionRules="@xml/data_extraction_rules"

app/src/main/java/com/sirekanian/spacetime/MainActivity.kt

@@ -3,8 +3,10 @@ package com.sirekanian.spacetime
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.asPaddingValues
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.systemBarsPadding
+import androidx.compose.foundation.layout.systemBars
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Surface
 import androidx.compose.runtime.remember
@@ -25,18 +27,16 @@ class MainActivity : ComponentActivity() {
         setContent {
             val state = remember { MainState() }
             val pages = state.getPages()
+            val insets = WindowInsets.systemBars.asPaddingValues()
             SpacetimeTheme {
                 Surface(
                     modifier = Modifier.fillMaxSize(),
                     color = MaterialTheme.colors.background,
                 ) {
-                    HorizontalPager(
-                        count = pages.size,
-                        modifier = Modifier.systemBarsPadding(),
-                    ) { index ->
+                    HorizontalPager(pages.size) { index ->
                         when (val page = pages[index]) {
-                            is ImagePage -> ImagePageContent(state, page, index)
-                            GalleryPage -> GalleryPageContent(state)
+                            is ImagePage -> ImagePageContent(insets, state, page, index)
+                            GalleryPage -> GalleryPageContent(insets, state)
                         }
                     }
                 }

app/src/main/java/com/sirekanian/spacetime/MainState.kt

@@ -3,14 +3,12 @@ package com.sirekanian.spacetime
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.setValue
+import com.sirekanian.spacetime.data.URLS
 
 class MainState {
 
     private var list by mutableStateOf(
-        listOf(
-            ImagePage("default1"),
-            ImagePage("default2"),
-        )
+        URLS.take(2).map(::ImagePage)
     )
 
     fun getPages(): List<Page> =

app/src/main/java/com/sirekanian/spacetime/data/Urls.kt

@@ -0,0 +1,36 @@
+package com.sirekanian.spacetime.data
+
+private const val BASE_URL = "https://apod.nasa.gov/apod/image"
+
+val URLS = listOf(
+    "$BASE_URL/2209/SnakingFilament_Friedman_960.jpg",
+    "$BASE_URL/2209/sprites_scerba_960.jpg",
+    "$BASE_URL/2209/Traful-Lake1024.jpg",
+    "$BASE_URL/2209/voyager_modern_poster_crop.jpg",
+    "$BASE_URL/2209/NGC7000_NB_2022_1024.jpg",
+    "$BASE_URL/2209/TarantulaNearIr_Webb_960.jpg",
+    "$BASE_URL/2209/Pileus_Jiaqi_960.jpg",
+    "$BASE_URL/2209/CarinaCliffs_Webb_1080.jpg",
+    "$BASE_URL/2209/MilkyWayOregon_Montoya_960.jpg",
+    "$BASE_URL/2209/Interval29seconds_Transit1200.jpg",
+    "$BASE_URL/2209/m51_l2_1024.jpg",
+    "$BASE_URL/2209/TulipCygX-1_1024.jpg",
+    "$BASE_URL/2208/SiccarPoint_CuriosityGill_1080.jpg",
+    "$BASE_URL/2208/Jupiter2_WebbSchmidt_1080_annotated.jpg",
+    "$BASE_URL/2208/Horsehead_Chatzifrantzis_1080.jpg",
+    "$BASE_URL/2208/IC5146JenkinsAB3_1100.jpg",
+    "$BASE_URL/2208/Chokshi_DSC7584_Panorama_c1024.jpg",
+    "$BASE_URL/2208/Tiangong_transiting_moon_Lucy_Hu_c1024.jpg",
+    "$BASE_URL/2208/Cartwheel_Webb_960.jpg",
+    "$BASE_URL/2208/MeteorGalaxy_Looten_1000.jpg",
+    "$BASE_URL/2208/Crab_HubbleChandraSpitzer_1080.jpg",
+    "$BASE_URL/2208/C2017K2_220818_1050.jpg",
+    "$BASE_URL/2208/Saturn1993-2022Lb1024.jpg",
+    "$BASE_URL/2208/perseids2022jcc2k800.jpg",
+    "$BASE_URL/2208/StargateMilkyWay_Oudoux_960.jpg",
+    "$BASE_URL/2208/MeteorWind_Larnaout_960.jpg",
+    "$BASE_URL/2208/CygnusWall_Bogaerts_960.jpg",
+    "$BASE_URL/2208/PIA12572_1200.jpg",
+    "$BASE_URL/2208/M16_final_1024.jpg",
+    "$BASE_URL/2208/MagicPerseid001_1024.jpg",
+)

app/src/main/java/com/sirekanian/spacetime/ui/GalleryPageContent.kt

@@ -1,34 +1,36 @@
 package com.sirekanian.spacetime.ui
 
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.lazy.grid.GridCells
 import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
-import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.unit.dp
+import coil.compose.AsyncImage
 import com.sirekanian.spacetime.MainState
+import com.sirekanian.spacetime.data.URLS
 
 @Composable
-fun GalleryPageContent(state: MainState) {
+fun GalleryPageContent(insets: PaddingValues, state: MainState) {
     LazyVerticalGrid(
         columns = GridCells.Adaptive(100.dp),
         modifier = Modifier.fillMaxSize(),
+        contentPadding = insets,
     ) {
-        items(100) {
-            val name = "item${it + 1}"
-            Box(
+        items(URLS.size) { index ->
+            val url = URLS[index]
+            AsyncImage(
+                model = url,
+                contentDescription = null,
                 modifier = Modifier
                     .aspectRatio(1f)
-                    .clickable { state.addPage(name) },
-                contentAlignment = Alignment.Center,
-            ) {
-                Text(text = name)
-            }
+                    .clickable { state.addPage(url) },
+                contentScale = ContentScale.Crop,
+            )
         }
     }
 }

app/src/main/java/com/sirekanian/spacetime/ui/ImagePageContent.kt

@@ -1,28 +1,32 @@
 package com.sirekanian.spacetime.ui
 
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material.Button
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.unit.dp
+import coil.compose.AsyncImage
 import com.sirekanian.spacetime.ImagePage
 import com.sirekanian.spacetime.MainState
 
 @Composable
-fun ImagePageContent(state: MainState, page: ImagePage, index: Int) {
-    Column(
+fun ImagePageContent(insets: PaddingValues, state: MainState, page: ImagePage, index: Int) {
+    AsyncImage(
+        model = page.name,
+        contentDescription = null,
+        modifier = Modifier.fillMaxSize(),
+        contentScale = ContentScale.Crop,
+    )
+    Button(
+        onClick = { state.removePage(index) },
         modifier = Modifier
-            .fillMaxSize()
+            .padding(insets)
             .padding(16.dp),
-        verticalArrangement = Arrangement.spacedBy(16.dp),
     ) {
-        Text(text = page.name)
-        Button(onClick = { state.removePage(index) }) {
-            Text("Delete")
-        }
+        Text("Delete")
     }
 }

app/src/main/res/values-notnight/colors.xml

@@ -1,6 +1,6 @@
 <resources>
     <color name="appWindowBackground">#fcfcfc</color>
-    <color name="appStatusBarColor">#00000000</color>
+    <color name="appStatusBarColor">#E6FFFFFF</color>
     <color name="appNavigationBarColor">#E6FFFFFF</color>
     <bool name="appWindowLightStatusBar">true</bool>
     <bool name="appWindowLightNavigationBar">true</bool>

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

@@ -1,6 +1,6 @@
 <resources>
     <color name="appWindowBackground">#201a19</color>
-    <color name="appStatusBarColor">#00000000</color>
+    <color name="appStatusBarColor">#66000000</color>
     <color name="appNavigationBarColor">#66000000</color>
     <bool name="appWindowLightStatusBar">false</bool>
     <bool name="appWindowLightNavigationBar">false</bool>