Skip to content

Replace Material Icons Library with Vector drawable XML Icons #112

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mofeejegi wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Replace Material Icons Library with Vector drawable XML Icons #112

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6755928
Replace Material Icons library with Vector drawable XML
mofeejegi Jan 5, 2026
7a99e08
Match Add to Cart icon on iOS
mofeejegi Jan 5, 2026
7a0776e
Revert redundant content descriptions for Add to Cart and View Cart i…
mofeejegi Jan 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion Fruitties/androidApp/build.gradle.kts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,6 @@ dependencies {
implementation(libs.compose.ui)
implementation(libs.compose.ui.tooling.preview)
implementation(libs.compose.material3)
implementation(libs.androidx.material.icons.core)
implementation(libs.androidx.activity.compose)
implementation(libs.androidx.paging.compose.android)
implementation(libs.androidx.lifecycle.viewmodel.compose)
Expand Down
7 changes: 3 additions & 4 deletions Fruitties/androidApp/src/main/java/com/example/fruitties/android/ui/CartScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,6 @@ import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.windowInsetsBottomHeight
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowBack
import androidx.compose.material3.CenterAlignedTopAppBar
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.FilledIconButton
Expand All @@ -50,6 +48,7 @@ import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
Expand Down Expand Up @@ -91,8 +90,8 @@ fun CartScreen(
navigationIcon = {
IconButton(onClick = onNavBarBack) {
Icon(
imageVector = Icons.AutoMirrored.Filled.ArrowBack,
contentDescription = "Navigate back",
painter = painterResource(R.drawable.ic_arrow_back_24px),
contentDescription = stringResource(R.string.navigate_back),
)
}
},
Expand Down
10 changes: 4 additions & 6 deletions Fruitties/androidApp/src/main/java/com/example/fruitties/android/ui/FruittieScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,6 @@ import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowBack
import androidx.compose.material.icons.filled.ShoppingCart
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.FloatingActionButton
Expand All @@ -22,6 +19,7 @@ import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import androidx.lifecycle.viewmodel.compose.viewModel
Expand Down Expand Up @@ -78,7 +76,7 @@ fun FruittieScreen(
navigationIcon = {
IconButton(onClick = onNavBarBack) {
Icon(
imageVector = Icons.AutoMirrored.Filled.ArrowBack,
painter = painterResource(R.drawable.ic_arrow_back_24px),
contentDescription = stringResource(R.string.navigate_back),
)
}
Expand All @@ -100,8 +98,8 @@ fun FruittieScreen(
verticalAlignment = Alignment.CenterVertically,
) {
Icon(
Icons.Filled.ShoppingCart,
contentDescription = null,
painter = painterResource(R.drawable.ic_add_shopping_cart_24px),
contentDescription = stringResource(R.string.add_to_cart),
Comment thread
mofeejegi marked this conversation as resolved.
Outdated
)
Spacer(Modifier.width(8.dp))
Text(text = stringResource(R.string.add_to_cart))
Expand Down
7 changes: 3 additions & 4 deletions Fruitties/androidApp/src/main/java/com/example/fruitties/android/ui/ListScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,6 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ShoppingCart
import androidx.compose.material3.Button
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.FloatingActionButton
Expand All @@ -45,6 +43,7 @@ import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.input.nestedscroll.nestedScroll
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
Expand Down Expand Up @@ -85,8 +84,8 @@ fun ListScreen(
verticalAlignment = Alignment.CenterVertically,
) {
Icon(
Icons.Filled.ShoppingCart,
contentDescription = null,
painter = painterResource(R.drawable.ic_shopping_cart_24px),
contentDescription = stringResource(R.string.view_cart),
Comment thread
mofeejegi marked this conversation as resolved.
Outdated
)
Spacer(Modifier.width(8.dp))
Text(text = stringResource(R.string.view_cart, uiState.cartItemCount))
Expand Down
9 changes: 9 additions & 0 deletions Fruitties/androidApp/src/main/res/drawable/ic_add_shopping_cart_24px.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="960"
android:viewportHeight="960">
<path
android:fillColor="@android:color/white"
android:pathData="M440,360L440,240L320,240L320,160L440,160L440,40L520,40L520,160L640,160L640,240L520,240L520,360L440,360ZM280,880Q247,880 223.5,856.5Q200,833 200,800Q200,767 223.5,743.5Q247,720 280,720Q313,720 336.5,743.5Q360,767 360,800Q360,833 336.5,856.5Q313,880 280,880ZM680,880Q647,880 623.5,856.5Q600,833 600,800Q600,767 623.5,743.5Q647,720 680,720Q713,720 736.5,743.5Q760,767 760,800Q760,833 736.5,856.5Q713,880 680,880ZM40,160L40,80L171,80L341,440L621,440Q621,440 621,440Q621,440 621,440L777,160L868,160L692,478Q681,498 662.5,509Q644,520 622,520L324,520L280,600Q280,600 280,600Q280,600 280,600L760,600L760,680L280,680Q235,680 211.5,641Q188,602 210,562L264,464L120,160L40,160Z"/>
Comment on lines +7 to +8

@gemini-code-assist gemini-code-assist Bot Jan 5, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

For better theme adaptability, I suggest removing the hardcoded android:fillColor. This allows the Icon composable to apply a tint based on the theme (e.g., LocalContentColor), making the vector drawable reusable and responsive to light/dark modes without modification.

Suggested change
android:fillColor="@android:color/white"
android:pathData="M440,360L440,240L320,240L320,160L440,160L440,40L520,40L520,160L640,160L640,240L520,240L520,360L440,360ZM280,880Q247,880 223.5,856.5Q200,833 200,800Q200,767 223.5,743.5Q247,720 280,720Q313,720 336.5,743.5Q360,767 360,800Q360,833 336.5,856.5Q313,880 280,880ZM680,880Q647,880 623.5,856.5Q600,833 600,800Q600,767 623.5,743.5Q647,720 680,720Q713,720 736.5,743.5Q760,767 760,800Q760,833 736.5,856.5Q713,880 680,880ZM40,160L40,80L171,80L341,440L621,440Q621,440 621,440Q621,440 621,440L777,160L868,160L692,478Q681,498 662.5,509Q644,520 622,520L324,520L280,600Q280,600 280,600Q280,600 280,600L760,600L760,680L280,680Q235,680 211.5,641Q188,602 210,562L264,464L120,160L40,160Z"/>
android:pathData="M440,360L440,240L320,240L320,160L440,160L440,40L520,40L520,160L640,160L640,240L520,240L520,360L440,360ZM280,880Q247,880 223.5,856.5Q200,833 200,800Q200,767 223.5,743.5Q247,720 280,720Q313,720 336.5,743.5Q360,767 360,800Q360,833 336.5,856.5Q313,880 280,880ZM680,880Q647,880 623.5,856.5Q600,833 600,800Q600,767 623.5,743.5Q647,720 680,720Q713,720 736.5,743.5Q760,767 760,800Q760,833 736.5,856.5Q713,880 680,880ZM40,160L40,80L171,80L341,440L621,440Q621,440 621,440Q621,440 621,440L777,160L868,160L692,478Q681,498 662.5,509Q644,520 622,520L324,520L280,600Q280,600 280,600Q280,600 280,600L760,600L760,680L280,680Q235,680 211.5,641Q188,602 210,562L264,464L120,160L40,160Z"/>

</vector>
10 changes: 10 additions & 0 deletions Fruitties/androidApp/src/main/res/drawable/ic_arrow_back_24px.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="960"
android:viewportHeight="960"
android:autoMirrored="true">
<path
android:fillColor="@android:color/white"
android:pathData="M313,520L537,744L480,800L160,480L480,160L537,216L313,440L800,440L800,520L313,520Z"/>
Comment on lines +8 to +9

@gemini-code-assist gemini-code-assist Bot Jan 5, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

For better theme adaptability, I suggest removing the hardcoded android:fillColor. This allows the Icon composable to apply a tint based on the theme (e.g., LocalContentColor), making the vector drawable reusable and responsive to light/dark modes without modification.

Suggested change
android:fillColor="@android:color/white"
android:pathData="M313,520L537,744L480,800L160,480L480,160L537,216L313,440L800,440L800,520L313,520Z"/>
android:pathData="M313,520L537,744L480,800L160,480L480,160L537,216L313,440L800,440L800,520L313,520Z"/>

</vector>
9 changes: 9 additions & 0 deletions Fruitties/androidApp/src/main/res/drawable/ic_shopping_cart_24px.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="960"
android:viewportHeight="960">
<path
android:fillColor="@android:color/white"
android:pathData="M280,880Q247,880 223.5,856.5Q200,833 200,800Q200,767 223.5,743.5Q247,720 280,720Q313,720 336.5,743.5Q360,767 360,800Q360,833 336.5,856.5Q313,880 280,880ZM680,880Q647,880 623.5,856.5Q600,833 600,800Q600,767 623.5,743.5Q647,720 680,720Q713,720 736.5,743.5Q760,767 760,800Q760,833 736.5,856.5Q713,880 680,880ZM208,160L798,160Q821,160 833,180.5Q845,201 834,222L692,478Q681,498 662.5,509Q644,520 622,520L324,520L280,600Q280,600 280,600Q280,600 280,600L760,600L760,680L280,680Q235,680 212,640.5Q189,601 210,562L264,464L120,160L40,160L40,80L170,80L208,160Z"/>
Comment on lines +7 to +8

@gemini-code-assist gemini-code-assist Bot Jan 5, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

For better theme adaptability, I suggest removing the hardcoded android:fillColor. This allows the Icon composable to apply a tint based on the theme (e.g., LocalContentColor), making the vector drawable reusable and responsive to light/dark modes without modification.

Suggested change
android:fillColor="@android:color/white"
android:pathData="M280,880Q247,880 223.5,856.5Q200,833 200,800Q200,767 223.5,743.5Q247,720 280,720Q313,720 336.5,743.5Q360,767 360,800Q360,833 336.5,856.5Q313,880 280,880ZM680,880Q647,880 623.5,856.5Q600,833 600,800Q600,767 623.5,743.5Q647,720 680,720Q713,720 736.5,743.5Q760,767 760,800Q760,833 736.5,856.5Q713,880 680,880ZM208,160L798,160Q821,160 833,180.5Q845,201 834,222L692,478Q681,498 662.5,509Q644,520 622,520L324,520L280,600Q280,600 280,600Q280,600 280,600L760,600L760,680L280,680Q235,680 212,640.5Q189,601 210,562L264,464L120,160L40,160L40,80L170,80L208,160Z"/>
android:pathData="M280,880Q247,880 223.5,856.5Q200,833 200,800Q200,767 223.5,743.5Q247,720 280,720Q313,720 336.5,743.5Q360,767 360,800Q360,833 336.5,856.5Q313,880 280,880ZM680,880Q647,880 623.5,856.5Q600,833 600,800Q600,767 623.5,743.5Q647,720 680,720Q713,720 736.5,743.5Q760,767 760,800Q760,833 736.5,856.5Q713,880 680,880ZM208,160L798,160Q821,160 833,180.5Q845,201 834,222L692,478Q681,498 662.5,509Q644,520 622,520L324,520L280,600Q280,600 280,600Q280,600 280,600L760,600L760,680L280,680Q235,680 212,640.5Q189,601 210,562L264,464L120,160L40,160L40,80L170,80L208,160Z"/>

</vector>
2 changes: 0 additions & 2 deletions Fruitties/gradle/libs.versions.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,14 +38,12 @@ kermit = "2.0.8"
runner = "1.7.0"
core = "1.7.0"
junit = "1.3.0"
materialIconsCore = "1.7.8"
material3 = "1.4.0"

[libraries]
androidx-activity-compose = { module = "androidx.activity:activity-compose", version.ref = "androidx-activityCompose" }
androidx-datastore-core-okio = { group = "androidx.datastore", name = "datastore-core-okio", version.ref = "dataStore" }
androidx-datastore-preferences-core = { group = "androidx.datastore", name = "datastore-preferences-core", version.ref = "dataStore" }
androidx-material-icons-core = { module = "androidx.compose.material:material-icons-core", version.ref = "materialIconsCore" }
androidx-paging-common = { module = "androidx.paging:paging-common", version.ref = "androidx-paging" }
androidx-paging-compose-android = { group = "androidx.paging", name = "paging-compose-android", version.ref = "pagingComposeAndroid" }
androidx-room-compiler = { group = "androidx.room", name = "room-compiler", version.ref = "androidx-room" }
Expand Down
2 changes: 1 addition & 1 deletion Fruitties/iosApp/iosApp/ui/FruittieScreen.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ struct FruittieScreen: View {
fruittieViewModel.addToCart(fruittie: content.fruittie)
}) {
HStack {
Image(systemName: "cart.fill")
Image(systemName: "cart.fill.badge.plus")
Text("Add to cart")
}
.padding()
Expand Down