UI porting tool Documentation

Getting Started

Introduction

UI porting tool is, as it name says, an automatic tool that helps port your xcode storyboard/xib content into a native android project in minutes.

This tool is based on all the element used to build an Xcode storyboard/xib such as : UI Components, Screens, Controllers.

The input is the xcode storyboard/xib files including its media files and the project xcodeproj file

The ported project is a native android project with an android multidevice support

This tool is currently in alpha stage so it has many limitations, for example some UI Components are not supported yet, you will find the covered components within this documentation.

For now we are currently supporting Xcode version 7.x.x .

License

The submitted and generated project are purely owned by the project owner. MyAppConverter Transformation Engine, parses the ios project and generates instantly and online the equivalent android native project.


Core

In this part we will explain a number of core features related to the automatic porting process and the submitted content.

Project porting

First of all, the submitted project should contain the xcodeproj file (extension xcodeproj) to allow MyAppConverter Transformation Engine to retrieve project meta-data such as project name.

Obviously, at least one Storyboard/xib file should exist in the submitted content because its a main input for the porting tool.

Any pictures referenced into the Storyboard/xib must be included into the the submitted project.

Here is an example of the minimum content that needs to be submitted.



Of course you can submit other content not used in the porting process like m and h files but they are not mandatory for our transformation.

Multidevice support

In this part we will exlain how an IOS screen retrieved from the Xcode Storyboard/xib file will be ported into a native android content with multidevice support.

First lets have a look on an IOS screen from an xcode storyboard/xib, we have 5 ranges of screen metrics.

Metric device metric
320 dp x 480 dp iPhone, iPhone 4
320 dp x 568 dp iPhone 5
375 dp x 667 dp iPhone 6
414 dp x 736 dp iPhone 6 plus
600 dp x 600 dp Autolayout

Except Autolayout device metric, all UI components position are absolute on a device metric coordinate system base.

Autolayout constraints are not supported in this version.

Being mostly based on an absolute metric in IOS, the porting onto the android plateform will also be based on a absolute metric system

To acheive this we relay on using size qualifiers, scpecificly we are using the smallestWidth qualifier for more informations.

Here are the supported android metrics in this version

Metric Smallest Width
320 dp x 569 dp sw320dp
360 dp x 640 dp sw360dp
384 dp x 640 dp sw384dp
411 dp x 731 dp sw411dp

For android devices metric check this link.

Each android metric will have its own android layout.



Of course each layout has its own activity that represents it.

The method to achieve this result is based on cross-multiplication, for example :

IOS device IOS metric Android device Android metric width rate height rate
iPhone 6 375 dp x 667 dp Samsung galaxy S5 360 dp x 640 dp 0.96 0.96

width rate = android width / ios width

All the layouts are generated with a full screen mode and without taking the navigation bar and the system bar into account .

Default generated features for all UI elements.

Ios feature Android feature Description
Object Id android:id adapted to android standard
width android:layout_width cross-multiplication
height android:layout_height cross-multiplication
X android:layout_marginLeft cross-multiplication
Y android:layout_marginTop cross-multiplication

UI components

In this part we describe the characteristic of the porting each of UI component.

Only the elements listed below are supported in this version.

State Config other than Default is not yet supported.

UIView

The UIView element is ported as RelativeLayout.

Ios feature Android feature Description
backgroundColor android:background RGB to Hex
Visibility (Hidden) android:visibility

Screenshot :

Ios Android

ClipSubview is not yet supported.

UILabel

The UILabel element is ported as TextView.

Ios feature Android feature Description
text android:text
Color android:textColor RGB to Hex
backgroundColor android:background RGB to Hex
Alignement android:gravity
Font size android:textSize
Alpha android:alpha
shadowColor android:shadowColor RGB to Hex
shadowOffset multidevice feature cross-multiplication

Feature added in the Activity.

font Typeface typeFace = Typeface.createFromAsset(getAssets(),"myfont.ttf"); textView.setTypeface(typeFace);

Sample :

Ios Android

Attributed Text is not yet supported.


UIButton

The UIButton element is ported as AppCompatButton or AppCompatImageButton.

If the feature text is not defined UIButton element will be ported as AppCompatImageButton

UIButton porting include all the features already included in UILabel.

Features :

Ios feature Android feature Description
Image android:drawableLeft drawable resource
Background (Image) android:background drawable resource
Type

the chosen drawable depends on the type (see below)

Button Type

contactAdd @android:drawable/ic_menu_add
detailDisclosure @android:drawable/ic_menu_info_details
Default

Sample :

Ios Android

The feature Image may not work properly if it has been used as a background, change it to android:background instead.

UIImageView

The UIImageView element is ported as ImageView.

Features :

Ios feature Android feature Description
mode android:scaleType
image android:src drawable resource

Sample :

Ios Android

The feature Hightlighted state is not implementated yet.

UITextField

The UITextField element is ported as EditText element.

UITextField porting include all the features already included in UILabel.

Features :

Ios feature Android feature Description
PlaceHolder android:hint
Border Style android:background generated drawable.xml resource
Secure Text Entry android:inputType="textPassword"

Sample :

Ios Android

Having Border Style and a Image background in the same UITextField element is not supported yet.

UITextView

The UITextView element is ported as EditText.

UITextView porting include all the features already included in UILabel.

Features :

Ios feature Android feature Description
text android:text strings.xml resource
selectable -
editable (false) android:inputType="none"
android:editable="false"

UISlider

The UISlider element is ported as AppCompatSeekBar.

Features :

Ios feature Android feature Description
thumbTintColor drawable.xml resource Color to Hex
maximumTrackTintColor drawable.xml resource Color to Hex
minimumTrackTintColor drawable.xml resource Color to Hex
backgroundColor android:background Color to Hex

UISlider interval is inlarged so as its size would be at least 10, and translated into the positive range.

Sample :

Ios Android

Min Image and Max Image features are not supported yet.

UISwitch

The UISwitch element is ported as SwitchCompat.

Features :

Ios feature Android feature Description
onTintColor drawable.xml resource Color to Hex
thumbTintColor drawable.xml resource Color to Hex
backgroundColor android:background Color to Hex

Sample :

Ios Android

Background feature is not supported yet.
Autolayout metrics are not correctly supported with UISwitch, you will need to change the generated metric for your UISwitch.

UISegmentedControl

The UISegmentedControl element is ported as RadioGroup and its elements UISegment as AppCompatRadioButton.

Features :

Ios feature Android feature Description
tintColor drawable.xml resource Color to Hex
backgroundColor drawable.xml resource Color to Hex

Sample :

Ios Android

Content Offset feature is not supported yet.

UIWebView

The UIWebView element is ported as WebView.

Sample :

Ios Android

UITableView

The UITableView element is ported as ListViewCompat and for each of it cells will have a generated layout.

UITableView cells are ported as an Ios Screen



Each cells is linkeked to its ListViewCompat via a BaseAdapter



Ios feature Android feature Description
Separator Style android:dividerHeight
separatorColor android:divider Color to Hex

Cell created with a Xib file may not be displayed correctly.

Feature added in the Activity (only for storyboard ).

Header View headerView = ((LayoutInflater)this.getSystemService(Context.LAYOUT_INFLATER_SERVICE))
   .inflate(R.layout.header_cell, null);
mListViewCompat.addHeaderView(headerView);
Footer View footerView = ((LayoutInflater)this.getSystemService(Context.LAYOUT_INFLATER_SERVICE))
   .inflate(R.layout.header_cell, null);
mListViewCompat.addFooterView(footerView);

Sample :

Ios Android