Android UI Design Guidelines

Posted by : Unknown Tuesday, July 8, 2014

Android UI Design Guidelines

  • Android powers millions of phones, tablets, and other devices in a wide variety of screen sizes and form factors. By taking advantage of Android's flexible layout system, you can create apps that gracefully scale from large tablets to smaller phones.
  • Android runs on a variety of devices that offer different screen sizes and densities.
  • Android’s multiple devices and form factors make it feel like designing for it is an uphill battle.
  • Be flexible
      Stretch and compress your layouts to accommodate various heights and widths.
  • Optimize layouts
      On larger devices, take advantage of extra screen real estate. Create compound views that combine multiple views to reveal more content and ease navigation.
  • Assets for all
      Provide resources for different screen densities (DPI) to ensure that your app looks great on any device.
  • Devices vary not only in physical size, but also in screen density (DPI). To simplify the way you design for multiple screens, think of each device as falling into a particular size bucket and density bucket:
    • The size buckets are handset (smaller than 600dp) and tablet (larger than or equal 600dp).
    • The density buckets are LDPI, MDPI, HDPI, XHDPI, XXHDPI, and XXXHDPI.
  • To keep things simple, Android breaks down physical screen sizes (measured as the screen’s diagonal length from the top-left corner to bottom-right corner) into four general sizes: small, normal, large and xlarge.

  • Optimize your application's UI by designing alternative layouts for some of the different size buckets, and provide alternative bitmap images for different density buckets.

  • Notice: one dp (density-independent pixel) is one pixel on a 160 DPI screen.
  • Views dimensions and spacing
    • Touchable UI components are generally laid out along 48 dp units. Spacing between each UI element is 8 dp.

  • Text Size:
      The Android framework uses the following limited set of type sizes:
                                     Text size micro --------------------- 12sp
                                     Text Size Small ----------------------14sp
                                     Text Size Medium ------------------18sp
                                     Text Size Large ---------------------22sp
            Notice: one sp (scale-independent pixel) is one pixel on a 160 DPI screen if the user's global text scale is set to 100%.
  • Colors:
      Use color primarily for emphasis. Blue is the standard accent color in Android's color palette. Note that red and green may be indistinguishable to color-blind users.
              More Information refer following site:
                    http://developer.android.com/design/style/color.html
  • Iconography:
    • An icon is a graphic that takes up a small portion of screen real estate and provides a quick, intuitive representation of an action, a status, or an app.
    • When you design icons for your app, it's important to keep in mind that your app may be installed on a variety of devices that offer a range of pixel densities, as mentioned in Devices and Displays. But you can make your icons look great on all devices by providing each icon in multiple sizes.
    • When your app runs, Android checks the characteristics of the device screen and loads the appropriate density-specific assets for your app.

      Qualifier DPI Scaling factor Launcher icon Action bar, tab icon Notification icon (API 11) Notification icon (API 9) Notification icon (older)
      ldpi 120 0.75 36 x 36
      32 x 32      		 24 x 24
      18 x 18      		 18 x 18
      16 x 16      		 12 x 19
      12 x 12      		 19 x 19
      16 x 16
      mdpi 160
      		48 x 48
      42 x 42      		 32 x 32
      24 x 24      		 24 x 24
      22 x 22      		 16 x 25
      16 x 16      		 25 x 25
      21 x 21
      hdpi 240 1.5 72 x 72
      64 x 64      		 48 x 48
      36 x 36      		 36 x 36
      33 x 33      		 24 x 38
      24 x 24      		 38 x 38
      32 x 32
      xhdpi 320 2.0 96 x 96
      84 x 84      		 64 x 64
      48 x 48      		 48 x 48
      44 x 44      		 32 x 50
      32 x 32      		 50 x 50
      42 x 42
      xxhdpi 480 3.0 144 x 144
      126 x 126      		 96 x 96
      72 x 72      		 72 x 72
      66 x 66      		 48 x 75
      48 x 48      		 75 x 75
      63 x 63


        • Notice: the first icon dimension in table cell is full asset size, the second icon dimension is optical square. Dimension values are in pixels.
        • Tip: creating ldpi assets is not really needed anymore. The devices are rare and the platform will just scale down mdpi.

        • So, to create an icon for different densities, you should follow the 2:3:4:6:8 scaling ratio between the five primary densities (medium, high, x-high, xx-high, and xxx-high respectively). For example, consider that the size for a launcher icon is specified to be 48x48 dp. This means the baseline (MDPI) asset is 48x48 px, and the high density (HDPI) asset should be 1.5x the baseline at 72x72 px, and the x-high density (XHDPI) asset should be 2x the baseline at 96x96 px, and so on.
        • For More Information refer following site:
          http://developer.android.com/design/style/iconography.html
      • Writing Styles:

      • Best Practices for User Interface

        • Android provides a flexible framework for UI design that allows your app to display different layouts for different devices, create custom UI widgets, and even control aspects of the system UI outside your app's window.
        • Designing for multiple Screens::
          • Android powers hundreds of device types with several different screen sizes, ranging from small phones to large TV sets. Therefore, it’s important that you design your application to be compatible with all screen sizes so it’s available to as many users as possible.

      • Naming conventions

      • Naming conventions for drawables

        • File names must contain only lowercase a-z, 0-9, or _.

        • Drawables for the specific views (ListView, TextView, EditText, ProgressBar, CheckBox etc.) should be named like this views keeping the naming rules, e.g. drawable for CheckBox should be named "checkbox_on_bg.png".

      Asset Type Prefix Example
      Action bar ab_ ab_stacked.9.png
      Button btn_ btn_send_pressed.9.png
      Dialog dialog_ dialog_top.9.png
      Divider divider_ divider_horizontal.9.png
      Icon ic_ ic_star.png
      Menu menu_ menu_submenu_bg.9.png
      Notification notification_ notification_bg.9.png
      Tabs tab_ tab_pressed.9.png

      • Naming conventions for icon assets

      Asset Type Prefix Example
      Icons ic_ ic_star.png
      Launcher icons ic_launcher ic_launcher_calendar.png
      Action bar icons ic_menu ic_menu_archive.png
      Status bar icons ic_stat_notify ic_stat_notify_msg.png
      Tab icons ic_tab ic_tab_recent.png
      Dialog icons ic_dialog ic_dialog_info.png

      • Naming conventions for selector states

      State
      		 Suffix Example
      Normal _normal btn_order_normal.9.png
      Pressed _pressed btn_order_pressed.9.png
      Focused _focused btn_order_focused.9.png
      Disabled _disabled btn_order_disabled.9.png
      Selected _selected btn_order_selected.9.png

      Android DP / PX converter

Leave a Reply

Subscribe to Posts | Subscribe to Comments

Copyright © Srinoid