Added tabs

app/src/main/java/com/example/jetpack_compose_all_in_one/lessons/lesson_23/LESSON_23.kt

@@ -0,0 +1,60 @@
+package com.example.jetpack_compose_all_in_one.lessons.lesson_23
+
+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.material3.ExperimentalMaterial3Api
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringArrayResource
+import androidx.compose.ui.tooling.preview.Preview
+import com.example.jetpack_compose_all_in_one.R
+import com.example.jetpack_compose_all_in_one.ui.theme.dp_15
+import com.example.jetpack_compose_all_in_one.utils.LogicPager
+import com.example.jetpack_compose_all_in_one.utils.PagedLessonHeader
+
+@Composable
+@Preview(showBackground = true)
+fun Lesson_23() {
+    LessonContent()
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+private fun LessonContent() {
+    val currentPage = rememberSaveable { mutableIntStateOf(0) }
+
+    LogicPager(
+        pageCount = 2,
+        currentPage = currentPage
+    ) {
+        Column(
+            Modifier
+                .fillMaxSize()
+                .padding(it)
+        ) {
+            PagedLessonHeader(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(dp_15),
+                currentPage = currentPage.intValue,
+                headers = stringArrayResource(R.array.lesson_23_header_text).toList(),
+                infoContent = listOf(
+                    "1",
+                    "2",
+                    "3",
+                    "4",
+                    "https://www.google.com"
+                )
+            )
+
+            when (currentPage.intValue) {
+                0 -> TabScreen()
+                1 -> TabScreen()
+            }
+        }
+    }
+}

app/src/main/java/com/example/jetpack_compose_all_in_one/lessons/lesson_23/TabScreen.kt

@@ -0,0 +1,92 @@
+package com.example.jetpack_compose_all_in_one.lessons.lesson_23
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Tab
+import androidx.compose.material3.TabRow
+import androidx.compose.material3.TabRowDefaults
+import androidx.compose.material3.TabRowDefaults.tabIndicatorOffset
+import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+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.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+
+@ExperimentalMaterial3Api
+@Composable
+fun TabScreen() {
+    var selectedTabIndex by remember { mutableStateOf(0) }
+
+    Scaffold(
+        topBar = {
+            TopAppBar(
+                title = { Text("Tab Demo") }
+            )
+        },
+        content = { padding ->
+            Column(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .padding(padding),
+                horizontalAlignment = Alignment.CenterHorizontally,
+                verticalArrangement = Arrangement.Center
+            ) {
+                Tabs(
+                    titles = listOf("Tab 1", "Tab 2", "Tab 3"),
+                    selectedTabIndex = selectedTabIndex,
+                    onTabSelected = { index ->
+                        selectedTabIndex = index
+                    }
+                )
+                Spacer(modifier = Modifier.height(16.dp))
+                Text(text = "Content for Tab ${selectedTabIndex + 1}")
+            }
+        }
+    )
+}
+
+@Composable
+fun Tabs(
+    titles: List<String>,
+    selectedTabIndex: Int,
+    onTabSelected: (Int) -> Unit
+) {
+    TabRow(
+        selectedTabIndex = selectedTabIndex,
+        indicator = { tabPositions ->
+            TabRowDefaults.Indicator(
+                modifier = Modifier.tabIndicatorOffset(tabPositions[selectedTabIndex]),
+                color = Color.Black
+            )
+        }
+    ) {
+        titles.forEachIndexed { index, title ->
+            Tab(
+                text = { Text(title) },
+                selected = selectedTabIndex == index,
+                onClick = { onTabSelected(index) }
+            )
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+@ExperimentalMaterial3Api
+fun DefaultPreview() {
+    TabScreen()
+}
+

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

@@ -91,6 +91,7 @@ import com.example.jetpack_compose_all_in_one.lessons.lesson_2.Lesson_2_Screen
 import com.example.jetpack_compose_all_in_one.lessons.lesson_20.BiometricAuthentication
 import com.example.jetpack_compose_all_in_one.lessons.lesson_21.navigation.DataStoreDemoUI
 import com.example.jetpack_compose_all_in_one.lessons.lesson_22.ExoPlayerView
+import com.example.jetpack_compose_all_in_one.lessons.lesson_23.Lesson_23
 import com.example.jetpack_compose_all_in_one.lessons.lesson_3.Lesson_3_Chapter_ListTypes
 import com.example.jetpack_compose_all_in_one.lessons.lesson_4.Lesson_4_Chapter_Dialogs
 import com.example.jetpack_compose_all_in_one.lessons.lesson_5.Lesson_5_Chapter_2_Map_Type
@@ -455,7 +456,9 @@ fun MainContainerOfApp(
                 composable(NavDes.Lesson22.route()){
                     ExoPlayerView()
                 }
-
+                composable(NavDes.Lesson23.route()){
+                    Lesson_23()
+                }
                 composable(NavDes.L6Chapter1.route()) {
                     Lesson_6_ThemeChange()
                 }

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

@@ -152,6 +152,9 @@ object NavConstants {
     const val LESSON_22 = "LESSON_22"
     const val LESSON_22_ABOUT = "Lesson 22: Media3 ExoPlayer"
 
+    const val LESSON_23 = "LESSON_22"
+    const val LESSON_23_ABOUT = "Lesson 22: Media3 ExoPlayer"
+
     const val QUOTE_2 = "quote2"
     const val QUOTE_2_ABOUT = "Swipe Quotes"
 

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

@@ -94,6 +94,8 @@ import com.example.jetpack_compose_all_in_one.utils.navigation.NavConstants.LESS
 import com.example.jetpack_compose_all_in_one.utils.navigation.NavConstants.LESSON_21_ABOUT
 import com.example.jetpack_compose_all_in_one.utils.navigation.NavConstants.LESSON_22
 import com.example.jetpack_compose_all_in_one.utils.navigation.NavConstants.LESSON_22_ABOUT
+import com.example.jetpack_compose_all_in_one.utils.navigation.NavConstants.LESSON_23
+import com.example.jetpack_compose_all_in_one.utils.navigation.NavConstants.LESSON_23_ABOUT
 import com.example.jetpack_compose_all_in_one.utils.navigation.NavConstants.LESSON_2_CHAPTER_1
 import com.example.jetpack_compose_all_in_one.utils.navigation.NavConstants.LESSON_2_CHAPTER_1_ABOUT
 import com.example.jetpack_compose_all_in_one.utils.navigation.NavConstants.LESSON_2_CHAPTER_2
@@ -323,6 +325,9 @@ sealed class NavDes(val data: INavigationDrawerItem, val customAppBarStringId: I
     object Lesson22 :
         NavDes(NavigationDrawerData(LESSON_22, LESSON_22_ABOUT))
 
+    object Lesson23 :
+        NavDes(NavigationDrawerData(LESSON_23, LESSON_23_ABOUT))
+
     object Lesson14DropDownMenu :
         NavDes(NavigationDrawerData(LESSON_14_DROP_DOWN_MENU, LESSON_14_DROP_DOWN_MENU_ABOUT))
 

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

@@ -99,6 +99,11 @@
         <item>List</item>
     </string-array>
 
+    <string-array name="lesson_23_header_text">
+        <item>Tabs</item>
+        <item>Custom Tabs</item>
+    </string-array>
+
     <string-array name="l2c5_header_text">
         <item>Simple Progress</item>
         <item>Custom Progress</item>