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 linton@jimulabs.com.  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
4. Download the course material for hands-on sessions from [here](https://www.dropbox.com/sh/jrxy6ot1ozorckn/AABZmwQP3USVgX11nTmIvqt3a?dl=0).

###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
  - Import the course project `projects-to-import/MirrorMailProject`

## 2. Layout basics (10 minutes)
### Lecture (10 minutes)
- What is the UI of an Android app made of?
- XML premier
- Layout XML
- Android's resource system
	- layouts
	- drawables
	- animators
	- anims
	- menus
	- values
- Course project goal:
	- build a few layouts for a mail app, screen mockups can be found in the [course material](https://www.dropbox.com/sh/jrxy6ot1ozorckn/AABZmwQP3USVgX11nTmIvqt3a?dl=0).

## 3. Basic widgets (views) (30 minutes)
### Lecture (10 minutes)
- TextViews and ImageViews
- LinearLayout
- RelativeLayout
- FrameLayout
- Layout best practices
### Hands-on (20 minutes)
- Create layout `mail_list_item`, according to the `mockup.png` found in directory `3-basic-widgets`. Choose appropriate views and layouts.

----------

## Break (10 minutes)

----------

## 4. Advanced widgets (30 minutes)
### Lecture (5 minutes)
- Use custom views (CircularImageView)
- ListView (GridView)
- Action bar
- ViewPager
### Hands-on (25 minutes)
- Create layout `mail_list`, use `mail_list_item` and populate it with sample data in Mirror.  See `mockup1.png`
- Update `mail_list_item` to use `CircularImageView` instead of `ImageView`
- Create layout `mail_list_viewpager` and populate it with sample data in Mirror. See `mockup2.png` 

## 5. Building responsive layouts (20 minutes)
### Lecture (5 minutes)
- How does Android handle the vastly different phone configurations (such as screen sizes)?
- Best practices
### Hands-on (15 minutes)
- Build a two-pane layout for the landscape mode.  If we use Mirror to preview the screen `mail_list` in landscape mode,  the resulting screen should look like `mockup-land.png`. The screen in portrait mode should remain unchanged.
	- hint: use the following code in `mirror/mail_list.xml` to populate the panel on the right:
```
        <read_mail>
            <_content include="read_mail_content.xml"/>
        </read_mail>
```
- Bonus if you can fix the overlapping TextViews in the mail list

## 6. Advanced Android Resources (if there is time)
### Lecture (10 minutes)
- `<include>`
- Themes
- Styles
- XML Drawables
- Selectors
- Using third-party UI Widgets (RecyclerView)
### Hands-on (15 minutes)
- Change styles and themes and preview them in Mirror 

## 7. Motion (if there is time)
- @anim and @animator resources
- transitions in Android Lollipop
- animator state list
- prototype animations using Mirror.js

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