Android and iOS have marked themselves as the major platform for mobile application. iOS and Android have particular UI patterns that must be followed. Even slight deviation from these patterns and you are at the risk of confusing your users. The fact which surprises our users is the way we are managing the design and implementation of the two separate platform.
Why Android Layout Design Settings are needed?
Though each platform have its own unique patterns and quirks, designing layout in Android is challenging as Android can be installed on almost any device. Android devices don’t always have a consistent user experience.
While designing for Android, you need to develop the same functionality as in iOS but to be executed differently.
This can certainly be difficult, considering that apps should look similar on each platform and offer the same functionality, without violating each platform’s native design patterns.
Configure.IT made Android Screen Design easy
At Configure.IT, while designing Android screens, we make sure that it caters to all the Android resolutions without any hassle to the user. We provide you with the structured layout settings and UI controls which allows you to build the Graphical User Interface of your App.
Configure.IT provides flexible framework for UI design which allows your App to display different layouts, screens, flow and logic and create subsequent Android resources for the same.
Though we tried to make the designing curve as easy and simplified as possible, certain assumptions, rules and validations are there which should be kept in mind while designing Android Layout to show it seamless in all the devices with different resolutions.
Android Layout to show it seamless in all the devices with different resolutions.
Basic Assumptions :
While creating the Android resources, the following will be assumed:
- All the controls of the screen are assigned Relative Layout parameters.
- Even we have come up with one more layout that is Linear Layout so user can use LinearLayout also. Default layout is always Relative but user has got an option to change into.
- Let's understand Linear Layout as all the children of a LinearLayout are stacked one after another. A vertical list will only have one child per row, no matter how wide they are, and a horizontal list will only be one row high (the height of the tallest child, plus padding). A LinearLayout respects margins between children and the gravity (right, center, or left alignment) of each child.
- Relative layout parameters will be calculated based on the nearest sibling. If there are no siblings, parent will be considered. Hence, users must take this into consideration while designing the screen.
- When converting existing project from iOS to Android, most of the controls don't need any changes. However, some features which are Android specific so user need to adjust a few things. To change those settings, user will be provided full support by an intuitive UI.
- Cases where default Relative Layout param logic is not sufficient, user can make use of advanced attribute options to set his desired Relative Layout params bypassing the regular logic. For eg: A screen contains 2 buttons; button A and button B, where B has dependency on A. Changing the position of the dependent control A will automatically change the position of B.
- If user is planning to launch App in both iOS and Android, then user is suggested to make design of the screens and functionality keeping design aspects for both.
There are certain Validations to be considering for designing Android Layout:
- User cannot select reference control ID other than that of immediate parent or siblings.
- If the horizontal reference type is toLeftOf or toRightOf, user is not allowed to select immediate parent ID as reference.
- If the vertical reference type is above or below, user is not allowed to select immediate parent ID as reference.
- Whether it is horizontal or vertical reference, user is not allowed to set dependency that will lead to circular dependency. Circular dependency will abort the operation of the app instantaneously.
User has to follow certain rules while designing Android Layout:
- Default values for margin Left, Right, top, bottom will be 0. For eg: button A is dependent on button B and B is set as the margin bottom then the baseline of both the controls will be the same, irrespective of side of the control is left or right.
- When there is a list of controls, which is interlinked through layout params; changing the relativeness of any control in the list will affect the positions of the controls linked to that control.
- Each control will have its baseline in all four edges. When relativeness is specified, depending control baselines will align to the corresponding baseline of the dependent baselines.
- While setting relativeness for a control, it is good to check the control's dependency on other controls.
Handling Android Design :
When you sync from iOS to Android, you would be required to give layout settings those are exclusively for Android. This will enhance screen design and give you finished & flawless appearance.
- User can import screens from existing iOS project or create his own. In either case, Configure.IT will provide user to handle the design for different resolutions of the Android devices, namely, MDPI, HDPI, XHDPI and XXHDPI.
- User can sync either the whole screens or anyone / few controls from iOS to Android and the other way.
- Key resolution to keep in mind is MDPI. This is the key resolution to derive Relative Layout parameters
- User can finalize the alignment or relativeness of the controls of the screen in the MDPI mode and can make changes like dimensions and positions of the controls in the other resolutions (HDPI, XHDPI & XXHDPI).
- While making the Size changes in resolutions other than MDPI, user must keep in mind that those changes won't violate the alignment rules of MDPI.
- Users are advised to provide proper images for the corresponding resolution to avoid designing flaws in the final Android screen on device.
- User can sync across the different resolutions using the "Hard Sync" button. This can be done only from MDPI. Once user has moved from MDPI to any other resolution; Hard Sync feature will no longer be available.
- Changes made in resolutions other than MDPI (assuming hard sync enabled) are specific to that resolution only, they won't appear in the other resolutions.
- Operations like adding and deleting controls will reflect in all the resolutions. For newly added control in any resolution, changes made to it will be synced across resolutions until user moves to another resolution.
- While uploading the specific image source, image specific to a resolution must have the resolution name at the end. For example star.png for HDPI firstname.lastname@example.org
Relative Layout displays the relationship of parent-child. The respective child views are placed in relative positions. The position of each view can be specified as relative to the sibling elements (eg: left side of any view or below another view) or relative to the Parent (eg: bottom aligned to any control, left or Center In Parent).
Only Android demands the settings for Layout, supporting maximum resolutions.
Layout Setting Properties
To provide you clear view how Android Layout is designed, we have explained below with an example of Button A and Button B illustrating different screenshots in Configuration Panel and end result / Preview is displayed in Genymotion Simulator. This will help you better understand the logic and use of the properties.
Apply Horizontal Custom Properties
Check the checkbox and enable the custom properties that are applicable horizontally.
Layout Width -
fill_parent and match_parent for Width will stretch the width of the control to the width of the parent. Here, the child occupies the position matching the dimensions of the parent in terms of width.
wrap_content for Width will stretch and adjust the width of the control with respect to the content present in the control. Default will be Blank.
Apply Vertical Custom Properties -
Check the checkbox and enable the custom properties that are applicable vertically.
Layout Height -
fill_parent and match_parent for Height will stretch the height of the control to the height of the parent. Here, the child occupies the position matching the dimensions of the parent in terms of height whereas wrap_content for Height will stretch and adjust the height of the control with respect to the content present in the control.
Reference type -
This can be set only when the Reference value is selected. It is mandatory to select Reference Value as Reference value cannot be Blank.
Below is the list of Reference Types available for all the directions. On screen, when you select on the dropdown, icon for each Reference Type shows symbolic view of how it will be displayed.
alignParentLeft, alignParentRight, alignParentTop and alignParentBottom – All these will take care of the alignment of Parent. The alignment properties are with respect to the immediate parent of the selected control and not the Main view (normally the default parent). User can make changes by adding the controls in the Object tree. Parent can be set /changed as per the requirement.
alignTop and alignBottom - Alignment can be set as top or bottom.
alignLeft and alignRight - are the properties that require dependent control. The default alignment would be Top-Left. Alignment can be changed as per the requirement.
above or below sets the edge of a control aligned to the dependent control’s top edge or the bottom edge.
Check below screenshots to have exact look how Android Layout Settings window will demonstrate above explanation and how it will be affected.
toLeftOf and toRightOf are used when taking dependency. For Eg: button A is toLeftOf button B, which means button A is on the left side of button B. Then, the two buttons will always be in sync and move congruently.
When the spacing to be set is more, than the use of this functionality is recommended so that the same configuration is taken care of, adhering to all the resolutions.
Margin – Set the margin for all the elements: Top, Right, Bottom and Left.
Padding – Correspondingly, this allows you to define and set the padding for all the elements.
Center in – This will position and align the selected control, based on the mode chosen from Vertical, Horizontal or Both.
Migration from iOS to Android
If you want to develop an App for both the platforms – iOS and Android, we strongly recommend user to start with iOS and then migrate the App to Android. Migrating from iOS to Android will automatically take care of the screens, flow & logic from the Configuration panel and create subsequent Android resources for those screens. Only few little changes will be required to make it Android friendly. Please refer to migration guide at Migration Help to follow step-by-step instructions.