Nowadays, mobile devices are an integral part of our life. They are evolving quickly with new technologies that expand the boundaries of the functionality and usability of smartphones.
The most interesting thing is that they are becoming more attractive to developers who optimize them for their usage. This trend is especially noticeable in the field of mobile user interfaces.
This article deals with the interface elements, which are used to interact with the mobile user. This is an extremely interesting topic because mobile devices have different screen sizes and resolutions. That’s why it is important to consider these differences when designing your mobile application UI. And UI development for mobile platforms requires a special approach to design since each element has to be scalable, ergonomic and take user conditions into account (e.g., how does the screen size influence the text input).
We will get acquainted with 4 interface elements widely used in mobile applications and discuss their implementation issues on different platforms: iOS vs Android. The general idea is that we’re studying problems associated with the design and implementation of mobile UI controls for application developers, especially those who work with cross-platform technologies.
1. Action Sheet (iOS) vs Action Bar (Android/others)
The same as in the case of iOS, the design standard for Android called Holo is quite popular among mobile developers. It is a set of interface guidelines developed by Google that allow you to create user interfaces for Android applications consistent with the platform style.
One of the interface elements in Holo is an Action Bar. It appears at the top of the screen next to the application’s name. Usually, it has a navigation button on the left side and an application menu on the right side. The menu is accessed by touching the app’s name. The appearance of the navigation button depends on your platform version, but it has always been round (circular) and colour-coded.
2. Back button
The back button in Android is used in all applications that implement navigation between screens. Its default appearance is a left-pointing arrow, placed on the right side of the Action Bar. You can control when this button shows up by calling View.getNavigationOnKeyDown(int). This method returns true when the back button should be displayed.
Although the design of the back button doesn’t require any customization, there are some tricks that developers usually use to match it with their application theme. In Android 4.0 and higher, you can control the colour and transparency of the whole action bar through style elements from your stylesheet.xml file:
To change or hide the back button, you should create a custom style and assign it to your application:
3. Refresh Button (iOS) vs Sync Button (Android)
The refresh button is an essential element for iOS developers. It is used to refresh data in the app’s View, usually implemented as a round button with an arrow pointing up. The appearance of this button depends on the application’s version and state. For example, in iOS 5, the refresh button is displayed when refreshing data is required (e.g., after deleting an element). It can be seen on the right side of your table view cell.
Another common design approach that has emerged in iOS 6 is placing a Refresh button inside each View. It is placed in the top left corner of the screen, where you can easily access it with your thumb while holding a device in landscape mode.
iOS 7 brings Refresh to mind – there are no physical buttons implemented in this release, but developers still can add them using UIRefreshControl class. For each button you add, you should define a target and action. To add them to the View, you should wrap your table view inside of a navigation controller:
In Android, refreshing data makes no difference for developers since users control this process using swipe gestures. To refresh a ListView or GridView, you should call the adapter’s method.
4. Play/Pause button (iOS) vs Play/Pause toggle button (Android)
Play/Pause buttons in iOS and Android control media elements such as audio and video. In iOS, this interface element is implemented by the Pause/Play button of the native music player application:
To standardize its appearance across various apps and control elements, Apple has introduced a new design standard for iOS 7. It says that this button should be presented as a round toggle switch with an embedded symbol:
In Android, the Play/Pause button can be implemented through the MediaController class. To sync it with your media element, you need to call the setMediaController() method and pass your player. It will display on the bottom right side of your screen.
As you can see, the design of interface elements in Android and iOS is different. This difference originates from each platform’s philosophy and requires that developers follow it carefully.