Content parameters

Stay organized with collections Save and categorize content based on your preferences.

Introduction

Updating the NewsCard with more parameters

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

    The Figma plugin with “thumbnail” parameter added
  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.

    The Figma plugin with “headline”, “author” and “date” parameters added
  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.

    The Figma plugin with all three thumbnail layers selected

Save named version

Let’s now mark this version as ready to be imported into code.

  1. Add a new named version of your Figma file. Go to File > Save to Version History, and then enter a title and description of your new version (any title and description works here).

    Example Title: “Added Parameters”

    Example Description: “Added content parameters to card”

    Save to version history option in the menu

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.

    Update UI Package option in the context menu
  2. Click on Make Project button to build your project. This will take the updated UI Package and generate an updated version of the composable code.

    Build button in the toolbar
  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; do not edit directly
    */
    @Composable
    fun NewsCard(
        modifier: Modifier = Modifier,
        view: View = View.HeroItem
        thumbnail: Painter,
        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.
    The app UI with three sections
    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, around line 175.

    @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 Make Project button to build your project again and view the result in the preview (split screen view):

    Preview of NewsApp

Next Step

Next up, we'll add some interactions to our app.