Horizontal List View Inside List View In Xamarin Android

Background

Suppose there is a business requirement such as List of elements (List View) and inside each element there is another list of elements (List View) which looks like a horizontal list, then the Horizontal list view inside list view concept of Xamarin Android comes into the picture.

I got such a requirement hence I got a solution which I am explaining as follows:

How to develop this use case. Let's understand it step by step,

First step is to create blank android app project and give some meaningful name to it.

After creation of project there is a class file called MainActivity.cs which is the default start activity of your project same like Public Static Main() method in Console application as well as Main.axml file also present which is default Activity Layout which is set to MainActivity.cs
Add ListView to Main.axml and assign some unique Id to ListView.

Set Main.axml page to OnCreate() method of MainActivity.cs

Created New ViewModel folder.
Created new class file and named as EmployeeViewModel.

Code for EmployeeViewModel is as follows,
1. using System.Collections.Generic;
2. using HorizontalListViewInsideListViewDemo.Model;
3. namespace HorizontalListViewInsideListViewDemo.ViewModel {
4. public class EmployeeViewModel {
5. Employee emp1, emp2, emp3, emp4, emp5, emp6;
6. private List < Employee > _employeeList;
7. public List < Employee > EmployeeList {
8. get {
9. return _employeeList;
10. }
11. set {
12. _employeeList = value;
13. //RaisePropertyChanged(() => EmployeeList);
14. }
15. }
16. public EmployeeViewModel() {
17. emp1 = new Employee() {
18. Name = "Amit",
19. TaskList = new List < string > {
20. "Task 1",
21. "Task 2",
22. "Task 3"
23. }
24. };
25. emp2 = new Employee() {
26. Name = "Virendra",
27. TaskList = new List < string > {
28. "Task 1",
29. "Task 2",
30. "Task 3"
31. }
32. };
33. emp3 = new Employee() {
34. Name = "Mehul",
35. TaskList = new List < string > {
36. "Task 1",
37. "Task 2",
38. "Task 3"
39. }
40. };
41. emp4 = new Employee() {
42. Name = "LK",
43. TaskList = new List < string > {
44. "Task 1",
45. "Task 2",
46. "Task 3"
47. }
48. };
49. emp5 = new Employee() {
50. Name = "Shradhha",
51. TaskList = new List < string > {
52. "Task 1",
53. "Task 2",
54. "Task 3"
55. }
56. };
57. emp6 = new Employee() {
58. Name = "Nilam",
59. TaskList = new List < string > {
60. "Task 1",
61. "Task 2",
62. "Task 3"
63. }
64. };
65. }
66. public void GetEmployeeList() {
67. EmployeeList = new List < Employee > ();
68. EmployeeList.Add(emp1);
69. EmployeeList.Add(emp2);
70. EmployeeList.Add(emp3);
71. EmployeeList.Add(emp4);
72. EmployeeList.Add(emp5);
73. EmployeeList.Add(emp6);
74. }
75. }
76. }

Add new folder as Model.
Add new class file named as Employee.cs in Model folder.

Code for Employee.cs is as follows,

Added new Android Layout in Resources->Layout folder as “employeeListViewItems”

Designing code for” employeeListViewItems.axml” is as follows,

Code for employeeListViewItems.axml is as follows,
1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:orientation="vertical"
4. android:layout_width="match_parent"
5. android:layout_height="match_parent"
6. android:background="@android:color/white">
7. <TextView
8. android:layout_width="wrap_content"
9. android:layout_height="wrap_content"
10. android:id="@+id/empName"
11. android:layout_margin="10dp"
12. android:textColor="@android:color/darker_gray"
13. android:textSize="20dp"
14. android:textStyle="bold" />
15. <HorizontalScrollView
16. android:layout_width="match_parent"
17. android:layout_height="wrap_content"
18. android:scrollbarAlwaysDrawHorizontalTrack="false"
19. android:scrollbars="none"
20. android:layout_marginLeft="5dp"
21. android:layout_marginTop="15dp"
22. android:layout_marginBottom="20dp"
23. android:focusable="false"
24. android:focusableInTouchMode="false"
25. android:descendantFocusability="blocksDescendants">
26. <LinearLayout
27. android:id="@+id/mylist"
28. android:background="#ace6df"
29. android:layout_width="wrap_content"
30. android:layout_height="wrap_content"
31. android:orientation="horizontal"
32. android:focusable="false"
33. android:focusableInTouchMode="false"
34. android:descendantFocusability="blocksDescendants" />
35. </HorizontalScrollView>
36. </LinearLayout>

Added Nuget package for MVVM,

Now we have to added horizontal list view programmatically, we can add this List View in OnResume() method of android Lifecycle.
First we create list of Employee in EmployeeViewModel and store the list of Employee in EmployeeList which is a List<Employee>;
Then Create a Horizontal List View as per Task assigned to respected Employee.
Code of MainActivity.cs is as follows,
1. using Android.App;
2. using Android.Widget;
3. using Android.OS;
4. using HorizontalListViewInsideListViewDemo.ViewModel;
5. using System;
6. using GalaSoft.MvvmLight.Helpers;
7. using Android.Views;
8. using HorizontalListViewInsideListViewDemo.Model;
9. using Android.Graphics;
10. using Android.Util;
12. namespace HorizontalListViewInsideListViewDemo
13. {
14. [Activity(Label = "Horizontal List View Page", MainLauncher = true, Icon= "@drawable/icon")]
15. public class MainActivity : Activity
16. {
17. ListView employeeList;
18. EmployeeViewModel employeeViewModel;
19. protected override void OnCreate(Bundle bundle)
20. {
21. base.OnCreate(bundle);
22. // Set our view from the "main" layout resource
23. // SetContentView (Resource.Layout.Main);
24. SetContentView(Resource.Layout.Main);
25. employeeViewModel = new EmployeeViewModel();
26. employeeList = FindViewById<ListView>(Resource.Id.listEmployee);
27. }
29. protected override void OnResume()
30. {
31. base.OnResume();
32. try
33. {
34. employeeViewModel.GetEmployeeList();
35. // await getMultipleZonebySignalR();
37. if (employeeViewModel.EmployeeList != null)
38. {
39. RefreshList();
40. }
42. }
43. catch (Exception)
44. {
45. }
46. finally
47. {
48. //IsBusy = false;
49. }
51. }
53. private void RefreshList()
54. {
55. employeeList.Adapter = employeeViewModel.EmployeeList.GetAdapter(GetListAdapter);
56. }
58. private View GetListAdapter(int arg1, Employee emp, View view)
59. {
60. var empListView = LayoutInflater.Inflate(Resource.Layout.employeeListViewItems, null);
62. if (empListView != null)
63. {
64. empListView.FindViewById<TextView>(Resource.Id.empName).Text = emp.Name;
68. #region Horizontal ScrollView
69. var empTaskList = emp.TaskList;
70. var count = emp.TaskList.Count;
71. foreach (var taskName in empTaskList)
72. {
73. var button = new Button(this)
74. {
75. Text = taskName,
76. };
78. button.SetTextColor(Color.DarkGray);
79. button.SetTextSize(ComplexUnitType.Px, 40);
80. button.SetPadding(5, 3, 5, 3);
81. button.SetMaxHeight(80);
82. button.SetMaxWidth(150);
83. button.SetMinWidth(150);
84. button.SetMinHeight(80);
85. button.SetMinimumHeight(80);
86. button.SetMinimumWidth(150);
87. button.SetBackgroundColor(Color.White);
89. ((LinearLayout)empListView.FindViewById(Resource.Id.mylist)).AddView(button);
91. }
92. #endregion
94. }
95. return empListView;
96. }
98. protected override void OnPause()
99. {
100. base.OnPause();
101. }
102. protected override void OnDestroy()
103. {
104. base.OnDestroy();
105. }
106. public override void OnBackPressed()
107. {
108. //base.OnBackPressed();
109. }
110. }
111. }

Output window for Horizontal List View Inside List View in Xamarin Android,

Note

If any doubt regarding this topic please comment in Comments box below, I will get back to you as early as possible.

Summary

Hence we will learn how to create Horizontal List View inside List View in Xamarin Android.