Card UI: Add rounded corners

Bug: 228067197
Change-Id: I7af4eb64680f39616c2e37f092f62da960d3189d
pull/1837/head
Caren Chang 3 years ago committed by Don Turner
parent d058f61bcd
commit f6575e947b

@ -17,7 +17,7 @@
package com.google.samples.apps.nowinandroid.core.ui package com.google.samples.apps.nowinandroid.core.ui
import androidx.compose.foundation.background import androidx.compose.foundation.background
import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.Spacer
@ -27,10 +27,13 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.CircleShape import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Bookmark import androidx.compose.material.icons.filled.Bookmark
import androidx.compose.material.icons.filled.BookmarkBorder import androidx.compose.material.icons.filled.BookmarkBorder
import androidx.compose.material.icons.filled.Person import androidx.compose.material.icons.filled.Person
import androidx.compose.material3.Card
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon import androidx.compose.material3.Icon
import androidx.compose.material3.IconToggleButton import androidx.compose.material3.IconToggleButton
import androidx.compose.material3.MaterialTheme import androidx.compose.material3.MaterialTheme
@ -69,40 +72,55 @@ import kotlinx.datetime.toJavaInstant
* [NewsResource] card used on the following screens: For You, Episodes, Saved * [NewsResource] card used on the following screens: For You, Episodes, Saved
*/ */
@OptIn(ExperimentalMaterial3Api::class)
@Composable @Composable
fun NewsResourceCardExpanded( fun NewsResourceCardExpanded(
newsResource: NewsResource, newsResource: NewsResource,
isBookmarked: Boolean, isBookmarked: Boolean,
onToggleBookmark: () -> Unit, onToggleBookmark: () -> Unit,
onClick: () -> Unit onClick: () -> Unit,
modifier: Modifier = Modifier
) { ) {
Column( val clickActionLabel = stringResource(R.string.card_tap_action)
modifier = Modifier.padding(16.dp) Card(
.clickable( onClick = onClick,
onClickLabel = stringResource(R.string.card_tap_action), shape = RoundedCornerShape(16.dp),
onClick = { onClick() } // Use custom label for accessibility services to communicate button's action to user.
) // Pass null for action to only override the label and not the actual action.
modifier = modifier.semantics {
onClick(label = clickActionLabel, action = null)
}
) { ) {
if (!newsResource.headerImageUrl.isNullOrEmpty()) { Column {
Row { if (!newsResource.headerImageUrl.isNullOrEmpty()) {
NewsResourceHeaderImage(newsResource.headerImageUrl) Row {
NewsResourceHeaderImage(newsResource.headerImageUrl)
}
} }
Spacer(modifier = Modifier.height(12.dp)) Box(
} modifier = Modifier.padding(16.dp)
Row { ) {
NewsResourceAuthors(newsResource.authors) Column {
} Row {
Spacer(modifier = Modifier.height(12.dp)) NewsResourceAuthors(newsResource.authors)
Row { }
NewsResourceTitle(newsResource.title, modifier = Modifier.fillMaxWidth((.8f))) Spacer(modifier = Modifier.height(12.dp))
Spacer(modifier = Modifier.weight(1f)) Row {
// TODO: Implement functionality to 'bookmark' a resource b/227246491 NewsResourceTitle(
newsResource.title,
modifier = Modifier.fillMaxWidth((.8f))
)
Spacer(modifier = Modifier.weight(1f))
// TODO: Implement functionality to 'bookmark' a resource b/227246491
// BookmarkButton(isBookmarked, onToggleBookmark) // BookmarkButton(isBookmarked, onToggleBookmark)
}
Spacer(modifier = Modifier.height(12.dp))
NewsResourceDate(newsResource.publishDate)
Spacer(modifier = Modifier.height(12.dp))
NewsResourceShortDescription(newsResource.content)
}
}
} }
Spacer(modifier = Modifier.height(12.dp))
NewsResourceDate(newsResource.publishDate)
Spacer(modifier = Modifier.height(12.dp))
NewsResourceShortDescription(newsResource.content)
} }
} }

@ -142,7 +142,8 @@ fun ForYouScreen(
onClick = { startActivity(context, launchResourceIntent, null) }, onClick = { startActivity(context, launchResourceIntent, null) },
onToggleBookmark = { onToggleBookmark = {
onNewsResourcesCheckedChanged(newsResource.id, !isBookmarked) onNewsResourcesCheckedChanged(newsResource.id, !isBookmarked)
} },
modifier = Modifier.padding(24.dp)
) )
} }
} }

Loading…
Cancel
Save