Supporting Multiple Android Device Definitions
•5 likes•2,182 views
Report
Share
Download to read offline
Video: https://www.youtube.com/watch?v=zImbxlqptBQ Designers and developers have been afraid of the variety of Android flavors for way too long. Android borrows a lot of concept from the web, and we can use the same techniques to cater to the different OS versions and form factors. Be responsive. Forget about absolute coordinates. Embrace the relative, use resource folders to differentiate among screen sizes, much like CSS media queries. Be progressive. Take advantage of the latest Android functionalities, but gracefully fall back to the basics when you are on older OS versions. Remember the days when not all browsers have javascript? Best of all, you don’t need a huge team to do this. I run a one-person company, and I will show you how I applied these techniques to my app Monkey Write.
![[@NaukriEngineering] Icon fonts & vector drawable in iOS apps](https://cdn.slidesharecdn.com/ss_thumbnails/iconfontsvectordrawableiniosapps2-161128054507-thumbnail.jpg?width=384&fit=bounds)
![[@NaukriEngineering] Apache Spark](https://cdn.slidesharecdn.com/ss_thumbnails/apachesparkppt-170105054406-thumbnail.jpg?width=384&fit=bounds)
More Related Content
More from Chiu-Ki Chan
More from Chiu-Ki Chan(12)
Recently uploaded
Recently uploaded(20)
Supporting Multiple Android Device Definitions
- 1. Supporting Multiple Android Device Definitions Chiu-Ki Chan @chiuki bit.ly/muland
- 5. Hello World
- 6. @chiuki
- 7. @chiuki
- 8. @chiuki
- 9. @chiuki
- 10. @chiuki
- 11. @chiuki
- 12. @chiuki
- 14. @chiuki
- 15. @chiuki
- 16. @chiuki (x,y)
- 17. @chiuki (x,y)
- 18. @chiuki Center
- 20. @chiuki
- 21. @chiuki@chiuki Proportional Layout <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <ImageView android:id="@+id/image1" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" /> <ImageView android:id="@+id/image2" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" /> </LinearLayout>
- 22. @chiuki
- 23. @chiuki Divider
- 26. @chiuki dp
- 28. @chiuki
- 29. @chiuki
- 31. @chiuki
- 32. Resource Folders
- 33. @chiuki@chiuki Resource Folders Type Variation layout values drawable menu Language & Region: en, fr, fr-rCA Screen size: small, large, xlarge, sw320dp, h720dp Screen orientation: port, land Screen density: ldpi, mdpi, hdpi, xhdpi, nodpi, tvdpi Platform version: v4, v11, v14, v21 UI mode: car, desk, television, appliance http://developer.android.com/guide/topics/resources/providing-resources.html
- 34. @chiuki@chiuki Resource Folders Type Variation layout values drawable menu Language & Region: en, fr, fr-rCA Screen size: small, large, xlarge, sw320dp, h720dp Screen orientation: port, land Screen density: ldpi, mdpi, hdpi, xhdpi, nodpi, tvdpi Platform version: v4, v11, v14, v21 UI mode: car, desk, television, appliance http://developer.android.com/guide/topics/resources/providing-resources.html res/layout-land/activity_main.xml
- 35. @chiuki@chiuki Resource Folders Type Variation layout values drawable menu Language & Region: en, fr, fr-rCA Screen size: small, large, xlarge, sw320dp, h720dp Screen orientation: port, land Screen density: ldpi, mdpi, hdpi, xhdpi, nodpi, tvdpi Platform version: v4, v11, v14, v21 UI mode: car, desk, television, appliance http://developer.android.com/guide/topics/resources/providing-resources.html res/drawable-hdpi/ic_launcher.png
- 36. @chiuki@chiuki Resource Folders Type Variation layout values drawable menu Language & Region: en, fr, fr-rCA Screen size: small, large, xlarge, sw320dp, h720dp Screen orientation: port, land Screen density: ldpi, mdpi, hdpi, xhdpi, nodpi, tvdpi Platform version: v4, v11, v14, v21 UI mode: car, desk, television, appliance http://developer.android.com/guide/topics/resources/providing-resources.html res/drawable-large-land/splash.png
- 40. XML drawable
- 41. @chiuki@chiuki XML shape <shape android:shape="rectangle" > <gradient android:startColor="#063" android:endColor="#030" android:angle="270" /> </shape>
- 50. @chiuki@chiuki Tile mode clamp Replicates the edge color repeat Repeats the bitmap in both direction mirror Repeats with alternating mirror images
- 55. @chiuki@chiuki <resources> <dimen name="workbook_padding">8dp</dimen> <dimen name="workbook_spacing">12dp</dimen> <dimen name="workbook_column_width">120dp</dimen> <resources> res/values/dimens.xml values/dimen.xml
- 56. @chiuki@chiuki values-large/dimen.xml <resources> <dimen name="workbook_padding">32dp</dimen> <dimen name="workbook_spacing">18dp</dimen> <dimen name="workbook_column_width">180dp</dimen> <resources> res/values-large/dimens.xml
- 60. Progressive
- 61. @chiuki@chiuki Resource Folders Type Variation layout values drawable menu Language & Region: en, fr, fr-rCA Screen size: small, large, xlarge, sw320dp, h720dp Screen orientation: port, land Screen density: ldpi, mdpi, hdpi, xhdpi, nodpi, tvdpi Platform version: v4, v11, v14, v21 UI mode: car, desk, television, appliance http://developer.android.com/guide/topics/resources/providing-resources.html
- 62. @chiuki@chiuki Resource Folders Type Variation layout values drawable menu Language & Region: en, fr, fr-rCA Screen size: small, large, xlarge, sw320dp, h720dp Screen orientation: port, land Screen density: ldpi, mdpi, hdpi, xhdpi, nodpi, tvdpi Platform version: v4, v11, v14, v21 UI mode: car, desk, television, appliance http://developer.android.com/guide/topics/resources/providing-resources.html
- 65. @chiuki@chiuki drawable-v21 <ripple android:color="@color/colorAccent"> <item> <shape android:shape="rectangle"> <solid android:color="@color/colorPrimary" /> </shape> </item> </ripple> res/drawable-v21/background.xml
- 66. @chiuki@chiuki drawable as default <selector> <item android:state_pressed="true" android:drawable="@color/colorAccent" /> <item android:drawable="@color/colorPrimary" /> </selector> res/drawable/background.xml
- 71. @chiuki@chiuki // Default value int heapSize = 16; // Detect OS version int sdk = Integer.parseInt(Build.VERSION.SDK_INT); // Progressive enhancement for newer devices if (sdk >= Build.VERSION_CODES_ECLAIR) { heapSize = getHeapSize(this); } Progressive
- 72. @chiuki@chiuki getHeapSize public int getHeapSize() { ActivityManager activityManager = (ActivityManager) getSystemService(Context.ACTIVITY_SERVICE); return activityManager.getMemoryClass(); }
- 73. @chiuki@chiuki Ship new functionality with your app! Support Library
- 77. Summary
- 78. @chiuki@chiuki Summary Responsive layout Declarative layout Density-independent pixels (dp) Resource folders XML drawables Progressive functionality Resource folders Version check Support library Slides bit.ly/muland
- 79. @chiuki@chiuki Thank you! Learn more developer.android.com/training/multiscreen is.gd/FluidAndroidLayouts is.gd/BeautifulAndroid pluralsight.com/authors/chiuki-chan Stay in touch tinyletter.com/sqisland blog.sqisland.com twitter.com/chiuki Slides bit.ly/muland
- 80. @chiuki@chiuki
- 81. @chiuki@chiuki 360|AnDev Core Track • Activities in the Wild: Exploring the Activity Lifecycle • Fragments: What are they good for • Async Task, Threads, Pools and Executors • Measure, Layout, Draw, Repeat: Custom Views and ViewGroups • A Practical Guide to Material Design implementation for Android Developers • Libraries I wish I knew about when I started • Intro to iOS for Android developers