add:profile gallery

app/src/main/java/com/aiosman/riderpro/Gallery.kt

@@ -0,0 +1,247 @@
+package com.aiosman.riderpro
+
+import androidx.compose.foundation.Canvas
+import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxWithConstraints
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.aspectRatio
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.wrapContentWidth
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.pager.HorizontalPager
+import androidx.compose.foundation.pager.rememberPagerState
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.ScrollableTabRow
+import androidx.compose.material3.Tab
+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.rememberCoroutineScope
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Path
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import kotlinx.coroutines.launch
+
+@OptIn(ExperimentalMaterial3Api::class, ExperimentalFoundationApi::class)
+@Composable
+fun GalleryPage() {
+    val pagerState = rememberPagerState(pageCount = { 2 })
+    val scope = rememberCoroutineScope()
+    fun switchToPage(page: Int) {
+        scope.launch {
+            pagerState.animateScrollToPage(page)
+        }
+    }
+    Scaffold(
+        topBar = {
+            TopAppBar(
+                title = {
+                    Text("Gallery")
+                },
+                navigationIcon = { },
+                actions = { })
+        },
+    ) { paddingValues: PaddingValues ->
+        Box(modifier = Modifier.padding(paddingValues)) {
+            Column(modifier = Modifier) {
+                ScrollableTabRow(
+                    edgePadding = 0.dp,
+                    selectedTabIndex = pagerState.currentPage,
+                    modifier = Modifier,
+                    divider = { },
+                    indicator = { tabPositions ->
+                        Box(
+                            modifier = Modifier
+                                .tabIndicatorOffset(tabPositions[pagerState.currentPage])
+
+                        ) {
+                            Box(
+                                modifier = Modifier
+                                    .align(Alignment.Center)
+                                    .height(4.dp)
+                                    .width(16.dp)
+                                    .background(color = Color.Red)
+
+                            )
+                        }
+                    }
+                ) {
+                    Tab(
+                        text = { Text("Timeline", color = Color.Black) },
+                        selected = pagerState.currentPage == 0,
+                        onClick = { switchToPage(0) }
+
+                    )
+                    Tab(
+                        text = { Text("Position", color = Color.Black) },
+                        selected = pagerState.currentPage == 1,
+                        onClick = { switchToPage(1) }
+                    )
+                }
+                HorizontalPager(
+                    state = pagerState,
+                    modifier = Modifier
+                        .weight(1f)
+                        .fillMaxSize()
+                ) { page ->
+                    when (page) {
+                        0 -> GalleryTimeline()
+                        1 -> GalleryPosition()
+                    }
+                }
+            }
+        }
+
+    }
+}
+@Composable
+fun GalleryTimeline() {
+    val mockList = listOf("1", "2", "3", "4", "5", "6", "7", "8", "9", "10")
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+    ) {
+        LazyColumn(
+            modifier = Modifier
+                .fillMaxSize()
+        ) {
+            items(mockList) { item ->
+                TimelineItem()
+            }
+
+        }
+    }
+
+}
+@Composable
+fun DashedVerticalLine(modifier: Modifier = Modifier) {
+    BoxWithConstraints(modifier = modifier) {
+        Canvas(modifier = Modifier.height(maxHeight)) {
+            val path = Path().apply {
+                moveTo(size.width / 2, 0f)
+                lineTo(size.width / 2, size.height)
+            }
+            drawPath(
+                path = path,
+                color = Color.Gray,
+            )
+        }
+    }
+}
+@Preview
+@Composable
+fun TimelineItem() {
+    val itemsList = listOf("1", "2", "3", "4", "5", "6", "7", "8", "9")
+    Box(
+        modifier = Modifier
+            .padding(16.dp)
+            .fillMaxSize()
+            .wrapContentWidth()
+
+    ) {
+        Row(
+            modifier = Modifier
+                .padding(16.dp)
+                .fillMaxWidth()
+        ) {
+            Column(
+                modifier = Modifier
+                    .width(64.dp),
+                horizontalAlignment = Alignment.CenterHorizontally
+            ) {
+                Text("12", fontSize = 22.sp, fontWeight = androidx.compose.ui.text.font.FontWeight.Bold)
+                Text("7月", fontSize = 20.sp,fontWeight = androidx.compose.ui.text.font.FontWeight.Bold)
+                // add vertical dash line
+                Box(
+                    modifier = Modifier
+                        .height(120.dp)
+                        .width(3.dp)
+                        .background(Color.Gray)
+                )
+            }
+            Column {
+                Row(
+                    modifier = Modifier
+                        .padding(bottom = 16.dp)
+                ) {
+                    Image(
+                        painter = painterResource(id = R.drawable.default_avatar),
+                        contentDescription = "",
+                        modifier = Modifier
+                            .padding(end = 16.dp)
+                            .size(24.dp)
+                            .clip(CircleShape) // Clip the image to a circle
+                    )
+                    Text("Onyama Limba")
+                }
+                Box(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .aspectRatio(1f)
+                ) {
+                    Column {
+                        repeat(3) { // Create three rows
+                            Row(modifier = Modifier.weight(1f)) {
+                                repeat(3) { // Create three columns in each row
+                                    Box(
+                                        modifier = Modifier
+                                            .weight(1f)
+                                            .aspectRatio(1f) // Keep the aspect ratio 1:1 for square shape
+                                            .padding(4.dp)
+                                    ){
+                                        Box(
+                                            modifier = Modifier
+                                                .fillMaxSize()
+                                                .background(Color.Gray)
+                                        ) {
+                                            Text("1")
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+@Composable
+fun GalleryPosition() {
+    val mockList = listOf("1", "2", "3", "4", "5", "6", "7", "8", "9", "10")
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+    ) {
+        LazyColumn(
+            modifier = Modifier
+                .fillMaxSize()
+        ) {
+            items(mockList) { item ->
+                TimelineItem()
+            }
+
+        }
+    }
+}

app/src/main/java/com/aiosman/riderpro/MainActivity.kt

@@ -1,63 +1,39 @@
 package com.aiosman.riderpro
 
-import android.app.Activity
-import android.app.StatusBarManager
 import android.os.Bundle
-import android.widget.HorizontalScrollView
-import android.widget.ScrollView
 import androidx.activity.ComponentActivity
-import androidx.activity.SystemBarStyle
 import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
 import androidx.compose.animation.core.tween
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
-import androidx.compose.foundation.BorderStroke
-import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
-import androidx.compose.foundation.border
 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.Spacer
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.navigationBars
-import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.statusBarsPadding
-import androidx.compose.foundation.layout.windowInsetsPadding
-import androidx.compose.foundation.layout.windowInsetsStartWidth
-import androidx.compose.foundation.layout.wrapContentWidth
-import androidx.compose.foundation.text.BasicText
-import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.Icon
 import androidx.compose.material3.NavigationBar
 import androidx.compose.material3.NavigationBarItem
 import androidx.compose.material3.NavigationBarItemColors
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Surface
-import androidx.compose.material3.Text
-import androidx.compose.material3.TopAppBar
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.compositionLocalOf
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.ColorProducer
-import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.platform.LocalDensity
-import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.res.vectorResource
-import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
-import androidx.core.view.WindowCompat
-import androidx.navigation.NavController
 import androidx.navigation.NavHostController
 import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
@@ -65,13 +41,6 @@ import androidx.navigation.compose.currentBackStackEntryAsState
 import androidx.navigation.compose.rememberNavController
 import com.aiosman.riderpro.ui.theme.RiderProTheme
 import com.google.accompanist.systemuicontroller.rememberSystemUiController
-import com.google.android.gms.maps.model.CameraPosition
-import com.google.android.gms.maps.model.LatLng
-import com.google.maps.android.compose.GoogleMap
-import com.google.maps.android.compose.Marker
-import com.google.maps.android.compose.MarkerComposable
-import com.google.maps.android.compose.MarkerState
-import com.google.maps.android.compose.rememberCameraPositionState
 
 
 class MainActivity : ComponentActivity() {
@@ -84,8 +53,12 @@ class MainActivity : ComponentActivity() {
     }
 }
 
+val LocalNavController = compositionLocalOf<NavHostController> {
+    error("NavController not provided")
+}
+
 @Composable
-fun NavigationController(navController: NavHostController){
+fun NavigationController(navController: NavHostController) {
     NavHost(
         navController = navController,
         startDestination = NavigationItem.Home.route,
@@ -94,27 +67,30 @@ fun NavigationController(navController: NavHostController){
         },
         exitTransition = {
             fadeOut(animationSpec = tween(0))
-        }){
-        composable(route = NavigationItem.Home.route){
+        }) {
+        composable(route = NavigationItem.Home.route) {
             Home()
         }
-        composable(route = NavigationItem.Street.route){
+        composable(route = NavigationItem.Street.route) {
             Street()
         }
-        composable(route = NavigationItem.Add.route){
+        composable(route = NavigationItem.Add.route) {
             Add()
         }
-        composable(route = NavigationItem.Message.route){
+        composable(route = NavigationItem.Message.route) {
             Video()
         }
-        composable(route = NavigationItem.Profile.route){
+        composable(route = NavigationItem.Profile.route) {
             Profile()
         }
+        composable(route = "ProfileTimeline") {
+            GalleryPage()
+        }
     }
 }
 
 @Composable
-fun Navigation(){
+fun Navigation() {
     val navigationBarHeight = with(LocalDensity.current) {
         WindowInsets.navigationBars.getBottom(this).toDp()
     }
@@ -126,22 +102,23 @@ fun Navigation(){
         NavigationItem.Message,
         NavigationItem.Profile
     )
-    Scaffold (
+    CompositionLocalProvider(LocalNavController provides navController) {
+        Scaffold(
             modifier = Modifier.statusBarsPadding(),
             topBar = {},
             bottomBar = {
-            NavigationBar (
+                NavigationBar(
                     modifier = Modifier.height(56.dp + navigationBarHeight),
                     containerColor = Color.Black
-            ){
+                ) {
                     val navBackStackEntry by navController.currentBackStackEntryAsState()
                     val currentRoute = navBackStackEntry?.destination?.route
                     val systemUiController = rememberSystemUiController()
-                item.forEach{ it ->
+                    item.forEach { it ->
                         NavigationBarItem(
-                        selected = currentRoute == it.route ,
+                            selected = currentRoute == it.route,
                             onClick = {
-                            if(currentRoute != it.route){
+                                if (currentRoute != it.route) {
                                     navController.navigate(it.route)
                                 }
                                 when (it.route) {
@@ -150,11 +127,13 @@ fun Navigation(){
                                             color = Color.Black
                                         )
                                     }
+
                                     NavigationItem.Message.route -> {
                                         systemUiController.setSystemBarsColor(
                                             color = Color.Black
                                         )
                                     }
+
                                     else -> {
                                         systemUiController.setSystemBarsColor(
                                             color = Color.Transparent
@@ -173,42 +152,53 @@ fun Navigation(){
 
                                 ),
                             icon = {
-                            Icon(modifier = Modifier.size(24.dp),
+                                Icon(
+                                    modifier = Modifier.size(24.dp),
                                     imageVector = it.icon(), contentDescription = null,
-                                tint = if(currentRoute == it.route) Color.Red else Color.White
+                                    tint = if (currentRoute == it.route) Color.Red else Color.White
                                 )
                             }
                         )
                     }
                 }
             }
-    ){
+        ) { paddingValues ->
+            Box(
+                modifier = Modifier.padding(paddingValues)
+            ) {
                 NavigationController(navController = navController)
             }
+        }
+    }
+
 }
 
 @Composable
-fun Home(){
+fun Home() {
     val navigationBarHeight = with(LocalDensity.current) {
         WindowInsets.navigationBars.getBottom(this).toDp()
     }
-    Column (
-        modifier = Modifier.fillMaxSize().padding(bottom = (56.dp + navigationBarHeight)),
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(bottom = (56.dp + navigationBarHeight)),
         verticalArrangement = Arrangement.Center,
         horizontalAlignment = Alignment.CenterHorizontally
-    ){
+    ) {
         PagingBackendSample()
     }
 }
 
 
 @Composable
-fun Street(){
+fun Street() {
     val navigationBarHeight = with(LocalDensity.current) {
         WindowInsets.navigationBars.getBottom(this).toDp()
     }
-    Column (
-        modifier = Modifier.fillMaxSize().padding(bottom = (56.dp + navigationBarHeight)),
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(bottom = (56.dp + navigationBarHeight)),
         verticalArrangement = Arrangement.Center,
         horizontalAlignment = Alignment.CenterHorizontally
     ) {
@@ -217,71 +207,76 @@ fun Street(){
 }
 
 @Composable
-fun Add(){
+fun Add() {
     val navigationBarHeight = with(LocalDensity.current) {
         WindowInsets.navigationBars.getBottom(this).toDp()
     }
-    Column (
+    Column(
         modifier = Modifier
-            .fillMaxSize().padding(bottom = (56.dp + navigationBarHeight))
+            .fillMaxSize()
+            .padding(bottom = (56.dp + navigationBarHeight))
             .background(Color.Black),
         verticalArrangement = Arrangement.Center,
         horizontalAlignment = Alignment.CenterHorizontally
-    ){
+    ) {
         AddPage()
     }
 }
 
 @Composable
-fun Video(){
+fun Video() {
     val navigationBarHeight = with(LocalDensity.current) {
         WindowInsets.navigationBars.getBottom(this).toDp()
     }
-    Column (
-        modifier = Modifier.fillMaxSize().padding(bottom = (56.dp + navigationBarHeight)),
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(bottom = (56.dp + navigationBarHeight)),
         verticalArrangement = Arrangement.Top,
         horizontalAlignment = Alignment.CenterHorizontally,
-    ){
+    ) {
         ShortVideo()
     }
 }
 
 @Composable
-fun Message(){
+fun Message() {
     val navigationBarHeight = with(LocalDensity.current) {
         WindowInsets.navigationBars.getBottom(this).toDp()
     }
-    Column (
-        modifier = Modifier.fillMaxSize().padding(bottom = (56.dp + navigationBarHeight)),
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(bottom = (56.dp + navigationBarHeight)),
         verticalArrangement = Arrangement.Top,
         horizontalAlignment = Alignment.CenterHorizontally,
-    ){
+    ) {
         MessagePage()
     }
 }
 
 @Composable
-fun Profile(){
+fun Profile() {
     val navigationBarHeight = with(LocalDensity.current) {
         WindowInsets.navigationBars.getBottom(this).toDp()
     }
-    Column (
-        modifier = Modifier.fillMaxSize().padding(bottom = (56.dp + navigationBarHeight)),
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(bottom = (56.dp + navigationBarHeight)),
         verticalArrangement = Arrangement.Center,
         horizontalAlignment = Alignment.CenterHorizontally
-        ){
+    ) {
         ProfilePage()
     }
 }
 
 
-
-
 @Preview(showBackground = true)
 @Composable
 fun GreetingPreview() {
     RiderProTheme {
-        Surface (modifier = Modifier.fillMaxSize(), color = Color.White){
+        Surface(modifier = Modifier.fillMaxSize(), color = Color.White) {
             Navigation()
         }
     }

app/src/main/java/com/aiosman/riderpro/Profile.kt

@@ -1,9 +1,9 @@
 package com.aiosman.riderpro
 
-import android.widget.ScrollView
 import androidx.annotation.DrawableRes
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -11,7 +11,6 @@ import androidx.compose.foundation.layout.ExperimentalLayoutApi
 import androidx.compose.foundation.layout.FlowRow
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.defaultMinSize
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
@@ -161,6 +160,7 @@ fun UserInformationSlogan(){
 
 @Composable
 fun CommunicationOperatorGroup(){
+    val navController = LocalNavController.current
     Row (modifier = Modifier
         .fillMaxWidth()
         .padding(top = 16.dp), horizontalArrangement = Arrangement.Center){
@@ -176,6 +176,13 @@ fun CommunicationOperatorGroup(){
             Image(modifier = Modifier.fillMaxSize(),painter = painterResource(id = R.drawable.rider_pro_profile_message), contentDescription = "")
             Text(text = "MESSAGE", fontSize = 16.sp, color = Color.White, style = TextStyle(fontWeight = FontWeight.Bold))
         }
+        Box(modifier = Modifier.size(width = 142.dp, height = 40.dp).clickable {
+            navController.navigate("ProfileTimeline")
+        },
+            contentAlignment = Alignment.Center){
+            Image(modifier = Modifier.fillMaxSize(), painter = painterResource(id = R.drawable.rider_pro_profile_follow), contentDescription = "")
+            Text(text = "GALLERY", fontSize = 16.sp, color = Color.White, style = TextStyle(fontWeight = FontWeight.Bold))
+        }
     }
 }