Skip to content

Commit ddf4ce4

Browse files
JolandaVerhoefJolandaVerhoef
authored
[Jetchat] Update icons and remove material icons dependency (#1589)
This commit replaces the Material Icons dependency with local drawable resources for all icons used in the Jetchat 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. - Removing tint from `ic_baseline_person_24.xml` as it's applied in Compose.
2 parents fdcc4d8 + ee9f824 commit ddf4ce4

File tree

20 files changed

+125
-34
lines changed

20 files changed

+125
-34
lines changed

‎Jetchat/app/build.gradle.kts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,6 @@ dependencies {
106106

107107
implementation(libs.androidx.compose.foundation.layout)
108108
implementation(libs.androidx.compose.material3)
109-
implementation(libs.androidx.compose.material.iconsExtended)
110109
implementation(libs.androidx.compose.ui.tooling.preview)
111110
debugImplementation(libs.androidx.compose.ui.tooling)
112111
implementation(libs.androidx.compose.ui.util)

‎Jetchat/app/src/main/java/com/example/compose/jetchat/conversation/Conversation.kt‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -48,9 +48,6 @@ import androidx.compose.foundation.lazy.rememberLazyListState
4848
import androidx.compose.foundation.shape.CircleShape
4949
import androidx.compose.foundation.shape.RoundedCornerShape
5050
import androidx.compose.foundation.text.ClickableText
51-
import androidx.compose.material.icons.Icons
52-
import androidx.compose.material.icons.outlined.Info
53-
import androidx.compose.material.icons.outlined.Search
5451
import androidx.compose.material3.Divider
5552
import androidx.compose.material3.ExperimentalMaterial3Api
5653
import androidx.compose.material3.Icon
@@ -255,7 +252,7 @@ fun ChannelNameBar(
255252
actions = {
256253
// Search icon
257254
Icon(
258-
imageVector = Icons.Outlined.Search,
255+
painterResource(id = R.drawable.ic_search),
259256
tint = MaterialTheme.colorScheme.onSurfaceVariant,
260257
modifier = Modifier
261258
.clickable(onClick = { functionalityNotAvailablePopupShown = true })
@@ -265,7 +262,7 @@ fun ChannelNameBar(
265262
)
266263
// Info icon
267264
Icon(
268-
imageVector = Icons.Outlined.Info,
265+
painterResource(id = R.drawable.ic_info),
269266
tint = MaterialTheme.colorScheme.onSurfaceVariant,
270267
modifier = Modifier
271268
.clickable(onClick = { functionalityNotAvailablePopupShown = true })

‎Jetchat/app/src/main/java/com/example/compose/jetchat/conversation/JumpToBottom.kt‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,14 @@ import androidx.compose.animation.core.animateDp
2020
import androidx.compose.animation.core.updateTransition
2121
import androidx.compose.foundation.layout.height
2222
import androidx.compose.foundation.layout.offset
23-
import androidx.compose.material.icons.Icons
24-
import androidx.compose.material.icons.filled.ArrowDownward
2523
import androidx.compose.material3.ExtendedFloatingActionButton
2624
import androidx.compose.material3.Icon
2725
import androidx.compose.material3.MaterialTheme
2826
import androidx.compose.material3.Text
2927
import androidx.compose.runtime.Composable
3028
import androidx.compose.runtime.getValue
3129
import androidx.compose.ui.Modifier
30+
import androidx.compose.ui.res.painterResource
3231
import androidx.compose.ui.res.stringResource
3332
import androidx.compose.ui.tooling.preview.Preview
3433
import androidx.compose.ui.unit.dp
@@ -60,7 +59,7 @@ fun JumpToBottom(enabled: Boolean, onClicked: () -> Unit, modifier: Modifier = M
6059
ExtendedFloatingActionButton(
6160
icon = {
6261
Icon(
63-
imageVector = Icons.Filled.ArrowDownward,
62+
painter = painterResource(id = R.drawable.ic_arrow_downward),
6463
modifier = Modifier.height(18.dp),
6564
contentDescription = null,
6665
)

‎Jetchat/app/src/main/java/com/example/compose/jetchat/conversation/RecordButton.kt‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,6 @@ import androidx.compose.foundation.layout.aspectRatio
3131
import androidx.compose.foundation.layout.padding
3232
import androidx.compose.foundation.layout.sizeIn
3333
import androidx.compose.foundation.shape.CircleShape
34-
import androidx.compose.material.icons.Icons
35-
import androidx.compose.material.icons.filled.Mic
3634
import androidx.compose.material3.ExperimentalMaterial3Api
3735
import androidx.compose.material3.Icon
3836
import androidx.compose.material3.LocalContentColor
@@ -49,6 +47,7 @@ import androidx.compose.ui.Modifier
4947
import androidx.compose.ui.draw.clip
5048
import androidx.compose.ui.graphics.graphicsLayer
5149
import androidx.compose.ui.input.pointer.pointerInput
50+
import androidx.compose.ui.res.painterResource
5251
import androidx.compose.ui.res.stringResource
5352
import androidx.compose.ui.unit.Dp
5453
import androidx.compose.ui.unit.dp
@@ -114,7 +113,7 @@ fun RecordButton(
114113
state = tooltipState,
115114
) {
116115
Icon(
117-
Icons.Default.Mic,
116+
painterResource(id = R.drawable.ic_mic),
118117
contentDescription = stringResource(R.string.record_message),
119118
tint = iconColor.value,
120119
modifier = modifier

‎Jetchat/app/src/main/java/com/example/compose/jetchat/conversation/UserInput.kt‎

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -57,12 +57,6 @@ import androidx.compose.foundation.text.BasicTextField
5757
import androidx.compose.foundation.text.KeyboardActions
5858
import androidx.compose.foundation.text.KeyboardOptions
5959
import androidx.compose.foundation.verticalScroll
60-
import androidx.compose.material.icons.Icons
61-
import androidx.compose.material.icons.outlined.AlternateEmail
62-
import androidx.compose.material.icons.outlined.Duo
63-
import androidx.compose.material.icons.outlined.InsertPhoto
64-
import androidx.compose.material.icons.outlined.Mood
65-
import androidx.compose.material.icons.outlined.Place
6660
import androidx.compose.material3.Button
6761
import androidx.compose.material3.ButtonDefaults
6862
import androidx.compose.material3.Icon
@@ -93,9 +87,9 @@ import androidx.compose.ui.focus.onFocusChanged
9387
import androidx.compose.ui.graphics.Color
9488
import androidx.compose.ui.graphics.SolidColor
9589
import androidx.compose.ui.graphics.graphicsLayer
96-
import androidx.compose.ui.graphics.vector.ImageVector
9790
import androidx.compose.ui.layout.FirstBaseline
9891
import androidx.compose.ui.platform.LocalDensity
92+
import androidx.compose.ui.res.painterResource
9993
import androidx.compose.ui.res.stringResource
10094
import androidx.compose.ui.semantics.SemanticsPropertyKey
10195
import androidx.compose.ui.semantics.SemanticsPropertyReceiver
@@ -286,31 +280,31 @@ private fun UserInputSelector(
286280
) {
287281
InputSelectorButton(
288282
onClick = { onSelectorChange(InputSelector.EMOJI) },
289-
icon = Icons.Outlined.Mood,
283+
icon = painterResource(id = R.drawable.ic_mood),
290284
selected = currentInputSelector == InputSelector.EMOJI,
291285
description = stringResource(id = R.string.emoji_selector_bt_desc),
292286
)
293287
InputSelectorButton(
294288
onClick = { onSelectorChange(InputSelector.DM) },
295-
icon = Icons.Outlined.AlternateEmail,
289+
icon = painterResource(id = R.drawable.ic_alternate_email),
296290
selected = currentInputSelector == InputSelector.DM,
297291
description = stringResource(id = R.string.dm_desc),
298292
)
299293
InputSelectorButton(
300294
onClick = { onSelectorChange(InputSelector.PICTURE) },
301-
icon = Icons.Outlined.InsertPhoto,
295+
icon = painterResource(id = R.drawable.ic_insert_photo),
302296
selected = currentInputSelector == InputSelector.PICTURE,
303297
description = stringResource(id = R.string.attach_photo_desc),
304298
)
305299
InputSelectorButton(
306300
onClick = { onSelectorChange(InputSelector.MAP) },
307-
icon = Icons.Outlined.Place,
301+
icon = painterResource(id = R.drawable.ic_place),
308302
selected = currentInputSelector == InputSelector.MAP,
309303
description = stringResource(id = R.string.map_selector_desc),
310304
)
311305
InputSelectorButton(
312306
onClick = { onSelectorChange(InputSelector.PHONE) },
313-
icon = Icons.Outlined.Duo,
307+
icon = painterResource(id = R.drawable.ic_duo),
314308
selected = currentInputSelector == InputSelector.PHONE,
315309
description = stringResource(id = R.string.videochat_desc),
316310
)
@@ -352,7 +346,7 @@ private fun UserInputSelector(
352346
@Composable
353347
private fun InputSelectorButton(
354348
onClick: () -> Unit,
355-
icon: ImageVector,
349+
icon: androidx.compose.ui.graphics.painter.Painter,
356350
description: String,
357351
selected: Boolean,
358352
modifier: Modifier = Modifier,

‎Jetchat/app/src/main/java/com/example/compose/jetchat/profile/Profile.kt‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,6 @@ import androidx.compose.foundation.layout.widthIn
3333
import androidx.compose.foundation.rememberScrollState
3434
import androidx.compose.foundation.shape.CircleShape
3535
import androidx.compose.foundation.verticalScroll
36-
import androidx.compose.material.icons.Icons
37-
import androidx.compose.material.icons.outlined.Chat
38-
import androidx.compose.material.icons.outlined.Create
3936
import androidx.compose.material3.Divider
4037
import androidx.compose.material3.ExperimentalMaterial3Api
4138
import androidx.compose.material3.FloatingActionButton
@@ -245,7 +242,7 @@ fun ProfileFab(extended: Boolean, userIsMe: Boolean, modifier: Modifier = Modifi
245242
AnimatingFabContent(
246243
icon = {
247244
Icon(
248-
imageVector = if (userIsMe) Icons.Outlined.Create else Icons.Outlined.Chat,
245+
painter = painterResource(id = if (userIsMe) R.drawable.ic_create else R.drawable.ic_chat),
249246
contentDescription = stringResource(
250247
if (userIsMe) R.string.edit_profile else R.string.message,
251248
),

‎Jetchat/app/src/main/java/com/example/compose/jetchat/profile/ProfileFragment.kt‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,6 @@ import androidx.compose.foundation.clickable
2525
import androidx.compose.foundation.layout.height
2626
import androidx.compose.foundation.layout.padding
2727
import androidx.compose.foundation.layout.wrapContentSize
28-
import androidx.compose.material.icons.Icons
29-
import androidx.compose.material.icons.outlined.MoreVert
3028
import androidx.compose.material3.ExperimentalMaterial3Api
3129
import androidx.compose.material3.Icon
3230
import androidx.compose.material3.MaterialTheme
@@ -39,6 +37,7 @@ import androidx.compose.ui.ExperimentalComposeUiApi
3937
import androidx.compose.ui.Modifier
4038
import androidx.compose.ui.platform.ComposeView
4139
import androidx.compose.ui.platform.rememberNestedScrollInteropConnection
40+
import androidx.compose.ui.res.painterResource
4241
import androidx.compose.ui.res.stringResource
4342
import androidx.compose.ui.unit.dp
4443
import androidx.fragment.app.Fragment
@@ -82,7 +81,7 @@ class ProfileFragment : Fragment() {
8281
actions = {
8382
// More icon
8483
Icon(
85-
imageVector = Icons.Outlined.MoreVert,
84+
painter = painterResource(id = R.drawable.ic_more_vert),
8685
tint = MaterialTheme.colorScheme.onSurfaceVariant,
8786
modifier = Modifier
8887
.clickable(onClick = {

‎Jetchat/app/src/main/res/drawable/ic_alternate_email.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="M480,880Q397,880 324,848.5Q251,817 197,763Q143,709 111.5,636Q80,563 80,480Q80,397 111.5,324Q143,251 197,197Q251,143 324,111.5Q397,80 480,80Q563,80 636,111.5Q709,143 763,197Q817,251 848.5,324Q880,397 880,480L880,538Q880,597 839.5,638.5Q799,680 740,680Q705,680 674,665Q643,650 622,622Q593,651 556.5,665.5Q520,680 480,680Q397,680 338.5,621.5Q280,563 280,480Q280,397 338.5,338.5Q397,280 480,280Q563,280 621.5,338.5Q680,397 680,480L680,538Q680,564 697,582Q714,600 740,600Q766,600 783,582Q800,564 800,538L800,480Q800,346 707,253Q614,160 480,160Q346,160 253,253Q160,346 160,480Q160,614 253,707Q346,800 480,800L680,800L680,880L480,880ZM480,600Q530,600 565,565Q600,530 600,480Q600,430 565,395Q530,360 480,360Q430,360 395,395Q360,430 360,480Q360,530 395,565Q430,600 480,600Z"/>
9+
</vector>

‎Jetchat/app/src/main/res/drawable/ic_arrow_downward.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="M440,160L440,647L216,423L160,480L480,800L800,480L744,423L520,647L520,160L440,160Z"/>
9+
</vector>

‎Jetchat/app/src/main/res/drawable/ic_baseline_person_24.xml‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,7 @@
1818
android:width="24dp"
1919
android:height="24dp"
2020
android:viewportWidth="24"
21-
android:viewportHeight="24"
22-
android:tint="?attr/colorControlNormal">
21+
android:viewportHeight="24">
2322
<path
2423
android:fillColor="@color/blue500"
2524
android:pathData="M12,12c2.21,0 4,-1.79 4,-4s-1.79,-4 -4,-4 -4,1.79 -4,4 1.79,4 4,4zM12,14c-2.67,0 -8,1.34 -8,4v2h16v-2c0,-2.66 -5.33,-4 -8,-4z"/>

0 commit comments

Comments
 (0)