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

Question

When I add the RecyclerView to the layout, it shows up as a list view in vertical order. I am using tools:listitem for this. Is there a way, such that it displays as grid but not as list in the Android Studio Editor?

Answer 1

You are able to build a preview using xmlns:tools="http://schemas.android.com/tools" namespace.

AndroidX^[About]

<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="7"     tools:orientation="vertical"     tools:scrollbars="vertical"     tools:spanCount="4"/> 

Support

<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="match_parent"      tools:layoutManager="android.support.v7.widget.GridLayoutManager"     tools:listitem="@layout/item"     tools:itemCount="7"     tools:orientation="vertical"     tools:scrollbars="vertical"     tools:spanCount="4"/> 

From Android studio 3.0 you can predefine a data through the @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_marginBottom="15dp"     android:orientation="vertical"     tools:background="@tools:sample/avatars">      <TextView         android:layout_gravity="bottom"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:textColor="@color/colorWhite"         tools:text="@tools:sample/first_names" />  </FrameLayout> 

As a result your preview will look like

[More examples]

Answer 2

If you want to see the effect only in the preview without change the app behavior you can use the "tools" namespace as you did with listitem:

<android.support.v7.widget.RecyclerView         android:id="@+id/rcv_collection"         android:layout_width="match_parent"         android:layout_height="match_parent"         tools:layoutManager="android.support.v7.widget.GridLayoutManager"         tools:spanCount="2"         tools:listitem="@layout/item_collection"/>