Introduction
![Updating the NewsCard with more parameters](/https/developer.android.com/static/develop/ui/compose/tooling/relay/images/content-parameters-advanced/update-with-more-parameters.png)
The content of most UI designs are not static — they change depending on the data. In this section, we add data to our design via content parameters, which allow designers specify which part of a design should be filled with data
Add parameters in Figma
Let’s add content parameters to our component.
- Switch to Figma. In NewsCardTutorial, select the thumbnail image layer in the hero-item variant (⌘ + click on Mac, or Ctrl + click on Windows and Linux on the image).
In the Relay for Figma plugin, click + and select
image-content
in the drop down menu, then change the name to “thumbnail”.Select the headline text layer, click + and select
text-content
. Repeat the same steps for the author, and date text layers in the hero-item variant. Name them “headline”, “author”, and “date” respectively.Click on the thumbnail parameter in the plugin. Notice that in every component variant, the thumbnail layer is an image and is selected.
Because the three layers have the same name (“thumbnail”) and are the same data type (image-content), the content parameter has been connected to it in all three variants. This means that one parameter gives the same data to multiple variants. This is also true for the headline, author, and date parameters.
Save named version
Let’s now mark this version as ready to be imported into code.
Open the Figma Relay plugin, if not already open.
Click Share with developer.
In the Share with developer screen, enter a name and description for the version.
Example Title: Added Parameters
Example Description: Added content parameters to card
Click Save.
Update component in Android Studio
Let’s update the NewsCard component:
In Android Studio, make sure the Project tool window is in Android view. Then right-click on
app/ui-packages/news_card/
, and click Update UI Package.Click on
to build your project. This will take the updated UI Package and generate an updated version of the composable code.
If you look at
app/java (generated)/com/example/hellonews/newscard/NewsCard.kt
, you’ll see that the content parameters that we added (thumbnail
,headline
,author
,date
) appear in our composable’s parameter list.// View to select for NewsCard enum class View { HeroItem, ArticleItem, AudioItem } /** * News card component intended to display news items for a list * * This composable was generated from the UI package 'news_card'. * Generated code; don't edit directly. */ @Composable fun NewsCard( modifier: Modifier = Modifier, view: View = View.HeroItem, thumbnail: Painter = EmptyPainter(), headline: String = "", author: String = "", date: String = "" ) { ...
Integrate into app
Let’s look back at our app, whose UI we haven’t yet modified. It contains a list of regular news stories and a list of audio stories. These are the two composables we need to add our NewsCard component to:
- The PostListArticleStories composable is responsible for the regular news stories.
- The postTop parameter represents the top story.
- The posts parameter represents the rest of the stories.
- The PostListAudioStories composable renders the audio news stories.
In
app/java/com/example/hellonews/ui/home/HomeScreen.kt
, add the following imports next to the other import lines near the top of the file: importcom.example.hellonews.newscard.NewsCard
import com.example.hellonews.newscard.View
Still in HomeScreen.kt, scroll down to PostListArticleStories.
@Composable fun HomeScreen(...) @Composable private fun PostList(...) @Composable private fun PostListArticleStoriesSection(...) @Composable private fun SearchArticlesSection(...) @Composable private fun PostListArticleStories( postTop: Post, posts: List<Post>, createOnTapped: (String, String) -> () -> Unit ) {...} @Composable private fun AudioStoriesTitle(...) @Composable private fun PostListAudioStories(...) @Composable fun Dialog(...) ...
For postTop, replace the Text component with our newly imported NewsCard, using the HeroItem view.
@Composable private fun PostListArticleStories( postTop: Post, posts: List<Post>, createOnTapped: (String, String) -> () -> Unit ) { ... Column( horizontalAlignment = Alignment.Start, modifier = ... ) { Spacer(modifier = Modifier.size(12.dp)) NewsCard( thumbnail = painterResource(postTop.imageId), headline = postTop.title, author = postTop.metadata.author.name, date = postTop.metadata.date, view = View.HeroItem ) Spacer(modifier = Modifier.size(12.dp)) ... } }
For each post, replace the Text component with our newly imported NewsCard, using the ArticleItem view.
@Composable private fun PostListArticleStories( postTop: Post, posts: List<Post>, createOnTapped: (String, String) -> () -> Unit ) { ... Column( horizontalAlignment = Alignment.Start, modifier = ... ) { ... posts.forEach { post -> NewsCard( thumbnail = painterResource(post.imageId), headline = post.title, author = post.metadata.author.name, date = post.metadata.date, view = View.ArticleItem ) Spacer(modifier = Modifier.size(12.dp)) } } }
We can do the same for the audio stories at the bottom. Still in
HomeScreen.kt
, scroll down to PostListAudioStories, around line 260.@Composable fun HomeScreen(...) @Composable private fun PostList(...) @Composable private fun PostListArticleStoriesSection(...) @Composable private fun SearchArticlesSection(...) @Composable private fun PostListArticleStories(...) @Composable private fun AudioStoriesTitle(...) @Composable private fun PostListAudioStories( posts: List<Post>, createOnTapped: (String, String) -> () -> Unit ) {...} @Composable fun Dialog(...) ...
For each post, replace the Text component with our newly imported NewsCard, using the AudioItem view.
@Composable private fun PostListAudioStories( posts: List<Post>, createOnTapped: (String, String) -> () -> Unit ) { Column( horizontalAlignment = ..., modifier = ... ) { posts.forEach { post -> NewsCard( thumbnail = painterResource(post.imageId), headline = post.title, author = post.metadata.author.name, date = post.metadata.date, view = View.AudioItem ) Spacer(modifier = Modifier.size(12.dp)) } } }
Click on
to build your project again and view the result in the preview (split screen view):
Next Step
Next up, we'll add some interactions to our app.
Recommended for you
- Note: link text is displayed when JavaScript is off
- Add interaction handlers to designs
- Handling design variants
- Convert the designs to code in Android Studio