64

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?

Anand Kumar
  • 1,439
  • 1
  • 15
  • 22

5 Answers5

76

Android RecycrerView preview

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]

yoAlex5
  • 29,217
  • 8
  • 193
  • 205
43

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"/>
alexpfx
  • 6,412
  • 12
  • 52
  • 88
41

This Worked for me (AndroidX): For 3 column grid

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/rvServiceList"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layoutManager="androidx.recyclerview.widget.GridLayoutManager"
    app:spanCount="3"
    tools:itemCount="20"
    tools:listitem="@layout/row_item_service" />
Touhid
  • 1,556
  • 18
  • 18
6

Use 

app:layoutManager="GridLayoutManager"
app:spanCount="3"
tools:listitem="@layout/table_grid_item"
Anand Kumar
  • 1,439
  • 1
  • 15
  • 22
5

To show list horizontally in preview, just use these two attributes

tools:orientation="horizontal"
tools:layoutManager="android.support.v7.widget.LinearLayoutManager"

here's the final code

<android.support.v7.widget.RecyclerView
        ...
        tools:listitem="@layout/single_item_layout"
        tools:orientation="horizontal"
        tools:layoutManager="android.support.v7.widget.LinearLayoutManager"/>
Sanjeev
  • 4,255
  • 3
  • 28
  • 37
  • Was looking for grid, This is for horizontal list. – Anand Kumar May 29 '19 at 10:11
  • 1
    @AnandKumar see answer by alexpfx, just above me, he has mentioned how to show grid layout manager here is the link: https://stackoverflow.com/a/47402709/4859873 – Sanjeev May 31 '19 at 06:02