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

{
 "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
}

Week3-02.ipynb

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