Android Chronicles (14): Android 2.3 Gingerbread — The first major UI change

Android 2.3 Gingerbread - The first major UI change

Gingerbread was released in December 2010, a full seven months after 2.2. The wait was worth it, though, as Android 2.3 changed nearly every interface in the OS. It was the first major update since the original styling of Android 0.9. 2.3 started a series of continuous improvements that tried to turn Android from an ugly duckling into something that could hold its own - aesthetically pleasing - against the iPhone.

[[179679]]

Speaking of Apple, six months ago it released the iPhone 4 and iOS 4, adding multitasking and Facetime video chat. Microsoft has also finally returned to the game, launching Windows Phone 7 in November 2010 and entering the smartphone era.

Android 2.3 put a lot of effort into the interface design, but due to the lack of direction or design documentation, many apps did little more than get a new custom theme. Some apps used a flatter dark theme, some used a gradient-filled, lively dark theme, and others used a high-contrast white and green combination. Although 2.3 didn't achieve a unified style, Gingerbread did the job of modernizing nearly every part of the system. That's a good thing, too, because the next version of Android for mobile wasn't due for nearly a year.

Nexus S, the first Nexus phone made by Samsung.

The first device to ship with Gingerbread was the Nexus S, Google's second flagship device and the first Nexus device to be manufactured by Samsung. Although today we're used to seeing new CPUs every year, that wasn't the case back then. The Nexus S had a 1GHz Cortex A8 processor, the same as the Nexus One. The GPU was slightly faster. The Nexus S was slightly larger than the Nexus One and had an 800×480 resolution AMOLED display.

The Nexus S may seem like a bland upgrade in terms of specs, but it does offer a lot of firsts for Android. The Nexus S is Google's first flagship without a MicroSD card slot, and it comes with 16GB of onboard storage. The Nexus One only had 512MB of storage, but it did have a MicroSD card slot. Removing the SD card slot simplifies storage management for users -- there's now only one place to store it -- but it affects the ability to expand it for advanced users. It's Google's first phone with NFC, a special chip on the back of the phone that can transfer data when it comes into contact with other NFC chips. For now, the Nexus S can only read NFC tags, not send data.

Thanks to some of the upgrades in Gingerbread, the Nexus S was one of the first Android phones to not come with a hardware D-pad or trackball. The Nexus S was pared down to just power, volume, and four navigation buttons. The Nexus S was also a precursor to today's crazy curved phones, as Samsung gave the Nexus S a slightly curved piece of glass.

Gingerbread changes the status bar and wallpaper, and adds many new icons. [Photo courtesy of Ron Amadeo]

An updated "Nexus" live wallpaper was released as a Nexus S exclusive feature. This wallpaper is basically the same as the Nexus One, with light dots with animated trails. On the Nexus S, the square design is gone, replaced by a wavy blue/grey background. The bottom dock has right angles and colorful icons.

The new notification panel and menu. [Image courtesy of Ron Amadeo]

The status bar has finally been reworked since its debut in 0.9. The status bar has gone from a white gradient to solid black, and all icons have been redrawn to gray and green. Everything looks much cleaner and more modern, thanks to the sharper-angled icons and higher resolution. The strangest decision may be the removal of the time of day display from the status bar clock, as well as the confusing gray color of the signal strength. Even though gray is used for many of the icons in the status bar, and the screenshot above shows four gray bars, Android is actually indicating no signal. The green bars indicate signal strength, and the gray bars indicate "empty" signal bars.

The status bar icon in Gingerbread also serves as an indicator of the network connection status. If your device is connected to Google's servers, the icon will turn green, and if there is no connection to Google, the icon will be white. This allows you to easily understand the status of your network connection when you are out and about.

The design of the notification panel has been improved from the one in Android 1.5. We see that the UI has once again changed from a light theme to a dark theme, with a dark grey top, black background and black text on a grey base.

The menus have also been darkened, with the background changing from white to a slightly transparent black. The contrast between the menu icons and the background isn't as strong as it could be, because the gray icons are the same color as they are on a white background. Requiring a color change would have meant that every developer would have to make new icons, so Google used the pre-existing gray on a black background. This is a system-wide change, so this new menu will appear in every app.

Gingerbread's new keyboard, text selection, border bounce effects, and new checkboxes. [Image courtesy of Ron Amadeo]

The most important addition to Android 2.3 is the system-wide text selection interface, which you can see in the Google search bar in the screenshot to the left. Long-pressing a word highlights it in orange and brings up a small draggable label, and long-pressing the highlighted portion brings up cut, copy, and paste options. The previous method used controls that relied on the D-pad, but now with touch text selection, the Nexus S no longer needs additional hardware controls.

The right half of the screenshot on the left shows the new checkbox design and border bounce effect. The checkbox for Frozen Yogurt (2.2) looks like a light bulb - it shows a green check mark when checked and a gray check mark when unchecked. Gingerbread shows an empty checkbox when the option is off - it makes more sense. Gingerbread is the first version to have a scroll-to-bottom glow effect. When you reach the bottom of the list, there is an orange halo, and the halo becomes more obvious the further you scroll up. The scroll bounce effect when you pull up the list may be the most intuitive, but that is Apple's patent.

New dial interface and dialog design. [Image courtesy of Ron Amadeo]

The dialer in Gingerbread received a little more care. It's darker, and Google has finally solved the problem of the original right angle combination. The rounded corners and circles have been abandoned. Now all the corners are right angles. All the dial buttons have been replaced with a style with strange underlines, like they were pieced together from scraps. You can never be sure if you see a button or not - our brains have to imagine the rest of the button shape.

The wireless network dialog in the picture above can be seen as a sample of the rest of the system-wide changes. All dialog titles have changed from gray to black, dialogs, drop-down boxes, and buttons have become right-angled, and everything has been darkened a bit. All of these global changes make Gingerbread look less lively and more mature. The "black everywhere" look is definitely not the most popular, but it certainly looks better than Android's previous gray and beige color scheme.

The new market, with a large green header. [Photo courtesy of Ron Amadeo]

The new version of the system brings "Android Market 2.0", although it is not exclusive to Gingerbread. The main list design is the same as before, but Google covers the upper third of the screen with a large green banner to display popular applications and navigation. The main design inspiration here may be the green Android mascot - their colors match perfectly. When the system design tends to be dark, the neon green banner and white list make the market much brighter.

However, the same green background image was used on different phones, which meant that on low-resolution devices, the green banner looked even larger. Many users complained about this wasted screen space, so a subsequent update made the green banner scroll up with the content. At that time, landscape mode was even worse - the green banner would fill the remaining half of the screen.

A screenshot of an app details page in the Marketplace with a collapsible description, the My Apps screen, and the Google Books screen. [Photo courtesy of Ron Amadeo]

The app details page has been redesigned with collapsible sections. The text description only shows the first few lines, so you no longer have to scroll down through thousands of lines of description. There is a "More" button after the short description that can be clicked to display the full description. This allows users to easily scroll through the list to find sections like screenshots and "Contact the Developer", which are usually at the bottom of the page.

The rest of the Android home screen wisely tones down the green robot element. The rest of the Market app is mostly just the old Market with new green navigation elements. The old tabbed interface has been upgraded to swipeable tabs. In the Gingerbread screenshot on the right, swiping from right to left will switch from "Top Paid" to "Top Free," making navigation much easier.

Gingerbread brought with it the app that would become the first member of the Google Play content store: Google Books. The app was a basic e-book reader that displayed books in a tiled display with simple previews. The "Get eBooks" link at the top of the screen opened a browser and loaded a mobile website where you could buy the e-book.

Google Books and the Marketplace's "My Apps" page were early prototypes of the Action Bar. As written in the current guidelines, the page has a fixed top bar with the app icon, the name of the page within the app, and some controls. The layout of these two apps actually looks very modern and similar to the current interface.

The new Google Maps. [Photo courtesy of Ron Amadeo]

Google Maps (again, this was in the Android Market and not exclusive to this version of Android) had another prototype action bar, a top-aligned control bar. This early version of the action bar had a lot of experimental features. The control bar was dominated by a search box, but you could never type into it. Clicking the search box would open the old search interface from Android 1.x, with a completely different action bar design and lively buttons. The top bar of the 2.3 version was just a big search button.

The new business page has gone from black to white. [Photo courtesy of Ron Amadeo]

Popular Businesses, which arrives in the app drawer alongside Places, has a redesigned interface. Unlike the rest of Gingerbread, it's switched from black to white. Google also kept the old rounded-corner buttons. This new version of Maps shows business hours and offers advanced search options, like open now or limiting your search by rating or price. Reviews have been moved to the business details page, making it easier for users to get a feel for the current business. And you can now add stars to a place from the search results and save it for later.

The new YouTube design is amazing, and it looks a bit like the old version of the map's business page design. [Photo courtesy of Ron Amadeo]

The YouTube app seemed completely separate from the rest of Android, as if whoever designed it had no idea what Gingerbread would eventually look like. Highlights were a red and gray scheme instead of green and orange, and instead of the flat black style of Gingerbread, YouTube had bubbly buttons, tabs, and action bars with rounded corners and heavy use of gradients. Still, the new app had some things right. All of the tabs swiped horizontally, and the app finally had a vertical mode for watching videos. Android didn't seem to work very consistently at that stage. It was like someone told the YouTube team to "make it black," and that was the entire direction. The only Android entity that resembled it was the design of the business pages on the old Google Maps.

Despite its odd design, the YouTube app has the top bar design that is closest to the action bar. In addition to the app icon and some buttons on the top action bar, there is a button on the far right labeled "More". Clicking it can open options that are too many to fit in the action bar. Today, this is called the "More Actions" button, and it is a standard interface control.

The new Google Talk, which supports voice and video calls, as well as a new voice command interface. [Photo courtesy of Ron Amadeo]

The last update to Gingerbread was Android 2.3.4, which brought a new version of Google Talk. Unlike the Nexus One, the Nexus S had a front-facing camera - the redesigned Google Talk had voice and video calling capabilities. Colored indicators to the right of the friend list indicated not only online status, but also voice and video availability. A dot indicated text-only, a microphone indicated text or voice, and a camera indicated text, voice, and video. Tapping the voice or video icon would immediately start a call to the friend, if available.

Gingerbread is the oldest version of Android that Google still supports. Activate a Gingerbread device and leave it alone for a while and you'll get a ton of updates. Gingerbread pulls in Google Play Services, which brings support for a lot of new APIs, and updates to the latest version of the Play Store. Open the Play Store and hit the Update button, and nearly every single Google app will be replaced with a more modern version. We've tried to keep this article current as of the release of Gingerbread, but users who are stuck on Gingerbread today are considered a bit behind the times.

Gingerbread is still supported today because a significant number of users are still using this somewhat outdated system. Gingerbread's continued significance comes from its extremely low system requirements, making it the best choice for low-end and cheap devices. The next versions of Android became more demanding on hardware. For example, Android 3.0 Honeycomb was not open source, which meant that it could only be ported to a device with the help of Google. It was also designed only for tablets, which made Gingerbread the latest mobile Android version for quite some time. 4.0 Ice Cream Sandwich was the next mobile version, but it significantly raised the system requirements of Android and abandoned the low-end market. Google is now hoping to return to the cheap phone market with 4.4 KitKat, which has reduced the system requirements back to 512MB of RAM. The passage of time also helps - now even cheap system-level chips can meet the system requirements of the Android 4.0 era.

[[179681]]

Ron Amadeo / Ron is a reviews editor at Ars Technica, focusing on Android and Google products. He's always on the lookout for new things and loves to tear things apart to see how they really work. @RonAmadeo