Introduction
Configure.IT redefines the Rapid App Development approach by implementing concurrent platform development. You don’t need to invest any extra efforts to develop App in both the platform, instead, just migrate the App from iOS to Android and Configure.IT will take care of the rest.
Let's see how to migrate your existing iOS App to Android using Configure.IT Migration feature. Below are the steps explained in detail with screenshots to help you during the whole process.
1 Project List
- Project List is the page where you can view all the projects of your account.
- Hover your mouse pointer on the project, you would like to migrate from the list of the projects displayed. Thereafter, click on 'Project Info' on that particular project and you will be directed to the Project Info page as shown in the next screen.
2 Project Info
2.1 Select Platform
The very first step would be to select the Android platform as well from Platform section. You can refer the screen below.
2.2Save Settings
- Click on ‘Save Settings’ and your screens of the App get migrated from iOS to Android with just a click.
- This activity will take a couple of minutes as the Screen designs, mapping and controls are being migrated. On completion you can see ‘Sit Tight...’ window disappearing.
2.3 Go to App Console
Click ‘Go to App Console’ and you will be redirected to Mobile App Console.
Points to be noted:
- The migration of screens, by default, takes place for all the resolutions and is not restricted to a particular resolution.
- Make sure you upload all the resolution specific assets. This will help you avoid any ambiguity while configuring. Please visit Asset Manager for more information.
3 Mobile App Console
- Your project has been migrated to Android and you have the choice to configure further. You will find the icon for Android. Click on it and the four Android specific resolutions will appear.
- Configure.IT supports the following Android resolutions:
- MDPI
- HDPI
- XHDPI
- XXHDPI
- The key resolution to be kept as a base is MDPI. This will be the driving resolution that would help derive the desired layout settings.
4 Assets Manager
Click on “Go To” Option in top right menu and select “Assets Manager” to switch on.
Important prerequisite:
- You are required to upload all the assets for all the four specific resolutions, respectively before you are migrating to Android.
- When you click on Asset Manager, you will be directed to the screen where you can upload the images.
- The icon
highlighted in the screen represents the Missing Asset. You need to upload the zip file for all the images that are to be used in your project. The zip file should contain the images, resolution specific. - Make sure, the images are resolution specific and adhered to the naming conventions so that it will capture all the images accordingly.
- While uploading the specific image sources, image specific resolution must have the resolution name at the end. For example - star.png for HDPI star@hdpi.png
- When you upload the resolution specific images, your smart work helps you to use the same with ease. It avoids the efforts for manually checking every image which is to be used on a particular screen and saves your time
Users are advised to provide proper image resources for the corresponding resolution to avoid design flaws in the final Android screen on your device. You can refer the mentioned screen:
5 Syncing Mechanism
Configure.IT provides you the option to sync at 3 different levels:
5.1. Sync Screens
- This option allows you to sync the application screens from iOS to Android.Therefore, you get the tab ‘Sync’ only when you click on iOS icon.You click on Sync and a pop-up window appears, where you can configure syncing. Here, you have the flexibility to sync either the specific screen or all the screens.
- If the project is already completed in iOS and then you decide to develop for Android then syncing of each screen by screen is not mandatory.
- While creating new project, if you select both the platforms, one to one syncing is necessary for screens as well as objects.
- When the project is being migrated from iOS, the screens are automatically mapped with all the controls and their properties.
- On checking the option for Select All, you can sync all the screens.
- There could be compatibility issues that can be resolved by manually configuring the attributes specific to Android.
5.2. Sync Control
- Syncing is supported not just at the screen level, but also at the control level for the specific screen.
- In the 'SYNC CONTROLS' screen, you will find two different heads as iOS controls and Android controls. Any new control added for a particular platform can be synced here. The syncing here is applicable vice-versa
- Here, you also have the option to check the icon for ‘Sync Datasource’ which will sync the data source for the specific screen.
- Follow the steps, to configure Sync Control:
- Sync Control : Click on it and a pop-up window will appear where you can select the controls to be synced. The entire object hierarchy for the selected screen will be displayed. User can easily identify the controls that need to be synced.
- Select the controls : that you wish to sync on the screen. Here, you have the option to select multiple controls as well.
- SYNC : Click on ‘SYNC’
5.3. Hard Sync
- Hard sync provides the flexibility to automatically synchronize across all the available resolutions.
- This feature allows you to sync across all the different Android resolutions keeping MDPI as a base. For this you need to select Android icon first.
- This can be done only from MDPI, as selected in the given screen. Once you move from MDPI to any other resolution, the hard sync feature is no longer available.
- Changes made in resolutions other than MDPI (assuming hard sync enabled) are specific to that resolution only and they won't appear in other resolutions. Thus, you have the choice to make configurations either resolution specific or for all the resolutions in one go.
6 Layout Settings
Here is the quick overview of the Android Layout Settings to make the path of making layout compatible to Android.
- Layout settings allow you to manage the positioning of different layout parts.This section makes the arrangement of your controls very easy and flexible.
- These settings are Android specific. The Property-Action window of the selected control will provide you the default settings. However, you can configure the same.
- You can refer the given screen. Here, the control - Label has been selected that is to be configured. You can do so from the Property-Action window, under the head Layout Setting.
- All the controls of the screen are assigned Relative Layout parameters, implying that the design and layout of the controls in Android screens will be taken care of automatically.
- When converting existing project from iOS to Android, most of the controls don't need any changes, however some which are Android specific, need to be adjusted accordingly.
- You can also make use of advanced attribute options to set the desired Relative Layout parameters bypassing the regular logic. The same can be done from the Property window of every control (Layout Settings).
Note : Remember to check the Apply Custom Properties checkbox for the custom properties to apply to the controls.
To get detailed information on Android Layout Settings, we always recommend our users to have a look of Android Layout Guide at
http://www.configure.it/help/android-layout-settings.html.
6.1 Quick Controls
- Quick Controls Panel is a highly customizable panel which provides a set of UI controls to create user interface.
- It allows users to quickly configure the selected controls and thus is highly recommended.
- The logic of syncing across the 2 platforms and the different resolutions works best when the properties for the controls are set using the property icons on the Mobile Configuration Tool rather than setting them manually by drag and drop. The accuracy and reliability are adhered to.
7 Device Back Button
- Back navigation is an Android specific action as iOS does not have back button. It is how users move backward to the previous action performed. All Android devices provide a Back button for this type of navigation.
- To bypass the default behavior of the Android Device Back button, an action is available in the Android Design Panel in the Main View: Device Back Button.
- You can configure the action as per your requirement from the Property-Action window of Main view.
8 PreviewIT for Android
- Configure your Android applications and check at run time in the PreviewIT App. The application you preview will be device resolution specific. Make sure you check for the different resolutions in different devices.
- PreviewIT App for Android is available to download on the Play Store for FREE.
- You can install the app onto your device from https://play.google.com/store/apps/details?id=com.configureit.previewit
- Once the app is downloaded, open the app and you will be given a walk-through of the complete application as how to use the same.
- You need to login with Configure.IT login credentials only.
