Scribd
Upload
49 views9 pages

Compose Dashboard UI for App

The document contains a Kotlin implementation of a Dashboard screen using Jetpack Compose for an Android application. It features a user profile section, profile completeness indicator, and sections for new matches and latest updates, along with a bottom navigation bar. The layout is designed to be responsive and visually appealing, utilizing various Compose components such as LazyRow, Card, and CircularProgressIndicator.

Uploaded by

mahaprasad.srib.iot
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
49 views9 pages

Compose Dashboard UI for App

The document contains a Kotlin implementation of a Dashboard screen using Jetpack Compose for an Android application. It features a user profile section, profile completeness indicator, and sections for new matches and latest updates, along with a bottom navigation bar. The layout is designed to be responsive and visually appealing, utilizing various Compose components such as LazyRow, Card, and CircularProgressIndicator.

Uploaded by

mahaprasad.srib.iot
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

package [Link].

dashboard

import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link].R

@Composable
fun DashboardScreen() {
Scaffold(
bottomBar = {
BottomNavigationBar() // Your custom bottom navigation bar
}
) { innerPadding ->
Column(
modifier = Modifier
.fillMaxSize()
.background([Link])
.verticalScroll(rememberScrollState())
.padding(
[Link],
[Link](),
[Link],
[Link]()
),

) {
// Top Profile Section
Row(
modifier = Modifier
.fillMaxWidth()
.padding([Link], [Link]),
verticalAlignment = [Link]
) {
ProfileImageWithProgress([Link].profile_pic, 0.78f)

Spacer(modifier = [Link]([Link]))

Column(modifier = [Link](1f)) {
Row(
horizontalArrangement = [Link],
verticalAlignment = [Link]
) {
Text("Asutosh Jena", fontWeight = [Link], fontSize
= [Link])
Image(
painter = painterResource(id = [Link]),
contentDescription = "verified",
[Link]([Link])
)
Image(
painter = painterResource(id = [Link].shield_imgg),
contentDescription = "shield",
[Link]([Link])
)
}
Text("(Ristaa ID)", fontSize = [Link], color = [Link])
Row(
horizontalArrangement = [Link],
verticalAlignment = [Link]
) {
Text(
"Free Member",
fontSize = [Link],
color = [Link],
modifier = [Link]([Link], [Link], [Link], [Link])
)

Button(
onClick = { /* Upgrade action */ },
contentPadding = PaddingValues(), // Remove default
padding to fill the gradient
colors = [Link](
containerColor = [Link] // Make the
button's own container transparent
),
modifier = Modifier
.background( // Apply the gradient to a background
modifier
brush = [Link](
colors = listOf(Color(0xFFFF6F00),
[Link])
),
shape = RoundedCornerShape([Link]) // Apply
shape to the background as well
)
.height([Link])
.width([Link])
.padding([Link], [Link])
) {
// Apply padding to the content inside the button
Text(
"UPGRADE",
color = [Link],
fontSize = [Link],
textAlign = [Link]
)
}
}
}

Spacer(modifier = [Link]([Link]))

// Profile completeness section


Text("Complete Your Profile for Better Response", fontWeight =
[Link])
Spacer(modifier = [Link]([Link]))
Row(
horizontalArrangement = [Link],
verticalAlignment = [Link]
) {
Text("Profile completeness", modifier = [Link](0.4f))
LinearProgressIndicator(
progress = { 0.78f },
gapSize = (-1).dp,
modifier = Modifier
.height([Link])
.weight(0.4f),
color = Color(0xFFFFA726),
strokeCap =
[Link],
)
Text("78%", modifier = [Link](0.2f))
}

Spacer(modifier = [Link]([Link]))

ProfileActionsLazyRowWithIndicator()

Spacer(modifier = [Link]([Link]))

// New Matches
SectionTitle("New Matches")
LazyRow {
items(10) {
MatchItem()
}
}

Spacer(modifier = [Link]([Link]))

// Latest Updates
SectionTitle("Latest Updates")
LazyRow {
items(10) {
MatchItem()
}
}

Spacer(modifier = [Link]([Link]))
Row(
modifier = [Link](),
horizontalArrangement = [Link],
verticalAlignment = [Link]
) {
Text("Who Viewed My Profile", fontWeight = [Link],
fontSize = [Link])
Text("View All", color = Color(0xFFFF6F00), fontSize = [Link])

Spacer(modifier = [Link]([Link]))
LazyRow {
items(10) {
MatchItem()
}
}

// Bottom Navigation Bar (Simplified)


//BottomNavigationBar()
}
}
}

@Composable
fun ProfileActionsLazyRowWithIndicator() {
val map = remember { // Use remember for the map if it doesn't change
frequently
hashMapOf(
"Add Profile Picture" to [Link].profile_pic,
"Verify Profile" to [Link],
"Add Family Details" to [Link].familly_pic,
"Add Horoscope Details" to [Link],
)
}
val itemsList = [Link]() // Convert map entries to a list for
easier indexing

val lazyListState = rememberLazyListState()

// More precise way to check if scrolling to end is possible for LazyListState


val canScrollForward by remember {
derivedStateOf {
[Link]
}
}

// State to track if the end is visible


val isScrolledToEnd by remember {
derivedStateOf {
val layoutInfo = [Link]
val visibleItemsInfo = [Link]
if ([Link]() || [Link]()) {
!canScrollForward
} else {
val lastVisibleItemIndex = [Link]().index
val totalItemsCount = [Link]
lastVisibleItemIndex == totalItemsCount - 1 &&
[Link]().offset +
[Link]().size <= [Link] + 2 // +2 for small
tolerance
}
}
}

val showIndicator = canScrollForward && !isScrolledToEnd

Box(
modifier = [Link]()
) {
LazyRow(
state = lazyListState,
horizontalArrangement = [Link]([Link]), // Use spacedBy for
consistent spacing
modifier = Modifier
.fillMaxWidth()
.padding(end = if (showIndicator) [Link] else [Link]), // Make space
for indicator
contentPadding = PaddingValues(horizontal = [Link])
) {
items(
count = [Link],
key = { index -> itemsList[index].key } // Provide a stable key if
items can change
) { index ->
val entry = itemsList[index]
UpdateProfileCards(title = [Link], image = [Link])
}
}

if (showIndicator) {
Icon(
imageVector = [Link],
contentDescription = "Scroll for more",
tint = [Link], // Or [Link]
modifier = Modifier
.size([Link])
.align([Link])
)
}
}
}

@Composable
fun UpdateProfileCards(title: String, image: Int) {
Card(
elevation = [Link]([Link]),
colors = [Link]([Link]),
modifier = Modifier
.size([Link])
.padding([Link])
) {
ProfileActionItem(title, image)
}
}

@Composable
fun SectionTitle(title: String) {
Row(
modifier = [Link](),
horizontalArrangement = [Link],
verticalAlignment = [Link]
) {
Text(title, fontWeight = [Link], fontSize = [Link])
Text("View All", color = Color(0xFFFF6F00), fontSize = [Link])
}
Spacer(modifier = [Link]([Link]))
}

@Composable
fun MatchItem() {
Column(
modifier = Modifier
.width([Link])
.padding([Link]),
horizontalAlignment = [Link]
) {
Box(
modifier = Modifier
.size([Link])
.background([Link], RoundedCornerShape([Link]))
)
Text("Full Name", fontSize = [Link], maxLines = 1)
Text("28 Yrs | 5ft 2in", fontSize = [Link], color = [Link])
}
}

@Composable
fun ProfileActionItem(label: String, icon: Int) {
Column(horizontalAlignment = [Link], modifier =
[Link]([Link])) {

Box(
modifier = Modifier
.size([Link])
.padding([Link])
.background([Link], RoundedCornerShape([Link])),
contentAlignment = [Link]
) {
Image(
painter = painterResource(id = icon),
contentDescription = label
)
}
Spacer(
modifier = Modifier
.height([Link])
.fillMaxWidth()
)
Text(
label,
fontSize = [Link],
textAlign = [Link],
fontWeight = [Link]
)

}
}

@Composable
fun BottomNavigationBar() {
Row(
modifier = Modifier
.fillMaxWidth()
.background([Link])
.padding(vertical = [Link]),
horizontalArrangement = [Link]
) {
Icon(
[Link],
contentDescription = "Home",
modifier = [Link]([Link]),
tint = Color(0xfff16a11)
)
Icon(
[Link],
contentDescription = "Profile",
modifier = [Link]([Link]),
tint = Color(0xfff16a11)
)
Icon(
[Link],
contentDescription = "Messages",
modifier = [Link]([Link]),
tint = Color(0xfff16a11)
)
Icon(
[Link],
contentDescription = "Notifications",
modifier = [Link]([Link]),
tint = Color(0xfff16a11)
)
Icon(
[Link],
modifier = [Link]([Link]),
contentDescription = "Settings",
tint = Color(0xfff16a11)
)
}
}

@Composable
fun ProfileImageWithProgress(
imageUrl: Int,
progress: Float,
imageSize: Dp = [Link],
indicatorStrokeWidth: Dp = [Link],
indicatorColor: Color = Color(0xFFFFA726),
trackColor: Color = [Link]
) {
val indicatorSize =
imageSize + (indicatorStrokeWidth * 2) // Ensure progress is outside the
image

Box(
contentAlignment = [Link],
modifier = [Link](indicatorSize) // Box takes the size of the
indicator
) {
// Background track for the circular progress (optional, but good for
visual clarity)
// This is essentially a disabled or full CircularProgressIndicator acting
as a track
CircularProgressIndicator(
progress = { 1f }, // Full circle for the track
modifier = [Link](indicatorSize),
color = trackColor,
strokeWidth = indicatorStrokeWidth
)

// The actual progress indicator


CircularProgressIndicator(
progress = { [Link](0f, 1f) }, // Progress value
modifier = [Link](indicatorSize),
color = indicatorColor,
strokeWidth = indicatorStrokeWidth,
// trackColor = [Link] // Make the default track of this one
transparent
// if you're using a separate track indicator above.
// For M3, the main 'color' is the indicator, 'trackColor' is its
background.
// If you have a separate track composable like above,
// then the trackColor for *this* specific progress can be Transparent.
// However, CircularProgressIndicator in M3 doesn't have a separate
trackColor
// that is different from the progress for the *same* indicator.
// The above track is a separate composable.
)

Image(
painter = painterResource(id = imageUrl),
contentDescription = "Profile Picture",
contentScale = [Link], // Crop to fill the circle
modifier = Modifier
.size(imageSize)
.clip(CircleShape) // Clip image to a circle
// Optional: Add a small border to the image itself if desired
// .border([Link], [Link], CircleShape)
)
}
}

@Preview
@Composable
fun DashboardPreview() {
DashboardScreen()
}

You might also like