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.

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

6. System Bars
Status Bar
Navigation Bar

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

22. Naming these icons

23. Setting up workspace

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

36. Study Design
Patterns for
more
http://developer.android.com/design/
patterns/index.html

37. See Building
blocks section
for ready-to-
use elements
http://developer.android.com/design/
building-blocks/index.html

38. For stencils, gui
elements
http://developer.android.com/design/
downloads/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