Content parameters

Introduction

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.

1. 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).

2. In the Relay for Figma plugin, click + and select image-content in the drop down menu, then change the name to “thumbnail”.

   

3. 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.

   

4. 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.

1. Open the Figma Relay plugin, if not already open.

2. Click Share with developer.

3. 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

4. Click Save.

Update component in Android Studio

Let’s update the NewsCard component:

1. 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.

   

2. Click on to build your project. This will take the updated UI Package and generate an updated version of the composable code.

   

3. 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.

  

  Now let’s integrate our NewsCard component into the home screen.

1. 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: import com.example.hellonews.newscard.NewsCard

   import com.example.hellonews.newscard.View

2. 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(...)
   ...
   

3. 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))
           ...
       }
   }
   

4. 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))
           }
       }
   }
   

5. 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(...)
   ...
   

6. 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))
           }
       }
   }
   

7. 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