HKUSTx: COMP107x Introduction to Mobile Application Development using Android

Week1-01.ipynb

Week1-02.ipynb

Week1-03.ipynb

Week1-04.ipynb

Week1-05.ipynb

Week2-01.ipynb

Week2-02.ipynb

Week2-03.ipynb

Week2-04.ipynb

Week2-05.ipynb

Week3-01.ipynb

Week3-02.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Exercise: Chat Client Colors (Part 2)\n",
    "---\n",
    "## Objectives\n",
    "\n",
    "This exercise aims to familiarise you with the basic elements of material design. At the end of this exercise you will be able to:\n",
    "\n",
    "* Demonstrate the use of an ImageButton on the UI\n",
    "* Demonstrate the use of a toolbar in an Android UI and see how it can be used as an ActionBar\n",
    "* Understand the use of RecyclerView widget for displaying a list of items on the UI\n",
    "\n",
    "\n",
    "## Introduction\n",
    "\n",
    "In Part 2, we will examine the UI layouts for the ChatClient application and understand how we can make use of some of the basic elements of material design. In particular we see the use of the toolbar and the RecyclerView on the UI and how they are activated in the Java code.\n",
    "\n",
    "## Textual Instructions\n",
    "---\n",
    "### Step 1: Examining the Project Files\n",
    "\n",
    "1. Open the **activity_contacts.xml** and examine how the UI is designed.\n",
    "2. Open the **activity_chat_client.xml** and see the use of the ImageButton on the UI. Examine the use of the toolbar and RecyclerView on the UI. Keep this file open for future use.\n",
    "3. Open the **tool_bar.xml** file and see the design of the toolbar layout as explained in the video instructions.\n",
    "4. Examine the inclusion of the RecyclerView on the UI as explained in the video instructions.\n",
    "5. Open the **Contacts.Java** and see how we use this activity to display the list of friends on the UI.\n",
    "6. Open the **AndroidManifest.xml** file and see how the Contacts activity is configured as the starting activity as explained in the video instructions.\n",
    "7. Open the **MyAdapter.java** file and see how the custom adapter for the RecyclerView is defined. Follow the video instructions.\n",
    "\n",
    "---\n",
    "### Step 2: Using the Toolbar\n",
    "\n",
    "1. Open the **ChatClient.java** file and go to the onCreate() method to the location where the *//TODO TOOLBAR* comments are included. We will now fill in the code to enable the toolbar.\n",
    "2. Replace the comment with the following code, as shown below.\n",
    "        \n",
    "        toolbar = (Toolbar) findViewById(R.id.tool_bar); // Attaching the layout to the toolbar object\n",
    "        setSupportActionBar(toolbar);                   // Setting toolbar as the ActionBar with setSupportActionBar() call\n",
    "\n",
    "        // get the friend's name from the Intent\n",
    "        Intent in = getIntent();\n",
    "        String friendName = in.getStringExtra(getString(R.string.friend));\n",
    "\n",
    "        // Set the toolbar title to friend's name. This is a little quirk\n",
    "        // that once you set the toolbar to be an ActionBar, you have to\n",
    "        // use this approach to set the title\n",
    "        getSupportActionBar().setTitle(friendName);\n",
    "\n",
    "---\n",
    "### Step 3: Using the RecyclerView\n",
    "1. In **ChatClient.java**, move to the comment *//TODO RECYCLERVIEW* and replace it with the code shown below.\n",
    "        \n",
    "        messageList = (RecyclerView) findViewById(R.id.messageList);\n",
    "        messageList.setHasFixedSize(true);\n",
    "        LinearLayoutManager llm = new LinearLayoutManager(this);\n",
    "        llm.setOrientation(LinearLayoutManager.VERTICAL);\n",
    "        messageList.setLayoutManager(llm);\n",
    "        messageList.setAdapter(mAdapter);\n",
    "2. Run the application and see the result."
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 2",
   "language": "python",
   "name": "python2"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 2
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython2",
   "version": "2.7.6"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}

Week3-03.ipynb

Week3-04.ipynb

Week3-05.ipynb

Week4-01.ipynb

Week4-02..ipynb

Week4-03.ipynb

Week4-04.ipynb

Week5-01.ipynb

Week5-02.ipynb

Week5-03.ipynb

Week5-04.ipynb