Composables
Docs Login
Pairel

My profile

Jetpack Compose Screen

Logging OutDeleting & Deactivating AccountEditing ProfileMy Account & Profile
Download 
package com.composables.pairel

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.FlowRow
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.WindowInsetsSides
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.only
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.safeDrawing
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.widthIn
import androidx.compose.foundation.layout.windowInsetsPadding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.composables.compose.ripple.rememberRippleIndication
import com.composables.pairel.components.AppBar
import com.composables.pairel.components.Avatar
import com.composables.pairel.components.Button
import com.composables.pairel.components.Card
import com.composables.pairel.components.Icon
import com.composables.pairel.components.ProgressIndicator
import com.composables.pairel.components.ScreenScaffold
import com.composables.pairel.components.Separator
import com.composables.pairel.components.SeparatorOrientation
import com.composables.pairel.components.Tag
import com.composables.pairel.components.TagVariant
import com.composables.pairel.components.Text
import com.composables.pairel.theme.ChevronRight
import com.composables.pairel.theme.Icons
import com.composables.pairel.theme.ProvideContentColor
import com.composables.pairel.theme.Theme
import com.composables.uripainter.rememberUriPainter
import kotlin.math.roundToInt
import kotlin.time.Duration.Companion.milliseconds

private const val ProfileCompletion = 0.7f

@Composable
fun MyProfileScreen(
    navigateToProfileDetails: () -> Unit,
    navigateToMembership: () -> Unit,
    navigateToSettings: () -> Unit,
    navigateToDiscover: () -> Unit,
    navigateToMatches: () -> Unit,
    modifier: Modifier = Modifier,
) {
    MainNavigationLayout(
        navigationBar = {
            MainNavigationBar(
                selected = MainDestination.MyProfile,
                navigateToDiscover = navigateToDiscover,
                navigateToMatches = navigateToMatches,
                navigateToMyProfile = {},
            )
        },
        modifier = modifier,
    ) { contentPadding ->
        MyProfileDestination(
            navigateToProfileDetails,
            navigateToMembership,
            navigateToSettings,
            contentPadding = contentPadding,
        )
    }
}

@Composable
fun MyProfileDestination(
    navigateToProfileDetails: () -> Unit,
    navigateToMembership: () -> Unit,
    navigateToSettings: () -> Unit,
    contentPadding: PaddingValues,
    modifier: Modifier = Modifier,
) {
    val bottomPadding = contentPadding.calculateBottomPadding()

    ScreenScaffold(
        modifier = modifier,
        topBar = { AppBar(title = { Text("My profile") }) },
    ) {
        LazyColumn(
            modifier =
                Modifier.fillMaxSize()
                    .windowInsetsPadding(
                        WindowInsets.safeDrawing.only(WindowInsetsSides.Horizontal)
                    ),
            contentPadding =
                PaddingValues(
                    start = 20.dp,
                    end = 20.dp,
                    top = 8.dp,
                    bottom = bottomPadding + 24.dp,
                ),
            verticalArrangement = Arrangement.spacedBy(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
        ) {
            item(key = "profile") {
                Card(Modifier.widthIn(max = 560.dp).fillMaxWidth()) {
                    Row(verticalAlignment = Alignment.CenterVertically) {
                        Avatar(
                            initials = "M",
                            contentDescription = "Your photo",
                            painter =
                                rememberUriPainter(
                                    YourPhotoUrl,
                                    crossfade = 300.milliseconds,
                                    contentScale = ContentScale.Crop,
                                ),
                            modifier = Modifier.size(72.dp),
                        )
                        Spacer(Modifier.width(16.dp))
                        Column(verticalArrangement = Arrangement.spacedBy(4.dp)) {
                            Text(
                                "Ethan, 31",
                                style =
                                    Theme.typography.title.copy(
                                        fontSize = 24.sp,
                                        lineHeight = 30.sp,
                                    ),
                            )
                            Text("Brooklyn, New York", color = Theme.colors.onBackgroundMuted)
                        }
                    }
                    FlowRow(
                        modifier = Modifier.padding(top = 16.dp),
                        horizontalArrangement = Arrangement.spacedBy(8.dp),
                        verticalArrangement = Arrangement.spacedBy(8.dp),
                    ) {
                        for (interest in yourInterests) {
                            Tag(TagVariant.Neutral) { Text("${interest.emoji} ${interest.label}") }
                        }
                    }
                    Spacer(Modifier.height(24.dp))
                    Row(Modifier.fillMaxWidth()) {
                        Text(
                            "Profile strength",
                            style = Theme.typography.label,
                            modifier = Modifier.weight(1f),
                        )
                        Text(
                            "${(ProfileCompletion * 100).roundToInt()}%",
                            style = Theme.typography.label,
                        )
                    }
                    ProgressIndicator(ProfileCompletion, Modifier.padding(top = 10.dp))
                    Text(
                        "Add one more interest so people have more to talk about.",
                        color = Theme.colors.onBackgroundMuted,
                        modifier = Modifier.padding(top = 10.dp),
                    )
                    Button(
                        onClick = navigateToProfileDetails,
                        modifier = Modifier.fillMaxWidth().padding(top = 20.dp),
                    ) {
                        Text("Complete profile")
                    }
                }
            }
            item(key = "membership") {
                Column(
                    Modifier.widthIn(max = 560.dp)
                        .fillMaxWidth()
                        .clip(Theme.shapes.large)
                        .background(Theme.colors.accent)
                        .padding(24.dp)
                ) {
                    ProvideContentColor(Theme.colors.onAccent) {
                        Text(
                            "Pairel Plus".uppercase(),
                            style = Theme.typography.caption.copy(letterSpacing = 1.sp),
                        )
                        Text(
                            "Make every connection count",
                            style = Theme.typography.quote,
                            modifier = Modifier.padding(top = 8.dp),
                        )
                        Text(
                            "See everyone who likes you, rematch when a conversation expires, and set more preferences.",
                            modifier = Modifier.padding(top = 8.dp),
                        )
                        Button(
                            onClick = navigateToMembership,
                            modifier = Modifier.fillMaxWidth().padding(top = 20.dp),
                        ) {
                            Text("See plans")
                        }
                    }
                }
            }
            item(key = "destinations") {
                Column(
                    Modifier.widthIn(max = 560.dp)
                        .fillMaxWidth()
                        .clip(Theme.shapes.large)
                        .background(Theme.colors.surface)
                ) {
                    ProfileRow(
                        title = "Profile details",
                        description = "Photos, bio, height, and interests",
                        onClick = navigateToProfileDetails,
                    )
                    Separator(
                        SeparatorOrientation.Horizontal,
                        Modifier.padding(horizontal = 20.dp),
                    )
                    ProfileRow(
                        title = "Membership",
                        description = "Free plan",
                        onClick = navigateToMembership,
                    )
                    Separator(
                        SeparatorOrientation.Horizontal,
                        Modifier.padding(horizontal = 20.dp),
                    )
                    ProfileRow(
                        title = "Settings",
                        description = "Preferences, notifications, and account",
                        onClick = navigateToSettings,
                    )
                }
            }
        }
    }
}

@Composable
private fun ProfileRow(
    title: String,
    description: String,
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
) {
    Row(
        modifier =
            modifier
                .fillMaxWidth()
                .clickable(
                    interactionSource = remember { MutableInteractionSource() },
                    indication = rememberRippleIndication(color = Theme.colors.onSurface),
                    onClick = onClick,
                )
                .padding(horizontal = 20.dp, vertical = 16.dp),
        verticalAlignment = Alignment.CenterVertically,
    ) {
        Column(Modifier.weight(1f), verticalArrangement = Arrangement.spacedBy(4.dp)) {
            Text(title, style = Theme.typography.label, color = Theme.colors.onSurface)
            Text(description, color = Theme.colors.onBackgroundMuted)
        }
        Spacer(Modifier.width(12.dp))
        Icon(
            Icons.ChevronRight,
            contentDescription = null,
            tint = Theme.colors.onBackgroundMuted,
            modifier = Modifier.size(20.dp),
        )
    }
}

More screens from Pairel

by Alex Styl

Search screens and components

Screen flows

Onboarding Creating Account Logging In Logging Out Deleting & Deactivating Account Editing Profile Chatting & Sending Messages Adding & Creating Logging & Tracking Subscribing & Upgrading

Screens

Account Setup Add & Create Browse & Discover Call Charts Chat Bot Chat Detail Delete & Deactivate Account Edit Filter & Sort Goal & Task Home Login My Account & Profile Pricing Progress Settings & Preferences Signup Subscription & Paywall Trash & Archive User / Group Profile Verification Welcome & Get Started

UI Elements

Accordion Audio Visualizer Avatar Bottom Sheet Button Calendar Card Chat Bubble Checkbox Chip Dialog Divider Drawer Dropdown Menu Empty State Icon List Item Navigation Bar Progress Indicator Radio Button Scaffold Scrollbar Segmented Button Slider Switch Tab Bar Text Text Area Text Field Toast Tooltip