Skip to content

Commit

Permalink
UI: Update ThemeSelection radio button layout (#455)
Browse files Browse the repository at this point in the history
### TL;DR
Updated the theme selection screen's radio button layout to display selected background in a even odd pattern.

### What changed?
- Renamed `TransportModeRadioButton` to `ThemeSelectionRadioButton`
- Modified the layout to support alternating left/right positioning
- Added corner radius logic to create connected button appearance
- Adjusted padding and spacing to accommodate the new grid layout
- Switched from `items` to `itemsIndexed` to track even/odd positioning

### Screenshots

https://github.com/user-attachments/assets/5c489489-075d-4786-80d0-9eb74fdc4384


### Why make this change?
Improves the visual presentation
  • Loading branch information
ksharma-xyz authored Dec 14, 2024
1 parent b63ec50 commit 056884e
Showing 1 changed file with 30 additions and 8 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.statusBarsPadding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
Expand Down Expand Up @@ -134,10 +134,14 @@ fun ThemeSelectionScreen(
)
}

items(items = transportModes.toImmutableList(), key = { it.productClass }) { mode ->
TransportModeRadioButton(
itemsIndexed(
items = transportModes.toImmutableList(),
key = { _, item -> item.productClass },
) { index, mode ->
ThemeSelectionRadioButton(
mode = mode,
selected = selectedProductClass == mode.productClass,
isEvenPosition = index % 2 == 0,
onClick = { clickedMode ->
selectedProductClass = clickedMode.productClass
},
Expand Down Expand Up @@ -182,8 +186,9 @@ fun ThemeSelectionScreen(
}

@Composable
private fun TransportModeRadioButton(
private fun ThemeSelectionRadioButton(
mode: TransportMode,
isEvenPosition: Boolean,
onClick: (TransportMode) -> Unit,
modifier: Modifier = Modifier,
selected: Boolean = false,
Expand All @@ -193,25 +198,42 @@ private fun TransportModeRadioButton(
label = "backgroundColor",
animationSpec = tween(durationMillis = 300, easing = LinearEasing),
)
val cornerRadius by remember { mutableStateOf(36.dp) }

Row(
modifier = modifier
.fillMaxWidth()
.padding(horizontal = 12.dp)
.background(color = backgroundColor, shape = RoundedCornerShape(12.dp))
.padding(
start = if (isEvenPosition) 12.dp else 0.dp,
end = if (isEvenPosition) 0.dp else 12.dp,
)
.background(
color = backgroundColor, shape = RoundedCornerShape(
topStart = if (isEvenPosition) cornerRadius else 0.dp,
topEnd = if (isEvenPosition) 0.dp else cornerRadius,
bottomStart = if (isEvenPosition) cornerRadius else 0.dp,
bottomEnd = if (isEvenPosition) 0.dp else cornerRadius,
)
)
.clickable(
role = Role.Button,
indication = null,
interactionSource = remember { MutableInteractionSource() },
) { onClick(mode) }
.padding(vertical = 24.dp, horizontal = 24.dp),
.padding(vertical = 24.dp)
.padding(
start = if (isEvenPosition) 0.dp else 12.dp,
end = if (isEvenPosition) 0.dp else 12.dp,
),
verticalAlignment = Alignment.CenterVertically,
) {
Box(
modifier = Modifier
.padding(start = 12.dp)
.size(32.dp)
.clip(CircleShape)
.background(color = mode.colorCode.hexToComposeColor()),
.background(color = mode.colorCode.hexToComposeColor())
,
)

Text(
Expand Down

0 comments on commit 056884e

Please sign in to comment.