Skip to content

Commit

Permalink
Updated the memory manager design
Browse files Browse the repository at this point in the history
  • Loading branch information
Mihai-Cristian Condrea committed Jun 23, 2024
1 parent 430ba84 commit 7316dee
Showing 1 changed file with 160 additions and 64 deletions.
224 changes: 160 additions & 64 deletions app/src/main/kotlin/com/d4rk/cleaner/ui/memory/MemoryManagerComposable.kt
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,28 @@
package com.d4rk.cleaner.ui.memory

import androidx.compose.animation.animateContentSize
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.background
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.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.layout.wrapContentWidth
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.LazyRow
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.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowLeft
import androidx.compose.material.icons.filled.Info
Expand All @@ -39,10 +49,17 @@ import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
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.graphicsLayer
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.IntOffset
import androidx.compose.ui.unit.dp
import androidx.compose.ui.util.lerp
import androidx.lifecycle.viewmodel.compose.viewModel
import kotlin.math.absoluteValue

val StorageIcons = mapOf(
"Installed Apps" to Icons.Outlined.Apps ,
Expand All @@ -54,6 +71,7 @@ val StorageIcons = mapOf(
"Other Files" to Icons.Outlined.FolderOpen
)

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun MemoryManagerComposable() {
val viewModel = viewModel<MemoryManagerViewModel>()
Expand All @@ -63,13 +81,57 @@ fun MemoryManagerComposable() {

var listExpanded by remember { mutableStateOf(true) }

val pagerState = rememberPagerState {
2
}

LaunchedEffect(Unit) {
viewModel.updateStorageInfo(context)
viewModel.updateRamInfo(context)
}

Column {
StorageInfoCard(storageInfo = storageInfo)
Column(
modifier = Modifier.fillMaxSize()
) {
HorizontalPager(
state = pagerState , modifier = Modifier
.fillMaxWidth()
) { page ->
val pageOffset = (page - pagerState.currentPage).absoluteValue
val scale by animateFloatAsState(
targetValue = lerp(
start = 0.9f , stop = 1f , fraction = 1f - pageOffset.coerceIn(0 , 1)
) , label = ""
)

Card(modifier = Modifier.padding(16.dp)
.graphicsLayer {
scaleX = scale
scaleY = scale
alpha = lerp(
start = 0.5f , stop = 1f , fraction = 1f - pageOffset.coerceIn(0 , 1)
)
}
.offset {
val pageOffsetState = (page - pagerState.currentPage)
IntOffset(
x = (10.dp * pageOffsetState.toFloat()).roundToPx() , y = 0
)
}
.fillMaxWidth()) {
when (page) {
0 -> StorageInfoCard(storageInfo)
1 -> RamInfoCard(ramInfo)
}
}
}
DotsIndicator(
modifier = Modifier.align(Alignment.CenterHorizontally) ,
totalDots = 2 ,
selectedIndex = pagerState.currentPage ,
dotSize = 6.dp
)

Spacer(modifier = Modifier.height(16.dp))

Row(
Expand Down Expand Up @@ -97,80 +159,67 @@ fun MemoryManagerComposable() {
)
}
}


RamInfoCard(ramInfo)

Spacer(modifier = Modifier.height(16.dp))
}
}

@Composable
fun StorageInfoCard(storageInfo : StorageInfo) {
Card(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 16.dp) ,
elevation = CardDefaults.cardElevation(defaultElevation = 2.dp)
) {
Column(modifier = Modifier.padding(16.dp)) {
Text(
text = "Storage Information" ,
style = MaterialTheme.typography.headlineSmall ,
fontWeight = FontWeight.Bold
)
Spacer(modifier = Modifier.height(8.dp))
LinearProgressIndicator(
progress = { storageInfo.usedStorage.toFloat() / storageInfo.totalStorage.toFloat() } ,
modifier = Modifier
.fillMaxWidth()
.height(8.dp) ,
color = MaterialTheme.colorScheme.primary ,
)
Spacer(modifier = Modifier.height(8.dp))
StorageInfoText(label = "Used:" , size = storageInfo.usedStorage)
StorageInfoText(label = "Free:" , size = storageInfo.freeStorage)
StorageInfoText(label = "Total:" , size = storageInfo.totalStorage)
}
Column(modifier = Modifier.padding(16.dp)) {
Text(
text = "Storage Information" ,
style = MaterialTheme.typography.headlineSmall ,
fontWeight = FontWeight.Bold
)
Spacer(modifier = Modifier.height(8.dp))
LinearProgressIndicator(
progress = { storageInfo.usedStorage.toFloat() / storageInfo.totalStorage.toFloat() } ,
modifier = Modifier
.fillMaxWidth()
.height(8.dp) ,
color = MaterialTheme.colorScheme.primary ,
)
Spacer(modifier = Modifier.height(8.dp))
StorageInfoText(label = "Used:" , size = storageInfo.usedStorage)
StorageInfoText(label = "Free:" , size = storageInfo.freeStorage)
StorageInfoText(label = "Total:" , size = storageInfo.totalStorage)
}
}

@Composable
fun StorageBreakdownItem(icon: String, size: Long) {
fun StorageBreakdownItem(icon : String , size : Long) {
Card(
modifier = Modifier
.fillMaxWidth()
.padding(vertical = 4.dp), // Adjusted padding
.padding(vertical = 4.dp) ,
) {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(16.dp), // Increased padding for better visual balance
.padding(16.dp) ,
verticalAlignment = Alignment.CenterVertically
) {
// Filled Card for the Icon
Card(
modifier = Modifier.size(48.dp), // Adjust size as needed
colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.primaryContainer),
modifier = Modifier.size(48.dp) ,
colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.primaryContainer) ,
) {
Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
Box(modifier = Modifier.fillMaxSize() , contentAlignment = Alignment.Center) {
Icon(
imageVector = StorageIcons[icon] ?: Icons.Filled.Info,
contentDescription = icon,
tint = MaterialTheme.colorScheme.onPrimaryContainer // Use contrasting color
imageVector = StorageIcons[icon] ?: Icons.Filled.Info ,
contentDescription = icon ,
tint = MaterialTheme.colorScheme.onPrimaryContainer
)
}
}

Spacer(modifier = Modifier.padding(horizontal = 16.dp)) // Increased spacing
Spacer(modifier = Modifier.padding(horizontal = 16.dp))

Column {
Text(
text = icon,
style = MaterialTheme.typography.bodyMedium,
text = icon ,
style = MaterialTheme.typography.bodyMedium ,
fontWeight = FontWeight.Bold
)
Text(text = formatSize(size), style = MaterialTheme.typography.bodySmall)
Text(text = formatSize(size) , style = MaterialTheme.typography.bodySmall)
}
}
}
Expand All @@ -183,34 +232,81 @@ fun StorageInfoText(label : String , size : Long) {


@Composable
fun RamInfoCard(ramInfo: RamInfo) {
Card(elevation = CardDefaults.cardElevation(defaultElevation = 2.dp)) {
Column(modifier = Modifier.padding(16.dp)) {
Text("RAM Information", style = MaterialTheme.typography.headlineSmall, fontWeight = FontWeight.Bold)
Spacer(modifier = Modifier.height(8.dp))
StorageProgressBar(
StorageInfo(
totalStorage = ramInfo.totalRam,
usedStorage = ramInfo.usedRam,
freeStorage = ramInfo.availableRam
)
fun RamInfoCard(ramInfo : RamInfo) {
Column(modifier = Modifier.padding(16.dp)) {
Text(
"RAM Information" ,
style = MaterialTheme.typography.headlineSmall ,
fontWeight = FontWeight.Bold
)
Spacer(modifier = Modifier.height(8.dp))
StorageProgressBar(
StorageInfo(
totalStorage = ramInfo.totalRam ,
usedStorage = ramInfo.usedRam ,
freeStorage = ramInfo.availableRam
)
Spacer(modifier = Modifier.height(8.dp))
StorageInfoText(label = "Used RAM:", size = ramInfo.usedRam)
StorageInfoText(label = "Free RAM:", size = ramInfo.availableRam)
StorageInfoText(label = "Total RAM:", size = ramInfo.totalRam)
}
)
Spacer(modifier = Modifier.height(8.dp))
StorageInfoText(label = "Used RAM:" , size = ramInfo.usedRam)
StorageInfoText(label = "Free RAM:" , size = ramInfo.availableRam)
StorageInfoText(label = "Total RAM:" , size = ramInfo.totalRam)
}
}

@Composable
fun StorageProgressBar(storageInfo: StorageInfo) {
val progress = (storageInfo.usedStorage.toFloat() / storageInfo.totalStorage.toFloat()).coerceIn(0f, 1f)
fun StorageProgressBar(storageInfo : StorageInfo) {
val progress =
(storageInfo.usedStorage.toFloat() / storageInfo.totalStorage.toFloat()).coerceIn(
0f ,
1f
)
LinearProgressIndicator(
progress = { progress } ,
modifier = Modifier
.fillMaxWidth()
.height(8.dp) ,
color = MaterialTheme.colorScheme.primary ,
)
}

@Composable
fun DotsIndicator(
modifier : Modifier = Modifier ,
totalDots : Int ,
selectedIndex : Int ,
selectedColor : Color = MaterialTheme.colorScheme.primary ,
unSelectedColor : Color = Color.Gray ,
dotSize : Dp ,
) {
LazyRow(
modifier = modifier
.wrapContentWidth()
.wrapContentHeight()
) {
items(totalDots) { index ->
IndicatorDot(
color = if (index == selectedIndex) selectedColor else unSelectedColor ,
size = dotSize
)

if (index != totalDots - 1) {
Spacer(modifier = Modifier.padding(horizontal = 2.dp))
}
}
}
}

@Composable
fun IndicatorDot(
modifier : Modifier = Modifier ,
size : Dp ,
color : Color ,
) {
Box(
modifier = modifier
.size(size)
.clip(CircleShape)
.background(color)
)
}

0 comments on commit 7316dee

Please sign in to comment.