Compose paging

app/build.gradle

@@ -5,12 +5,12 @@ plugins {
 
 android {
     namespace 'com.lahsuak.apps.jetpackcomposebasic'
-    compileSdk 33
+    compileSdk 34
 
     defaultConfig {
         applicationId "com.lahsuak.apps.jetpackcomposebasic"
         minSdk 23
-        targetSdk 33
+        targetSdk 34
         versionCode 1
         versionName "1.0"
 
@@ -27,17 +27,17 @@ android {
         }
     }
     compileOptions {
-        sourceCompatibility JavaVersion.VERSION_1_8
-        targetCompatibility JavaVersion.VERSION_1_8
+        sourceCompatibility JavaVersion.VERSION_17
+        targetCompatibility JavaVersion.VERSION_17
     }
     kotlinOptions {
-        jvmTarget = '1.8'
+        jvmTarget = '17'
     }
     buildFeatures {
         compose true
     }
     composeOptions {
-        kotlinCompilerExtensionVersion '1.1.1'
+        kotlinCompilerExtensionVersion '1.4.3'
     }
     packagingOptions {
         resources {
@@ -48,16 +48,30 @@ android {
 
 dependencies {
 
-    implementation 'androidx.core:core-ktx:1.9.0'
-    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.5.1'
-    implementation 'androidx.activity:activity-compose:1.6.1'
+    implementation 'androidx.core:core-ktx:1.10.1'
+    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.6.1'
+    implementation 'androidx.activity:activity-compose:1.7.2'
     implementation "androidx.compose.ui:ui:$compose_version"
     implementation "androidx.compose.ui:ui-tooling-preview:$compose_version"
-    implementation 'androidx.compose.material3:material3:1.1.0-alpha03'
+    implementation 'androidx.compose.material3:material3:1.2.0-alpha03'
+    implementation 'androidx.paging:paging-common-ktx:3.2.0'
     testImplementation 'junit:junit:4.13.2'
-    androidTestImplementation 'androidx.test.ext:junit:1.1.4'
-    androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.0'
+    androidTestImplementation 'androidx.test.ext:junit:1.1.5'
+    androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.1'
     androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version"
     debugImplementation "androidx.compose.ui:ui-tooling:$compose_version"
     debugImplementation "androidx.compose.ui:ui-test-manifest:$compose_version"
+
+    implementation "androidx.paging:paging-compose:3.2.0"
+
+    implementation 'com.jsibbold:zoomage:1.3.1'
+
+    implementation "androidx.navigation:navigation-compose:2.6.0"
+    implementation "androidx.lifecycle:lifecycle-viewmodel-compose:2.6.1"
+    //retrofit
+    implementation 'com.squareup.retrofit2:retrofit:2.9.0'
+    implementation "com.squareup.retrofit2:converter-gson:2.9.0"
+    //coil
+    implementation("io.coil-kt:coil-compose:2.2.2")
+    implementation "com.google.accompanist:accompanist-systemuicontroller:0.28.0"
 }

app/src/main/AndroidManifest.xml

@@ -2,6 +2,9 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools">
 
+    <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.SET_WALLPAPER" />
+
     <application
         android:allowBackup="true"
         android:dataExtractionRules="@xml/data_extraction_rules"

app/src/main/java/com/lahsuak/apps/jetpackcomposebasic/MainActivity.kt

@@ -1,18 +1,24 @@
 package com.lahsuak.apps.jetpackcomposebasic
 
 import android.os.Bundle
+import android.util.Log
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.compose.foundation.layout.fillMaxSize
 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.tooling.preview.Preview
+import androidx.navigation.compose.rememberNavController
+import com.lahsuak.apps.jetpackcomposebasic.ui.navhost.AppNavHost
+import com.lahsuak.apps.jetpackcomposebasic.ui.screen.HomeScreen
 import com.lahsuak.apps.jetpackcomposebasic.ui.theme.JetPackComposeBasicTheme
+import com.lahsuak.apps.jetpackcomposebasic.ui.viewmodel.MainViewModel
 
 class MainActivity : ComponentActivity() {
+
+    private val viewModel = MainViewModel()
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         setContent {
@@ -22,29 +28,9 @@ class MainActivity : ComponentActivity() {
                     modifier = Modifier.fillMaxSize(),
                     color = MaterialTheme.colorScheme.background
                 ) {
-                    Greeting("Android")
+                    AppNavHost(navController = rememberNavController(), viewModel = viewModel)
                 }
             }
         }
     }
-}
-/***
-Composable functions :
-A composable function is a regular function annotated with @Composable.
-This enables your function to call other @Composable functions within it.
-You can see how the Greeting function is marked as @Composable.
-This function will produce a piece of UI hierarchy displaying the given input,
-String. Text is a composable function provided by the library.
-***/
-@Composable
-fun Greeting(name: String) {
-    Text(text = "Hello $name!")
-}
-
-@Preview(showBackground = true)
-@Composable
-fun DefaultPreview() {
-    JetPackComposeBasicTheme {
-        Greeting("Android")
-    }
 }

app/src/main/java/com/lahsuak/apps/jetpackcomposebasic/model/ImageModel.kt

@@ -0,0 +1,8 @@
+package com.lahsuak.apps.jetpackcomposebasic.model
+
+import com.google.gson.annotations.SerializedName
+
+data class ImageModel(
+    @SerializedName("urls")
+    val urls: UrlModel,
+)

app/src/main/java/com/lahsuak/apps/jetpackcomposebasic/model/SearchModel.kt

@@ -0,0 +1,3 @@
+package com.lahsuak.apps.jetpackcomposebasic.model
+
+data class SearchModel(val results: List<ImageModel>)

app/src/main/java/com/lahsuak/apps/jetpackcomposebasic/model/UrlModel.kt

@@ -0,0 +1,3 @@
+package com.lahsuak.apps.jetpackcomposebasic.model
+
+data class UrlModel(val regular: String)

app/src/main/java/com/lahsuak/apps/jetpackcomposebasic/network/ApiInstance.kt

@@ -0,0 +1,16 @@
+package com.lahsuak.apps.jetpackcomposebasic.network
+
+import com.lahsuak.apps.jetpackcomposebasic.util.AppConstants.BASE_URL
+import retrofit2.Retrofit
+import retrofit2.converter.gson.GsonConverterFactory
+
+class ApiInstance {
+    companion object {
+        fun getRetroInstance(): ApiService {
+            return Retrofit.Builder()
+                .baseUrl(BASE_URL)
+                .addConverterFactory(GsonConverterFactory.create())
+                .build().create(ApiService::class.java)
+        }
+    }
+}

app/src/main/java/com/lahsuak/apps/jetpackcomposebasic/network/ApiService.kt

@@ -0,0 +1,31 @@
+package com.lahsuak.apps.jetpackcomposebasic.network
+
+import com.lahsuak.apps.jetpackcomposebasic.util.AppConstants.API_KEY
+import com.lahsuak.apps.jetpackcomposebasic.model.ImageModel
+import com.lahsuak.apps.jetpackcomposebasic.model.SearchModel
+import retrofit2.Response
+import retrofit2.http.GET
+import retrofit2.http.Headers
+import retrofit2.http.Query
+
+interface ApiService {
+
+    @Headers(
+        "Accept: application/json",
+        "Authorization: Client-ID $API_KEY"
+    )
+    @GET("/photos")
+    suspend fun getImages(
+        @Query("page") page: Int,
+        @Query("per_page") perPage: Int
+    ): Response<List<ImageModel>>
+
+    @Headers("Authorization: Client-ID $API_KEY")
+    @GET("/search/photos")
+    suspend fun getSearchImages(
+        @Query("query") query: String,
+        @Query("page") page: Int,
+        @Query("per_page") perPage: Int
+    ): List<SearchModel>
+
+}

app/src/main/java/com/lahsuak/apps/jetpackcomposebasic/ui/navhost/AppNavHost.kt

@@ -0,0 +1,41 @@
+package com.lahsuak.apps.jetpackcomposebasic.ui.navhost
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.navigation.NavHostController
+import androidx.navigation.NavType
+import androidx.navigation.compose.NavHost
+import androidx.navigation.compose.composable
+import androidx.navigation.navArgument
+import com.lahsuak.apps.jetpackcomposebasic.ui.navigation.NavigationItem
+import com.lahsuak.apps.jetpackcomposebasic.ui.screen.HomeScreen
+import com.lahsuak.apps.jetpackcomposebasic.ui.screen.ViewScreen
+import com.lahsuak.apps.jetpackcomposebasic.ui.viewmodel.MainViewModel
+
+@Composable
+fun AppNavHost(
+    modifier: Modifier = Modifier,
+    navController: NavHostController,
+    viewModel: MainViewModel,
+    startDestination: String = NavigationItem.Home.route,
+) {
+    NavHost(
+        modifier = modifier,
+        navController = navController,
+        startDestination = startDestination
+    ) {
+        composable(NavigationItem.Home.route) {
+            HomeScreen(viewModel, navController)
+        }
+        composable("${NavigationItem.ViewWallpaper.route}/{url}",
+            arguments = listOf(navArgument("url") {
+                type = NavType.StringType
+            })
+        ) { navBackStackEntry ->
+            val url = navBackStackEntry.arguments?.getString("url")
+            url?.let {
+                ViewScreen(it, navController)
+            }
+        }
+    }
+}

app/src/main/java/com/lahsuak/apps/jetpackcomposebasic/ui/navigation/NavigationItem.kt

@@ -0,0 +1,11 @@
+package com.lahsuak.apps.jetpackcomposebasic.ui.navigation
+
+enum class Screen {
+    HOME,
+    VIEW_WALLPAPER
+}
+
+sealed class NavigationItem(val route: String) {
+    object Home : NavigationItem(Screen.HOME.name)
+    object ViewWallpaper : NavigationItem(Screen.VIEW_WALLPAPER.name)
+}

app/src/main/java/com/lahsuak/apps/jetpackcomposebasic/ui/screen/HomeScreen.kt

@@ -0,0 +1,113 @@
+package com.lahsuak.apps.jetpackcomposebasic.ui.screen
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+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.layout.wrapContentHeight
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.grid.GridCells
+import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
+import androidx.compose.foundation.lazy.grid.items
+import androidx.paging.compose.LazyPagingItems
+import androidx.paging.compose.collectAsLazyPagingItems
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Search
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.SearchBar
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.saveable.rememberSaveable
+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.layout.ContentScale
+import androidx.compose.ui.unit.dp
+import androidx.navigation.NavController
+import androidx.paging.LoadState
+import coil.compose.AsyncImage
+import com.lahsuak.apps.jetpackcomposebasic.ui.navigation.NavigationItem
+import com.lahsuak.apps.jetpackcomposebasic.ui.viewmodel.MainViewModel
+import java.net.URLEncoder
+import java.nio.charset.StandardCharsets
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun HomeScreen(viewModel: MainViewModel, navController: NavController) {
+    var query by rememberSaveable {
+        mutableStateOf("")
+    }
+    val data = viewModel.dataFlow.collectAsLazyPagingItems()
+
+    Column(modifier = Modifier.fillMaxSize()) {
+        SearchBar(
+            query = query,
+            onQueryChange = {
+                query = it
+            },
+            onSearch = {},
+            active = false,
+            onActiveChange = {
+
+            },
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(16.dp),
+            placeholder = {
+                Text("Search wallpaper", color = Color.Gray)
+            }, leadingIcon = {
+                Icon(imageVector = Icons.Default.Search, contentDescription = "Search")
+            }
+        ) {}
+
+        LazyVerticalGrid(columns = GridCells.Fixed(3)) {
+            if (data.loadState.refresh == LoadState.Loading) {
+                item {
+                    Column(
+                        modifier = Modifier.fillMaxSize(),
+                        verticalArrangement = Arrangement.Center,
+                        horizontalAlignment = Alignment.CenterHorizontally
+                    ) {
+                        CircularProgressIndicator()
+                    }
+                }
+            }
+
+            items(data.itemSnapshotList.items) { item ->
+                AsyncImage(
+                    model = item.urls.regular,
+                    contentDescription = null,
+                    contentScale = ContentScale.Crop,
+                    modifier = Modifier
+                        .size(120.dp)
+                        .clickable {
+                            val encodedUrl =
+                                URLEncoder.encode(
+                                    item.urls.regular,
+                                    StandardCharsets.UTF_8.toString()
+                                )
+
+                            navController.navigate("${NavigationItem.ViewWallpaper.route}/$encodedUrl")
+                        }
+                )
+            }
+            if (data.loadState.append == LoadState.Loading) {
+                item {
+                    CircularProgressIndicator(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .wrapContentHeight()
+                    )
+                }
+            }
+        }
+    }
+}

app/src/main/java/com/lahsuak/apps/jetpackcomposebasic/ui/screen/ImageItem.kt

@@ -0,0 +1,15 @@
+package com.lahsuak.apps.jetpackcomposebasic.ui.screen
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.layout.ContentScale
+import coil.compose.AsyncImage
+import com.lahsuak.apps.jetpackcomposebasic.model.ImageModel
+
+@Composable
+fun ImageItem(item: ImageModel) {
+    AsyncImage(
+        model = item.urls.regular,
+        contentDescription = null,
+        contentScale = ContentScale.Crop
+    )
+}