How to Show a Preview of a Recyclerview's Contents in The Android Studio Editor

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

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

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

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

RecyclerView doesn't show up in Android Studio Preview

Build > Clean Project solved the issue.

tools:listitem for custom view extending RecyclerView

<com.test.my.TestRecyclerView
        android:id="@+id/your_id"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
        tools:listitem="@layout/your_item"/>

Don't forget to put a app:layoutManager attribute in your custom RecyclerView!

app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"

Android Studio: wanna show preview of item but it shows default information in RecyclerView

With a few corrections, it will work fine.

    class NotesAdapter(val notes: List<Note>) : RecyclerView.Adapter<NotesAdapter.NoteViewHolder>(){
    
        override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): NoteViewHolder {
            val binding = NoteLayoutBinding
                .inflate(LayoutInflater.from(parent.context), parent, false)

/*
return NoteViewHolder(
            binding,
            LayoutInflater.from(parent.context)
                .inflate(R.layout.note_layout, parent, false)
        )

this is not required, since you are using viewbinding, and you have already inflated binding
LayoutInflater.from(parent.context)
                .inflate(R.layout.note_layout, parent, false)
*/

            return NoteViewHolder(binding)
        }
    
        override fun getItemCount() = notes.size
    
        override fun onBindViewHolder(holder: NoteViewHolder, position: Int) {
            holder.binding.textViewTitle.text = notes[position].title
            holder.binding.textViewNote.text = notes[position].note

             //holder.view.setOnClickListener, you inflated binding and you are listening 
             //to some other view

            //Update existed Note
            holder.binding.root.setOnClickListener {
                val action = HomeFragmentDirections.actionAddNote()
                action.note = notes[position]
                Navigation.findNavController(it).navigate(action)
            }
        }
    
        class NoteViewHolder(var binding: NoteLayoutBinding)
            :RecyclerView.ViewHolder(binding.root)
    }

Previewing horizontal recyclerview in android studio

Add a LayoutManager and set a horizontal orientation.

Here an example:

<android.support.v7.widget.RecyclerView
    android:id="@+id/homesRecyclerView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layoutManager="android.support.v7.widget.LinearLayoutManager"
    android:layout_centerVertical="true"
    />

Is there a way to show a specific XML's preview rather than activity_main when building on the device?

You can change the layout in the java code.

1. Open your MainActivity class. It can be found in
   'java>(packagename)>MainActivity.java'
2. Open it and look for R.layout.activity_main in the onEnable method.
3. Change that to an other layout, such as R.layout.list_row

tools:text for RecyclerView items

The feature you want is called "Support for sample data" and was recently announced in Google I/O 2017 event. This is a direct link to the exact minute where Tor Norbye introduces the new feature.

For example, applying following to the layout item:

tools:text="@tools:sample/lorem"

will result in following output in Preview window:

Applying this:

tools:text="@tools:sample/date_day_of_week"

will result in this output in Preview window:

You can also populate it with your custom data. This blog post demonstrates a full example of how to do that. First, you right click on your app module and choose New | Sample Data directory.

Then you would create for example an activity_log.json file in the sampledata directory with following content:

{
    "activities" : [
     {
       "icon": "@sample/activity_icons[ic_biking.png]",
       "description": "Biking",
       "location" : "Pleasant Hill, CA",
       "distance": "48 miles",
       "date": "Yesterday"
     },
     // other items here
    ]
}

Then you can apply this data to your layout this way:

tools:src="@sample/activity_log.json/activities/icon"
tools:src="@sample/activity_log.json/activities/distance"

This will result in following output in Preview window:

For more details on the topic have a look at "Tool Time" series of posts by Mark Allison.

---

Related Topics