Building Android layouts with Mirror -- Skyscanner

skyscanner-workshop

#Building Android layouts with Mirror
##Target audience
Android UI designers and beginner developers interested in UI
##Why?
The line between a designer and a developer is blurring. To be good at either UI design or development requires a good understanding of both worlds. This course attempts to teach designers the most important elements in developing a modern Android UI, helping them understand the power and constraints of Android and a big picture of UI development.
##Prerequisites
  - Some familiarity with XML
  - Experience in designing UI for Android apps is a plus
  - Coding background isn't required
  - Bring a laptop with Android Studio, Android SDK and jimu Mirror properly installed (see "0. Environment setup")

## Format
- 2-hour workshop
- series of short lectures followed by hands-on sessions

##Goals
  - Students will understand how an app's UI is implemented including layouts, views, animations, styles, themes etc.  The course puts a strong emphasis on Android's XML-based layout/resource system. 
  - In the hands-on sessions, students will gradually build an app's layouts and preview them on a device or an emulator using Mirror

## Disclaimer
This course material is a work-in-progress, which will be used to create an open-source, online course that helps designers master necessary development skills for building Android UI. The bulk of the course material will be developed on my flight from Seattle to London and will be updated until Wed. Oct 29th.

What you are seeing here is at very early stage. Your feedback is important to shape this course (and will help others become better designers too). If you have any suggestions or comments, please talk to me at the workshop or email me at [email protected].  I'd really appreciate your help! See you soon!

----------

#Course Content
## 0. Environment setup (to be done before the workshop)
###Android Studio and device setup
1. Follow [this guide](http://jimulabs.com/mirror-docs/mirror-js-designer-guide/) to download and install Android Studio and set up your devices for development.
2. Download and install [this new build of jimu Mirror](https://www.dropbox.com/s/mokpz6up68tkn09/MirrorASPlugin-2.1.4-js-1047.201410262032-release.zip?dl=0)
3. Download the latest SDK (Tools -> Android -> SDK Manager):
	4. Android SDK Build-tools (21.0.2)
	5. Android 5.0 (API 21): SDK Platform

###Genymotion
[Genymotion](http://www.genymotion.com/) is an emulator that allows you to run Android on a computer. It's (much) faster than the stock emulator that comes with the Android SDK. Installation of Genymotion isn't required for this course. However, I highly recommend it if you don't have an actual device for the workshop.

## 1. Hello world (20 minutes)

### Lecture (5 minutes)
  - A quick tour of Android Studio UI
  - Intro to Mirror
### Hands-on (15 minutes)
  - Create a project
  - Make a simple screen using AS's UI designer
  - Preview with Mirror

## 2. Layout basics (10 minutes)
### Lecture (10 minutes)
- What is an app made of?
- XML premier
- Layout XML
- Android's resource system

## 3. Basic widgets (views) (20 minutes)
### Lecture (5 minutes)
- TextViews and ImageViews
- LinearLayout
- RelativeLayout
- FrameLayout
### Hands-on (15 minutes)
- Create a layout using views that are covered

----------

## Break (10 minutes)

----------

## 4. Advanced widgets (20 minutes)
### Lecture (5 minutes)
- ListView (GridView, RecyclerView)
- ViewPager
- Action bar
- Using third-party UI Widgets
### Hands-on (15 minutes)
- Create a layout using views that are covered


## 5. Advanced Android Resources (30 minutes)
### Lecture (10 minutes)
- `<include>`
- Themes
- Styles
- XML Drawables
- Selectors
### Hands-on (15 minutes)
- Create and style layouts

## 6. Motion (if there is time)
- @anim and @animator resources
- transitions in Android L
- animator state list

> Written with [StackEdit](https://stackedit.io/).