COMP7506 Smart phone apps development
Workshop 4 Android Apps Development (Part 2)
1) Introduction
In Workshop 3, we developed the login screen of our Moodle app. In this workshop, we are going to
design the list layout, and learn how to pass messages between activities.
2) Opening / importing your project for Workshop 3
3) Introduction of “RecyclerView” in Android
RecyclerView makes it easy to efficiently display large sets of data. You supply the data and define how
each item looks, and 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. RecyclerView improves performance and your app's responsiveness, and it
reduces power consumption.
4) Creating new Activity
Browse to <Project> → app → java → <package name>, and then right-click New → Activity → Empty
Views Activity
Set the Activity Name as CourseListActivity, also set the Layout Name as course_list.
5) Include the RecyclerView component in course_list.xml.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="[Link]
android:layout_width="match_parent"
android:layout_height="match_parent">
<[Link]
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
6) Define the row layout of each record in the list <LinearLayout>
Container for TextView
<TextView>
Browse to <Project> → app → res →layout → course_list_item.xml
Replace the contents of course_list_item.xml with following:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="[Link]
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView android:id="@+id/coursename"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FF7300"
android:textSize="16sp" />
<TextView android:id="@+id/teachers"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000000"
android:textSize="13sp" />
</LinearLayout>
7) Modify [Link] as follows:
a) Introduction to List Data and Adapter
In general, HashMap is used to construct the list data for RecyclerView. The keys of the map will be
used to map on the IDs of components (e.g., “CourseName”, “Teachers”).
To bind our HashMap to RecycleView, we need to set an adapter to put each entry of (“CourseName”,
“Teachers”) into the item view we defined in course_list_item.xml.
b) Creating an ArrayList list for holding the HashMap’s.
ArrayList< Map<String, String>> list = new ArrayList< Map<String, String>>();
c) Inside onCreate function, remove the original code and add the following code:
i) Initialize the view using course_list.xml
[Link](savedInstanceState);
setContentView([Link].course_list);
ii) Getting ArrayList from Intent which will be passed from MainActivity
Intent intent = [Link]();
ArrayList<String> courseName = [Link]("CourseName");
ArrayList<String> teachers = [Link]("Teachers");
for ( int i = 0; i < [Link](); i++ ) {
Map<String, String> map = new HashMap<>();
[Link]( "CourseName", [Link](i) );
[Link]( "Teachers", [Link](i) );
[Link](map);
}
iii) Locating RecyclerView, setting adapter and passing data
RecyclerView recyclerView = findViewById([Link]);
[Link](new LinearLayoutManager(this));
[Link](new MyAdapter(list));
8) Create a new Java Class as [Link]
a) We need to use [Link] to process the data list. For more details, refer to
[Link]
public class MyAdapter extends [Link]<[Link]> {
private List<Map<String, String>> dataList;
public MyAdapter(List<Map<String, String>> dataList) {
[Link] = dataList;
b) Then we need to implement ViewHolder within MyAdapter. It defines the view for each entry of our
list. We will use the layout of course_list_item.xml for each entry. And we link variables
courseNameTextView and teachersTextView to the layout.
public static class ViewHolder extends [Link] {
// Locating fields in course_list_item.xml for holding data items
TextView courseNameTextView;
TextView teachersTextView;
public ViewHolder(View itemView) {
super(itemView);
courseNameTextView = [Link]([Link]);
teachersTextView = [Link]([Link]);
c) Next, we need to implement onCreateViewHolder, onBindViewHolder and getItemCount.
i) onCreateViewHolder will be called whenever a new ViewHolder is needed. Note that our contents
will not be filled in here, because the ViewHolder has not been bound to specific data.
@NonNull
@Override
public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
View view = [Link]([Link]())
.inflate([Link].course_list_item, parent, false);
return new ViewHolder(view);
}
ii) onBindViewHolder associates a ViewHolder with data. This method fetches the appropriate data
and uses the data to fill in the view holder's layout.
@Override
// Extracting data from input list (parameter to adapter constructor)
public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
Map<String, String> data = [Link](position);
[Link]([Link]("CourseName"));
[Link]([Link]("Teachers"));
iii) getItemCount gets the size of the dataset.
@Override
public int getItemCount() {
return [Link]();
9) Passing messages(ArrayLists) from MainActivity to CourseListActivity
a) Introduction
Switching from one activity to another requires an Intent which is used to store messages and inform
the android to switch into the specific activity.
b) Inside the onClick function in [Link], add the following code:
Intent intent = new Intent(getBaseContext(), [Link]);
ArrayList<String> cname = new ArrayList<String>();
ArrayList<String> cteachers = new ArrayList<String>();
//*************Sample Data*************//
[Link]("c1"); [Link]("t1");
[Link]("c2"); [Link]("t2");
[Link]("c3"); [Link]("t3");
[Link]("c4"); [Link]("t4");
//*************Sample Data*************//
[Link]("CourseName", cname);
[Link]("Teachers", cteachers);
startActivity(intent);
10) Testing
Please save and keep your work properly. We will continue in the next workshop. Also
you need to submit your work after Workshop 5 as a proof of workshop participation.