Posts

MIT App Inventor - How to render larger data sets efficiently using RecyclerList Extension - Advanced Guide

Image
In this guide I will show you how to render larger data sets using RecyclerList extension and how to create a custom search bar to filter data. In the specific example as database I used a Google Spreadsheet with 5 columns and 1.200 rows but I have tested it with even bigger databases and worked with no problem.  For those we are not familiar with dynamic components please read first the  RecyclerList - Basic guide The result is ... Extensions used in this project  Recycler List  by  Zain Ul Hassan  ListUtils   by  Zain Ul Hassan  to filter data  Enhance extesnion   by Kevinkun  to create stylish cardviews  TextBox extension  by Pura Vida Apps in order to use on textbox change event ClickZ extension  by Aquib Khan to add click event to cardviews and Image Loader   by  Ayoub Mounchid to load images asynchronous  Lets start. Go to  http://ai2.appinventor.mit.edu/ and create a new project  Designer part As you see I added a hidden ListView component - you must do it otherwise RecyclerLi

MIT App Inventor - How to use RecyclerList extension - Basic guide

Image
RecyclerList extension makes it easy to efficiently display large sets of data. You supply the data and define how each item looks, and then the RecyclerView library dynamically creates the elements when they're needed. As the name implies, RecyclerView  recycles  those individual elements. When an item scrolls off the screen, RecyclerView doesn't destroy its view. Instead, RecyclerView reuses the view for new items that have scrolled onscreen. This reuse improves app’s performance and responsiveness. In this guide I will show you how to use RecyclerList extension   created by Zain UI Hassan   with MIT App Inventor Lets's start, go to http://ai2.appinventor.mit.edu/ and create a new project and  In Designer View 1) Import the extension to your project 2) Add a ListView component and hide it - This requirement is needed only when using AI2 otherwise the app will crash  3) Create your layout, for example I will use a list that will contain clients names and I want to have a