Add topic icon on topic chips

Bug: 228070748
Change-Id: I736f4029bed84cf1d5552c5afa7ba07896e86602

feature-foryou/src/main/java/com/google/samples/apps/nowinandroid/feature/foryou/ForYouScreen.kt

@@ -30,6 +30,7 @@ import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.only
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.safeDrawing
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.layout.windowInsetsPadding
 import androidx.compose.foundation.layout.wrapContentSize
@@ -56,6 +57,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalDensity
+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
@@ -64,6 +66,7 @@ import androidx.compose.ui.unit.max
 import androidx.compose.ui.unit.sp
 import androidx.core.content.ContextCompat.startActivity
 import androidx.hilt.navigation.compose.hiltViewModel
+import coil.compose.AsyncImage
 import com.google.samples.apps.nowinandroid.core.model.data.Author
 import com.google.samples.apps.nowinandroid.core.model.data.FollowableAuthor
 import com.google.samples.apps.nowinandroid.core.model.data.FollowableTopic
@@ -275,6 +278,7 @@ private fun TopicSelection(
             SingleTopicButton(
                 name = it.topic.name,
                 topicId = it.topic.id,
+                imageUrl = it.topic.imageUrl,
                 isSelected = it.isFollowed,
                 onClick = onTopicCheckedChanged
             )
@@ -287,6 +291,7 @@ private fun TopicSelection(
 private fun SingleTopicButton(
     name: String,
     topicId: String,
+    imageUrl: String,
     isSelected: Boolean,
     onClick: (String, Boolean) -> Unit
 ) {
@@ -304,6 +309,9 @@ private fun SingleTopicButton(
             verticalAlignment = Alignment.CenterVertically,
             modifier = Modifier.padding(start = 12.dp, end = 8.dp)
         ) {
+            TopicIcon(
+                imageUrl = imageUrl
+            )
             Text(
                 text = name,
                 style = NiaTypography.titleSmall,
@@ -326,6 +334,22 @@ private fun SingleTopicButton(
     }
 }
 
+@Composable
+fun TopicIcon(
+    modifier: Modifier = Modifier,
+    imageUrl: String
+) {
+    AsyncImage(
+        // TODO b/228077205, show loading image visual instead of static placeholder
+        placeholder = painterResource(R.drawable.ic_icon_placeholder),
+        model = imageUrl,
+        contentDescription = null, // decorative
+        modifier = modifier
+            .padding(10.dp)
+            .size(32.dp)
+    )
+}
+
 @Preview
 @Composable
 fun ForYouScreenLoading() {

feature-foryou/src/main/res/drawable/ic_icon_placeholder.xml

@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="utf-8"?><!--
+    ~ Copyright 2022 The Android Open Source Project
+    ~
+    ~ Licensed under the Apache License, Version 2.0 (the "License");
+    ~ you may not use this file except in compliance with the License.
+    ~ You may obtain a copy of the License at
+    ~
+    ~     https://www.apache.org/licenses/LICENSE-2.0
+    ~
+    ~ Unless required by applicable law or agreed to in writing, software
+    ~ distributed under the License is distributed on an "AS IS" BASIS,
+    ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    ~ See the License for the specific language governing permissions and
+    ~ limitations under the License.
+    ~/
+    -->
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="64dp"
+    android:height="64dp"
+    android:viewportWidth="64"
+    android:viewportHeight="64">
+    <path
+        android:fillColor="#FCFCFC"
+        android:pathData="M32,32m-32,0a32,32 0,1 1,64 0a32,32 0,1 1,-64 0" />
+    <path
+        android:fillAlpha="0.02"
+        android:fillColor="#7E7576"
+        android:pathData="M32,32m-32,0a32,32 0,1 1,64 0a32,32 0,1 1,-64 0" />
+    <path
+        android:fillAlpha="0.08"
+        android:fillColor="#8C4190"
+        android:pathData="M32,32m-32,0a32,32 0,1 1,64 0a32,32 0,1 1,-64 0" />
+</vector>