Download - Android training day 3
![Page 1: Android training day 3](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d604a795921468b45aa/html5/thumbnails/1.jpg)
Designing for Android
Anjan Shrestha UX Lead, YoungInnovations
Android Apps Training Day 3
![Page 2: Android training day 3](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d604a795921468b45aa/html5/thumbnails/2.jpg)
A small introduction to android UI
![Page 3: Android training day 3](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d604a795921468b45aa/html5/thumbnails/3.jpg)
A small introduction to android UI
Home Screen
![Page 4: Android training day 3](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d604a795921468b45aa/html5/thumbnails/4.jpg)
A small introduction to android UI
All Apps Screen
![Page 5: Android training day 3](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d604a795921468b45aa/html5/thumbnails/5.jpg)
A small introduction to android UI
Recents Screen
![Page 6: Android training day 3](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d604a795921468b45aa/html5/thumbnails/6.jpg)
System Bars Status Bar
Navigation Bar
![Page 7: Android training day 3](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d604a795921468b45aa/html5/thumbnails/7.jpg)
One terminology you must know …
![Page 8: Android training day 3](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d604a795921468b45aa/html5/thumbnails/8.jpg)
SCREEN DENSITY The number of pixels in a physical area of a screen.
![Page 9: Android training day 3](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d604a795921468b45aa/html5/thumbnails/9.jpg)
Measured as Dots Per Inch
DPI
![Page 10: Android training day 3](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d604a795921468b45aa/html5/thumbnails/10.jpg)
ldpi mdpi hdpi xhdpi xxhdpi tvdpi
SCREEN DENSITY
120 160 240 320 480 213 approx.
![Page 11: Android training day 3](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d604a795921468b45aa/html5/thumbnails/11.jpg)
So?
![Page 12: Android training day 3](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d604a795921468b45aa/html5/thumbnails/12.jpg)
Well, you must deliver images for each screen density.
![Page 13: Android training day 3](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d604a795921468b45aa/html5/thumbnails/13.jpg)
48px in mdpi = 48px in xhdpi
Because visually,
![Page 14: Android training day 3](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d604a795921468b45aa/html5/thumbnails/14.jpg)
DP Density Independent Pixel
to the rescue
Defining layout in density independent way …
![Page 15: Android training day 3](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d604a795921468b45aa/html5/thumbnails/15.jpg)
DP
HUH?
![Page 16: Android training day 3](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d604a795921468b45aa/html5/thumbnails/16.jpg)
1dp=1px On an mdpi (160dpi) screen,
That is probably why mdpi is also called the baseline screen in Android.
![Page 17: Android training day 3](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d604a795921468b45aa/html5/thumbnails/17.jpg)
px*(dpi/160)
For other screen densities,
![Page 18: Android training day 3](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d604a795921468b45aa/html5/thumbnails/18.jpg)
48*(320/160)
So a 48px icon in mdpi should be …
px*(dpi/160)
96px in xhdpi (320)
![Page 19: Android training day 3](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d604a795921468b45aa/html5/thumbnails/19.jpg)
ldpi mdpi hdpi xhdpi tvdpi
48px 36px 72px 96px 63px
1x 0.75x 1.5x 2x 4/3x
![Page 20: Android training day 3](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d604a795921468b45aa/html5/thumbnails/20.jpg)
Similarly, other icons as well
![Page 21: Android training day 3](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d604a795921468b45aa/html5/thumbnails/21.jpg)
If you think it’s a hassle to calculate dp for all screen densities, use
Dp Calculator h"ps://play.google.com/store/apps/details?id=com.vivek.dpcalculator&hl=en
![Page 22: Android training day 3](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d604a795921468b45aa/html5/thumbnails/22.jpg)
Naming these icons
![Page 23: Android training day 3](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d604a795921468b45aa/html5/thumbnails/23.jpg)
Setting up workspace
![Page 24: Android training day 3](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d604a795921468b45aa/html5/thumbnails/24.jpg)
A little bit on launcher icon
THIS IS
YOU! Launcher icon appears on the Home or All Apps screen of android.
![Page 25: Android training day 3](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d604a795921468b45aa/html5/thumbnails/25.jpg)
ldpi mdpi hdpi xhdpi tvdpi
48px 36px 72px 96px 63px
Launcher Icons for different screen densities
![Page 26: Android training day 3](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d604a795921468b45aa/html5/thumbnails/26.jpg)
Launcher Icons for display on Google Play
512x512px
![Page 27: Android training day 3](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d604a795921468b45aa/html5/thumbnails/27.jpg)
Designing the UI
![Page 28: Android training day 3](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d604a795921468b45aa/html5/thumbnails/28.jpg)
Step 1
Write down the objective(s) of your application.
![Page 29: Android training day 3](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d604a795921468b45aa/html5/thumbnails/29.jpg)
Step 2
Draw wireframes (start with sketching on paper), get feedback, refine.
![Page 30: Android training day 3](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d604a795921468b45aa/html5/thumbnails/30.jpg)
Step 3
Pick your favorite design tool. Mine is Adobe Fireworks and Sketch (mac only)
![Page 31: Android training day 3](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d604a795921468b45aa/html5/thumbnails/31.jpg)
Step 4
Start designing based on your wireframe.
![Page 32: Android training day 3](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d604a795921468b45aa/html5/thumbnails/32.jpg)
Follow the design patterns
![Page 33: Android training day 3](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d604a795921468b45aa/html5/thumbnails/33.jpg)
No. of actions you can put in action bar
![Page 34: Android training day 3](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d604a795921468b45aa/html5/thumbnails/34.jpg)
Navigation with Action bar Utilize the main action bar for displaying the current view title and an up caret for navigating up a hierarchy
Use tabs for navigating through different views.
Use the bottom bar for displaying actions
![Page 35: Android training day 3](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d604a795921468b45aa/html5/thumbnails/35.jpg)
Navigation with Navigation Drawer
![Page 36: Android training day 3](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d604a795921468b45aa/html5/thumbnails/36.jpg)
Study Design Patterns for more
http://developer.android.com/design/patterns/index.html
![Page 37: Android training day 3](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d604a795921468b45aa/html5/thumbnails/37.jpg)
See Building blocks section for ready-to-use elements
http://developer.android.com/design/building-blocks/index.html
![Page 38: Android training day 3](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d604a795921468b45aa/html5/thumbnails/38.jpg)
For stencils, gui elements
http://developer.android.com/design/downloads/index.html
![Page 39: Android training day 3](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d604a795921468b45aa/html5/thumbnails/39.jpg)
Thank you!
Anjan Shrestha UX Lead, YoungInnovations
![Page 40: Android training day 3](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d604a795921468b45aa/html5/thumbnails/40.jpg)
Designing for Android - Development Vivek Bhusal
Android Apps Training Day 3
![Page 41: Android training day 3](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d604a795921468b45aa/html5/thumbnails/41.jpg)
“How do I configure for different screens then ?”
![Page 42: Android training day 3](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d604a795921468b45aa/html5/thumbnails/42.jpg)
Layout Qualifier
These are configuration qualifiers. Allow developers to control how the system
selects the alternative resources based on characteristics of the current device screen.
Each screen characteristic has a separate qualifier.
![Page 43: Android training day 3](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d604a795921468b45aa/html5/thumbnails/43.jpg)
Screen Characteris-c Qualifier Descrip-on
Size small Resources for small screen sizes. normal Resources for normal size screens. (Default) large Resources for large size screens. xlarge Resources for extra large size screens.
Density ldpi Resources for ldpi screens. mdpi Resources for mdpi screens. hdpi Resources for hdpi screens. xhdpi Resources for xhdpi screens. tvdpi Resources for screens somewhere between
mdpi and hdpi. OrientaGon land Resources for landscape orientaGon
port Resources for potrait orientaGon
Qualifier types
![Page 44: Android training day 3](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d604a795921468b45aa/html5/thumbnails/44.jpg)
Screen Characteris-c Qualifier Descrip-on
Size small Resources for small screen sizes. normal Resources for normal size screens. (Default) large Resources for large size screens. xlarge Resources for extra large size screens.
Density ldpi Resources for ldpi screens. mdpi Resources for mdpi screens. hdpi Resources for hdpi screens. xhdpi Resources for xhdpi screens. tvdpi Resources for screens somewhere between
mdpi and hdpi. OrientaGon land Resources for landscape orientaGon
port Resources for potrait orientaGon
Qualifier types
![Page 45: Android training day 3](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d604a795921468b45aa/html5/thumbnails/45.jpg)
Implementing qualifiers res/layout/my_layout.xml // layout for normal
screen size ("default") res/layout-small/my_layout.xml // layout for small
screen size res/layout-large/my_layout.xml // layout for large
screen size res/layout-xlarge/my_layout.xml // layout for extra
large screen size res/layout-xlarge-land/my_layout.xml // layout for extra
large in landscape orientation res/drawable-mdpi/my_icon.png // bitmap for medium
density res/drawable-hdpi/my_icon.png // bitmap for high
density res/drawable-xhdpi/my_icon.png // bitmap for extra
high density use mdpi, etc for bitmaps and small, etc for layouts
![Page 46: Android training day 3](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d604a795921468b45aa/html5/thumbnails/46.jpg)
Good implementation
practice
But how's got time for that ??
Also in the manifest file: <supports-screens android:smallScreens="true" android:normalScreens="true" android:largeScreens="true" android:xlargeScreens="true" android:anyDensity="true" />
![Page 47: Android training day 3](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d604a795921468b45aa/html5/thumbnails/47.jpg)
Hack
When declaring Views use the dimen to give away dimensions.
e.g. <Button
android:layout_width = “@dimen/button_width” …/>
How do I refer ? How do I do this ? Where is this ?
![Page 48: Android training day 3](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d604a795921468b45aa/html5/thumbnails/48.jpg)
Inside dimens: <resources> <dimen name="abc">16dp</dimen> <dimen name="xyz">16dp</dimen> </resources> <!-- do not forget to declare resources, R error is bound to occur -->
![Page 49: Android training day 3](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d604a795921468b45aa/html5/thumbnails/49.jpg)
Create different values folder with different qualifiers
Give out different dimensions according
to screen sizes
And PRESTO ! You are done for now But there is a downside to this.
![Page 50: Android training day 3](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c82d604a795921468b45aa/html5/thumbnails/50.jpg)
Thank you!
Vivek Bhusal UX Lead, YoungInnovations