SlideShare a Scribd company logo

Android Fragment-Awesome

G
GauntFace

This document provides an overview of Android fragments and tips for handling fragmentation. It introduces Matthew Gaunt as an Android developer and discusses density independent pixels (DIPs) and how to handle images, layouts, themes/styles, and dimensions across different device densities (LDPI, MDPI, HDPI, XHDPI) and sizes (small, normal, large, xlarge). It also covers using values for consistency, nine-patch images, shape drawables, themes and styles, and embracing fluid design.

TechnologyNews & Politics
1 of 34
Downloaded 97 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
Android Fragment-Awesome Matthew Gaunt
Who is this guy? • Master in Computer Science in Bristol • Senior Android Dev @ Mubaloo • Cross Platform Dev @ Future Platforms
What Fragmentation?
What’s coming up • Design - I can haz pretty • Dips • Buckets? • What buckets? • The story of buckets • Tips + Examples
Dips Density Independent Pixels Abstract the screen size (think rounded corner rectangle) Never assume dip > pixels
Buckets? ldpi mdpi hdpi xhdpi
What Buckets? Screen density (ldpi, mdpi, hdpi, xhdpi) Orientation (port, land) Android Version (v4, v11) Screen size (small, normal, large, xlarge)
Eeks lots of Images
How to use Buckets • Images - [ldpi, mdpi, hdpi, xhdpi] [small, normal, large, xlarge] • Layout -[land, port] • Themes / Styles - [v4, v11] • Dimensions - [small, normal, large, xlarge]
The History...
The History... <port> land 1.5
The History... ldpi <port> mdpi land hdpi 1.5 1.6
The History... small ldpi normal <port> mdpi large land hdpi xlarge 1.5 1.6 3.0 (ish)
The History... small ldpi normal ldpi mdpi <port> mdpi large hdpi land hdpi xlarge xhdpi 1.5 1.6 3.0 (ish) 4.0
Recap • Lots of buckets • Lots of resources to apply the buckets to • How it relates to other platforms like iOS
Random.
Phones / Tablets? ldpi mdpi hdpi xhdpi total Small 1.7% 2.4% 4.1% Normal 0.7% 18.5% 66.3% 2.5% 88.0% Large 0.2% 2.8% 3.0% XLarge 4.9% 4.9% ldpi mdpi mdpi hdpi ? hdpi ? xhdpi ? xhdpi ? Phones Tablets normal / small large / xlarge
Hitting Both? drawable For all buckets drawable-ldpi drawable-mdpi Base drawable-hdpi drawable-xhdpi drawable-large-? Additional drawable-xlarge-?
Tips to Reduce Work 1 Use values everywhere (dimens, ints, etc.)
Tips to Reduce Work values dimens.xml <resources>         <dimen name="default_text_size">20sp</dimen>         <dimen name="default_large_text_size">30sp</dimen>         <dimen name="splash_vertical_spacing">20dp</dimen>         <dimen name="gauntface_tag_bottom_spacing">20dp</dimen>         <dimen name="gauntface_tag_padding">5dp</dimen>         <dimen name="gauntface_tag_radius">10dp</dimen>         <dimen name="splash_gauntface_progress_bar">30dp</dimen>         <dimen name="generic_dialog_padding">15dp</dimen>         <dimen name="generic_dialog_bg_radius">4dp</dimen>         <dimen name="generic_dialog_title_spacer_height">4dp</dimen>         <dimen name="generic_dialog_title_spacer_vertical_spacing">10dp</dimen>         <dimen name="sync_info_padding">10dp</dimen>         <dimen name="sync_info_title_text_size">35sp</dimen>         <dimen name="sync_info_msg_text_size">20sp</dimen>         <dimen name="sync_info_bg_radius">10dp</dimen>         <dimen name="sync_info_prof_pic_radius">8dp</dimen>         <dimen name="sync_info_prof_pic_size">128dp</dimen>     </resources> values-land dimens.xml <resources>         <dimen name="default_text_size">15sp</dimen>         <dimen name="default_large_text_size">25sp</dimen>         <dimen name="splash_vertical_spacing">10dp</dimen>     </resources>
Tips to Reduce Work values values-land
Tips to Reduce Work 2 Learn the ways of the nine patch
Tips to Reduce Work
Tips to Reduce Work 3 Use <Shape> drawables
Tips to Reduce Work <shape     xmlns:android="http://schemas.android.com/apk/res/android"     android:shape="rectangle">     <gradient         android:angle="0"         android:endColor="@color/dark_blue"         android:gradientRadius="660"         android:startColor="@color/splash_light_blue"         android:type="radial" /> </shape>
Tips to Reduce Work
Tips to Reduce Work 4 Use Themes & Styles www.gauntface.co.uk/blog/2011/01/18/android-ui-reference
Tips to Reduce Work values themes.xml <resources> <style name="Theme.FacebookSync" parent="@style/Theme.FacebookSync.Support">         ...     </style>     <style name="Theme.FacebookSync.NoTitleBar">         ...     </style>     <style name="Theme.FacebookSync.Dialog" parent="@style/Theme.Dialog.Support">         ... </style> </resources> values-v11 themes-v11.xml <resources>     <style name="Theme.FacebookSync.Support" parent="@android:style/Theme.Holo"></style>     <style name="Theme.Dialog.Support" parent="@android:style/Theme.Holo.Dialog"></style> </resources> values-v4 themes-v4.xml <resources>     <style name="Theme.FacebookSync.Support" parent="@android:style/Theme.NoTitleBar"></style>     <style name="Theme.Dialog.Support" parent="@android:style/Theme.Dialog"></style> </resources>
Tips to Reduce Work
Tips to Reduce Work 5 Give up control - be fluid
Tips to Reduce Work Note: Not the best example ;)
Tips to Reduce Work
You’re Results May Vary
Thanks :) @gauntface matt@gauntface.co.uk

More Related Content

PDF
Mobile in a Nutshell
GauntFace
 
PDF
Intro to Google TV
GauntFace
 
PDF
Android UI Reference
GauntFace
 
PDF
Introduction to fragments in android
Prawesh Shrestha
 
ODP
Android App Development - 06 Fragments
Diego Grancini
 
PDF
Android Fragment
Kan-Han (John) Lu
 
PDF
Android - Working with Fragments
Can Elmas
 
PPT
Introduction to Android Fragments
Sergi Martínez
 
Mobile in a Nutshell
GauntFace
 
Intro to Google TV
GauntFace
 
Android UI Reference
GauntFace
 
Introduction to fragments in android
Prawesh Shrestha
 
Android App Development - 06 Fragments
Diego Grancini
 
Android Fragment
Kan-Han (John) Lu
 
Android - Working with Fragments
Can Elmas
 
Introduction to Android Fragments
Sergi Martínez
 

Similar to Android Fragment-Awesome (20)

PDF
Androidfragment
Narender Singh
 
PDF
Introduction to mobile programming with Androids.
Maksim Golivkin
 
PDF
Android training day 3
Vivek Bhusal
 
PPTX
Supporting multi screen in android
rffffffff007
 
PPTX
Supporting multi screen in android cn
rffffffff007
 
PPTX
Android supporting multiple screen
Dao Quang Anh
 
PPTX
Introduction to Big Data and Hadoop
Edureka!
 
PDF
Android在多屏幕、多设备上的适配 | 布丁 任斐
imShining @DevCamp
 
PPTX
TDC2012 Android - Deixando Sua Interface mais Bonita com Shapes
Suelen Carvalho
 
PPTX
Fernando F. Gallego - Efficient Android Resources 101
Fernando Gallego
 
KEY
Let's dig into the Omega Theme!
Mediacurrent
 
PDF
Does my DIV look big in this?
glen_a_smith
 
PPTX
Hadoop Interview Questions and Answers
Big Data Interview Questions
 
PPTX
Big Data - An Overview
Arvind Kalyan
 
PDF
Elephant in the room: A DBA's Guide to Hadoop
Stuart Ainsworth
 
PPT
Bootstrap 3 training
Vison Sunon
 
PPTX
Breaking the oracle tie
agiamas
 
PDF
Distributed Data Analysis with Hadoop and R - Strangeloop 2011
Jonathan Seidman
 
PDF
Hadoop Developer
Edureka!
 
PDF
Introduction to Big Data & Hadoop
Edureka!
 
Androidfragment
Narender Singh
 
Introduction to mobile programming with Androids.
Maksim Golivkin
 
Android training day 3
Vivek Bhusal
 
Supporting multi screen in android
rffffffff007
 
Supporting multi screen in android cn
rffffffff007
 
Android supporting multiple screen
Dao Quang Anh
 
Introduction to Big Data and Hadoop
Edureka!
 
Android在多屏幕、多设备上的适配 | 布丁 任斐
imShining @DevCamp
 
TDC2012 Android - Deixando Sua Interface mais Bonita com Shapes
Suelen Carvalho
 
Fernando F. Gallego - Efficient Android Resources 101
Fernando Gallego
 
Let's dig into the Omega Theme!
Mediacurrent
 
Does my DIV look big in this?
glen_a_smith
 
Hadoop Interview Questions and Answers
Big Data Interview Questions
 
Big Data - An Overview
Arvind Kalyan
 
Elephant in the room: A DBA's Guide to Hadoop
Stuart Ainsworth
 
Bootstrap 3 training
Vison Sunon
 
Breaking the oracle tie
agiamas
 
Distributed Data Analysis with Hadoop and R - Strangeloop 2011
Jonathan Seidman
 
Hadoop Developer
Edureka!
 
Introduction to Big Data & Hadoop
Edureka!
 
Ad

Recently uploaded (20)

PDF
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
Libreria ERP
 
PDF
Mobile App Security Testing_ A Comprehensive Guide.pdf
flufftailshop
 
PPTX
Cloud computing and distributed systems.
kkkkkhan
 
PPTX
sap open course for s4hana steps from ECC to s4
sreeni2106invites
 
PDF
Encapsulation theory and applications.pdf
gurumoop
 
PDF
Advanced methodologies resolving dimensionality complications for autism neur...
IAESIJAI
 
PPTX
Spectroscopy.pptx food analysis technology
nawahassan45
 
PDF
Spectral efficient network and resource selection model in 5G networks
IAESIJAI
 
PPTX
Big Data Technologies - Introduction.pptx
kuthubussaman1
 
PDF
Approach and Philosophy of On baking technology
30anthuong17
 
PDF
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
Jian-Hong Pan
 
PDF
Encapsulation_ Review paper, used for researhc scholars
gurumoop
 
PDF
Building Integrated photovoltaic BIPV_UPV.pdf
SandeepSingh286037
 
PPTX
MYSQL Presentation for SQL database connectivity
Swati270511
 
PDF
NewMind AI Weekly Chronicles - August'25 Week I
NewMind AI
 
PPTX
Digital-Transformation-Roadmap-for-Companies.pptx
David Malick Dieng
 
PDF
Machine learning based COVID-19 study performance prediction
IAESIJAI
 
PDF
Empathic Computing: Creating Shared Understanding
Mark Billinghurst
 
PDF
cuic standard and advanced reporting.pdf
SimoneTitaniumTomase
 
PDF
Reach Out and Touch Someone: Haptics and Empathic Computing
Mark Billinghurst
 
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
Libreria ERP
 
Mobile App Security Testing_ A Comprehensive Guide.pdf
flufftailshop
 
Cloud computing and distributed systems.
kkkkkhan
 
sap open course for s4hana steps from ECC to s4
sreeni2106invites
 
Encapsulation theory and applications.pdf
gurumoop
 
Advanced methodologies resolving dimensionality complications for autism neur...
IAESIJAI
 
Spectroscopy.pptx food analysis technology
nawahassan45
 
Spectral efficient network and resource selection model in 5G networks
IAESIJAI
 
Big Data Technologies - Introduction.pptx
kuthubussaman1
 
Approach and Philosophy of On baking technology
30anthuong17
 
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
Jian-Hong Pan
 
Encapsulation_ Review paper, used for researhc scholars
gurumoop
 
Building Integrated photovoltaic BIPV_UPV.pdf
SandeepSingh286037
 
MYSQL Presentation for SQL database connectivity
Swati270511
 
NewMind AI Weekly Chronicles - August'25 Week I
NewMind AI
 
Digital-Transformation-Roadmap-for-Companies.pptx
David Malick Dieng
 
Machine learning based COVID-19 study performance prediction
IAESIJAI
 
Empathic Computing: Creating Shared Understanding
Mark Billinghurst
 
cuic standard and advanced reporting.pdf
SimoneTitaniumTomase
 
Reach Out and Touch Someone: Haptics and Empathic Computing
Mark Billinghurst
 
Ad

Android Fragment-Awesome

  • 1. Android Fragment-Awesome Matthew Gaunt
  • 2. Who is this guy? • Master in Computer Science in Bristol • Senior Android Dev @ Mubaloo • Cross Platform Dev @ Future Platforms
  • 4. What’s coming up • Design - I can haz pretty • Dips • Buckets? • What buckets? • The story of buckets • Tips + Examples
  • 5. Dips Density Independent Pixels Abstract the screen size (think rounded corner rectangle) Never assume dip > pixels
  • 6. Buckets? ldpi mdpi hdpi xhdpi
  • 7. What Buckets? Screen density (ldpi, mdpi, hdpi, xhdpi) Orientation (port, land) Android Version (v4, v11) Screen size (small, normal, large, xlarge)
  • 8. Eeks lots of Images
  • 9. How to use Buckets • Images - [ldpi, mdpi, hdpi, xhdpi] [small, normal, large, xlarge] • Layout -[land, port] • Themes / Styles - [v4, v11] • Dimensions - [small, normal, large, xlarge]
  • 12. The History... ldpi <port> mdpi land hdpi 1.5 1.6
  • 13. The History... small ldpi normal <port> mdpi large land hdpi xlarge 1.5 1.6 3.0 (ish)
  • 14. The History... small ldpi normal ldpi mdpi <port> mdpi large hdpi land hdpi xlarge xhdpi 1.5 1.6 3.0 (ish) 4.0
  • 15. Recap • Lots of buckets • Lots of resources to apply the buckets to • How it relates to other platforms like iOS
  • 17. Phones / Tablets? ldpi mdpi hdpi xhdpi total Small 1.7% 2.4% 4.1% Normal 0.7% 18.5% 66.3% 2.5% 88.0% Large 0.2% 2.8% 3.0% XLarge 4.9% 4.9% ldpi mdpi mdpi hdpi ? hdpi ? xhdpi ? xhdpi ? Phones Tablets normal / small large / xlarge
  • 18. Hitting Both? drawable For all buckets drawable-ldpi drawable-mdpi Base drawable-hdpi drawable-xhdpi drawable-large-? Additional drawable-xlarge-?
  • 19. Tips to Reduce Work 1 Use values everywhere (dimens, ints, etc.)
  • 20. Tips to Reduce Work values dimens.xml <resources>         <dimen name="default_text_size">20sp</dimen>         <dimen name="default_large_text_size">30sp</dimen>         <dimen name="splash_vertical_spacing">20dp</dimen>         <dimen name="gauntface_tag_bottom_spacing">20dp</dimen>         <dimen name="gauntface_tag_padding">5dp</dimen>         <dimen name="gauntface_tag_radius">10dp</dimen>         <dimen name="splash_gauntface_progress_bar">30dp</dimen>         <dimen name="generic_dialog_padding">15dp</dimen>         <dimen name="generic_dialog_bg_radius">4dp</dimen>         <dimen name="generic_dialog_title_spacer_height">4dp</dimen>         <dimen name="generic_dialog_title_spacer_vertical_spacing">10dp</dimen>         <dimen name="sync_info_padding">10dp</dimen>         <dimen name="sync_info_title_text_size">35sp</dimen>         <dimen name="sync_info_msg_text_size">20sp</dimen>         <dimen name="sync_info_bg_radius">10dp</dimen>         <dimen name="sync_info_prof_pic_radius">8dp</dimen>         <dimen name="sync_info_prof_pic_size">128dp</dimen>     </resources> values-land dimens.xml <resources>         <dimen name="default_text_size">15sp</dimen>         <dimen name="default_large_text_size">25sp</dimen>         <dimen name="splash_vertical_spacing">10dp</dimen>     </resources>
  • 21. Tips to Reduce Work values values-land
  • 22. Tips to Reduce Work 2 Learn the ways of the nine patch
  • 24. Tips to Reduce Work 3 Use <Shape> drawables
  • 25. Tips to Reduce Work <shape     xmlns:android="http://schemas.android.com/apk/res/android"     android:shape="rectangle">     <gradient         android:angle="0"         android:endColor="@color/dark_blue"         android:gradientRadius="660"         android:startColor="@color/splash_light_blue"         android:type="radial" /> </shape>
  • 27. Tips to Reduce Work 4 Use Themes & Styles www.gauntface.co.uk/blog/2011/01/18/android-ui-reference
  • 28. Tips to Reduce Work values themes.xml <resources> <style name="Theme.FacebookSync" parent="@style/Theme.FacebookSync.Support">         ...     </style>     <style name="Theme.FacebookSync.NoTitleBar">         ...     </style>     <style name="Theme.FacebookSync.Dialog" parent="@style/Theme.Dialog.Support">         ... </style> </resources> values-v11 themes-v11.xml <resources>     <style name="Theme.FacebookSync.Support" parent="@android:style/Theme.Holo"></style>     <style name="Theme.Dialog.Support" parent="@android:style/Theme.Holo.Dialog"></style> </resources> values-v4 themes-v4.xml <resources>     <style name="Theme.FacebookSync.Support" parent="@android:style/Theme.NoTitleBar"></style>     <style name="Theme.Dialog.Support" parent="@android:style/Theme.Dialog"></style> </resources>
  • 30. Tips to Reduce Work 5 Give up control - be fluid
  • 31. Tips to Reduce Work Note: Not the best example ;)
  • 34. Thanks :) @gauntface matt@gauntface.co.uk