Click the image above for full-size view.

I loved the Holo theme in Ice Cream Sandwich. That’s the reason I made the Android ICS GUI Design Kit in PSD for Android Designer to design high quality app with stock UI elements in mind. But I am also curious how well can the UI elements in Holo theme for ICS can be applied to the currently available apps, so I decided to start with the official Twitter Android app, which is an easy one I think.

I have tried to apply stock UI elements as many as possible to show that they can be used to design high quality app and preserve the user experience (UX) that is consistent and predictable with the stock ICS. During the design, I also try to improve the UX of the app for better usability.

• Stacked Tabs - For the main tabs, I have decided to use Stacked Tabs instead of Scrollable Tabs. Scrollable Tabs can work well in this case, however, for 4 tabs, Stacked Tabs is suitable. This will allow the user to tap on the wanted tab, and also allow the user to scroll through the tabs using horizontal gesture. You will notice that the selected tab will have a highlighted effect at the bottom of that tab (which is a stock tab behavior). For the unselected tabs, the grey indicates that it is not selected and there is no update for that tab. The blue highlight for unselected tabs indicates that there is some unchecked updates.

• Refresh button – To be honest, I am not a fan of ‘Pull down to refresh…’ feature in the Twitter app. Call me old school, but I still prefer a Refresh button on the Action Bar.

• Search button - I have also added a Search button on the Action Bar. In the official Twitter app, a Search button (but looks like a text field) is placed on top of the content (both in Connect and Discover tab), so if you scrolled down to the very bottom of the page, you will have to scroll all the way back to the top to access it. I am aware that we have a hardware Search button, but I think it will still be easier if the user can initiate the search within the app.

• Grid Lists – The Discover tab is a good example to show how the Grid Lists can be used in the app, other than the stock Gallery app.

• Mentions Only switch at Connect tab – In the official Twitter app, the bottom bar consists of two tabs, Interaction and Mentions, which in my opinion, is redundant and confusing. So instead I have made it a switch to turn on/off Mentions Only mode for the Connect tab.

It is really interesting to see how well an app can be enhanced only with the stock UI elements in ICS and of course, well in-line with the Android Design Guideline. Let’s hope with the released Android Design guideline meant for ICS, there will be more good quality app in the Android Market.

Don’t hesitate to comment/criticize my UI concept, this is where we can learn our mistake and do better for the next one.

Details

Besides the Android ICS GUI Design Kit that can be used in Adobe Photoshop, I also think (and love!) that sketching is a big part of UI/UX designing, while it can be messy, but it definitely help in quick idea visualization and aid in brainstorming.

So here I come up with two sketch templates for Android App, using the Samsung Nexus S and Samsung Galaxy Nexus as the sample devices, and put them on an A4-sized PDF with almost real-life size so designers can sketch the app with the size as close as the real device (don’t blame me if there is one or two pixels off! /jk/).

Android app designer, go create some awesome apps with the GUI Design Kit and GUI Sketching Kit!

Download

Android_GUI_Sketching_Kit – Nexus S

Android_GUI_Sketching_Kit – Galaxy Nexus

19JAN2012: Android ICS GUI Design Kits updated to 2.0!

Update

1.1: Added more stock ICS GUI elements. Refer below for details.

2.0: Based on the official Android Design by Android Team, most of the ICS GUI stock elements have been added. Below image shows a summary of the content.

Details

I have been designing mock up of Android app in Adobe Photoshop and I find that a GUI Design Kit is extremely important, and I thought there isn’t any good (and simple) one in the wild, so I have decided to make this Android ICS GUI Design Kit for two different resolutions and dpi:

• 720×1280 320dpi – Samsung Galaxy Nexus
• 480×800 240 dpi – Samsung Nexus S, Samsung Galaxy S II

The main idea of this GUI Design Kit is not making everything scalable to the unfortunate fragmentation occurs in Android, but just provide some stock elements of Android 4.0 (Ice Cream Sandwich) in one .psd file so app designer can really focus on creating awesome mock up to show developers/clients. Some of the elements are just single layer of image from ICS, but I thought they are pretty adequate for mock up purpose.

So what’s in it (1.0):

Gmail allows you to automatically forward incoming emails to the other email address, but unfortunately, it is limited to only one address at a time in Mail Settings.

However, a trick on the filtering feature in Gmail can be applied to automatically forward incoming emails to multiple recipients at once. Here’s how:

1. Go to Mail Settings > Forwarding and POP/IMAP > Forwarding. Click Add a forwarding address button to add an email address that you want to forward the incoming mails.

2. The inbox of that email address should have an incoming mail from Gmail Team, asking for permission to allow the forwarding. Approve for the permission so that the email address is selectable for forwarding address in Gmail.

3. Repeat Step 1 and Step 2 for the other email addresses. Note that there will be a limitation of 20 email addresses that can be used for forwarding using this tricks, but it should be adequate for normal use.

4. To configure the first forwarding, go to Mail Settings > Forwarding and POP/IMAP > Forwarding. Click on the radio button Forward a copy of incoming mail to, then select one of the email addresses that you wish to forward. Then click Save Changes button.

5. For the other email addresses, a filter is required to be created, so that the incoming emails can be forwarded to those addresses. Go to Mail Settings > Filters > Create a New Filter.

6. Put a asterisk (*) at the To field, then click Create filter with this search.

7. Check the checkbox for Forward it to:, then select the other email address from the list.

8. Click Create Filter button and you are done! Simply repeat Step 5 to Step 8 for the rest of the email addresses, and now whenever there is a new incoming mail, it will be forwarded to all of the email address that you have configured. Congratulation!

There has been quite some rumors saying that Apple is already designed and produced the next iPad with Retina Display, the display technology that has been used on the iPhone 4 and the recent 4S, and there are already a few manufacturers have named for the production of the display, in rumors that is.

Before the iPad 2 getting announced (the second last keynote by Steve Jobs), early adopters of original iPad were anticipating Retina Display on the new iPad as there are some findings in the iOS codes lead to that belief. However, even though iPad 2 has a slightly new design and generally thinner and lighter, the display is exactly the same as in the original iPad. Disappointed, but it’s right not to have it on iPad 2. 

It’s right for not having Retina Display on iPad 2…

It is certainly disappointing that the iPad 2 has no Retina Display, but it is a right thing to do by Apple Inc. in my opinion. Why?

Weight reduction is important

While the original iPad is so much lighter than the conventional laptop, but let’s face it, it still have a quite significant weight (1.5 lb or 680 g for WiFi-only version), especially if the user holding it with one hand which is pretty normal (I have an original iPad, so yeah, I know it). Getting the same IPS display at 1024×768 on the iPad 2 is so natural in manufacturer point of view – the production technology has matured which contributed to the cheaper price and thus lighter weight since more cost can be pushed to other components. Getting the tablet device weight reduced is so much important than having a high-resolution display but heavy weight.

Digital reading contents for Apple is still growing

Even though iPad is advertised to be a multimedia devices, it also changes the way people consuming reading materials. Of course, Kindle is already there for quite some time, but frankly, I do not find the e-ink display equipped tablet interesting, especially the ugly screen flashing during the page turn, for example (The new color e-ink and mirasol display, however, look interesting). Though eBook industry is still pretty new to Apple, and only recently that the Newsstand is released in the new iOS 5, so it will take some time for it to grow. With the IPS display that iPad has, it is already adequate to become a good reading device.        

Lack of multimedia content production

Lacking the push in multimedia content production in both Apple and Third Party App developers also one of the reason that iPad 2 doesn’t need a high-resolution display, in my opinion. While there are already a few highly rated apps made by Apple such as Garage Band and iMovies available alongside with the launch of iPad 2, they are still not enough making the iPad a multimedia production house. However, there are already several apps from Adobe in the work, such as Photoshop Touch, for example, which I think can help in defining the iPad as a producer, rather than a consumer.

Retina display could make it more expensive

If the Retina Display for iPad is in the similar trend to that of in iPhone 4, which is a double of the resolution and double of the ppi, that would result in a whooping 2048×1536 @ 264 ppi. That is a massive move in terms of screen resolution, and I would presume even the latest A5 Dual Core processor in the iPad 2 doesn’t have enough juice to drive this resolution, especially in 3D gaming scene. The current mainstream screen resolution would be 1920×1080 (according to Wikipedia) and for gaming at this resolution natively, it would require a set of impressive hardware which I couldn’t imagine all of these to be packed in a tablet device. So double the screen resolution, probably a double/quadruple of the processing power is needed and thus – higher price point.

…But it’s time for Retina Display in the next iPad

Despite all of possible reasons for not having Retina Display on the iPad 2, the next iPad (most probably named iPad 3 or iPad HD) must have the high-resolution display. Here’s my take on it:

Next generation hardware

I doesn’t born early enough to witness the history of Apple Inc., but ever since Apple have their first iPhone released, they seems to have adapted to a trend in their product life cycle – hardware and technology improvement on every new product. So, it is definitely not surprising for the next iPad to have a huge upgrade in the specification, at least on the processor (probably Apple A6 quad-core?) that can possibly handle that huge resolution at ease. The current Apple A5 chipset is already pretty good, and I think the next will be really great. Retina Display? Most likely won’t be a problem.

iPad is getting mature

The original iPad starts shipping around April 2010, and I still remember it is not an OK when it starts shipping with iOS 3. But now with the released iOS 5, the iPad becomes more usable and started to be inline with the Post-PC era that is always mentioned by Steve Jobs. So with all the lessons learned in the first two iPads and the platform is getting matured, it’s time for better iPad.

Pixelated texts doesn’t help in reading

I must admit that the current texts display on the iPad isn’t that bad, but it isn’t that great either. Ever since I have an iPad, I have done most of the readings on it and it does the job fantastically, except the pixelated texts which is pretty annoying sometimes (I am a pixel-perfect guy, so yeah). So, Retina Display on the iPad can definitely help in pushing it becoming a great reading device that feels natural.

Making it a tool for Professionals

With the higher resolution display, there are a lot more things can be done with high precision using it by professionals, such as Photographer, Drawing Artist, Film Maker, Surgeon, just to name a few. There will be more third-party apps that can make full use of the high-resolution display and create wonder.

So…

There are already tons of rumors talking about such display in the next iPad (though there are also similar rumors for iPad 2), but I am keeping my finger crossed for this one. I don’t mind if the design is the same as iPad 2 (similar in iPhone 4S if you know what I mean), but a Retina Display (and some other improvements) is a must in the next iPad – in my opinion.

]]> http://techietalkz.com/2011/11/29/why-the-next-ipad-must-have-retina-display-and-why-its-right-not-to-have-it-on-ipad-2/feed/ 1 GhOsT_301 Retina Display http://techietalkz.com/2011/11/03/android-first-impression-of-unofficial-ice-cream-sandwich-on-google-nexus-s/ http://techietalkz.com/2011/11/03/android-first-impression-of-unofficial-ice-cream-sandwich-on-google-nexus-s/#comments Thu, 03 Nov 2011 12:20:34 +0000 ghost301 https://ghost301tech.wordpress.com/?p=1688 ]]>

The announcement of Ice Cream Sandwich (Android 4.0) and the new Galaxy Nexus certainly are exciting news for Android supporter, though it is a little bit sad to know that Nexus One won’t get the sweetness that Ice Cream Sandwich offers (at least officially).

There has been a promise of Nexus S getting Ice Cream Sandwich few weeks after the release of Galaxy Nexus, however, I am sure most of the Nexus S (and other Android device that is eligible for the update) user couldn’t wait any longer for the release. Good news is that Google already released the SDK of Android 4.0, so while waiting for the official release, we can have a go on the sweetness via the emulator on the computer.

How about a real ROM on the device now? If you are adventurous enough to try an unstable ROM (and by unstable, I really meant it) which is not meant for daily normal usage – you got it. Drew Garen from drewgaren.com has put in some efforts to convert the available SDK into a working ROM for Nexus S and it is working surprisingly well (not entirely stable but it is surprise to see this stability from a ROM built from an SDK).

If you are interested and ready to take some risk, you can refer to the guide here on how to get it install (even if you haven’t root your Nexus S), however, if you would like to see what’s new and how does it run on Nexus S, keep reading. 

First Impression

I have been running the famous MIUI custom ROM for quite some time, therefore I definitely have it in mind when it comes to comparison, though I am aware that this is an unfinished and unofficial stock Android 4.0, so I won’t be harsh on it.

Clean and Simple UI design. Similar to the recent UI transformation of Google Services which aimed for clean, simple and spacious design, you can definitely felt the changes on the UI. Looks a lot similar to the UI in Honeycomb (Android 3.0), but now they are well optimized for the phone. And I love it.

Bored but easy-to-the-eye colour scheme. You can expect most of the UI element are built from the dull black, grey, and white, but they all played their roles pretty well in categorizing the information on the screen.

Sharp corner and no more outdated border. Most of the menu/window are now border-less, and with sharp edges. Clean and direct.

Smooth (really) animation and transition effects. If I am not mistaken, hardware acceleration is turned on by default for the UI animation/transition in Ice Cream Sandwich. Setting a live wallpaper has less impact on the launcher animation now, and the new transition effects during the switching between window are really some eye candies. Rotation between horizontal and landscape is smoother than previous version.

Beautiful, resizeable widgets and drag-and-drop grouping. Widget is now sitting side by side with the app launcher and user can easily add them by drag-and-drop to the homescreen. Some of them are resizeable, and there are some nice new widgets, like the new Email and Calender widget. Similar to iOS, dragging a shortcut and place on top of another shortcut will create a group.

Data usage is more manageable. In Android 4.0, they have also included a data usage manager by default (finally!), so you can monitor you data usage right out of the box.

New Email client, Browser, Gallery etc. Of course, with the new Android, those stock app will have a facelift and provide better functionality, if any. The most noticeable changes would be on the stock browser – it is now cleaner and have some extra features such as Save for Offline Reading.

New lockscreen – Unlock or Camera. The new lockscreen is no longer meant for unlocking the screen, in Ice Cream Sandwich, you can immediately slide to the left to run the camera app to snap photo right away (I know, iOS 5 have this, but user friendly features are always welcomed).

New font – Roboto. After using the same font for quite some time, Android team have decided to give it a total change. The Roboto font is now used in Ice Cream Sandwich, which is pretty good on the readability on the mobile screen.

So, those above basically are my first impressions of Ice Cream Sandwich running on Nexus S. You might find that I didn’t mention any bad on it, but as I mentioned, this is not an official version of the ROM, so I won’t make the judge at the moment. Enough of reading, how about some screen shots of Android 4.0?

Ice Cream Sandwich Gallery

It come in as a surprise to all original iPad owners when Apple decided to remove the magical Multitasking Gestures in the latest iOS 5 update. That’s leave a lot of the early adopters of iPad in disappointment as the Multitasking Gestures are running just fine in iOS 4.3, and there isn’t any hardware-limitation like the new Siri in iPhone 4S.

Thanks to d.B. in modmyi.com, now all the original iPad running iOS 5 can enable the Multitasking Gestures easily on Windows and Mac *without* actually having to perform a full jailbreak on them. This guide is perfectly fit for any iPad user that never perform jailbreak and doesn’t need a jailbreak – instruction after the break.

Requirement

• iPad 1 running iOS 5
• iPad Dock Connector to USB Cable
• Windows-based PC or Mac
• A modified version of redsn0w (Windows, Mac)

Let’s do it!

1. Once you got the modified version of redsn0w downloaded, extract the content and run the executable. For Windows, it’s redsn0w.exe.

2. Click Jailbreak button.

3. Read the instruction on the application. Make sure your iPad is turned off (not sleep mode) before you plug in the iPad to the computer.Click Next button.

4. Follow the 3-step instruction to make your iPad entering the DFU mode. Windows most probably will start searching for the driver for the iPad in DFU mode, so redsn0w will probably telling you that it cannot detect any device. Wait until the driver installation is done, then try again – most probably it can proceed to the next step.

5. This step is IMPORTANT. Only tick Enable Multitasking Gestures and untick all the other options, especially Install Cydia. (Proceed with Install Cydia ticked will probably cause your iPad to have some jailbreak consequences, such as crashing iBook, Safari etc.) Don’t worry if your screen doesn’t look as below, as long as all the other options are unticked except Enable Multitasking Gestures.

6. Click Next  and the application will start performing jailbreak on your device and just leave it for a few minutes until your iPad is rebooted and redsn0w telling you that everything is done. (It’s normal for the Windows to detect the iPad for multiple times during the process, and you know it is almost done when you see your iPad have a long DOS-like texts.)

7. Go to Settings > General. Look for Multitasking Gestures option. Most probably it is turned on by default. Pinch the screen using your five fingers and enjoy!

_{Source: modmyi.com}

However, it surprised me when I decided to try this feature out – it fails to work. The device and the computer are in the same network, and there is definitely nothing wrong with my router. I have been looking for solution online and I don’t seems to be able to find any – it is definitely not rocket science to use this feature.

How to make it work?

After some trial and error, I finally figure out the issue. The Hidden SSID is the culprit. I configured my home network in such a way that it doesn’t broadcast the SSID (I know it won’t help in preventing hijacking, but yeah), but I never know that it is the problem that causing the FTP service to failed. So making the SSID visible solve the problem instantly. It also solved the problem that puzzled me on my iPad where my iTunes Wi-Fi Sync and Shared Library is not working over the same network.

So if you have a hidden SSID and you have these problems, make it visible – problem solved. A little bit of surprise to know that these features will not work with invisible SSID, but I am glad that I figured it out. Hope this helps. 

So now you have the Windows 8 Developer Preview installed as a virtual machine using VirtualBox, but you found out that the guest addition of VirtualBox doesn’t work properly in Windows 8 Developer Preview, which means that it won’t auto-adjust the resolution when you resize the window, and have to stick with the resolution available by default.

No worry. There is an alternative solution to force the desired resolution to be available in the VirtualBox guest OS, so if you have done it correctly, you can now run Windows 8 Developer Preview in VirtualBox with your screen native resolution. Instructions after the jump.

How to enable desired resolution in Guest OS

1. Close any running virtual machines and also VirtualBox.
2. Run Command Prompt (cmd) as administrator
3. Enter manually the command shown below:

First, enter the below text to change the directory:

cd C:\Program Files\Oracle\VirtualBox

Then, enter the line:

VBoxManage setextradata global GUI/MaxGuestResolution any

Lastly, manually enter this line (don’t copy and paste since it can have issue with quotation mark):

VBoxManage setextradata “VM name” “CustomVideoMode1″ “WidthxHeightxDepth“

VM name have to be replaced with your virtual machine name. If your virtual machine is named Windows 8, then it should be “Windows 8″.

WidthxHeightxDepth have to be replaced with your desired resolution. Say if you want to have it running at your monitor native resolution at 1600x900x32, then it should be “1600x900x32″.

4. If you enter them correctly, your command prompt should more or less look similar to the screenshot above. Double check your spelling especially on your virtual machine name if your encounter issue. Once you done with it, you can close the command prompt.

5. Launch VirtualBox and run your Windows 8 virtual machine.

6. Once you have logged in, change the resolution via the right click menu on the desktop. You should find the resolution entered in the command prompt is available to choose.

7. After the resolution is changed, make it run in full screen by Host+F (Host is Right Ctrl by default). Enjoy!

All thanks to John for providing this tips in the previous article.

Windows 8 Start Screen

Windows 8, an answer from Microsoft to the rapid-growing Apple Inc. in personal computer (MacBook Air) and tablet market (iPad), finally has it’s Developer Preview released to the public. Since it is not even a beta release, it is definitely not recommended for a normal user to install it over the stable Windows Operating System. However, it is certainly interesting to test run the new Windows 8 Developer Preview, so to do this without causing any damage on your stable system is – Virtual Machine. Currently the Windows 8 Developer Preview can be easily install on Oracle VM VirtualBox only, not on the VMWare Player (do let me know if it is possible). Step-by-step guide to install Windows 8 in VirtualBox after the jump.

Install Windows 8 in VirtualBox

Requirement:

1. Oracle VM VirtualBox
2. Windows 8 Developer Preview ISO file (32-bit or 64-bit)
3. Windows Live ID* (for best testing experience, sign up here if you doesn’t have one)
4. Internet Connection*

*Nice to have, for best experience

Besides that, also make sure that your computer have the Virtualization Technology (VT-x/AMD-V) activated in the BIOS. Proceed to the installation if you are ready with everything.

Steps:

1. Get the Oracle VM VirtualBox installed in your PC. (VMWare doesn’t seems to work, so I choose to user VirtualBox instead)

2. For setting up the Virtual Machine, use the following settings:

3. Below screenshots show all the settings I used for that Virtual Machine:

System

Display

Storage

This part might be tricky. By default, the VDI file generated will be mounted as a SATA HDD. However, if it is treated as a SATA HDD, Windows 8 will not be able to initiate the installation and BSOD (A very cute one) occurs. So the workaround is to mount the VDI file under the IDE controller, this way Windows 8 Developer Preview install perfectly. Also under Storage, mount the ISO file containing Windows 8 Developer Preview.