Download - Android design lecture #1
![Page 1: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/1.jpg)
Wifi: GoogleGuestPSKPass: pUp3EkaP
Android Design101
0
![Page 2: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/2.jpg)
First,
![Page 3: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/3.jpg)
Yonatan LevinGoogle Developer Expert
parahalllevin.yonatan
![Page 4: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/4.jpg)
>100 Cities > 30M usersRuby, Go, Python, Microservices
Ooooops...
![Page 5: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/5.jpg)
Making genetic tests accessible
![Page 6: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/6.jpg)
> 2000 members Largest Android Active Community
![Page 7: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/7.jpg)
Jonathan Yarkoni
Android Leader Ironsource
Android Academy Staff
Yonatan Levin
Android Google Developer
Expert
Britt Barak
Android LeadFigure8
Yossi Segev
Android Developer
Colu
Shahar Avigezer
Android DeveloperHello Heart
![Page 8: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/8.jpg)
Community Mentors
![Page 9: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/9.jpg)
What Do We Do?
●Android Fundamentals - Done
● Android UI / UX - 29/1 !
● Community Hackathon - 9/3 !!!
●Android Performance
●Mentors Program●Active community
![Page 10: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/10.jpg)
Why we doing all this?
![Page 11: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/11.jpg)
Let the show begin!!
![Page 12: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/12.jpg)
Product: We have new featureDesign: Here the mockupAndroid Developer: It’s an iOS mockupDesign: No problem,
Use the same for Android
Real Story
![Page 13: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/13.jpg)
Agenda for today
LogisticsUnderstanding what we’re doing here
TechnicalUnderstanding what an app design is made of, and why
Tipsand common mistakes - Things you should be aware of
100 Slides, No Breaks
![Page 14: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/14.jpg)
Since November, we’ve created this app
![Page 15: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/15.jpg)
Two year ago we invited designers to our hackathon.We felt like it was great but not enough.
History of this course
![Page 16: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/16.jpg)
We learned these important lessons
1 Session, on the submission day, is not enough.We need to work on designer-developer integration.We need to explain the graphic language better.We need to explain an app’s building blocks better.
![Page 17: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/17.jpg)
History of this course
- One year ago, after we finish fundamentals Android course.
- We felt like we need to add additional step and add a bit of color
![Page 18: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/18.jpg)
History of this course
So, we invited designers to Material Design Course
![Page 19: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/19.jpg)
We learned these important lessons
We need More
and at the right time, Google and released this course.
![Page 20: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/20.jpg)
Android Academy &
Udacity is an online course service, and they host a few Google courses, bundled in a Nano-Degree.We’re doing “Material Design for Android Developers” course.Before each lesson here, we need you to watch the online lesson(s).
Course URL: https://www.udacity.com/course/material-design-for-android-developers--ud862
![Page 21: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/21.jpg)
![Page 22: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/22.jpg)
Android Academy Method
We’ll meet here every tuesday for 2 parts sessions:- A Lesson- Hands-on / Q&A at the Google Campus
Between lessons, you’ll watch some online video lessons,and we also provide you with links so you can research on your own.
![Page 23: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/23.jpg)
Schedule
Date Subject Content: Lecturer
29/1 Design #0 Android Intro & Design (Layout) Yonatan L
5/2 Design #1 Material design conceptsSurfacesBasic views and layoutsNavigation
Yarkoni
14/2 Tuesday
Design #2 Colors, Themes, Shapes, Vectors, Animations & Design Principles
Britt
19/2 Design #3 How to talk designer & developer, Tools.
Shahar A.
![Page 24: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/24.jpg)
Special Things to know
![Page 25: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/25.jpg)
Disclaimer (1)
We are geeky developers.a.We have monochromatic vision
b.For us, 0x9C27B0 is a number, and Deep Purple is a name of a rock band our architect listens to -
c.But we know every brick in this operation system
This course is designed for both designers and developers.XML, Code, Pallette, experience: all of these will be here.
![Page 26: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/26.jpg)
Hackathon
![Page 27: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/27.jpg)
Disclaimer (2)
We have a deadline: 09.03.2016 - The HackathonIt’s a 24 hours event, at the Campus,
We have ONLY 4 lessons, but you’ll need to watch >1 every week.After today, Please watch lessons 1 and 2 from the course.
![Page 28: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/28.jpg)
Disclaimer (2)
We have a deadline: 09/3/2016 - The HackathonSo:
- We’ll focus on Android - not on general design aspects.
- We won’t be able to cover everything in the course.
- The hackathon, and working with a developer to a published app is part of our course.
After today, Please watch lessons 1 and 2 from the course.
![Page 29: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/29.jpg)
Best business card
![Page 30: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/30.jpg)
Developers Designers
![Page 31: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/31.jpg)
Expectations
- Commitment- Come to the sessions
- Preferably, after you’ve watched the lessons.
- Involvement- Mingle, Talk, Explain,
- Team-up.
- Level- Beginners +
- Pick and Know your tools (Photoshop, Illustrator, Whatever…)
![Page 32: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/32.jpg)
How to get in touch
For on-going conversation, use our Facebook group:Android Academy TLVhttps://www.facebook.com/groups/android.academy.ils/
For tickets, we have 2 meetups:Developers:www.meetup.com/TLV-Android-Academy/ Designers: www.meetup.com/Android-Academy-Designers/
We’ll open RSVP to the upcoming meetings in both
every Monday at 19:00
![Page 33: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/33.jpg)
I didn’t get email notification
![Page 34: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/34.jpg)
Am I in the waitlist or …?
![Page 35: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/35.jpg)
Any Questions?
![Page 36: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/36.jpg)
Agenda for today
LogisticsUnderstanding what we’re doing here
TechnicalUnderstanding what an app design is made of, and why
Tipsand common mistakes - Things you should be aware of
100 Slides, This is #23
✔
![Page 37: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/37.jpg)
Material Design:- A set of guidelines- Released in 2014 (with Android Lollipop)- Common grounds for Android Apps- Very detailed,
not very restrictive.
- Read it: https://www.google.com/design/spec/material-design/
![Page 38: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/38.jpg)
Kick-off:https://youtu.be/wtLJPvx7-ys?t=1m16s
But right after that, We go Technical
![Page 39: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/39.jpg)
Learn what an Android Design is.
App Design StructureB
![Page 40: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/40.jpg)
- PDF / Images describing the Structure
of the design RedLines or Style Guide Will
be translated to Layouts
- PDF / Images describing the scales of
the designStyle Guide’s language Will
be translated to XML resources
- Assetsbitmaps / 9-patch in correct directory structure Will be used As-
Is
Application Design zip file
![Page 41: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/41.jpg)
Sample Style Guides
This is the style guide that wasused in the course.
Today, we’ll understand how toread it, and understand what the developer does with it.We’ll see more examples later.See the entire guide: https://s3.amazonaws.com/content.udacity-data.com/course/ud853/Sunshine+Design+Mocks/Sunshine_Visual_Mocks_ALL.pdf
![Page 42: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/42.jpg)
Android’s Mobile Marketshare
Source: IDC http://www.businessinsider.com/idc-smartphone-os-market-share-2015-12
![Page 43: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/43.jpg)
Android’s Mobile Marketshare
Source: Gartner http://www.gartner.com/newsroom/id/3115517
According to Gartner, in 2015 Q2, 82.2% of the world-wide smartphone sales were of
Android smartphones.
That’s 271,010 devices. Samsung’s marketshare during 2015Q2 was 21.9%. (72,072.5)
![Page 44: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/44.jpg)
First android device
HTC Dream
320x480px (2:3)180 ppi3.2” (81mm)
http://en.wikipedia.org/wiki/HTC_Dream
![Page 45: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/45.jpg)
Current Android FlagShip Device
Pixel XL
1440 x 2560 pixels534 ppi5.5”
http://www.gsmarena.com/google_pixel_xl-8345.php
![Page 46: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/46.jpg)
Big Android Device
Nexus 10 (Tablet)
2560x1600px300ppi10.1”
http://en.wikipedia.org/wiki/Nexus_10
![Page 47: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/47.jpg)
Android’s Mobile Marketshare
![Page 48: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/48.jpg)
Android’s biggest problem:There are many kinds of
devices.
![Page 49: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/49.jpg)
Let’s break a Phone’s screen
Data from http://www.gsmarena.com/
Samsung Galaxy S5 mini
720x1280px4.5”
326 dpi
LG G4
1440x2560px5.5”538 dpi
![Page 50: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/50.jpg)
We can’t do Pixel-Perfect Design. That’s not how Android Works.
Resolution (dpi) is differentRatio is
differentScreen
size is different
http://developer.android.com/training/multiscreen/index.html
![Page 51: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/51.jpg)
![Page 52: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/52.jpg)
![Page 53: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/53.jpg)
Reduce the problem
There’s too many DPI values to handle. Let’s split the screens into dpi-classes
Read more: http://developer.android.com/guide/practices/screens_support.html
![Page 54: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/54.jpg)
From px to dp
dp - Device independent Pixel - Android’s length units.Used to abstract the DPI away, and let you work without worrying about screen resolution.100 dp = 75px @ LDPI (x0.75)100px @ MDPI (x1)
150px @ HDPI (x1.5) 200px @ XHDPI (x2)
300px @ XXHDPI (x3) 400px @ XXXHDPI (x4)Convert dp to px: http://labs.rampinteractive.co.uk/android_dp_px_calculator/ Read more: https://en.wikipedia.org/wiki/Device_independent_pixel
![Page 55: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/55.jpg)
Reduce the problem
There’s too many DPI values to handle. Let’s split the screens into dpi-classes
x1
x0.75
x1.5
x2
x3
x4
![Page 56: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/56.jpg)
When to use dp? Everywhere!
When describing screen sizes When describing element sizes,
margins, paddings and etc.
![Page 57: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/57.jpg)
![Page 58: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/58.jpg)
What would happen without dp
The higher density the screen is, The smaller the graphics get. The TextView is measured in px (on the left), there’s only 1 version of the image (on the right).
![Page 59: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/59.jpg)
What happens with dp
When dp is used, and multiple versions are provided, the experience is more consistent.The TextView is measured in dp (on the left), there’s 3 version of the image (on the right) - one for each density.
![Page 60: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/60.jpg)
Supply multiple versions for bitmaps
When designing bitmaps, produce multiple versions of the same asset, scaled for each screen.
![Page 61: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/61.jpg)
Providing multiple versions
All versions have the same filename, but in different folders.res/
drawable-mdpi/btn_graphic.png // bitmap for medium-densitydrawable-hdpi/btn_graphic.png // bitmap for high-densitydrawable-xhdpi/btn_graphic.png // bitmap for extra-high-densitydrawable-xxhdpi/btn_graphic.png // bitmap for extra-extra-high-density
res/mipmap-mdpi/ic_launcher.png // launcher icon for medium-density
mipmap-hdpi/ic_launcher.png // launcher icon for high-densitymipmap-xhdpi/ic_launcher.png // launcher icon for extra-high-densitymipmap-xxhdpi/ic_launcher.png // launcher icon for extra-extra-high-densitymipmap-xxxhdpi/ic_launcher.png // launcher icon for extra-extra-extra-high-
density
http://developer.android.com/guide/practices/screens_support.html
![Page 62: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/62.jpg)
![Page 63: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/63.jpg)
Tip: Bitmap Scale Direction
When scaling images UP, some quality is lost.
So it’s better to draw vectors,or aim at high resolution (x4, xxxhdpi), and scale DOWN.
![Page 64: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/64.jpg)
Use Android Asset StudioOnline tool, available at:https://romannurik.github.io/AndroidAssetStudio/
Helps to create multiple versions of assets,Created by Roman Nurik, which is a cool guy, and also an instructor on the online course.
![Page 65: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/65.jpg)
Naming Conventions
We love order. Patterns make our life easier. PLEASE use these common patterns:ic_ for iconsbtn_ for buttonsbg_ for backgroundsUse lowercase alphabet, numbers and _ (underscore) only.
![Page 66: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/66.jpg)
sp is used for text size
For text sizes, use sp. This enables the user to scale texts up or down.
sp = dp x scale
![Page 67: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/67.jpg)
![Page 68: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/68.jpg)
![Page 69: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/69.jpg)
![Page 70: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/70.jpg)
Definition:
ViewA basic building block for user interface
components. A View occupies a rectangular area (width and height)
on the screen and is responsible for drawing and event handling
Everything on the screen is a view
A View must haveWidth and Heightdp, match_parent,
wrap_contentthese define its bounding boxRead more:
http://developer.android.com/guide/topics/ui/overview.html
![Page 71: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/71.jpg)
Any Questions?
![Page 72: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/72.jpg)
We can’t do Pixel-Perfect Design, Because That’s not how Android Works.Resolution (dpi) is different
Ratio is different
Screen size is different
✔
![Page 73: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/73.jpg)
Different phones has different screen ratio
Samsung Galaxy S6: 16:9 ratio
The DP solution won’t
solve this problem.LG Nexus 5P:49:27 ratio
![Page 74: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/74.jpg)
Solution: Responsive Layout
Instead of creating a pixel-perfect, or dp-perfect, design, we use containers (ViewGroups) that instruct how to lay views out.Each of these can have children views. These will be layed-out according to its parent layout (and could be a layout on its own).Let’s see the 3 most common.
![Page 75: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/75.jpg)
LinearLayout
A layout that organizes its children into a single horizontal or vertical row. It creates a scrollbar if the length of the window exceeds the length of the screen, and can also distribute length, according to weights.
![Page 76: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/76.jpg)
LinearLayout
VerticalLinearLayout
HorizontalLinearLayoutButton 1 Button 2 Button 3
Button 4 Button 5 Button 6
![Page 77: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/77.jpg)
LinearLayout
VerticalLinearLayout
HorizontalLinearLayoutButton 1 Button 2 Button 3
Button 4 Button 5 Button 6
Width=match_parent Height=match_parent
Width=match_parentHeight=wrap_content
Width=match_parentHeight=0dpWeight=100
Width=0dp Height=match_parentWeight=33
Width=0dp Height=match_parentWeight=33
Width=0dp Height=match_parentWeight=33
![Page 78: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/78.jpg)
ViewGroups and Views create view tree
That’s best described in XML.
![Page 79: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/79.jpg)
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="..." android:orientation="vertical" >
<Button android:text="Button 1" android:layout_width="match_parent" android:layout_height="wrap_content" />
<Button android:text="Button 2" android:layout_width="match_parent" android:layout_height="wrap_content" /> <Button android:text="Button 3" android:layout_width="match_parent" android:layout_height="wrap_content" />
<!-- ... --> </LinearLayout>
activity_some_linear_activity.xml
![Page 80: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/80.jpg)
activity_some_linear_activity.xml<?xml version="1.0" encoding="utf-8"?><LinearLayout android:more_stuff="..." >
<Button android:text="Button 1" ... /> <Button android:text="Button 2" ... /> <Button android:text="Button 3" ... /> <LinearLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="100" android:orientation="horizontal" > <Button android:text="Button 4" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="33" /> <Button android:text="Button 5" ... /> <Button android:text="Button 6" ... /> </LinearLayout></LinearLayout>
![Page 81: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/81.jpg)
RelativeLayout
Enables you to specify the location of child objects relative to each other (child A to the left of child B) or to the parent (aligned to the top of the parent).
![Page 82: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/82.jpg)
RelativeLayout
When using RelativeLayout, use descriptions such as:Below ofRight ofAlignCenter
![Page 83: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/83.jpg)
FrameLayout
FrameLayouts places views one on-top of each other.
Ordered from bottom to top.
![Page 84: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/84.jpg)
Scroll View
A View that wraps another view (most probably, some layout), and enables scrolling
![Page 85: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/85.jpg)
Tip: Name things in your design
To improve maintainability of the design, name your colors and font styles and sizes, and dimensions, and everything more you like.Examples:color_b2
#ff5722
color_b3#7b1fa2
![Page 86: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/86.jpg)
The Developer takes your design,
and converts it to XML, weaving layouts together.
Then the designer reviews it, and becomes sad :(
![Page 87: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/87.jpg)
dimens.xml<resources> <!-- Default screen margins, per the Android Design guidelines. --> <dimen name="activity_horizontal_margin">16dp</dimen> <dimen name="activity_vertical_margin">16dp</dimen>
<!-- font sizes --> <dimen name="fontsize_display4">112sp</dimen> <dimen name="fontsize_display3">56sp</dimen> <dimen name="fontsize_display2">45sp</dimen> <dimen name="fontsize_display1">34sp</dimen></resources>
![Page 88: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/88.jpg)
colors.xml<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="color_b1">#ff5722</color>
<color name="color_b2">#7b1fa2</color>
</resources>
![Page 89: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/89.jpg)
We can’t do Pixel-Perfect Design, Because That’s not how Android Works.Resolution (dpi) is different
Ratio is different
Screen size is different
✔✔
![Page 90: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/90.jpg)
Thanks to , we have some real-world design guides to show you.
REAL Style-guide examples
![Page 91: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/91.jpg)
![Page 92: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/92.jpg)
![Page 93: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/93.jpg)
![Page 94: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/94.jpg)
![Page 95: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/95.jpg)
![Page 96: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/96.jpg)
Lecture #4
![Page 97: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/97.jpg)
- PDF / Images describing the Structure
of the design RedLines or Style Guide Will
be translated to Layouts
- PDF / Images describing the scales of
the designStyle Guide’s language Will
be translated to XML resources
- Assetsbitmaps / 9-patch in correct directory structure Will be used As-
Is
Application Design zip file
![Page 98: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/98.jpg)
Building Blocks
Layout
LinearLayout
RelativeLayout
FrameLayout
ScrollView
Basic ViewsTextViewImageView
Input ControlsButtonEditTextCheckbox
RadioButton
ToggleButtonSpinnerDatePickerTimePicker
![Page 99: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/99.jpg)
Any Questions?
![Page 100: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/100.jpg)
One thing we didn’t talk about:Size Qualifiers apply for layouts
http://developer.android.com/training/multiscreen/screensizes.html#TaskUseSizeQuali
![Page 101: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/101.jpg)
![Page 102: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/102.jpg)
![Page 103: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/103.jpg)
Agenda for today
LogisticsUnderstanding what we’re doing here
TechnicalUnderstanding what an app design is made of, and why
Tipsand common mistakes - Things you should be aware of
100 Slides, This is #23
✔
✔
![Page 104: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/104.jpg)
Common stuff that no-one talks about
TipsC
![Page 105: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/105.jpg)
Bonus Part
These are things that are usually skipped, but are important part of creating an android design.
![Page 106: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/106.jpg)
A Musical Pause
Expectations Demo by Bobby McFerrin
https://youtu.be/ne6tB2KiZuk
![Page 107: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/107.jpg)
BePure
Android
http://developer.android.com/design/patterns/pure-android.html
![Page 108: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/108.jpg)
What’s special about Android?
- Navigation- The device has a back button
- The toolbar can have an Up button
- UIs- Toasts / SnackBars
- Notifications (Icons / Drawer)
- Widgets (oh, and home vs. launcher)
- Animations
![Page 109: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/109.jpg)
Don’t duplicate other platform’s design
Here’s a sample of how common controls look on different platforms
Platforms typically provide a carefully designed set of UI elements that are themed in a very distinctive fashion.
![Page 110: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/110.jpg)
Don’t duplicate other platform’s design
Same principle goes for icons.
![Page 111: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/111.jpg)
Don’t use Bottom Tabs
Android uses soft buttons, docked to the bottom of the screen.Placing navigation there, for Android users, is TORTURE.
![Page 112: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/112.jpg)
Internationalization
Besides thinking about text sizes in sp, you should also consider lengthy (and shorty) translations.English: Repeat passwordGerman: Wiederholen Sie das PasswortChinese: 重复密码read: https://www.smashingmagazine.com/2012/07/12-commandments-software-localization/ Ignore Web stuff
![Page 113: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/113.jpg)
Any Questions?
![Page 114: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/114.jpg)
Sketch paperhttp://www.smashingmagazine.com/2012/09/18/free-download-ux-sketching-wireframing-templates-mobile/
![Page 115: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/115.jpg)
Summary
![Page 116: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/116.jpg)
A guideline that helps creating beautiful apps, which is easier to implement,easier for users to understand and hopefully, succeed more.Our next 2 lessons are dedicated to this subject.
Material Design
![Page 117: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/117.jpg)
- PDF / Images describing the Structure
of the design RedLines or Style Guide Will
be translated to Layouts
- PDF / Images describing the scales of
the designStyle Guide’s language Will
be translated to XML resources
- Assetsbitmaps / 9-patch in correct directory structure Will be used As-
Is
Application Design zip file
![Page 118: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/118.jpg)
Use dp and sp, and don’t forget i18n
![Page 119: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/119.jpg)
Provide multiple versions
All versions have the same filename, but in different folders.res/
drawable-mdpi/graphic.png // bitmap for medium-densitydrawable-hdpi/graphic.png // bitmap for high-densitydrawable-xhdpi/graphic.png // bitmap for extra-high-densitydrawable-xxhdpi/graphic.png // bitmap for extra-extra-high-density
res/mipmap-mdpi/my_icon.png // launcher icon for medium-density
mipmap-hdpi/my_icon.png // launcher icon for high-densitymipmap-xhdpi/my_icon.png // launcher icon for extra-high-densitymipmap-xxhdpi/my_icon.png // launcher icon for extra-extra-high-densitymipmap-xxxhdpi/my_icon.png // launcher icon for extra-extra-extra-high-density
http://developer.android.com/guide/practices/screens_support.html
![Page 120: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/120.jpg)
Naming Conventions
ic_ for iconsbtn_ for buttonsbg_ for backgroundsUse lowercase alphabet, numbers and _ (underscore) only.
![Page 121: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/121.jpg)
Building blocks: Layouts (and Scroll)
![Page 122: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/122.jpg)
Building Blocks
LayoutLinearLayoutRelativeLayoutFrameLayoutScrollView
Basic Views
TextView
ImageView
Input ControlsButtonEditTextCheckbox
RadioButton
ToggleButtonSpinnerDatePickerTimePicker
![Page 123: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/123.jpg)
![Page 124: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/124.jpg)
Watch lessons 1+2 from the Udacity coursehttps://www.udacity.com/course/developing-android-apps--ud862
Join meetup and facebook grouphttps://www.facebook.com/groups/android.academy.ils/www.meetup.com/Android-Academy-Designers/ www.meetup.com/TLV-Android-Academy/
Optional:RTFM:
https://www.google.com/design/spec/material-design/introduction.html Read this intro: http://androidux.com/Beginner-guideRead about Pure Andorid:
http://developer.android.com/design/patterns/pure-android.html watch more about Material: Design Principles (2014):
https://youtu.be/isYZXwaP3Q4 Structure and components (2014):
https://youtu.be/dZqzz5lZFvo Material Now (2015):
https://youtu.be/8UicJ0SxBwA
Homework
![Page 125: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/125.jpg)
Next up
let’s go out and mingle. Make yourself a cup of coffee, Team-up.
Next week, (2/2/2016)Lecture:Surfaces, Controls, Themes
![Page 126: Android design lecture #1](https://reader035.vdocuments.mx/reader035/viewer/2022062412/589a0b231a28ab7a318b5917/html5/thumbnails/126.jpg)
Thank you
Drive Home Safely