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?

Ellord

Answer 1

@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"

Equitation

See @oRRs comment : tools:listitem="@android:layout/simple_list_item_checked" – Equitation

is there any way to preview in grid mode? – Lethargic

@sajad try this app:layoutManager="GridLayoutManager" tools:listitem="@layout/layout_list_item_select_seat" app:spanCount="5" – Reticle

Is there a way to show two types of items previewed. Sometimes RecyclerView shows more than one item Types. – Zook

For me i currently just have to write tools:listitem="@layout/simple_list_item_checked" – Cuthburt

If you also wish to set the orientation to be horizontal , you can: tools:orientation="horizontal" – Frodeen

thank you! this has been an annoyance for me for a long time – Rimskykorsakov

In addition to specifying tools:orientation="horizontal" or android:orientation="horizontal" I also had to specify app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" as per #35681933 – Tseng

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? – Countersign

is there anyway to use ItemDecorations .? like tools:ItemDecorations something like this.? – Auberon

Don't use camel casing for 'listItem'. It is 'listitem'. – Vasomotor

Answer 2

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:

Tam

This should be marked as answer, as it is detailed and compatible with RecylerView. ListViews are not used at all nowadays. – Terracotta

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! – Fairlie

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. – Jap

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. – Surmullet

"@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 - developer.android.com/studio/write/… – Tam

Answer 3

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"

Ejaculatory

showIn is very nice to use – Interstate

Answer 4

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>

Boice

Answer 5

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.

Cryptozoite

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. – Tithing