Is there a way to show a preview of a RecyclerView's contents in the Android Studio editor?

Question

When I add the RecyclerView to the layout, it shows up as a blank screen. Is there a way, such as through the tools namespace, to show a preview of the content of the RecyclerView?

Philippe David · Accepted Answer · 2015-11-09T15:29:30.177

712

@oRRs is right !

I'm using Android Studio 1.4 RC2 and you can now specify any custom layout.

I tried a custom CardView and it works.

tools:listitem="@android:layout/simple_list_item_checked"

edited Nov 09 '15 at 15:29

answered Sep 24 '15 at 19:00

Philippe David

8,814
3
24
35

1

See @oRRs comment : tools:listitem="@android:layout/simple_list_item_checked" – Philippe David Oct 06 '15 at 17:34
2

is there any way to preview in grid mode? – Jun 05 '16 at 06:58
31

@sajad try this app:layoutManager="GridLayoutManager" tools:listitem="@layout/layout_list_item_select_seat" app:spanCount="5" – atabouraya Aug 22 '16 at 13:02
1

Is there a way to show two types of items previewed. Sometimes RecyclerView shows more than one item Types. – Rishabh876 Feb 10 '17 at 07:50
For me i currently just have to write `tools:listitem="@layout/simple_list_item_checked"` – Henrik Bøgelund Lavstsen Sep 07 '17 at 06:51
4

If you also wish to set the orientation to be horizontal , you can: `tools:orientation="horizontal"` – android developer Nov 09 '17 at 09:03
thank you! this has been an annoyance for me for a long time – Stillie Nov 29 '17 at 08:09
4

In addition to specifying `tools:orientation="horizontal"` or `android:orientation="horizontal"` I also had to specify `app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"` as per https://stackoverflow.com/questions/35681433/previewing-horizontal-recyclerview-in-android-studio – Michael Osofsky May 15 '19 at 21:38
1

This is a pretty cool feature :-) I was wondering how would be the approach if the recycler view has different item types. Does anyone know? – Jose Flavio Quispe Irrazábal May 16 '19 at 17:00
is there anyway to use ItemDecorations .? like tools:ItemDecorations something like this.? – Atif AbbAsi Feb 12 '20 at 07:14
Don't use camel casing for 'listItem'. It is 'listitem'. – Kartik Watwani Jul 07 '21 at 05:22

yoAlex5 · Answer 2 · 2021-05-04T09:31:56.960

Android tools and LayoutManager

tools namespace enables design-time features (such as which layout to show in a fragment) or compile-time behaviors (such as which shrinking mode to apply to your XML resources) It is really powerful feature that is developing and allows you not compile code every time to see changes

AndroidX^[About] and GridLayoutManager

implementation 'androidx.recyclerview:recyclerview:1.1.0'

<androidx.recyclerview.widget.RecyclerView
    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"

    tools:layoutManager="androidx.recyclerview.widget.GridLayoutManager"
    tools:listitem="@layout/item"
    tools:itemCount="10"
    tools:orientation="vertical"
    tools:scrollbars="vertical"
    tools:spanCount="3"/>

Support library and LinearLayoutManager

implementation 'com.android.support:recyclerview-v7:28.0.0'


<android.support.v7.widget.RecyclerView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"
    android:layout_height="wrap_content"

    tools:layoutManager="android.support.v7.widget.LinearLayoutManager"
    tools:listitem="@layout/item"
    tools:itemCount="3"
    tools:orientation="horizontal"
    tools:scrollbars="horizontal" />

Another cool feature that was introduced in Android studio 3.0 is predefining a data through the tools attributes, to visualised easily your layout structure using @tools:sample/* resources

item.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="100dp"
    android:layout_height="150dp"
    android:layout_marginRight="15dp"
    android:layout_marginBottom="10dp"
    android:orientation="vertical"
    tools:background="@tools:sample/backgrounds/scenic">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/colorWhite"
        tools:text="@tools:sample/first_names" />

</FrameLayout>

Simulator results:

This should be marked as answer, as it is detailed and compatible with RecylerView. ListViews are not used at all nowadays. — Abhinav Saxena, Jan 02 '19 at 13:00
I had to switch to fewer attribute tab in the attribute area to be able to see the `listitem` option, I could simply just type it into the xml code! — George Udosen, Feb 15 '19 at 16:57
If you are using your own list item layout and you are only seeing one(1) list item then check that layout_height="wrap_content" on your layout. — Jeffrey, Feb 16 '19 at 17:36
Interistingly, it only works for me if I use ListView but not with a RecyclerView. Any ideas¿? I copy pasted to be sure I wasn't messing things up with my RecyclerView. But actually it works, so it is a valid XML. — xarlymg89, Feb 20 '19 at 14:15
"@tools:sample/*" is a reserver android resource type of placeholder data you can inject into your layouts. last_names - Common last names. The full official doc - https://developer.android.com/studio/write/tool-attributes#toolssample_resources — yoAlex5, Mar 22 '19 at 09:54

score 7 · Answer 3 · answered Nov 23 '18 at 10:49

7

First, add the following line in your item XML to made a preview of your list while you edit your item:

tools:showIn="@layout/activity_my_recyclerview_item"

And them, add the following line in your RecyclerView XML to preview how your item will look in your list:

tools:listitem="@layout/adapter_item"

answered Nov 23 '18 at 10:49

Ângelo Polotto

8,463
2
36
37

showIn is very nice to use – Erdal G. Apr 29 '23 at 06:05

score 3 · Answer 4 · answered Aug 16 '15 at 12:10

3

As of Android Studio 1.3.1 it shows default list items in the preview but it doesn't let yout specify your own yet. Hopefully, it will come.

answered Aug 16 '15 at 12:10

Gábor

9,466
3
65
79

20

In AS 1.4 you get to select from a few predefined layouts, e.g.: tools:listitem="@android:layout/simple_list_item_checked". Just right-click the RecyclerView in the layout editor and choose "Preview list content". Unfortunately, you still cannot use it for your own layouts, at least for me it's throwing a rendering error. – oRRs Sep 20 '15 at 14:45

score 3 · Answer 5 · answered Dec 14 '21 at 12:18

If you have already a custom_item layout:

<androidx.recyclerview.widget.RecyclerView
             android:id="@+id/recyclerView"
             ...
             ...
             **tools:listitem="@layout/name_of_your_custom_item_view"**
             ...>
</androidx.recyclerview.widget.RecyclerView>

Is there a way to show a preview of a RecyclerView's contents in the Android Studio editor?

5 Answers5

If you have already a custom_item layout:

Linked

Related