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

Issue

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:

enter image description here

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?

Solution

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:

enter image description here

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

enter image description here

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.

enter image description here

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.

Answered By – Tim

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published