clamytoe · August 29, 2015 14:27
diff --git a/Week1-01.ipynb b/Week1-01.ipynb
diff --git a/Week1-02.ipynb b/Week1-02.ipynb
diff --git a/Week1-03.ipynb b/Week1-03.ipynb
diff --git a/Week1-04.ipynb b/Week1-04.ipynb
diff --git a/Week1-05.ipynb b/Week1-05.ipynb
diff --git a/Week2-01.ipynb b/Week2-01.ipynb
diff --git a/Week2-02.ipynb b/Week2-02.ipynb
diff --git a/Week2-03.ipynb b/Week2-03.ipynb
diff --git a/Week2-04.ipynb b/Week2-04.ipynb
diff --git a/Week2-05.ipynb b/Week2-05.ipynb
diff --git a/Week3-01.ipynb b/Week3-01.ipynb
 {
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Exercise: Chat Client Colors (Part 1)\n",
    "---\n",
    "## Objectives\n",
    "\n",
    "This exercise aims to explore the use of colors, styles, themes and drawables in designing an UI for an Android application. At the end of this exercise, you will be able to:\n",
    "\n",
    "* Define colors, styles and themes for use in UI design\n",
    "* Understand the use of images in an UI, and in particular the use of an image button\n",
    "* Employ shape drawables to add background color to a UI widget or a layout in the UI\n",
    "\n",
    "\n",
    "## Introduction\n",
    "\n",
    "We are now going to extend the Chat Client UI app that we encountered in the previous exercise by adding colors, styles, themes, images and drawables to enhance the user interface.\n",
    "\n",
    "## Textual Instructions\n",
    "---\n",
    "### Step 1: Examining the Project Files\n",
    "\n",
    "1. Download [ChatClientColors.zip](http://w02.hkvu.hk/edX/COMP107x/w3/ChatClientColors.zip), unzip and import the project into Android Studio.\n",
    "2. Follow the video instructions and view the contents of **build.grade**, **ChatClient.java**, **colors.xml** and **styles.xml**.\n",
    "\n",
    "---\n",
    "### Step 2: Using a Shape Drawable\n",
    "\n",
    "1. Note the inclusion of images in the drawables folder. Follow the video instructions on the different image resolutions.\n",
    "2. Open the **bg_message_left.xml** and **bg_message_right.xml** files to see how we define shape drawables in there. Follow the video instructions. The use of drawables will be explained further in the next video lecture.\n",
    "3. Open the **message.xml** file, select the linear layout enclosing the message and time TextView. Set the ***background*** of the linear layout to be *@drawable/bg_message_left*. Take note on how the message on the layout now acquires a colored background.\n",
    "4. Open the **mymessage.xml** file, select the linear layout enclosing the message and time TextView. Set the ***background*** of the linear layout to be *@drawable/bg_message_right*."
   ]
  }
 ],
 "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
 }
diff --git a/Week3-02.ipynb b/Week3-02.ipynb
diff --git a/Week3-03.ipynb b/Week3-03.ipynb
diff --git a/Week3-04.ipynb b/Week3-04.ipynb
diff --git a/Week3-05.ipynb b/Week3-05.ipynb
diff --git a/Week4-01.ipynb b/Week4-01.ipynb
diff --git a/Week4-02..ipynb b/Week4-02..ipynb
diff --git a/Week4-03.ipynb b/Week4-03.ipynb
diff --git a/Week4-04.ipynb b/Week4-04.ipynb
diff --git a/Week5-01.ipynb b/Week5-01.ipynb
diff --git a/Week5-02.ipynb b/Week5-02.ipynb
diff --git a/Week5-03.ipynb b/Week5-03.ipynb
diff --git a/Week5-04.ipynb b/Week5-04.ipynb
	{
	"cells": [
	{
	"cell_type": "markdown",
	"metadata": {},
	"source": [
	"# Exercise: Chat Client Colors (Part 1)\n",
	"---\n",
	"## Objectives\n",
	"\n",
	"This exercise aims to explore the use of colors, styles, themes and drawables in designing an UI for an Android application. At the end of this exercise, you will be able to:\n",
	"\n",
	"* Define colors, styles and themes for use in UI design\n",
	"* Understand the use of images in an UI, and in particular the use of an image button\n",
	"* Employ shape drawables to add background color to a UI widget or a layout in the UI\n",
	"\n",
	"\n",
	"## Introduction\n",
	"\n",
	"We are now going to extend the Chat Client UI app that we encountered in the previous exercise by adding colors, styles, themes, images and drawables to enhance the user interface.\n",
	"\n",
	"## Textual Instructions\n",
	"---\n",
	"### Step 1: Examining the Project Files\n",
	"\n",
	"1. Download [ChatClientColors.zip](http://w02.hkvu.hk/edX/COMP107x/w3/ChatClientColors.zip), unzip and import the project into Android Studio.\n",
	"2. Follow the video instructions and view the contents of build.grade, ChatClient.java, colors.xml and styles.xml.\n",
	"\n",
	"---\n",
	"### Step 2: Using a Shape Drawable\n",
	"\n",
	"1. Note the inclusion of images in the drawables folder. Follow the video instructions on the different image resolutions.\n",
	"2. Open the bg_message_left.xml and bg_message_right.xml files to see how we define shape drawables in there. Follow the video instructions. The use of drawables will be explained further in the next video lecture.\n",
	"3. Open the message.xml file, select the linear layout enclosing the message and time TextView. Set the *background* of the linear layout to be @drawable/bg_message_left. Take note on how the message on the layout now acquires a colored background.\n",
	"4. Open the mymessage.xml file, select the linear layout enclosing the message and time TextView. Set the *background* of the linear layout to be @drawable/bg_message_right."
	]
	}
	],
	"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
	}