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
  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.