How to put new placeholder resources into Android Studio project ("tools:sample" resources)?

Question

Background

Sometimes, you wish to put some placeholders to be shown only on the IDE, in layout files.

As an example, you can use this:

<ImageView tools:src="@tools:sample/avatars" ... />

And get this in the preview:

Such files are not part of the APK you get when you build your app, so it's safe to use just for developing.

This is what I was told from here:

With sample data in 3.0, you can now have placeholder images that are not part of the compiled apk. You just need a sampledata directory in your project with a subdirectory containing all the images you want to use as placeholders. You can refer those images from "tools" attributes. Also, there are predefined stock images like @sample/avatars or @sample/background/scenic

The problem

I can't find how to add more of such images into the project (so that they will only be used in the IDE, and not a part of the APK), and if there is a way to put other resources, other than images.

In fact I can't find the docs of this feature.

What I tried

I tried to put an image on "res/sampledata" and tried on "res/sample", but I wasn't able to reach it in both cases.

The questions

1. What's even the name of this feature?
2. How can I put the image file into the project, and use it as a placeholder this way ? In which folder?
3. Is it possible to add more images to be used this way?
4. Is it possible to add other resources? Layouts? Strings?
5. Are there more capabilities of this new feature?

Answer 1

What's even the name of this feature?

Unconfirmed by an official source, but it's likely called "Sample Data".

How can I put the image file into the project, and use it as a placeholder this way ? In which folder?

Unlike resources like images, fonts, etc. The sample data does not go in /res/ (they are not compiled with the app, hence. It is probably easier to filter them out by putting them in a totally separate directory). They go in /app/sampledata/, for example: /app/sampledata/image.png.

You can create the sampledata folder by right clicking on app and do New > Sample Data directory:

You can then reference them like this, with @sample/

<ImageView
    android:layout_width="match_parent"
    android:layout_height="200dp"
    tools:src="@sample/test.png" />

While this does not give any errors, sadly the feature seems bugged right now, since the images do not show up in the preview, regardless of them being placed in a subdirectory or not (tried png, jpeg, jpg, xml).

Interestingly, placing a single image in a subdirectory and referring to that subdirectory instead of the specific image seems to work:

A structure of this

Combined with these references

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:background="@sample/image">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        tools:src="@sample/avatar" />

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        tools:src="@sample/jpeg" />

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        tools:src="@sample/vector" />

</LinearLayout>

Produces this preview. Notice how I utilized tools:background to set the layout background to a sample image.

Is it possible to add more images to be used this way?

Yeah, just add them to the folder.

Is it possible to add other resources? Layouts? Strings?

It does not appear to support either. If you try to define some other type of resource, you either get a bunch of syntax errors due to keywords not being recognized, or you cannot refer to them with the tools:src="@sample/ notation.

Are there more capabilities of this new feature?

Unsure at this time.

Answer 2

On my side I tried to use a image file as a placeholder for an Imageview using tools:src="...": I did put my PNG file in a sampledatasubdirectory but it either wouldn't show or appear as a broken image.

After a bit of fiddlings I found something that fixed my issue:

• create a sampledata subdirectory named: drawable
• place your png/jpg file in this directory and append the file name with "_drawable". Ex: image.png -> image_drawable.png

Only then did the placeholder showed up. You can create subdirectories from drawable as you see fit to keep your sample images organized, but the important thing seems to be that drawable remains a parent directory.

I do not have any documentation or sources to back me up, but I figure it could be useful for other in the same situation.

Answer 3

I guess you have got the answer to other questions precisely by people who answered before me, but I can give you a workaround solution for particularly this question

Is it possible to add more images to be used this way?

I have faced this problem for quite a bit of time and found a workaround for it.

My issue was that I couldn't use a placeHolderImage in a SimpleDraweeView which is a part of Fresco library of Facebook, if you didn't knew. But since an ImageView is not much complex like a SimpleDraweeView, and as the workaround worked with SimpleDraweeView, even though I haven't tried it with an ImageView, it might surely work with it too.

Here is the solution.

You just have to create a json file inside the sampledata folder, but this time, you have to do it this way.

    {
      "data": [
        {
          "image": "@drawable/ic_jam_jar"
        },
        {
          "image": "@drawable/ic_rice_bag"
        },
        {
          "image": "@drawable/store_avatar"
        },
        {
          "image": "@drawable/exclamation_icon"
        }
      ]
   }

As you can see, I have used the reference for drawable resource in place of value for image key. And it works in my case. What you get here in a way is an array of image resources which you can use inside the item of a RecyclerView to be previewed in Design View in Android Studio.

My RecyclerView code is as follows

<androidx.recyclerview.widget.RecyclerView
                        android:id="@+id/product_desc_rec_view"
                        android:layout_width="match_parent"
                        android:layout_height="350dp"
                        tools:itemCount="6"
                        app:spanCount="6"
                        android:orientation="vertical"
                        app:layoutManager="androidx.recyclerview.widget.GridLayoutManager"
                        tools:listitem="@layout/product_desc_item"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="parent" />

Remember not to skip any of the extra tags which I used, as it might not produce the required output in preview if you miss any. You can customize the itemCount attribute value according to your requirement of number of images you are using. Also, orientation might be vertical or horizontal according to your use-case.

You can simply use tools:src="@sample/your_json_file.json/data/image inside your recyclerview item xml file's ImageView to load sample images there.

Try it and let me know if this works in your case or not.

Answer 4

Tested with Android Studio Dolphin | 2021.3.1 Patch 1 (be patient with it, often it does not do immediately what you typed in...)

Following covers

• Drawables (both bitmaps and vectors)
• Strings

Directory/files structure:

<project workspace dir>
├───app  (=your module name, defaults to app)
    └───sampleData
        ├───drawable
        │   ├───some_name_drawable.png
        │   ├───some_othername_drawable.png
        │   └───some_3rdname_drawable.xml   // SVG vector
        ├───some_name.json                  // strings
        ├───some_other_name.json            // other strings

Use of sample images

<ImageView
   ...
   tools:src="@sample/drawable" />

Important

1. folder with images must be named "drawable"
2. file name of image/vector must end with "..._drawable.png" (.jpeg not tested) or "..._drawable.xml"

Use of sample strings

<TextView
   ...
   tools:text="@sample/some_name.json/data/something" />
<TextView
   ...
   tools:text="@sample/some_other_name.json/data/something_else"
<TextView
   ...
   tools:text="@sample/some_other_name.json/data/something_different"

where some_name.json contains:

{
  "data": [
    { "something":"Nice sample text" },
    { "something":"Nicer other text"  },
    { "something":"Awesome text" }
  ]
}

and some_other_name.json:

{
  "data": [
    { "something_else":"your text here" },
    { "something_else":"your text here" },
    { "something_else":"your text here" },
    { "something_different": "also here your text" },
    { "something_different": "also here your text" },
    { "something_different": "also here your text" }
  ]
}

Important

1. Android Studio requires the "data" as only root element in the .json file
2. Interesting and really nice: One .json file can have >1 sorts of strings

Answer 5

tools:src="@tools:sample/avatars[5]"

<androidx.appcompat.widget.AppCompatImageView
    android:id="@+id/imageView"
    android:layout_width="50dp"
    android:layout_height="50dp"
    tools:src="@tools:sample/avatars[5]"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"/>