Merge pull request #232 from myofficework000/horizontal_pager

added swipeable image carousel using horizontal pager

app/src/main/java/com/example/jetpack_compose_all_in_one/demos/horizontal_pager/ImageData.kt

@@ -0,0 +1,3 @@
+package com.example.jetpack_compose_all_in_one.demos.horizontal_pager
+
+data class ImageData(val imageRes: Int, val description: String)

app/src/main/java/com/example/jetpack_compose_all_in_one/demos/horizontal_pager/IntroductionScreen.kt

@@ -0,0 +1,117 @@
+package com.example.jetpack_compose_all_in_one.demos.horizontal_pager
+
+import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+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.pager.HorizontalPager
+import androidx.compose.foundation.pager.PagerState
+import androidx.compose.foundation.pager.rememberPagerState
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Circle
+import androidx.compose.material3.Button
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.example.jetpack_compose_all_in_one.R
+import kotlinx.coroutines.launch
+
+
+@OptIn(ExperimentalFoundationApi::class)
+@Composable
+fun IntroductionScreen() {
+    val images = listOf(
+        ImageData(R.drawable.landscape3, "Image 1"),
+        ImageData(R.drawable.landscape4, "Image 2"),
+        ImageData(R.drawable.landscape5, "Image 3"),
+        ImageData(R.drawable.landscape6, "Image 4"),
+    )
+    val pagerState = rememberPagerState(
+        pageCount = { images.size },
+        initialPage = 0
+    )
+    val coroutineScope = rememberCoroutineScope()
+
+    Column(
+        modifier = Modifier.fillMaxSize()
+    ) {
+        HorizontalPager(
+            state = pagerState,
+            modifier = Modifier.weight(1f)
+        ) { page ->
+            Image(
+                painter = painterResource(id = images[page].imageRes), 
+                contentDescription = null
+            )
+            Text(
+                text = images[page].description,
+                fontWeight = FontWeight.Bold,
+                fontSize = 24.sp,
+                modifier = Modifier.padding(16.dp)
+            )
+        }
+        DotsIndicator(pagerState = pagerState, totalDots = images.size)
+
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(16.dp),
+            horizontalArrangement = Arrangement.SpaceBetween
+        ) {
+            TextButton(onClick = { /*TODO*/ }) {
+                Text(text = "Skip")
+            }
+            Button(
+                onClick = {
+                    coroutineScope.launch {
+                        val nextPage = (pagerState.currentPage + 1) % images.size
+                        pagerState.animateScrollToPage(nextPage)
+                    }
+                }
+            ) {
+                Text(text = "Next")
+            }
+        }
+    }
+
+}
+
+@OptIn(ExperimentalFoundationApi::class)
+@Composable
+fun DotsIndicator(pagerState: PagerState, totalDots: Int) {
+    Box(
+        contentAlignment = Alignment.Center,
+        modifier = Modifier.fillMaxWidth()
+    ) {
+        Row(
+            modifier = Modifier.padding(16.dp)
+        ) {
+            for (i in 0 until totalDots) {
+                Icon(
+                    imageVector = Icons.Default.Circle,
+                    contentDescription = "Page indicator",
+                    modifier = Modifier
+                        .size(12.dp)
+                        .padding(horizontal = 4.dp),
+                    tint = if (pagerState.currentPage == i) MaterialTheme.colorScheme.primary else Color.Gray
+                )
+            }
+        }
+    }
+}

app/src/main/java/com/example/jetpack_compose_all_in_one/ui/components/MainContainerOfApp.kt

@@ -38,6 +38,7 @@ import com.example.jetpack_compose_all_in_one.demos.currency_converter.presentat
 import com.example.jetpack_compose_all_in_one.demos.firestore_notes.NoteScreen
 import com.example.jetpack_compose_all_in_one.demos.github_api.presentation.view.GithubUserListScreen
 import com.example.jetpack_compose_all_in_one.demos.history_of_day.HistoryOfTheDayUI
+import com.example.jetpack_compose_all_in_one.demos.horizontal_pager.IntroductionScreen
 import com.example.jetpack_compose_all_in_one.demos.news_app.view.NewsScreen
 import com.example.jetpack_compose_all_in_one.demos.polls.PollScreen
 import com.example.jetpack_compose_all_in_one.demos.quiz.QuizScreen
@@ -323,6 +324,9 @@ fun MainContainerOfApp(
                 composable(NavDes.firestoreNotes.route()) {
                     NoteScreen()
                 }
+                composable(NavDes.horizontalPager.route()) {
+                    IntroductionScreen()
+                }
                 composable(NavDes.ChatDemoUI.route()) {
                     val vm = hiltViewModel<ChatViewModel>()
                     DemoFullChat2(

app/src/main/java/com/example/jetpack_compose_all_in_one/utils/navigation/NavConstants.kt

@@ -32,6 +32,9 @@ object NavConstants {
     const val FIRESTORE_NOTES = "firestore_notes"
     const val FIRESTORE_NOTES_ABOUT = "Firestore Notes"
 
+    const val HORIZONTAL_PAGER = "horizontal_pager"
+    const val HORIZONTAL_PAGER_ABOUT = "Horizontal Pager"
+
     const val TMDB = "tmdb"
     const val TMDB_ABOUT = "TMDB API"
 

app/src/main/java/com/example/jetpack_compose_all_in_one/utils/navigation/NavDes.kt

@@ -57,6 +57,8 @@ import com.example.jetpack_compose_all_in_one.utils.navigation.NavConstants.Gith
 import com.example.jetpack_compose_all_in_one.utils.navigation.NavConstants.GithubUserListUI_About
 import com.example.jetpack_compose_all_in_one.utils.navigation.NavConstants.HOME
 import com.example.jetpack_compose_all_in_one.utils.navigation.NavConstants.HOME_ABOUT
+import com.example.jetpack_compose_all_in_one.utils.navigation.NavConstants.HORIZONTAL_PAGER
+import com.example.jetpack_compose_all_in_one.utils.navigation.NavConstants.HORIZONTAL_PAGER_ABOUT
 import com.example.jetpack_compose_all_in_one.utils.navigation.NavConstants.HistoryOfDayUI
 import com.example.jetpack_compose_all_in_one.utils.navigation.NavConstants.HistoryOfDayUI_About
 import com.example.jetpack_compose_all_in_one.utils.navigation.NavConstants.INTERNET
@@ -449,6 +451,7 @@ sealed class NavDes(val data: INavigationDrawerItem, val customAppBarStringId: I
     object youTube : NavDes(NavigationDrawerData(YoutubeUI, YoutubeUI_ABOUT))
     object barcodeScanner: NavDes(NavigationDrawerData(BarcodeScannerUI, BarcodeScannerUI_ABOUT))
     object firestoreNotes: NavDes(NavigationDrawerData(FIRESTORE_NOTES, FIRESTORE_NOTES_ABOUT))
+    object horizontalPager: NavDes(NavigationDrawerData(HORIZONTAL_PAGER, HORIZONTAL_PAGER_ABOUT))
     object news : NavDes(NavigationDrawerData(NewsUI, NewsUI_ABOUT))
 
     object polls : NavDes(NavigationDrawerData(PollUI, PollUI_About))
@@ -570,7 +573,8 @@ sealed class NavDes(val data: INavigationDrawerItem, val customAppBarStringId: I
                 quiz,
                 NewsApiHeadlineSwipe,
                 barcodeScanner,
-                firestoreNotes
+                firestoreNotes,
+                horizontalPager
             ), DEMO_UI
         )
     )