Android training day 3

Designing for Android

Anjan Shrestha UX Lead, YoungInnovations

Android Apps Training Day 3

A small introduction to android UI

A small introduction to android UI

Home Screen

A small introduction to android UI

All Apps Screen

A small introduction to android UI

Recents Screen

System Bars Status Bar

Navigation Bar

One terminology you must know …

SCREEN DENSITY The number of pixels in a physical area of a screen.

Measured as Dots Per Inch

DPI

ldpi mdpi hdpi xhdpi xxhdpi tvdpi

SCREEN DENSITY

120 160 240 320 480 213 approx.

So?

Well, you must deliver images for each screen density.

48px in mdpi = 48px in xhdpi

Because visually,

DP Density Independent Pixel

to the rescue

Defining layout in density independent way …

DP

HUH?

1dp=1px On an mdpi (160dpi) screen,

That is probably why mdpi is also called the baseline screen in Android.

px*(dpi/160)

For other screen densities,

48*(320/160)

So a 48px icon in mdpi should be …

px*(dpi/160)

96px in xhdpi (320)

ldpi mdpi hdpi xhdpi tvdpi

48px 36px 72px 96px 63px

1x 0.75x 1.5x 2x 4/3x

Similarly, other icons as well

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  

Naming these icons

Setting up workspace

A little bit on launcher icon

THIS IS

YOU! Launcher icon appears on the Home or All Apps screen of android.

ldpi mdpi hdpi xhdpi tvdpi

48px 36px 72px 96px 63px

Launcher Icons for different screen densities

Launcher Icons for display on Google Play

512x512px

Designing the UI

Step 1

Write down the objective(s) of your application.

Step 2

Draw wireframes (start with sketching on paper), get feedback, refine.

Step 3

Pick your favorite design tool. Mine is Adobe Fireworks and Sketch (mac only)

Step 4

Start designing based on your wireframe.

Follow the design patterns

No. of actions you can put in action bar

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

Navigation with Navigation Drawer

Study Design Patterns for more

http://developer.android.com/design/patterns/index.html

See Building blocks section for ready-to-use elements

http://developer.android.com/design/building-blocks/index.html

For stencils, gui elements

http://developer.android.com/design/downloads/index.html

Thank you!

Anjan Shrestha UX Lead, YoungInnovations

Designing for Android - Development Vivek Bhusal

Android Apps Training Day 3

“How do I configure for different screens then ?”

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.

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

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

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  

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" />

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  ?  

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 -->

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.

Thank you!

Vivek Bhusal UX Lead, YoungInnovations