diff --git a/feature/foryou/src/main/java/com/google/samples/apps/nowinandroid/feature/foryou/AuthorsCarousel.kt b/feature/foryou/src/main/java/com/google/samples/apps/nowinandroid/feature/foryou/AuthorsCarousel.kt
index d6d686d4b..0a7955c2f 100644
--- a/feature/foryou/src/main/java/com/google/samples/apps/nowinandroid/feature/foryou/AuthorsCarousel.kt
+++ b/feature/foryou/src/main/java/com/google/samples/apps/nowinandroid/feature/foryou/AuthorsCarousel.kt
@@ -43,10 +43,12 @@ import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.drawBehind
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.testTag
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.semantics.Role
+import androidx.compose.ui.semantics.onClick
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.semantics.stateDescription
import androidx.compose.ui.text.font.FontWeight
@@ -54,7 +56,6 @@ import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import coil.compose.AsyncImage
-import com.google.samples.apps.nowinandroid.core.designsystem.component.NiaToggleButton
import com.google.samples.apps.nowinandroid.core.designsystem.icon.NiaIcons
import com.google.samples.apps.nowinandroid.core.designsystem.theme.NiaTheme
import com.google.samples.apps.nowinandroid.core.domain.model.FollowableAuthor
@@ -73,8 +74,8 @@ fun AuthorsCarousel(
LazyRow(
modifier = modifier.testTag(tag),
- contentPadding = PaddingValues(24.dp),
- horizontalArrangement = Arrangement.spacedBy(24.dp),
+ contentPadding = PaddingValues(16.dp),
+ horizontalArrangement = Arrangement.spacedBy(8.dp),
state = lazyListState
) {
items(items = authors, key = { item -> item.author.id }) { followableAuthor ->
@@ -97,24 +98,32 @@ fun AuthorItem(
modifier: Modifier = Modifier,
) {
val followDescription = if (following) {
- stringResource(id = R.string.following)
+ stringResource(R.string.following)
} else {
- stringResource(id = R.string.not_following)
+ stringResource(R.string.not_following)
+ }
+ val followActionLabel = if (following) {
+ stringResource(R.string.unfollow)
+ } else {
+ stringResource(R.string.follow)
}
Column(
modifier = modifier
.toggleable(
value = following,
- enabled = true,
role = Role.Button,
interactionSource = remember { MutableInteractionSource() },
indication = rememberRipple(bounded = false),
onValueChange = { newFollowing -> onAuthorClick(newFollowing) },
)
+ .padding(8.dp)
.sizeIn(maxWidth = 48.dp)
.semantics(mergeDescendants = true) {
+ // Add information for A11y services, explaining what each state means and
+ // what will happen when the user interacts with the author item.
stateDescription = "$followDescription ${author.name}"
+ onClick(label = followActionLabel, action = null)
}
) {
Box(
@@ -136,28 +145,27 @@ fun AuthorItem(
AsyncImage(
modifier = authorImageModifier,
model = author.imageUrl,
- contentScale = ContentScale.Fit,
+ contentScale = ContentScale.Crop,
contentDescription = null
)
}
- NiaToggleButton(
- checked = following,
- onCheckedChange = onAuthorClick,
- modifier = Modifier.align(Alignment.BottomEnd),
- icon = {
- Icon(
- imageVector = NiaIcons.Add,
- contentDescription = null
- )
- },
- checkedIcon = {
- Icon(
- imageVector = NiaIcons.Check,
- contentDescription = null
- )
- },
- size = 24.dp,
- backgroundColor = MaterialTheme.colorScheme.surface
+ val backgroundColor =
+ if (following)
+ MaterialTheme.colorScheme.primaryContainer
+ else
+ MaterialTheme.colorScheme.surface
+ Icon(
+ imageVector = if (following) NiaIcons.Check else NiaIcons.Add,
+ contentDescription = null,
+ modifier = Modifier
+ .align(Alignment.BottomEnd)
+ .size(18.dp)
+ .drawBehind {
+ drawCircle(
+ color = backgroundColor,
+ radius = 12.dp.toPx()
+ )
+ }
)
}
Spacer(modifier = Modifier.height(4.dp))
diff --git a/feature/foryou/src/main/res/values/strings.xml b/feature/foryou/src/main/res/values/strings.xml
index 8f109ef69..1880ab953 100644
--- a/feature/foryou/src/main/res/values/strings.xml
+++ b/feature/foryou/src/main/res/values/strings.xml
@@ -27,5 +27,7 @@
You are following
You are not following
+ Follow
+ Unfollow