How to place new placeholder resources in an Android Studio project ("tools: sample")?

Question

Background

Sometimes you want to put some placeholders to display only in the IDE in layout files.

As an example, you can use this:

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

And get this in preview:

Such files are not part of the APK that you receive when creating your application, so it can only be used for development.

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 the sampledata directory in your project with a subdirectory containing all the images you want to use as placeholders. You can refer to these images from "tools" attributes. In addition, there are predefined stock images like @ sample / avatars or @ sample / background / scenic

Problem

I cannot find how to add more such images to the project (so that they will be used only in the IDE, and not in the APK), and if there is a way to place other resources besides images.

In fact, I can not find the documents of this function.

What i tried

I tried putting the image on "res / sampledata" and tried "res / sample", but in both cases I could not find it.

Questions

• What is the name of this function?
• How can I put an image file in a project and use it as a placeholder this way? In which folder?
• Can I add more images to be used in this way?
• Can I add other resources? Layouts? Rows?
• Are there any additional features of this new feature?

Answer 1

What is the name of this function?

Unverified by an official source, but most likely it is called "Sample Data".

How can I put an image file in a project and use it as a placeholder this way? In which folder?

Unlike resources such as images, fonts, etc. Data samples are not included in /res/ (they are not compiled using the application, therefore. It is probably easier to filter them out by placing them in a completely separate directory). They are included in /app/sampledata/ , for example: /app/sampledata/image.png .

You can create a sampledata folder by right-clicking on the application and making New > Sample Data directory :

You can then reference them as follows: @sample/

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

While this does not give any errors, unfortunately, the function seems to be listening right now, since the images are not displayed in the preview, regardless of whether they are placed in a subdirectory or not (try png, jpeg, jpg, xml).

Interestingly, placing one image in a subdirectory and accessing that subdirectory instead of a specific image seems to work:

Structure of this

In conjunction with these links

 <?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 used tools:background to set the layout background to a sample image.

Can I add more images to be used in this way?

Yes, just add them to the folder.

Can I add other resources? Layouts? Rows?

It is also not supported. If you try to identify some other type of resource, you will get a bunch of syntax errors due to the fact that keywords are not recognized, or you cannot refer to them using the notation tools:src="@sample/ .

Are there any additional features of this new feature?

Not sure about this time.

Answer 2

For my part, I tried to use the image file as a placeholder for viewing images using tools:src="..." : I placed my PNG file in the sampledata subdirectory, but it either did not appear or was displayed as a damaged image.

After a little shaking, I found something that solved my problem:

• create a sampledata subdirectory named: drawable
• Place the png / jpg file in this directory and add the file name using _drawable. Example: image.png - image.png image_drawable.png

Only then did a placeholder appear. You can create subdirectories from drawable as you see fit in order to keep your images organized, but the important thing is that drawable remains the parent directory.

I do not have any documentation or sources to support me, but I believe that this may be useful to others in the same situation.

Answer 3

I think that you received the answer to other questions precisely from the people who answered before me, but I can give you a workaround for this particular question

Can I add more images to use this way?

I ran into this problem for quite some time and found a workaround for it.

My problem was that I could not use placeHolderImage in SimpleDraweeView , which is part of the Facebook Fresco library if you did not know. But since ImageView not as complex as SimpleDraweeView , and since the workaround worked with SimpleDraweeView , even if I did not try it with ImageView , it certainly could work with it.

Here is the solution.

You just need to create the json file inside the data sample folder, but this time you have to do it as follows.

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

As you can see, I used the link to the drawable resource instead of the value of the image key. And it works in my case. Thus, you get an array of graphic resources that you can use inside the RecyclerView element for preview in preview mode 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" /> 

Do not forget to skip any of the additional tags that I used, as it may not give the required output when previewing, if you miss any of them. You can customize the value of the itemCount attribute according to your requirement for the number of images you use. In addition, the orientation can be vertical or horizontal depending on your use case.

You can simply use tools:src="@sample/your_json_file.json/data/image inside your ImageView re-view element XML file to load image samples.

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