CHAPTER 9: Android Graphic Design: Making Your UI Designs Visual 303to extra high-resolution 1920 by 1080 pixel display screens on large tablets and iTV sets, to the
new super high-resolution 2560 by 1440 (such as on the Samsung Galaxy S5) and 4096 by 2160
(4K iTV Sets) pixel display screens on professional smartphones and 4K iTV sets. It’s challenging to
develop an app which can span from smartwatches to 4K iTV Sets!
The Shape of a Digital Image: The Aspect Ratio
A slightly more complicated aspect (no pun intended) of image resolution would be the image’s
aspect ratio, a concept which also applies to Android device (hardware) display screens. Aspect
ratio is the ratio of width to height or W:H, or, if you like to think in terms of an x-axis and y-axis,
it would be X:Y. The aspect ratio will define the shape of an image or display screen; that is, how
square or rectangular (popularly called widescreen) the image or the display screen might be.
A 1:1 aspect ratio display screen (or digital image) is perfectly square. It is important to note that
it is this ratio between these two numbers that defines the shape of the image or screen, and not
these numbers themselves, and that’s why it is called an aspect ratio, although it’s often called
“aspect” for short.
Many Android display screens these days use an HDTV widescreen aspect ratio, which is 16:9.
However, some use a less wide, or taller, 16:10 (or 8:5, if you prefer) aspect ratio. Even wider screens
will also surely appear on the market soon, so look for 16:8 (or 2:1, if you prefer) ultra-wide screens,
which will have a 2160 by 1080 resolution.
An image aspect ratio is usually expressed as the smallest set or pair of numbers that can be
achieved (reached) on either side of the aspect ratio colon. If you paid attention in High School,
when you were learning all about lowest (or least) common denominators, then this aspect ratio
mathematics should be fairly easy to calculate and to understand.
I usually do this mathematical matriculation (say this five times rapidly, to make what we are about
to do seem easier) by continuing to divide each side by two. Taking the fairly odd-ball 1280 by 1024
(called SXGA in the display industry) resolution as an example, half of 1280:1024 is 640:512, and half
of that would be 320:256, half of that is 160:128, and half of that again is 80:64, half of that is 40:32,
half of that is 20:16, half of that is 10:8, half of that is 5:4, so an SXGA screen uses a 5:4 aspect ratio.
Interestingly, all of the above ratios are the same aspect ratio, and all are valid. So if you want to take
the really easy way out, replace the “x” in your image resolution with a colon and you have an aspect
ratio for the image, although distilling it down to its lowest format, as we’ve done here, is far more
useful!
Original PC screens used a “squarer” 4:3 aspect ratio, and early 3:2 aspect ratio CRT “cathode ray
tube” TV sets were nearly square. The closer the numbers on either side of the colon are to each
other in size, the more square an image or a screen will be (identical numbers, remember, are a
square aspect), unless one of the numbers is a one!
A 2:1 aspect is a widescreen display, and a 3:1 aspect display would be downright panoramic!
The current market trend is certainly toward wider screens and higher resolution displays; however,
Android smartwatches could change this trend back toward square aspect ratios, which are certainly
useful in a wide variety of applications.