Guide of recyclerview component

Hello! Guys,
Today I’m going to share a guide to use recyclerview component.

To use this component first you need to create your design with XML. Don’t worry if you don’t know XML then you can use xml code from any site. Many sites provide you free UI with xml, just you need to download the code and edit or preview with this site : Android Visualizer

While editing your code you have to add android:tag="id" in every component of the code, replace id with a unique value for every component. Let’s take one example.

<RelativeLayout
    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="105dp"
    android:tag="mainLayout">
  
  
    <TextView
        android:layout_width="200dp"
        android:id="@+id/examName"
        android:textSize="16sp"
        android:layout_marginStart="20dp"
        android:text="First Exam"
        android:tag="mainTitle"
        android:textColor="#000"
        android:layout_marginEnd="20dp"
        android:maxLines="1"
        android:layout_marginTop="15dp"
        android:layout_height="wrap_content"/>
  
    <ImageView
        android:id="@+id/examPic"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_below="@+id/examName"
        android:tint="#808080"
        android:layout_marginStart="20dp"
        android:layout_marginTop="7dp"
        android:src="@android:drawable/ic_menu_save"/>
  
    <TextView
        android:id="@+id/examDate"
        android:layout_toEndOf="@+id/examPic"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/examName"
        android:layout_marginTop="5dp"
        android:layout_marginEnd="20dp"
        android:layout_marginStart="10dp"
        android:gravity="center"
        android:text="May 23, 2015"
        android:tag="date"
        android:textSize="16sp"/>
  
    <ImageView
        android:id="@+id/examPic2"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_below="@+id/examDate"
        android:tint="#808080"
        android:layout_marginStart="20dp"
        android:layout_marginTop="7dp"
        android:src="@android:drawable/ic_menu_save"/>
  
    <TextView
        android:id="@+id/examMessage"
        android:layout_toEndOf="@+id/examPic2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/examDate"
        android:layout_marginEnd="20dp"
        android:layout_marginTop="5dp"
        android:layout_marginStart="10dp"
        android:gravity="center"
        android:text="Best Of Luck"
        android:tag="caption"
        android:textSize="16sp"/>
  
  
    <TextView
        android:id="@+id/border2"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_marginStart="15dp"
        android:layout_marginEnd="15dp"
        android:layout_alignParentBottom="true"
        android:background="#808080"/>
  
  
</RelativeLayout>

In this code you can find android:tag="id" in every component. This is the ID of your component in the block part you need it.

Blocks

In parameter count you have to enter the length of your listview. Like how much long listview you want to create. If you are calling data from any database then use get length of list block in count parameter.

In item added event block you have to add click listener block where in parameter id you have to enter id(the unique id i had told you earlier to add in code for every component) of the component. For When that component click then click event of recyclerview will triggered.

main part of the block to add value to your label or image

In this part you have to use when recylerview scroll event, in this event you have to use blocks from any component. Like I am using set label text, in component parameter I used block call recyclerview getcomponent in id parameter we have to enter the id of the label which we have entered in the code and in position parameter get the variable position from event the paste there.

Note: position return you value from 0 so if you are indexing item from list then must add 1 in index. And get component block works with label,image,textbox and some other important components.

At last I want to tell you that XML is the easy language like HTML so learn it if you can.

Apk and aia

Recyclerview (3).apk (4.7 MB)
Recyclerviewbykiller.aia (3.7 KB)

Tool : Android Visualizer

Special thanks to @KrishJha and @tanishraj

It’s my first guide.

Soon i will post some designs with this component

Note: this component only work in compiled app not in companion.

Thank you :niotron:

4 Likes

Nice tutorial :+1: :+1:

1 Like

My question is, where did you get this?

From this

or the offered apk is with more blocks jajaja?

1 Like

He wrote it in the XML file.

4 Likes

It’s in my xml code, check the code.

1 Like

If I paste the XML code into “Android visualiser” then showing bunch of errors. how to byspass and see the design.

Actually some of codes are not supported on this site. You may try any other xml viewer. Google it.

Isn’t it better to use html instead of this, atleast we can see preview in companion.

:expressionless: there are lots of difference between html and xml. And the recyclerview component made for xml not for html.

Html use to create static sites not app.