Progressive blur in profile screen

Jetchat/app/src/androidTest/java/com/example/compose/jetchat/NavigationTest.kt

@@ -21,10 +21,16 @@ import androidx.compose.ui.test.SemanticsMatcher
 import androidx.compose.ui.test.assertIsDisplayed
 import androidx.compose.ui.test.hasAnyAncestor
 import androidx.compose.ui.test.hasText
+import androidx.compose.ui.test.isRoot
 import androidx.compose.ui.test.junit4.v2.createAndroidComposeRule
+import androidx.compose.ui.test.onFirst
 import androidx.compose.ui.test.onNodeWithContentDescription
 import androidx.compose.ui.test.onNodeWithText
+import androidx.compose.ui.test.onRoot
 import androidx.compose.ui.test.performClick
+import androidx.compose.ui.test.performScrollTo
+import androidx.compose.ui.test.performTouchInput
+import androidx.compose.ui.test.swipeRight
 import androidx.navigation.NavController
 import androidx.navigation.findNavController
 import androidx.test.espresso.Espresso
@@ -49,13 +55,14 @@ class NavigationTest {
     @Test
     fun profileScreen_back_conversationScreen() {
         val navController = getNavController()
-        // Navigate to profile        \
+        // Navigate to profile
         navigateToProfile("Taylor Brooks")
         // Check profile is displayed
         assertEquals(navController.currentDestination?.id, R.id.nav_profile)
-        // Extra UI check
+        // Extra UI check (scroll to Display name as the new profile header is taller)
         composeTestRule
             .onNodeWithText(composeTestRule.activity.getString(R.string.display_name))
+            .performScrollTo()
             .assertIsDisplayed()
 
         // Press back
@@ -71,9 +78,9 @@ class NavigationTest {
     @Test
     fun drawer_conversationScreen_backstackPopUp() {
         navigateToProfile("Ali Conors (you)")
-        navigateToHome()
+        navigateToHomeFromProfile()
         navigateToProfile("Taylor Brooks")
-        navigateToHome()
+        navigateToHomeFromProfile()
 
         // Chewie, we're home
         assertEquals(getNavController().currentDestination?.id, R.id.nav_home)
@@ -102,6 +109,13 @@ class NavigationTest {
         composeTestRule.onNode(hasText("composers") and isInDrawer()).performClick()
     }
 
+    private fun navigateToHomeFromProfile() {
+        composeTestRule.onAllNodes(isRoot()).onFirst().performTouchInput {
+            swipeRight()
+        }
+        composeTestRule.onNode(hasText("composers") and isInDrawer()).performClick()
+    }
+
     private fun getNavController(): NavController {
         return composeTestRule.activity.findNavController(R.id.nav_host_fragment)
     }

Jetchat/app/src/main/java/com/example/compose/jetchat/data/FakeData.kt

@@ -249,7 +249,7 @@ val exampleUiState = ConversationUiState(
  */
 val colleagueProfile = ProfileScreenState(
     userId = "12345",
-    photo = R.drawable.someone_else,
+    photo = R.drawable.android_profile_pic,
     name = "Taylor Brooks",
     status = "Away",
     displayName = "taylor",
@@ -264,7 +264,7 @@ val colleagueProfile = ProfileScreenState(
  */
 val meProfile = ProfileScreenState(
     userId = "me",
-    photo = R.drawable.ali,
+    photo = R.drawable.android_profile_pic,
     name = "Ali Conors",
     status = "Online",
     displayName = "aliconors",

Jetchat/app/src/main/java/com/example/compose/jetchat/profile/Profile.kt

@@ -17,21 +17,17 @@
 package com.example.compose.jetchat.profile
 
 import androidx.compose.foundation.Image
-import androidx.compose.foundation.ScrollState
-import androidx.compose.foundation.layout.BoxWithConstraints
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.navigationBarsPadding
-import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.systemBarsPadding
 import androidx.compose.foundation.layout.widthIn
 import androidx.compose.foundation.rememberScrollState
-import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.FloatingActionButton
@@ -41,25 +37,21 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.key
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.input.nestedscroll.NestedScrollConnection
-import androidx.compose.ui.input.nestedscroll.nestedScroll
+import androidx.compose.ui.draw.BlurredEdgeTreatment
+import androidx.compose.ui.draw.blur
+import androidx.compose.ui.graphics.blur.BlurRadiusSpec
+import androidx.compose.ui.graphics.blur.BlurStop
 import androidx.compose.ui.layout.ContentScale
-import androidx.compose.ui.platform.LocalDensity
-import androidx.compose.ui.platform.rememberNestedScrollInteropConnection
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import com.example.compose.jetchat.FunctionalityNotAvailablePopup
 import com.example.compose.jetchat.R
@@ -69,57 +61,37 @@ import com.example.compose.jetchat.data.colleagueProfile
 import com.example.compose.jetchat.data.meProfile
 import com.example.compose.jetchat.theme.JetchatTheme
 
-@OptIn(ExperimentalMaterial3Api::class, ExperimentalComposeUiApi::class)
 @Composable
-fun ProfileScreen(
-    userData: ProfileScreenState,
-    nestedScrollInteropConnection: NestedScrollConnection = rememberNestedScrollInteropConnection(),
-) {
+fun ProfileScreen(userData: ProfileScreenState) {
     var functionalityNotAvailablePopupShown by remember { mutableStateOf(false) }
     if (functionalityNotAvailablePopupShown) {
         FunctionalityNotAvailablePopup { functionalityNotAvailablePopupShown = false }
     }
 
     val scrollState = rememberScrollState()
 
-    BoxWithConstraints(
+    Box(
         modifier = Modifier
-            .fillMaxSize()
-            .nestedScroll(nestedScrollInteropConnection)
-            .systemBarsPadding(),
+            .fillMaxSize(),
     ) {
         Surface {
             Column(
                 modifier = Modifier
                     .fillMaxSize()
+                    .background(color = MaterialTheme.colorScheme.surfaceContainer)
                     .verticalScroll(scrollState),
             ) {
-                ProfileHeader(
-                    scrollState,
-                    userData,
-                    this@BoxWithConstraints.maxHeight,
-                )
-                UserInfoFields(userData, this@BoxWithConstraints.maxHeight)
+                ProfileHeader(userData)
+                UserInfoFields(userData)
             }
         }
-
-        val fabExtended by remember { derivedStateOf { scrollState.value == 0 } }
-        ProfileFab(
-            extended = fabExtended,
-            userIsMe = userData.isMe(),
-            modifier = Modifier
-                .align(Alignment.BottomEnd)
-                // Offsets the FAB to compensate for CoordinatorLayout collapsing behaviour
-                .offset(y = ((-100).dp)),
-            onFabClicked = { functionalityNotAvailablePopupShown = true },
-        )
     }
 }
 
 @Composable
-private fun UserInfoFields(userData: ProfileScreenState, containerHeight: Dp) {
-    Column {
-        Spacer(modifier = Modifier.height(8.dp))
+private fun UserInfoFields(userData: ProfileScreenState) {
+    Column(modifier = Modifier.navigationBarsPadding()) {
+        Spacer(modifier = Modifier.height(40.dp))
 
         NameAndPosition(userData)
 
@@ -132,10 +104,6 @@ private fun UserInfoFields(userData: ProfileScreenState, containerHeight: Dp) {
         userData.timeZone?.let {
             ProfileProperty(stringResource(R.string.timezone), userData.timeZone)
         }
-
-        // Add a spacer that always shows part (320.dp) of the fields list regardless of the device,
-        // in order to always leave some content at the top.
-        Spacer(Modifier.height((containerHeight - 320.dp).coerceAtLeast(0.dp)))
     }
 }
 
@@ -160,7 +128,8 @@ private fun Name(userData: ProfileScreenState, modifier: Modifier = Modifier) {
     Text(
         text = userData.name,
         modifier = modifier,
-        style = MaterialTheme.typography.headlineSmall,
+        style = MaterialTheme.typography.headlineLarge,
+        color = MaterialTheme.colorScheme.onSurface,
     )
 }
 
@@ -175,24 +144,22 @@ private fun Position(userData: ProfileScreenState, modifier: Modifier = Modifier
 }
 
 @Composable
-private fun ProfileHeader(scrollState: ScrollState, data: ProfileScreenState, containerHeight: Dp) {
-    val offset = (scrollState.value / 2)
-    val offsetDp = with(LocalDensity.current) { offset.toDp() }
-
+private fun ProfileHeader(data: ProfileScreenState) {
     data.photo?.let {
         Image(
             modifier = Modifier
-                .heightIn(max = containerHeight / 2)
                 .fillMaxWidth()
-                // TODO: Update to use offset to avoid recomposition
-                .padding(
-                    start = 16.dp,
-                    top = offsetDp,
-                    end = 16.dp,
-                )
-                .clip(CircleShape),
+                .blur {
+                    radius = BlurRadiusSpec.verticalGradient(
+                        listOf(
+                            BlurStop(0.5f, 0.dp),
+                            BlurStop(1.0f, 32.dp),
+                        ),
+                    )
+                    edgeTreatment = BlurredEdgeTreatment.Unbounded
+                },
             painter = painterResource(id = it),
-            contentScale = ContentScale.Crop,
+            contentScale = ContentScale.FillWidth,
             contentDescription = null,
         )
     }

Jetchat/app/src/main/java/com/example/compose/jetchat/profile/ProfileFragment.kt

@@ -21,32 +21,15 @@ import android.os.Bundle
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.Icon
-import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.livedata.observeAsState
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
 import androidx.compose.ui.ExperimentalComposeUiApi
-import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.ComposeView
-import androidx.compose.ui.platform.rememberNestedScrollInteropConnection
-import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.unit.dp
 import androidx.fragment.app.Fragment
 import androidx.fragment.app.activityViewModels
 import androidx.fragment.app.viewModels
-import com.example.compose.jetchat.FunctionalityNotAvailablePopup
 import com.example.compose.jetchat.MainViewModel
-import com.example.compose.jetchat.R
-import com.example.compose.jetchat.components.JetchatAppBar
 import com.example.compose.jetchat.theme.JetchatTheme
 
 class ProfileFragment : Fragment() {
@@ -61,59 +44,25 @@ class ProfileFragment : Fragment() {
         viewModel.setUserId(userId)
     }
 
-    @OptIn(ExperimentalComposeUiApi::class, ExperimentalMaterial3Api::class)
-    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View {
-        val rootView: View = inflater.inflate(R.layout.fragment_profile, container, false)
+    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View =
+        ComposeView(inflater.context).apply {
+            layoutParams = ViewGroup.LayoutParams(
+                ViewGroup.LayoutParams.MATCH_PARENT,
+                ViewGroup.LayoutParams.MATCH_PARENT,
+            )
 
-        rootView.findViewById<ComposeView>(R.id.toolbar_compose_view).apply {
-            setContent {
-                var functionalityNotAvailablePopupShown by remember { mutableStateOf(false) }
-                if (functionalityNotAvailablePopupShown) {
-                    FunctionalityNotAvailablePopup { functionalityNotAvailablePopupShown = false }
-                }
-
-                JetchatTheme {
-                    JetchatAppBar(
-                        // Reset the minimum bounds that are passed to the root of a compose tree
-                        modifier = Modifier.wrapContentSize(),
-                        onNavIconPressed = { activityViewModel.openDrawer() },
-                        title = { },
-                        actions = {
-                            // More icon
-                            Icon(
-                                painter = painterResource(id = R.drawable.ic_more_vert),
-                                tint = MaterialTheme.colorScheme.onSurfaceVariant,
-                                modifier = Modifier
-                                    .clickable(onClick = {
-                                        functionalityNotAvailablePopupShown = true
-                                    })
-                                    .padding(horizontal = 12.dp, vertical = 16.dp)
-                                    .height(24.dp),
-                                contentDescription = stringResource(id = R.string.more_options),
-                            )
-                        },
-                    )
-                }
-            }
-        }
-
-        rootView.findViewById<ComposeView>(R.id.profile_compose_view).apply {
             setContent {
                 val userData by viewModel.userData.observeAsState()
-                val nestedScrollInteropConnection = rememberNestedScrollInteropConnection()
 
                 JetchatTheme {
                     if (userData == null) {
                         ProfileError()
                     } else {
                         ProfileScreen(
                             userData = userData!!,
-                            nestedScrollInteropConnection = nestedScrollInteropConnection,
                         )
                     }
                 }
             }
         }
-        return rootView
-    }
 }

Jetchat/app/src/main/java/com/example/compose/jetchat/theme/Color.kt

@@ -58,3 +58,4 @@ val BlueGrey50 = Color(0xFF767680)
 val BlueGrey60 = Color(0xFF90909A)
 val BlueGrey80 = Color(0xFFC6C5D0)
 val BlueGrey90 = Color(0xFFE2E1EC)
+val BlueGrey95 = Color(0xFFEAE9FC)

Jetchat/app/src/main/java/com/example/compose/jetchat/theme/Themes.kt

@@ -83,6 +83,7 @@ val JetchatLightColorScheme = lightColorScheme(
     inverseOnSurface = Grey95,
     surfaceVariant = BlueGrey90,
     onSurfaceVariant = BlueGrey30,
+    surfaceContainer = BlueGrey95,
     outline = BlueGrey50,
 )
 

Jetchat/app/src/main/java/com/example/compose/jetchat/theme/Typography.kt

@@ -79,8 +79,8 @@ val JetchatTypography = Typography(
     headlineLarge = TextStyle(
         fontFamily = MontserratFontFamily,
         fontWeight = FontWeight.SemiBold,
-        fontSize = 32.sp,
-        lineHeight = 40.sp,
+        fontSize = 72.sp,
+        lineHeight = 64.sp,
         letterSpacing = 0.sp,
     ),
     headlineMedium = TextStyle(