Use the “@tools: Sample /*” resource to make RecyclerView (or ListView) preview easier.

Believe in most Android development and RecyclerView (or ListView) to deal with. A common problem is how to easily see and adjust the display effect of each item during coding.

Of course, experienced developers know how to use Tools: Namespace to help, but today’s tutorial is more than that.

First, suppose we want to achieve something like this (with a head on the left of each item) :


Here, we use Tools: Text to display simple content directly in the Preview view of Android Studio (tools: SRC is also available for ImageView).

<TextView
    android:id="@+id/name"
    ...
    tools:text="Mark Allison"/>
Copy the code

Now, in Android Studio 3.0 or above, we have a better way to display some sample data directly at development time – using the data provided in “Tools: Sample /*”.

<? The XML version = "1.0" encoding = "utf-8"? > <android.support.constraint.ConstraintLayout ... > <ImageView android:id="@+id/avatar" ... tools:src="@tools:sample/avatars" /> <TextView android:id="@+id/name" ... tools:text="@tools:sample/full_names" /> <TextView android:id="@+id/city" ... tools:text="@tools:sample/cities" /> <TextView android:id="@+id/date" ... tools:text="@tools:sample/date/ddmmyy" /> <TextView android:id="@+id/description" ... tools:text="@tools:sample/lorem/random" /> </android.support.constraint.ConstraintLayout>Copy the code

Effect:


Of course, these built-in data may not meet your needs (for example, only in English), we can also create Sample data by ourselves:


After clicking, the actual location of the file is:


Add a profile picture (Android vector here, or any other format) :


<ImageView
    android:id="@+id/avatar"
    ...
    tools:src="@sample/avatars" />
Copy the code

Even better, we can organize our data in JSON files. For example, create a file named users.json (you’ll need to build it once you’re done) :

{" data ": [{" city" : "Beijing", "avatar" : "@ sample/avatars,"}, {" city ":" Shanghai ", "avatar" : "@ sample/avatars"}, {" city ": "Guangzhou", "avatar" : "@ sample/avatars"}, {" city ":" shenzhen ", "avatar" : "@ sample/avatars"}]}Copy the code

Partial layout code for item:

<ImageView
  android:id="@+id/avatar"
  ...
  tools:src="@sample/users.json/data/avatar" />

<TextView
  android:id="@+id/city"
  ...
  tools:text="@sample/users.json/data/city" />

...
Copy the code

In addition, the sample data defined is not packaged into APK, so you don’t have to worry about increasing the size of your application.

The official document: developer.android.com/studio/writ…

Example: Github – ToolTime

The original:
Tool Time – Part 1 &
Tool Time – Part 2

Daily Extended reading:

  • Animate Android keyframes with ConstraintLayout and ConstraintSet
  • Google advanced Android Development Course released