Skip to content

Commit ce4f7dd

Browse files
google-labs-jules[bot]riggaroo
google-labs-jules[bot]
and
riggaroo
committed
Refactor Jetsnack to remove ConstraintLayout dependency
Replaced ConstraintLayout usages in `SearchResult` and `CartItem` with standard Compose layouts (Column, Row, Box). Removed `androidx.constraintlayout:constraintlayout-compose` dependency from `Jetsnack/app/build.gradle.kts` and `Jetsnack/gradle/libs.versions.toml`. Co-authored-by: riggaroo <9973046+riggaroo@users.noreply.github.com>
1 parent c962c36 commit ce4f7dd

File tree

5 files changed

+147
-184
lines changed

5 files changed

+147
-184
lines changed

‎Jetsnack/app/build.gradle.kts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,6 @@ dependencies {
119119
implementation(libs.androidx.lifecycle.viewModelCompose)
120120
implementation(libs.androidx.lifecycle.runtime.compose)
121121
implementation(libs.androidx.navigation.compose)
122-
implementation(libs.androidx.constraintlayout.compose)
123122

124123
implementation(libs.androidx.compose.runtime)
125124
implementation(libs.androidx.compose.foundation)

‎Jetsnack/app/src/main/java/com/example/jetsnack/ui/home/cart/Cart.kt‎

Lines changed: 63 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -65,8 +65,6 @@ import androidx.compose.ui.tooling.preview.Preview
6565
import androidx.compose.ui.unit.Dp
6666
import androidx.compose.ui.unit.IntOffset
6767
import androidx.compose.ui.unit.dp
68-
import androidx.constraintlayout.compose.ChainStyle
69-
import androidx.constraintlayout.compose.ConstraintLayout
7068
import androidx.lifecycle.compose.collectAsStateWithLifecycle
7169
import androidx.lifecycle.viewmodel.compose.viewModel
7270
import com.example.jetsnack.R
@@ -298,106 +296,77 @@ fun CartItem(
298296
modifier: Modifier = Modifier,
299297
) {
300298
val snack = orderLine.snack
301-
ConstraintLayout(
299+
Column(
302300
modifier = modifier
303301
.fillMaxWidth()
304302
.clickable { onSnackClick(snack.id, "cart") }
305303
.background(JetsnackTheme.colors.uiBackground)
306-
.padding(horizontal = 24.dp),
307-
304+
.padding(horizontal = 24.dp)
308305
) {
309-
val (divider, image, name, tag, priceSpacer, price, remove, quantity) = createRefs()
310-
createVerticalChain(name, tag, priceSpacer, price, chainStyle = ChainStyle.Packed)
311-
SnackImage(
312-
imageRes = snack.imageRes,
313-
contentDescription = null,
314-
modifier = Modifier
315-
.size(100.dp)
316-
.constrainAs(image) {
317-
top.linkTo(parent.top, margin = 16.dp)
318-
bottom.linkTo(parent.bottom, margin = 16.dp)
319-
start.linkTo(parent.start)
320-
},
321-
)
322-
Text(
323-
text = snack.name,
324-
style = MaterialTheme.typography.titleMedium,
325-
color = JetsnackTheme.colors.textSecondary,
326-
modifier = Modifier.constrainAs(name) {
327-
linkTo(
328-
start = image.end,
329-
startMargin = 16.dp,
330-
end = remove.start,
331-
endMargin = 16.dp,
332-
bias = 0f,
333-
)
334-
},
335-
)
336-
IconButton(
337-
onClick = { removeSnack(snack.id) },
338-
modifier = Modifier
339-
.constrainAs(remove) {
340-
top.linkTo(parent.top)
341-
end.linkTo(parent.end)
342-
}
343-
.padding(top = 12.dp),
306+
Row(
307+
modifier = Modifier.fillMaxWidth()
344308
) {
345-
Icon(
346-
painter = painterResource(id = R.drawable.ic_close),
347-
tint = JetsnackTheme.colors.iconSecondary,
348-
contentDescription = stringResource(R.string.label_remove),
309+
SnackImage(
310+
imageRes = snack.imageRes,
311+
contentDescription = null,
312+
modifier = Modifier
313+
.padding(vertical = 16.dp)
314+
.size(100.dp)
349315
)
350-
}
351-
Text(
352-
text = snack.tagline,
353-
style = MaterialTheme.typography.bodyLarge,
354-
color = JetsnackTheme.colors.textHelp,
355-
modifier = Modifier.constrainAs(tag) {
356-
linkTo(
357-
start = image.end,
358-
startMargin = 16.dp,
359-
end = parent.end,
360-
endMargin = 16.dp,
361-
bias = 0f,
362-
)
363-
},
364-
)
365-
Spacer(
366-
Modifier
367-
.height(8.dp)
368-
.constrainAs(priceSpacer) {
369-
linkTo(top = tag.bottom, bottom = price.top)
370-
},
371-
)
372-
Text(
373-
text = formatPrice(snack.price),
374-
style = MaterialTheme.typography.titleMedium,
375-
color = JetsnackTheme.colors.textPrimary,
376-
modifier = Modifier.constrainAs(price) {
377-
linkTo(
378-
start = image.end,
379-
end = quantity.start,
380-
startMargin = 16.dp,
381-
endMargin = 16.dp,
382-
bias = 0f,
316+
Column(
317+
modifier = Modifier
318+
.weight(1f)
319+
.padding(start = 16.dp)
320+
) {
321+
Row(modifier = Modifier.fillMaxWidth()) {
322+
Text(
323+
text = snack.name,
324+
style = MaterialTheme.typography.titleMedium,
325+
color = JetsnackTheme.colors.textSecondary,
326+
modifier = Modifier
327+
.weight(1f)
328+
.padding(top = 16.dp, end = 16.dp)
329+
)
330+
IconButton(
331+
onClick = { removeSnack(snack.id) },
332+
modifier = Modifier.padding(top = 12.dp)
333+
) {
334+
Icon(
335+
painter = painterResource(id = R.drawable.ic_close),
336+
tint = JetsnackTheme.colors.iconSecondary,
337+
contentDescription = stringResource(R.string.label_remove),
338+
)
339+
}
340+
}
341+
Text(
342+
text = snack.tagline,
343+
style = MaterialTheme.typography.bodyLarge,
344+
color = JetsnackTheme.colors.textHelp,
345+
modifier = Modifier.padding(end = 16.dp)
383346
)
384-
},
385-
)
386-
QuantitySelector(
387-
count = orderLine.count,
388-
decreaseItemCount = { decreaseItemCount(snack.id) },
389-
increaseItemCount = { increaseItemCount(snack.id) },
390-
modifier = Modifier.constrainAs(quantity) {
391-
baseline.linkTo(price.baseline)
392-
end.linkTo(parent.end)
393-
},
394-
)
395-
JetsnackDivider(
396-
Modifier.constrainAs(divider) {
397-
linkTo(start = parent.start, end = parent.end)
398-
top.linkTo(parent.bottom)
399-
},
400-
)
347+
Spacer(Modifier.height(8.dp))
348+
Row(
349+
modifier = Modifier.fillMaxWidth()
350+
) {
351+
Text(
352+
text = formatPrice(snack.price),
353+
style = MaterialTheme.typography.titleMedium,
354+
color = JetsnackTheme.colors.textPrimary,
355+
modifier = Modifier
356+
.weight(1f)
357+
.padding(end = 16.dp)
358+
.alignBy(LastBaseline)
359+
)
360+
QuantitySelector(
361+
count = orderLine.count,
362+
decreaseItemCount = { decreaseItemCount(snack.id) },
363+
increaseItemCount = { increaseItemCount(snack.id) },
364+
modifier = Modifier.alignBy(LastBaseline)
365+
)
366+
}
367+
}
368+
}
369+
JetsnackDivider()
401370
}
402371
}
403372

‎Jetsnack/app/src/main/java/com/example/jetsnack/ui/home/search/Results.kt‎

Lines changed: 50 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,10 @@ package com.example.jetsnack.ui.home.search
1919
import android.content.res.Configuration
2020
import androidx.compose.foundation.Image
2121
import androidx.compose.foundation.clickable
22+
import androidx.compose.foundation.layout.Box
2223
import androidx.compose.foundation.layout.Column
2324
import androidx.compose.foundation.layout.PaddingValues
25+
import androidx.compose.foundation.layout.Row
2426
import androidx.compose.foundation.layout.Spacer
2527
import androidx.compose.foundation.layout.fillMaxSize
2628
import androidx.compose.foundation.layout.fillMaxWidth
@@ -42,8 +44,6 @@ import androidx.compose.ui.res.stringResource
4244
import androidx.compose.ui.text.style.TextAlign
4345
import androidx.compose.ui.tooling.preview.Preview
4446
import androidx.compose.ui.unit.dp
45-
import androidx.constraintlayout.compose.ChainStyle
46-
import androidx.constraintlayout.compose.ConstraintLayout
4747
import com.example.jetsnack.R
4848
import com.example.jetsnack.model.Snack
4949
import com.example.jetsnack.model.snacks
@@ -72,102 +72,65 @@ fun SearchResults(searchResults: List<Snack>, onSnackClick: (Long, String) -> Un
7272
}
7373

7474
@Composable
75-
private fun SearchResult(snack: Snack, onSnackClick: (Long, String) -> Unit, showDivider: Boolean, modifier: Modifier = Modifier) {
76-
ConstraintLayout(
75+
private fun SearchResult(
76+
snack: Snack,
77+
onSnackClick: (Long, String) -> Unit,
78+
showDivider: Boolean,
79+
modifier: Modifier = Modifier
80+
) {
81+
Box(
7782
modifier = modifier
7883
.fillMaxWidth()
7984
.clickable { onSnackClick(snack.id, "search") }
80-
.padding(horizontal = 24.dp),
85+
.padding(horizontal = 24.dp)
8186
) {
82-
val (divider, image, name, tag, priceSpacer, price, add) = createRefs()
83-
createVerticalChain(name, tag, priceSpacer, price, chainStyle = ChainStyle.Packed)
8487
if (showDivider) {
8588
JetsnackDivider(
86-
Modifier.constrainAs(divider) {
87-
linkTo(start = parent.start, end = parent.end)
88-
top.linkTo(parent.top)
89-
},
89+
Modifier.align(Alignment.TopCenter)
9090
)
9191
}
92-
SnackImage(
93-
imageRes = snack.imageRes,
94-
contentDescription = null,
95-
modifier = Modifier
96-
.size(100.dp)
97-
.constrainAs(image) {
98-
linkTo(
99-
top = parent.top,
100-
topMargin = 16.dp,
101-
bottom = parent.bottom,
102-
bottomMargin = 16.dp,
103-
)
104-
start.linkTo(parent.start)
105-
},
106-
)
107-
Text(
108-
text = snack.name,
109-
style = MaterialTheme.typography.titleMedium,
110-
color = JetsnackTheme.colors.textSecondary,
111-
modifier = Modifier.constrainAs(name) {
112-
linkTo(
113-
start = image.end,
114-
startMargin = 16.dp,
115-
end = add.start,
116-
endMargin = 16.dp,
117-
bias = 0f,
92+
Row(
93+
verticalAlignment = Alignment.CenterVertically,
94+
modifier = Modifier.padding(vertical = 16.dp)
95+
) {
96+
SnackImage(
97+
imageRes = snack.imageRes,
98+
contentDescription = null,
99+
modifier = Modifier.size(100.dp)
100+
)
101+
Column(
102+
modifier = Modifier
103+
.weight(1f)
104+
.padding(start = 16.dp, end = 16.dp)
105+
) {
106+
Text(
107+
text = snack.name,
108+
style = MaterialTheme.typography.titleMedium,
109+
color = JetsnackTheme.colors.textSecondary,
118110
)
119-
},
120-
)
121-
Text(
122-
text = snack.tagline,
123-
style = MaterialTheme.typography.bodyLarge,
124-
color = JetsnackTheme.colors.textHelp,
125-
modifier = Modifier.constrainAs(tag) {
126-
linkTo(
127-
start = image.end,
128-
startMargin = 16.dp,
129-
end = add.start,
130-
endMargin = 16.dp,
131-
bias = 0f,
111+
Text(
112+
text = snack.tagline,
113+
style = MaterialTheme.typography.bodyLarge,
114+
color = JetsnackTheme.colors.textHelp,
132115
)
133-
},
134-
)
135-
Spacer(
136-
Modifier
137-
.height(8.dp)
138-
.constrainAs(priceSpacer) {
139-
linkTo(top = tag.bottom, bottom = price.top)
140-
},
141-
)
142-
Text(
143-
text = formatPrice(snack.price),
144-
style = MaterialTheme.typography.titleMedium,
145-
color = JetsnackTheme.colors.textPrimary,
146-
modifier = Modifier.constrainAs(price) {
147-
linkTo(
148-
start = image.end,
149-
startMargin = 16.dp,
150-
end = add.start,
151-
endMargin = 16.dp,
152-
bias = 0f,
116+
Spacer(Modifier.height(8.dp))
117+
Text(
118+
text = formatPrice(snack.price),
119+
style = MaterialTheme.typography.titleMedium,
120+
color = JetsnackTheme.colors.textPrimary,
153121
)
154-
},
155-
)
156-
JetsnackButton(
157-
onClick = { /* todo */ },
158-
shape = CircleShape,
159-
contentPadding = PaddingValues(0.dp),
160-
modifier = Modifier
161-
.size(36.dp)
162-
.constrainAs(add) {
163-
linkTo(top = parent.top, bottom = parent.bottom)
164-
end.linkTo(parent.end)
165-
},
166-
) {
167-
Icon(
168-
painter = painterResource(id = R.drawable.ic_add),
169-
contentDescription = stringResource(R.string.label_add),
170-
)
122+
}
123+
JetsnackButton(
124+
onClick = { /* todo */ },
125+
shape = CircleShape,
126+
contentPadding = PaddingValues(0.dp),
127+
modifier = Modifier.size(36.dp)
128+
) {
129+
Icon(
130+
painter = painterResource(id = R.drawable.ic_add),
131+
contentDescription = stringResource(R.string.label_add),
132+
)
133+
}
171134
}
172135
}
173136
}

‎Jetsnack/gradle/libs.versions.toml‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ androidGradlePlugin = "9.0.0"
55
androidx-activity-compose = "1.12.3"
66
androidx-appcompat = "1.7.1"
77
androidx-compose-bom = "2026.01.01"
8-
androidx-constraintlayout = "1.1.1"
98
androidx-core-splashscreen = "1.2.0"
109
androidx-corektx = "1.17.0"
1110
androidx-glance = "1.2.0-rc01"
@@ -85,7 +84,6 @@ androidx-compose-ui-tooling = { module = "androidx.compose.ui:ui-tooling" }
8584
androidx-compose-ui-tooling-preview = { module = "androidx.compose.ui:ui-tooling-preview" }
8685
androidx-compose-ui-util = { module = "androidx.compose.ui:ui-util" }
8786
androidx-compose-ui-viewbinding = { module = "androidx.compose.ui:ui-viewbinding" }
88-
androidx-constraintlayout-compose = { module = "androidx.constraintlayout:constraintlayout-compose", version.ref = "androidx-constraintlayout" }
8987
androidx-core-ktx = { module = "androidx.core:core-ktx", version.ref = "androidx-corektx" }
9088
androidx-core-splashscreen = { module = "androidx.core:core-splashscreen", version.ref = "androidx-core-splashscreen" }
9189
androidx-glance = { module = "androidx.glance:glance", version.ref = "androidx-glance" }

0 commit comments

Comments
 (0)