How To Load The Data To Recyclerview And Search The Data In Kotlin Android - Part One

Introduction

 
Android is an open-source operating system based on Linux with a Java programming interface for mobile devices such as Smartphone (Touch Screen Devices who supports Android OS) as well as for Tablets. With over 85% market share worldwide, Android Operating System dominates the mobile platform market. Today, I will show you how to load the Data to RecyclerView and search the Data in Kotlin Android. In this part I will show the User Interface (UI)
 
Requirements
Steps to be followed,
 
Follow these steps to load the Data to RecyclerView and search the Data in Kotlin Android.
 
Step 1
 
Open Android Studio and start a new Android Studio Project.
 
How To Load The Data To Recyclerview And Search The Data In Kotlin Android 
 
Step 2
 
Now, add the activity and click the "Next" button.
 
How To Load The Data To Recyclerview And Search The Data In Kotlin Android
 
Step 3
 
You can choose your application name and choose where your project is to be stored and choose Kotlin language for coding the project. Now, select the version of Android and select the target Android devices, and click the "Finish" button.
 
How To Load The Data To Recyclerview And Search The Data In Kotlin Android
 
Step 4
 
Go to Drawable file. Add rectangle.xml to show the searchview of Data.
 
How To Load The Data To Recyclerview And Search The Data In Kotlin Android 
 
The XML code is given below, 
  1. <shape android:shape="rectangle"    
  2.    xmlns:android="http://schemas.android.com/apk/res/android" >    
  3.    <stroke android:color="#000"    
  4.    android:width="2dp"/>    
  5.    <corners android:radius="10dp"/>    
  6. </shape>   
Step 5
 
Go to Drawable file. Add search.xml to show the searchview of Data.
 
How To Load The Data To Recyclerview And Search The Data In Kotlin Android 
 
The XML code is given below,
  1. <vector android:height="24dp" android:tint="#fff"    
  2.    android:viewportHeight="24.0" android:viewportWidth="24.0"    
  3.    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">    
  4.    <path android:fillColor="#FF000000" android:pathData="M15.5,14h-0.79l-0.28,-0.27C15.41,12.59 16,11.11 16,9.5 16,5.91 13.09,3 9.5,3S3,5.91 3,9.5 5.91,16 9.5,16c1.61,0 3.09,-0.59 4.23,-1.57l0.27,0.28v0.79l5,4.99L20.49,19l-4.99,-5zM9.5,14C7.01,14 5,11.99 5,9.5S7.01,5 9.5,5 14,7.01 14,9.5 11.99,14 9.5,14z"/>    
  5. </vector>  
Step 6
 
Go to layout folder. Add the listcard.xml. This XML file contains the designing code for recyclerview.
 
How To Load The Data To Recyclerview And Search The Data In Kotlin Android
 
The XML code is given below,
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <androidx.cardview.widget.CardView  
  3.     xmlns:android="http://schemas.android.com/apk/res/android"    
  4. android:id="@+id/listcard"    
  5. android:layout_width="match_parent"    
  6. android:layout_height="wrap_content"    
  7. android:background="#fcfcfc"    
  8. android:orientation="vertical"    
  9. android:padding="10dp">  
  10.     <androidx.cardview.widget.CardView    
  11. android:layout_width="match_parent"    
  12. android:layout_height="wrap_content"    
  13. android:layout_gravity="center"    
  14. android:layout_margin="10dp"    
  15. android:clickable="true">  
  16.         <LinearLayout    
  17. android:layout_width="match_parent"    
  18. android:layout_height="120dp"    
  19. android:orientation="horizontal">  
  20.             <androidx.appcompat.widget.AppCompatTextView    
  21. android:id="@+id/name"    
  22. android:layout_width="0dp"    
  23. android:layout_height="match_parent"    
  24. android:layout_weight="1"    
  25. android:gravity="center"    
  26. android:text="Name"    
  27. android:textSize="18sp"    
  28. android:textStyle="bold"/>  
  29.             <TextView    
  30. android:id="@+id/url"    
  31. android:layout_width="0dp"    
  32. android:layout_height="match_parent"    
  33. android:layout_weight="1.5"    
  34. android:gravity="center"    
  35. android:text="Email"    
  36. android:textSize="18sp"    
  37. android:textStyle="bold"/>  
  38.         </LinearLayout>  
  39.     </androidx.cardview.widget.CardView>  
  40. </androidx.cardview.widget.CardView>   
Step 7
 
Go to layout folder. Add the listhead.xml. This XML file contains the designing code for recyclerview header.
 
How To Load The Data To Recyclerview And Search The Data In Kotlin Android 
 
The XML code is given below,
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout  
  3.     xmlns:android="http://schemas.android.com/apk/res/android"    
  4. android:orientation="vertical"    
  5. android:id="@+id/brandhead"    
  6. android:padding="10dp"    
  7. android:layout_width="match_parent"    
  8. android:layout_height="match_parent">  
  9.     <LinearLayout    
  10.     
  11. android:background="@color/colorPrimaryDark"    
  12. android:layout_width="match_parent"    
  13. android:layout_height="wrap_content">  
  14.         <LinearLayout    
  15. android:layout_width="match_parent"    
  16. android:layout_height="60dp"    
  17. android:orientation="horizontal">  
  18.             <androidx.appcompat.widget.AppCompatTextView    
  19. android:gravity="center"    
  20. android:textColor="#fff"    
  21. android:textSize="18sp"    
  22. android:text="Title"    
  23. android:textStyle="bold"    
  24. android:layout_width="0dp"    
  25. android:layout_weight="1"    
  26. android:layout_height="match_parent"></androidx.appcompat.widget.AppCompatTextView>  
  27.             <TextView    
  28. android:gravity="center"    
  29. android:textColor="#fff"    
  30. android:textSize="18sp"    
  31. android:text="Url"    
  32. android:textStyle="bold"    
  33. android:layout_width="0dp"    
  34. android:layout_weight="1.5"    
  35. android:layout_height="match_parent"></TextView>  
  36.         </LinearLayout>  
  37.     </LinearLayout>  
  38. </LinearLayout>  
Step 8
 
Go to activity_main.xml. This XML file contains the designing code for your Android app.
 
How To Load The Data To Recyclerview And Search The Data In Kotlin Android
 
The XML code is given below,
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout  
  3.     xmlns:android="http://schemas.android.com/apk/res/android"  
  4.     xmlns:app="http://schemas.android.com/apk/res-auto"  
  5.     xmlns:tools="http://schemas.android.com/tools"    
  6. android:layout_width="match_parent"    
  7. android:layout_height="match_parent"    
  8. android:orientation="vertical">  
  9.     <!-- app bar with Toolbar is the actual text and the action items -->  
  10.     <com.google.android.material.appbar.AppBarLayout    
  11. android:id="@+id/appBar"    
  12. android:layout_width="match_parent"    
  13. android:layout_height="wrap_content"    
  14. android:theme="@style/AppTheme.AppBarOverlay">  
  15.         <androidx.appcompat.widget.Toolbar    
  16. android:id="@+id/toolbar"    
  17. android:layout_width="match_parent"    
  18. android:layout_height="?attr/actionBarSize"    
  19. android:background="?attr/colorPrimary"    
  20. app:popupTheme="@style/AppTheme.PopupOverlay">  
  21.             <RelativeLayout    
  22. android:layout_width="match_parent"    
  23. android:layout_height="match_parent">  
  24.                 <TextView    
  25. android:layout_gravity="center"    
  26. android:id="@+id/navLogoIv"    
  27. android:layout_width="130dp"    
  28. android:layout_height="40dp"    
  29. android:layout_marginTop="15dp"    
  30. android:textSize="16sp"    
  31. android:textStyle="bold"    
  32. android:text="RecyclerView" />  
  33.             </RelativeLayout>  
  34.         </androidx.appcompat.widget.Toolbar>  
  35.     </com.google.android.material.appbar.AppBarLayout>  
  36.     <!-- SearchBar -->  
  37.     <RelativeLayout    
  38. android:id="@+id/searchbrandrelativelayout"    
  39. android:layout_width="wrap_content"    
  40. android:layout_height="wrap_content"    
  41. android:layout_below="@+id/appBar"    
  42. android:layout_marginTop="5dp">  
  43.         <com.google.android.material.textfield.TextInputEditText    
  44. android:id="@+id/searchbrandedit"    
  45. android:layout_width="match_parent"    
  46. android:layout_height="40dp"    
  47. android:layout_centerVertical="true"    
  48. android:paddingStart="10dp"    
  49. android:layout_marginStart="16dp"    
  50. android:layout_marginEnd="16dp"    
  51. android:background="@drawable/rectangle"    
  52. android:hint="Search Here"    
  53. android:paddingLeft="10dp" />  
  54.         <androidx.appcompat.widget.AppCompatImageButton    
  55. android:id="@+id/searchbrand"    
  56. android:layout_width="wrap_content"    
  57. android:layout_height="wrap_content"    
  58. android:layout_alignTop="@+id/searchbrandedit"    
  59. android:layout_alignEnd="@+id/searchbrandedit"    
  60. android:layout_alignBottom="@+id/searchbrandedit"    
  61. android:background="@color/colorPrimary"    
  62. android:padding="5dp"    
  63. android:src="@drawable/search" />  
  64.     </RelativeLayout>  
  65.     <!-- Add Brand Button -->  
  66.     <!-- No Records Found Text-->  
  67.     <!-- Brand Header-->  
  68.     <include    
  69. layout="@layout/listhead"    
  70. android:id="@+id/brandid"    
  71. android:layout_width="match_parent"    
  72. android:layout_height="wrap_content"    
  73. android:layout_below="@id/searchbrandrelativelayout"/>  
  74.     <!-- Brand List-->  
  75.     <androidx.recyclerview.widget.RecyclerView    
  76. android:id="@+id/brandlist"    
  77. android:layout_width="match_parent"    
  78. android:layout_height="wrap_content"    
  79. android:layout_below="@id/brandid"></androidx.recyclerview.widget.RecyclerView>  
  80. </RelativeLayout>    
Step 9
 
Go to values ->styles.xml. These are the styles for your app.
 
How To Load The Data To Recyclerview And Search The Data In Kotlin Android
 
The XML code is given below,
  1. <resources>  
  2.     <!-- Base application theme. -->  
  3.     <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">  
  4.         <!-- Customize your theme here. -->  
  5.         <item name="colorPrimary">@color/colorPrimary</item>  
  6.         <item name="colorPrimaryDark">@color/colorPrimaryDark</item>  
  7.         <item name="colorAccent">@color/colorAccent</item>  
  8.     </style>  
  9.     <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />  
  10.     <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />  
  11. </resources>  

Conclusion

 
In this part, I showed about the front end of how to load the Data to RecyclerView and search the Data in Kotlin Android. In the next part I will show about the backend of how to load the Data to RecyclerView and search the Data in Kotlin Android.