Kotlin Preview RecyclerView (KPR)

Hi guys.. this time I will share my experience building a UI bottom sheet to display a list of products.

1. Grid Preview

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_product"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/title"
        android:padding="8dp"
        app:layoutManager="androidx.recyclerview.widget.GridLayoutManager"
        app:spanCount="3"
        tools:itemCount="20"
        tools:listitem="@layout/item_product" />

2. Vertical List Preview

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_product"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/title"
        android:padding="8dp"
        tools:itemCount="20"
        tools:listitem="@layout/item_product" />

3. Preview Horizontal List

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_product"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/title"
        android:padding="8dp"
        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
        android:orientation="horizontal"
        tools:itemCount="20"
        tools:listitem="@layout/item_product" />

I found a way to preview list items by using

tools:listitem="@layout/my_item_layout"

But Android studio previews recyclerview as a vertical list. Is there a way to tell Android Studio to preview the layout horizontally using LinearLayoutManager?

Solution

Add a LayoutManager and set the orientation to horizontal. Here is 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"
    />

Post a Comment

Previous Next

نموذج الاتصال