How to create Horizontal MvxListView in Xamarin.Android MVVM

Hi EveryOne,

I have list of items those I need to display Horizontally with scroll.

I'm using Mvvm-Crosss, I created MvvmListView and added MvxItemTemplate for that MvvmListView Like below.

MvxListView:

<MvxListView
android:id="@+id/RelatedProductItems"
app:MvxItemTemplate="@layout/related_product_item"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_margin="10dp"
android:nestedScrollingEnabled="true"
app:layout_constraintTop_toBottomOf="@id/CompleteExperienceLayout" />

related_product_item

xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/ProductImage"
android:layout_width="60dp"
android:layout_height="60dp"
android:scaleType="fitXY"
app:MvxBind="Bitmap StringToImage(ImageData)"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:paddingBottom="5dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/ItemName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:textColor="@color/black"
android:textStyle="bold"
android:maxLines="2"
android:text="Product name"
android:layout_marginLeft="5dp"
app:MvxBind="Text Name"
android:textSize="18sp"
app:layout_constraintTop_toTopOf="@id/ProductImage"
app:layout_constraintLeft_toRightOf="@id/ProductImage"
app:layout_constraintRight_toRightOf="parent" />
android.support.constraint.ConstraintLayout>

How can I achieve?

Thanks in advance.

Finally achieved the Horizontal ListView using MvxRecyclerView nuget

https://www.nuget.org/packages/MvvmCross.Droid.Support.V7.RecyclerView/

MvxRecyclerView:

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<MvvmCross.Droid.Support.V7.RecyclerView.MvxRecyclerView
android:id="@+id/RelatedProductItems"
app:MvxItemTemplate="@layout/related_product_item"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:nestedScrollingEnabled="true"/>
android.support.constraint.ConstraintLayout>

Access Recycler View in your activity class and set its LinearLayoutManager.Horizontal

using MvvmCross.Droid.Support.V7.RecyclerView;
MvxRecyclerView relatedProducts = FindViewById(Resource.Id.RelatedProductItems);
relatedProducts.SetLayoutManager(new LinearLayoutManager(this.Context, LinearLayoutManager.Horizontal, false));

Maybe you will get this runtime error Could not activate JNI Handle of java type MvxRecyclerView for that add below .xml file.

https://github.com/MvvmCross/MvvmCross-AndroidSupport/issues/252

In Resources--> Values add below file

recycleview.xml

<xml version="1.0" encoding="utf-8" ?>
<resources>
<declare-styleable name="MvxRecyclerView">
<attr name="MvxTemplateSelector" format="string" />
declare-styleable>
resources>

Thanks.

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Venkata Swamy Balaraju8y ago
Finally achieved the Horizontal ListView using MvxRecyclerView nuget

https://www.nuget.org/packages/MvvmCross.Droid.Support.V7.RecyclerView/

MvxRecyclerView:
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<MvvmCross.Droid.Support.V7.RecyclerView.MvxRecyclerView
android:id="@+id/RelatedProductItems"
app:MvxItemTemplate="@layout/related_product_item"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:nestedScrollingEnabled="true"/>
android.support.constraint.ConstraintLayout>
Access Recycler View in your activity class and set its LinearLayoutManager.Horizontal
using MvvmCross.Droid.Support.V7.RecyclerView;
MvxRecyclerView relatedProducts = FindViewById(Resource.Id.RelatedProductItems);
relatedProducts.SetLayoutManager(new LinearLayoutManager(this.Context, LinearLayoutManager.Horizontal, false));
Maybe you will get this runtime error Could not activate JNI Handle of java type MvxRecyclerView for that add below .xml file.

https://github.com/MvvmCross/MvvmCross-AndroidSupport/issues/252

In Resources--> Values add below file

recycleview.xml
<xml version="1.0" encoding="utf-8" ?>
<resources>
<declare-styleable name="MvxRecyclerView">
<attr name="MvxTemplateSelector" format="string" />
declare-styleable>
resources>
Thanks.
+1