Android training day 3
3 likes•2,267 views
This document provides an overview of designing user interfaces for Android apps. It discusses: - Using layout qualifiers to provide resources for different screen densities and sizes, such as -mdpi or -large. - Implementing qualifiers by placing resources like layouts and bitmaps in folders like res/layout-small and res/drawable-hdpi. - A hack to use dimensions defined in dimens.xml to set view widths and heights flexibly across screen densities without needing multiple layout files. - The benefits of using this approach are that it reduces the need to create multiple layout files, but it has downsides like not being as precise as unique layout files.
Android training day 3
- 1. Designing for Android Anjan Shrestha UX Lead, YoungInnovations Android Apps Training Day 3
- 2. A small introduction to android UI
- 3. A small introduction to android UI Home Screen
- 4. A small introduction to android UI All Apps Screen
- 5. A small introduction to android UI Recents Screen
- 7. One terminology you must know …
- 8. SCREEN DENSITY The number of pixels in a physical area of a screen.
- 9. Measured as Dots Per Inch DPI
- 10. ldpi mdpi hdpi xhdpi xxhdpi tvdpi SCREEN DENSITY 120 160 240 320 480 213 approx.
- 11. So?
- 12. Well, you must deliver images for each screen density.
- 13. 48px in mdpi = 48px in xhdpi Because visually,
- 14. DP Density Independent Pixel to the rescue Defining layout in density independent way …
- 15. DP HUH?
- 16. 1dp=1px On an mdpi (160dpi) screen, That is probably why mdpi is also called the baseline screen in Android.
- 17. px*(dpi/160) For other screen densities,
- 18. 48*(320/160) So a 48px icon in mdpi should be … px*(dpi/160) 96px in xhdpi (320)
- 19. ldpi mdpi hdpi xhdpi tvdpi 48px36px 72px 96px 63px 1x0.75x 1.5x 2x 4/3x
- 20. Similarly, other icons as well
- 21. 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
- 24. A little bit on launcher icon THIS IS YOU!Launcher icon appears on the Home or All Apps screen of android.
- 25. ldpi mdpi hdpi xhdpi tvdpi 48px36px 72px 96px 63px Launcher Icons for different screen densities
- 26. Launcher Icons for display on Google Play 512x512px
- 27. Designing the UI
- 28. Step 1 Write down the objective(s) of your application.
- 29. Step 2 Draw wireframes (start with sketching on paper), get feedback, refine.
- 30. Step 3 Pick your favorite design tool. Mine is Adobe Fireworks and Sketch (mac only)
- 31. Step 4 Start designing based on your wireframe.
- 32. Follow the design patterns
- 33. No. of actions you can put in action bar
- 34. 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
- 35. Navigation with Navigation Drawer
- 37. See Building blocks section for ready-to- use elements http://developer.android.com/design/ building-blocks/index.html
- 39. Thank you! Anjan Shrestha UX Lead, YoungInnovations
- 40. Designing for Android - Development Vivek Bhusal Android Apps Training Day 3
- 41. “How do I configure for different screens then ?”
- 42. 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.
- 43. 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
- 44. 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
- 45. 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
- 46. 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" />
- 47. 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 ?
- 48. 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 -->
- 49. 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.
- 50. Thank you! Vivek Bhusal UX Lead, YoungInnovations