Skip to content

Commit fdcc4d8

Browse files
JolandaVerhoefJolandaVerhoef
authored
[Reply] Update icons and remove material icons dependency (#1588)
This commit replaces the Material Icons dependency with local drawable resources for all icons used in the Reply sample. This involves: - Adding new vector drawable XML files for each icon. - Updating composable functions to use painterResource for loading these local drawables instead of relying on the Icons object from the material-icons-extended library. - Removing the material-icons-extended dependency from the app's build.gradle.kts file. - Adjusting the ReplyTopLevelDestination data class to accept `Any` for icon resources to accommodate painter resources. Did a visual check before/after to validate the icons are okay.
2 parents b73fc55 + 62e5c17 commit fdcc4d8

19 files changed

+149
-52
lines changed

‎Reply/app/build.gradle.kts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,6 @@ dependencies {
114114
implementation("com.google.accompanist:accompanist-adaptive:0.26.2-beta")
115115

116116
implementation(libs.androidx.compose.materialWindow)
117-
implementation(libs.androidx.compose.material.iconsExtended)
118117

119118
implementation(libs.androidx.lifecycle.runtime)
120119
implementation(libs.androidx.lifecycle.viewModelCompose)

‎Reply/app/src/main/java/com/example/reply/ui/ReplyListContent.kt‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,6 @@ import androidx.compose.foundation.lazy.LazyColumn
3232
import androidx.compose.foundation.lazy.LazyListState
3333
import androidx.compose.foundation.lazy.items
3434
import androidx.compose.foundation.lazy.rememberLazyListState
35-
import androidx.compose.material.icons.Icons
36-
import androidx.compose.material.icons.filled.Edit
3735
import androidx.compose.material3.ExtendedFloatingActionButton
3836
import androidx.compose.material3.Icon
3937
import androidx.compose.material3.MaterialTheme
@@ -42,6 +40,7 @@ import androidx.compose.runtime.Composable
4240
import androidx.compose.runtime.LaunchedEffect
4341
import androidx.compose.ui.Alignment
4442
import androidx.compose.ui.Modifier
43+
import androidx.compose.ui.res.painterResource
4544
import androidx.compose.ui.res.stringResource
4645
import androidx.compose.ui.unit.dp
4746
import androidx.window.layout.DisplayFeature
@@ -115,7 +114,9 @@ fun ReplyInboxScreen(
115114
if (navigationType == ReplyNavigationType.BOTTOM_NAVIGATION) {
116115
ExtendedFloatingActionButton(
117116
text = { Text(text = stringResource(id = R.string.compose)) },
118-
icon = { Icon(Icons.Default.Edit, stringResource(id = R.string.compose)) },
117+
icon = {
118+
Icon(painter = painterResource(id = R.drawable.ic_edit), contentDescription = stringResource(id = R.string.compose))
119+
},
119120
onClick = { /*TODO*/ },
120121
modifier = Modifier
121122
.align(Alignment.BottomEnd)

‎Reply/app/src/main/java/com/example/reply/ui/components/ReplyAppBars.kt‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,6 @@ import androidx.compose.foundation.layout.padding
2525
import androidx.compose.foundation.layout.size
2626
import androidx.compose.foundation.lazy.LazyColumn
2727
import androidx.compose.foundation.lazy.items
28-
import androidx.compose.material.icons.Icons
29-
import androidx.compose.material.icons.automirrored.filled.ArrowBack
30-
import androidx.compose.material.icons.filled.MoreVert
31-
import androidx.compose.material.icons.filled.Search
3228
import androidx.compose.material3.DockedSearchBar
3329
import androidx.compose.material3.ExperimentalMaterial3Api
3430
import androidx.compose.material3.FilledIconButton
@@ -50,6 +46,7 @@ import androidx.compose.runtime.remember
5046
import androidx.compose.runtime.setValue
5147
import androidx.compose.ui.Alignment
5248
import androidx.compose.ui.Modifier
49+
import androidx.compose.ui.res.painterResource
5350
import androidx.compose.ui.res.stringResource
5451
import androidx.compose.ui.unit.dp
5552
import com.example.reply.R
@@ -99,7 +96,7 @@ fun ReplyDockedSearchBar(emails: List<Email>, onSearchItemSelected: (Email) -> U
9996
leadingIcon = {
10097
if (expanded) {
10198
Icon(
102-
imageVector = Icons.AutoMirrored.Filled.ArrowBack,
99+
painter = painterResource(id = R.drawable.ic_arrow_back),
103100
contentDescription = stringResource(id = R.string.back_button),
104101
modifier = Modifier
105102
.padding(start = 16.dp)
@@ -110,7 +107,7 @@ fun ReplyDockedSearchBar(emails: List<Email>, onSearchItemSelected: (Email) -> U
110107
)
111108
} else {
112109
Icon(
113-
imageVector = Icons.Default.Search,
110+
painter = painterResource(id = R.drawable.ic_search),
114111
contentDescription = stringResource(id = R.string.search),
115112
modifier = Modifier.padding(start = 16.dp),
116113
)
@@ -209,7 +206,7 @@ fun EmailDetailAppBar(email: Email, isFullScreen: Boolean, modifier: Modifier =
209206
),
210207
) {
211208
Icon(
212-
imageVector = Icons.AutoMirrored.Filled.ArrowBack,
209+
painter = painterResource(id = R.drawable.ic_arrow_back),
213210
contentDescription = stringResource(id = R.string.back_button),
214211
modifier = Modifier.size(14.dp),
215212
)
@@ -221,7 +218,7 @@ fun EmailDetailAppBar(email: Email, isFullScreen: Boolean, modifier: Modifier =
221218
onClick = { /*TODO*/ },
222219
) {
223220
Icon(
224-
imageVector = Icons.Default.MoreVert,
221+
painter = painterResource(id = R.drawable.ic_more_vert),
225222
contentDescription = stringResource(id = R.string.more_options_button),
226223
tint = MaterialTheme.colorScheme.onSurfaceVariant,
227224
)

‎Reply/app/src/main/java/com/example/reply/ui/components/ReplyEmailListItem.kt‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,6 @@ import androidx.compose.foundation.layout.fillMaxWidth
3030
import androidx.compose.foundation.layout.padding
3131
import androidx.compose.foundation.layout.size
3232
import androidx.compose.foundation.shape.CircleShape
33-
import androidx.compose.material.icons.Icons
34-
import androidx.compose.material.icons.filled.Check
35-
import androidx.compose.material.icons.filled.StarBorder
3633
import androidx.compose.material3.Card
3734
import androidx.compose.material3.CardDefaults
3835
import androidx.compose.material3.Icon
@@ -44,10 +41,12 @@ import androidx.compose.runtime.remember
4441
import androidx.compose.ui.Alignment
4542
import androidx.compose.ui.Modifier
4643
import androidx.compose.ui.draw.clip
44+
import androidx.compose.ui.res.painterResource
4745
import androidx.compose.ui.semantics.selected
4846
import androidx.compose.ui.semantics.semantics
4947
import androidx.compose.ui.text.style.TextOverflow
5048
import androidx.compose.ui.unit.dp
49+
import com.example.reply.R
5150
import com.example.reply.data.Email
5251

5352
@OptIn(ExperimentalFoundationApi::class)
@@ -86,8 +85,8 @@ fun ReplyEmailListItem(
8685
interactionSource = remember { MutableInteractionSource() },
8786
indication = null,
8887
) { toggleSelection(email.id) }
89-
AnimatedContent(targetState = isSelected, label = "avatar") { selected ->
90-
if (selected) {
88+
AnimatedContent(targetState = isSelected, label = "avatar") {
89+
if (it) {
9190
SelectedProfileImage(clickModifier)
9291
} else {
9392
ReplyProfileImage(
@@ -120,7 +119,7 @@ fun ReplyEmailListItem(
120119
.background(MaterialTheme.colorScheme.surfaceContainerHigh),
121120
) {
122121
Icon(
123-
imageVector = Icons.Default.StarBorder,
122+
painter = painterResource(id = R.drawable.ic_star_border),
124123
contentDescription = "Favorite",
125124
tint = MaterialTheme.colorScheme.outline,
126125
)
@@ -151,7 +150,7 @@ fun SelectedProfileImage(modifier: Modifier = Modifier) {
151150
.background(MaterialTheme.colorScheme.primary),
152151
) {
153152
Icon(
154-
Icons.Default.Check,
153+
painter = painterResource(id = R.drawable.ic_check),
155154
contentDescription = null,
156155
modifier = Modifier
157156
.size(24.dp)

‎Reply/app/src/main/java/com/example/reply/ui/components/ReplyEmailThreadItem.kt‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,6 @@ import androidx.compose.foundation.layout.Row
2323
import androidx.compose.foundation.layout.fillMaxWidth
2424
import androidx.compose.foundation.layout.padding
2525
import androidx.compose.foundation.shape.CircleShape
26-
import androidx.compose.material.icons.Icons
27-
import androidx.compose.material.icons.filled.StarBorder
2826
import androidx.compose.material3.Button
2927
import androidx.compose.material3.ButtonDefaults
3028
import androidx.compose.material3.Card
@@ -36,6 +34,7 @@ import androidx.compose.material3.Text
3634
import androidx.compose.runtime.Composable
3735
import androidx.compose.ui.Modifier
3836
import androidx.compose.ui.draw.clip
37+
import androidx.compose.ui.res.painterResource
3938
import androidx.compose.ui.res.stringResource
4039
import androidx.compose.ui.unit.dp
4140
import com.example.reply.R
@@ -82,7 +81,7 @@ fun ReplyEmailThreadItem(email: Email, modifier: Modifier = Modifier) {
8281
.background(MaterialTheme.colorScheme.surfaceContainer),
8382
) {
8483
Icon(
85-
imageVector = Icons.Default.StarBorder,
84+
painter = painterResource(id = R.drawable.ic_star_border),
8685
contentDescription = "Favorite",
8786
tint = MaterialTheme.colorScheme.outline,
8887
)

‎Reply/app/src/main/java/com/example/reply/ui/navigation/ReplyNavigationActions.kt‎

Lines changed: 11 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,6 @@
1616

1717
package com.example.reply.ui.navigation
1818

19-
import androidx.compose.material.icons.Icons
20-
import androidx.compose.material.icons.automirrored.filled.Article
21-
import androidx.compose.material.icons.filled.Inbox
22-
import androidx.compose.material.icons.filled.People
23-
import androidx.compose.material.icons.outlined.ChatBubbleOutline
24-
import androidx.compose.ui.graphics.vector.ImageVector
2519
import androidx.navigation.NavGraph.Companion.findStartDestination
2620
import androidx.navigation.NavHostController
2721
import com.example.reply.R
@@ -34,7 +28,7 @@ sealed interface Route {
3428
@Serializable data object Groups : Route
3529
}
3630

37-
data class ReplyTopLevelDestination(val route: Route, val selectedIcon: ImageVector, val unselectedIcon: ImageVector, val iconTextId: Int)
31+
data class ReplyTopLevelDestination(val route: Route, val selectedIcon: Int, val unselectedIcon: Int, val iconTextId: Int)
3832

3933
class ReplyNavigationActions(private val navController: NavHostController) {
4034

@@ -58,27 +52,27 @@ class ReplyNavigationActions(private val navController: NavHostController) {
5852
val TOP_LEVEL_DESTINATIONS = listOf(
5953
ReplyTopLevelDestination(
6054
route = Route.Inbox,
61-
selectedIcon = Icons.Default.Inbox,
62-
unselectedIcon = Icons.Default.Inbox,
55+
selectedIcon = R.drawable.ic_inbox,
56+
unselectedIcon = R.drawable.ic_inbox,
6357
iconTextId = R.string.tab_inbox,
6458
),
6559
ReplyTopLevelDestination(
6660
route = Route.Articles,
67-
selectedIcon = Icons.AutoMirrored.Filled.Article,
68-
unselectedIcon = Icons.AutoMirrored.Filled.Article,
61+
selectedIcon = R.drawable.ic_article,
62+
unselectedIcon = R.drawable.ic_article,
6963
iconTextId = R.string.tab_article,
7064
),
7165
ReplyTopLevelDestination(
7266
route = Route.DirectMessages,
73-
selectedIcon = Icons.Outlined.ChatBubbleOutline,
74-
unselectedIcon = Icons.Outlined.ChatBubbleOutline,
75-
iconTextId = R.string.tab_inbox,
67+
selectedIcon = R.drawable.ic_chat_bubble_outline,
68+
unselectedIcon = R.drawable.ic_chat_bubble_outline,
69+
iconTextId = R.string.tab_dm,
7670
),
7771
ReplyTopLevelDestination(
7872
route = Route.Groups,
79-
selectedIcon = Icons.Default.People,
80-
unselectedIcon = Icons.Default.People,
81-
iconTextId = R.string.tab_article,
73+
selectedIcon = R.drawable.ic_group,
74+
unselectedIcon = R.drawable.ic_group,
75+
iconTextId = R.string.tab_groups,
8276
),
8377

8478
)

‎Reply/app/src/main/java/com/example/reply/ui/navigation/ReplyNavigationComponents.kt‎

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,6 @@ import androidx.compose.foundation.layout.size
3030
import androidx.compose.foundation.layout.sizeIn
3131
import androidx.compose.foundation.rememberScrollState
3232
import androidx.compose.foundation.verticalScroll
33-
import androidx.compose.material.icons.Icons
34-
import androidx.compose.material.icons.automirrored.filled.MenuOpen
35-
import androidx.compose.material.icons.filled.Edit
36-
import androidx.compose.material.icons.filled.Menu
3733
import androidx.compose.material3.DrawerValue
3834
import androidx.compose.material3.ExtendedFloatingActionButton
3935
import androidx.compose.material3.FloatingActionButton
@@ -65,6 +61,7 @@ import androidx.compose.ui.layout.Measurable
6561
import androidx.compose.ui.layout.MeasurePolicy
6662
import androidx.compose.ui.layout.layoutId
6763
import androidx.compose.ui.platform.LocalDensity
64+
import androidx.compose.ui.res.painterResource
6865
import androidx.compose.ui.res.stringResource
6966
import androidx.compose.ui.text.style.TextAlign
7067
import androidx.compose.ui.unit.dp
@@ -191,7 +188,7 @@ fun ReplyNavigationRail(
191188
onClick = onDrawerClicked,
192189
icon = {
193190
Icon(
194-
imageVector = Icons.Default.Menu,
191+
painter = painterResource(id = R.drawable.ic_menu),
195192
contentDescription = stringResource(id = R.string.navigation_drawer),
196193
)
197194
},
@@ -203,7 +200,7 @@ fun ReplyNavigationRail(
203200
contentColor = MaterialTheme.colorScheme.onTertiaryContainer,
204201
) {
205202
Icon(
206-
imageVector = Icons.Default.Edit,
203+
painter = painterResource(id = R.drawable.ic_edit),
207204
contentDescription = stringResource(id = R.string.compose),
208205
modifier = Modifier.size(18.dp),
209206
)
@@ -223,7 +220,7 @@ fun ReplyNavigationRail(
223220
onClick = { navigateToTopLevelDestination(replyDestination) },
224221
icon = {
225222
Icon(
226-
imageVector = replyDestination.selectedIcon,
223+
painter = painterResource(id = replyDestination.selectedIcon),
227224
contentDescription = stringResource(
228225
id = replyDestination.iconTextId,
229226
),
@@ -244,7 +241,7 @@ fun ReplyBottomNavigationBar(currentDestination: NavDestination?, navigateToTopL
244241
onClick = { navigateToTopLevelDestination(replyDestination) },
245242
icon = {
246243
Icon(
247-
imageVector = replyDestination.selectedIcon,
244+
painter = painterResource(id = replyDestination.selectedIcon),
248245
contentDescription = stringResource(id = replyDestination.iconTextId),
249246
)
250247
},
@@ -290,7 +287,7 @@ fun PermanentNavigationDrawerContent(
290287
contentColor = MaterialTheme.colorScheme.onTertiaryContainer,
291288
) {
292289
Icon(
293-
imageVector = Icons.Default.Edit,
290+
painter = painterResource(id = R.drawable.ic_edit),
294291
contentDescription = stringResource(id = R.string.compose),
295292
modifier = Modifier.size(24.dp),
296293
)
@@ -319,7 +316,7 @@ fun PermanentNavigationDrawerContent(
319316
},
320317
icon = {
321318
Icon(
322-
imageVector = replyDestination.selectedIcon,
319+
painter = painterResource(id = replyDestination.selectedIcon),
323320
contentDescription = stringResource(
324321
id = replyDestination.iconTextId,
325322
),
@@ -371,7 +368,7 @@ fun ModalNavigationDrawerContent(
371368
)
372369
IconButton(onClick = onDrawerClicked) {
373370
Icon(
374-
imageVector = Icons.AutoMirrored.Filled.MenuOpen,
371+
painter = painterResource(id = R.drawable.ic_menu_open),
375372
contentDescription = stringResource(id = R.string.close_drawer),
376373
)
377374
}
@@ -386,7 +383,7 @@ fun ModalNavigationDrawerContent(
386383
contentColor = MaterialTheme.colorScheme.onTertiaryContainer,
387384
) {
388385
Icon(
389-
imageVector = Icons.Default.Edit,
386+
painter = painterResource(id = R.drawable.ic_edit),
390387
contentDescription = stringResource(id = R.string.compose),
391388
modifier = Modifier.size(18.dp),
392389
)
@@ -415,7 +412,7 @@ fun ModalNavigationDrawerContent(
415412
},
416413
icon = {
417414
Icon(
418-
imageVector = replyDestination.selectedIcon,
415+
painter = painterResource(id = replyDestination.selectedIcon),
419416
contentDescription = stringResource(
420417
id = replyDestination.iconTextId,
421418
),

‎Reply/app/src/main/res/drawable/ic_arrow_back.xml‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<vector xmlns:android="http://schemas.android.com/apk/res/android"
2+
android:width="24dp"
3+
android:height="24dp"
4+
android:viewportWidth="960"
5+
android:viewportHeight="960"
6+
android:autoMirrored="true">
7+
<path
8+
android:fillColor="@android:color/white"
9+
android:pathData="M313,520L537,744L480,800L160,480L480,160L537,216L313,440L800,440L800,520L313,520Z"/>
10+
</vector>

‎Reply/app/src/main/res/drawable/ic_article.xml‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<vector xmlns:android="http://schemas.android.com/apk/res/android"
2+
android:width="24dp"
3+
android:height="24dp"
4+
android:viewportWidth="960"
5+
android:viewportHeight="960"
6+
android:autoMirrored="true">
7+
<path
8+
android:fillColor="@android:color/white"
9+
android:pathData="M200,840Q167,840 143.5,816.5Q120,793 120,760L120,200Q120,167 143.5,143.5Q167,120 200,120L760,120Q793,120 816.5,143.5Q840,167 840,200L840,760Q840,793 816.5,816.5Q793,840 760,840L200,840ZM280,680L560,680L560,600L280,600L280,680ZM280,520L680,520L680,440L280,440L280,520ZM280,360L680,360L680,280L280,280L280,360Z"/>
10+
</vector>

‎Reply/app/src/main/res/drawable/ic_chat_bubble_outline.xml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<vector xmlns:android="http://schemas.android.com/apk/res/android"
2+
android:width="24dp"
3+
android:height="24dp"
4+
android:viewportWidth="960"
5+
android:viewportHeight="960">
6+
<path
7+
android:fillColor="@android:color/white"
8+
android:pathData="M80,880L80,160Q80,127 103.5,103.5Q127,80 160,80L800,80Q833,80 856.5,103.5Q880,127 880,160L880,640Q880,673 856.5,696.5Q833,720 800,720L240,720L80,880ZM206,640L800,640Q800,640 800,640Q800,640 800,640L800,160Q800,160 800,160Q800,160 800,160L160,160Q160,160 160,160Q160,160 160,160L160,685L206,640ZM160,640L160,640L160,160Q160,160 160,160Q160,160 160,160L160,160Q160,160 160,160Q160,160 160,160L160,640Q160,640 160,640Q160,640 160,640Z"/>
9+
</vector>

0 commit comments

Comments
 (0)