Search code examples
androidandroid-studioandroid-recyclerviewandroid-tools-namespaceandroid-layout-editor

tools:text for RecyclerView items


I know that when you set

tools:text="Sample text"

within a TextView, you'll see the sample text in Preview mode in Android Studio, but not within the actual app. I'd like to do this for items in a RecyclerView, but I can't seem to be able to. Here's what I've done so far:

In the RecyclerView (named content_feed):

tools:listitem="@layout/cell_feed"

In the cell (name cell_feed):

tools:showIn="@layout/content_feed"

Here are the xml files:

cell_feed.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="@dimen/height_feed_cell"
    android:layout_marginLeft="@dimen/margin_feed_cell"
    android:layout_marginRight="@dimen/margin_feed_cell"
    android:orientation="horizontal"
    tools:showIn="@layout/content_feed">

    <LinearLayout
        android:id="@+id/timeLayouts"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:alpha="@dimen/alpha_feed_secondary_text"
            android:textSize="@dimen/size_feed_secondary_text"
            android:id="@+id/startTimeText"
            tools:text="8:00 AM"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:alpha="@dimen/alpha_feed_secondary_text"
            android:textSize="@dimen/size_feed_secondary_text"
            android:id="@+id/endTimeText"
            tools:text="10:00 AM"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/margin_feed_cell_text"
        android:layout_toRightOf="@+id/timeLayouts"
        android:layout_centerVertical="true"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="@dimen/margin_bottom_feed_cell_title"
            android:textSize="@dimen/size_feed_cell_title"
            android:textStyle="bold"
            android:id="@+id/titleText"
            tools:text="Event title"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:alpha="@dimen/alpha_feed_secondary_text"
            android:textSize="@dimen/size_feed_secondary_text"
            android:id="@+id/captionText"
            tools:text="Event caption"/>
    </LinearLayout>

    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginLeft="@dimen/margin_feed_cell_text"
        tools:text=""/>
</RelativeLayout>

content_feed.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.RecyclerView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/feedRecycler"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:listitem="@layout/cell_feed"
    tools:showIn="@layout/activity_feed"/>

Solution

  • The feature you want is called "Support for sample data" and was recently announced in Google I/O 2017 event. This is a direct link to the exact minute where Tor Norbye introduces the new feature.

    For example, applying following to the layout item:

    tools:text="@tools:sample/lorem"
    

    will result in following output in Preview window:

    Layout preview with lorem ipsum sample text

    Applying this:

    tools:text="@tools:sample/date_day_of_week"
    

    will result in this output in Preview window:

    Layout preview with tools sample text

    You can also populate it with your custom data. This blog post demonstrates a full example of how to do that. First, you right click on your app module and choose New | Sample Data directory.

    Then you would create for example an activity_log.json file in the sampledata directory with following content:

    {
        "activities" : [
         {
           "icon": "@sample/activity_icons[ic_biking.png]",
           "description": "Biking",
           "location" : "Pleasant Hill, CA",
           "distance": "48 miles",
           "date": "Yesterday"
         },
         // other items here
        ]
    }
    

    Then you can apply this data to your layout this way:

    tools:src="@sample/activity_log.json/activities/icon"
    tools:src="@sample/activity_log.json/activities/distance"
    

    This will result in following output in Preview window:

    Layout preview with custom sample data

    For more details on the topic have a look at "Tool Time" series of posts by Mark Allison.