HTML to Native Android XML?


#1

I am not sure if anyone has tried this before but I have been working on an HTML converter for Android which is very close to being pixel to pixel accurate. This is the first time I have publicly posted anything related to my Javascript library which is currently built for Chrome and Android. I think using an HTML designer to create a UI is easier and more intuitive for most programmers. The learning curve for UI development in mobile devices can be confusing at first for people who only know HTML and Javascript.

The program I wrote is only a month old and only a prototype. It’s kind of do or die for me at this point if I am going to continuing developing this project. It would be great to get some feedback on it and if anyone thinks people will actually use it someday.

Here is the README.

chrome android layout

This program can convert moderately complex HTML pages into the standard XML layouts for Android. ConstraintLayout or RelativeLayout for positional views are generated based on your preference. iOS and Xamarin Forms can also be supported once the Android version is stable. Ideally it will be hosted inside a Chrome extension or WYSIWYG HTML editor. Currently the XML structure can be imported into your Android projects as a foundation for your layout design.

These settings are available in layout.js to customize your desired XML structure.

const SETTINGS = {
    density: DENSITY_ANDROID.MDPI,
    showAttributes: true,
    useConstraintLayout: true,
    useConstraintChain: true,
    useGridLayout: true,
    useLayoutWeight: true,
    useUnitDP: true,
    useRTL: false,
    boundsOffset: 2,
    whitespaceHorizontalOffset: 4,
    whitespaceVerticalOffset: 14,
    constraintBiasBoxOffset: 14,
    chainPackedHorizontalOffset: 4,
    chainPackedVerticalOffset: 14
};

You can preview the library with the provided sample.html file which should generate the same XML you see here in the README. I have only tested it with the latest Chrome.

<script src="utils.js"></script>
<script src="color.js"></script>
<script src="constants.js"></script>
<script src="node.js"></script>
<script src="layout.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', () => {
        console.log(parseDocument());
        console.log(writeResourceStringXml());
        console.log(writeResourceArrayXml());
        console.log(writeResourceStyleXml());
        console.log(writeResourceColorXml());
        console.log(writeResourceDrawableXml());
    });
</script>

The Date fields in the form have been modified to demonstrate the Constraint circle and bias capabilities in this library. Constraint chain bias is also available as a setting although the current Android implementation does not support exact placement.

auto-generated layout xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:app="http://schemas.android.com/apk/res-auto"
	android:id="@+id/linearlayout_1"
	android:layout_height="wrap_content"
	android:layout_marginTop="10dp"
	android:layout_width="500dp"
	android:orientation="vertical">
	<TextView
		android:id="@+id/textview_1"
		android:layout_height="wrap_content"
		android:layout_width="match_parent"
		android:paddingHorizontal="8dp"
		android:paddingVertical="5dp"
		android:text="@string/entry"
		style="@style/H2_1" />
	<ScrollView
		android:id="@+id/scrollview_1"
		android:layout_height="305dp"
		android:layout_width="match_parent">
		<LinearLayout
			android:id="@+id/entry"
			android:background="@drawable/form_entry"
			android:layout_height="match_parent"
			android:layout_marginBottom="12dp"
			android:layout_width="match_parent"
			android:orientation="vertical"
			android:paddingHorizontal="10dp"
			android:paddingVertical="10dp">
			<GridLayout
				android:id="@+id/gridlayout_1"
				android:columnCount="2"
				android:layout_height="wrap_content"
				android:layout_weight="0"
				android:layout_width="match_parent">
				<TextView
					android:id="@+id/textview_2"
					android:layout_columnWeight="0"
					android:layout_height="wrap_content"
					android:layout_marginRight="5dp"
					android:layout_width="100dp"
					android:paddingTop="3dp"
					android:text="@string/order"
					style="@style/Label_1" />
				<EditText
					android:id="@+id/order"
					android:background="@drawable/input_order"
					android:layout_columnWeight="0"
					android:layout_height="wrap_content"
					android:layout_width="40dp"
					android:paddingVertical="1dp"
					style="@style/Input_1.Input_3" />
				<Space
					android:layout_columnSpan="2"
					android:layout_columnWeight="1"
					android:layout_height="6dp"
					android:layout_width="match_parent" />
				<TextView
					android:id="@+id/textview_3"
					android:layout_columnWeight="0"
					android:layout_height="wrap_content"
					android:layout_marginRight="5dp"
					android:layout_width="100dp"
					android:paddingTop="3dp"
					android:text="@string/date_add"
					style="@style/Label_1" />
				<ConstraintLayout
					android:id="@+id/constraintlayout_1"
					android:layout_columnWeight="1"
					android:layout_height="wrap_content"
					android:layout_width="0dp">
					<Spinner
						android:id="@+id/month0"
						android:background="@drawable/select_hour"
						android:entries="@array/month0_array"
						android:layout_height="wrap_content"
						android:layout_width="wrap_content"
						android:minWidth="37dp"
						android:paddingBottom="2dp"
						android:paddingTop="1dp"
						app:layout_constraintLeft_toLeftOf="parent"
						app:layout_constraintTop_toTopOf="parent"
						style="@style/Select_1" />
					<Spinner
						android:id="@+id/year0"
						android:background="@drawable/select_hour"
						android:entries="@array/year0_array"
						android:layout_height="wrap_content"
						android:layout_marginTop="4dp"
						android:layout_width="wrap_content"
						android:minWidth="37dp"
						android:paddingBottom="2dp"
						android:paddingTop="1dp"
						app:layout_constraintBottom_toBottomOf="parent"
						app:layout_constraintLeft_toLeftOf="parent"
						style="@style/Select_1" />
					<Spinner
						android:id="@+id/day0"
						android:background="@drawable/select_hour"
						android:entries="@array/day0_array"
						android:layout_height="wrap_content"
						android:layout_width="wrap_content"
						android:minWidth="37dp"
						android:paddingBottom="2dp"
						android:paddingTop="1dp"
						app:layout_constraintCircle="@+id/month0"
						app:layout_constraintCircleAngle="129"
						app:layout_constraintCircleRadius="56dp"
						app:layout_constraintHorizontal_bias="0.74"
						app:layout_constraintLeft_toLeftOf="parent"
						app:layout_constraintRight_toRightOf="parent"
						style="@style/Select_1" />
				</ConstraintLayout>
				<Space
					android:layout_columnSpan="2"
					android:layout_columnWeight="1"
					android:layout_height="6dp"
					android:layout_width="match_parent" />
				<TextView
					android:id="@+id/textview_4"
					android:layout_columnWeight="0"
					android:layout_height="wrap_content"
					android:layout_marginRight="5dp"
					android:layout_width="100dp"
					android:paddingTop="3dp"
					android:text="@string/time"
					style="@style/Label_1" />
				<LinearLayout
					android:id="@+id/linearlayout_2"
					android:layout_columnWeight="1"
					android:layout_height="wrap_content"
					android:layout_width="0dp"
					android:orientation="horizontal">
					<Spinner
						android:id="@+id/hour"
						android:background="@drawable/select_hour"
						android:entries="@array/hour_array"
						android:layout_height="match_parent"
						android:layout_width="wrap_content"
						android:minWidth="37dp"
						android:paddingBottom="2dp"
						android:paddingTop="1dp"
						style="@style/Select_1" />
					<Spinner
						android:id="@+id/minute"
						android:background="@drawable/select_hour"
						android:entries="@array/minute_array"
						android:layout_height="match_parent"
						android:layout_marginLeft="3dp"
						android:layout_width="wrap_content"
						android:minWidth="37dp"
						android:paddingBottom="2dp"
						android:paddingTop="1dp"
						style="@style/Select_1" />
				</LinearLayout>
				<Space
					android:layout_columnSpan="2"
					android:layout_columnWeight="1"
					android:layout_height="6dp"
					android:layout_width="match_parent" />
				<TextView
					android:id="@+id/textview_5"
					android:layout_columnWeight="0"
					android:layout_height="wrap_content"
					android:layout_marginRight="5dp"
					android:layout_width="100dp"
					android:paddingTop="3dp"
					android:text="@string/type"
					style="@style/Label_1" />
				<Spinner
					android:id="@+id/typeofentry"
					android:background="@drawable/select_hour"
					android:layout_columnWeight="0"
					android:layout_height="wrap_content"
					android:layout_width="159dp"
					android:minWidth="37dp"
					android:paddingBottom="2dp"
					android:paddingTop="1dp"
					style="@style/Select_1" />
				<Space
					android:layout_columnSpan="2"
					android:layout_columnWeight="1"
					android:layout_height="6dp"
					android:layout_width="match_parent" />
				<TextView
					android:id="@+id/textview_6"
					android:layout_columnWeight="0"
					android:layout_height="wrap_content"
					android:layout_marginRight="5dp"
					android:layout_width="100dp"
					android:paddingTop="3dp"
					android:text="@string/topic_add"
					style="@style/Label_1" />
				<LinearLayout
					android:id="@+id/linearlayout_3"
					android:layout_columnWeight="1"
					android:layout_height="wrap_content"
					android:layout_width="0dp"
					android:orientation="horizontal">
					<EditText
						android:id="@+id/topic0"
						android:background="@drawable/input_order"
						android:layout_height="wrap_content"
						android:layout_marginRight="5dp"
						android:layout_width="130dp"
						android:paddingVertical="1dp"
						style="@style/Input_1.Input_3" />
					<Spinner
						android:id="@+id/prominence0"
						android:background="@drawable/select_hour"
						android:entries="@array/prominence0_array"
						android:layout_height="wrap_content"
						android:layout_marginLeft="3dp"
						android:layout_width="wrap_content"
						android:minWidth="37dp"
						android:paddingBottom="2dp"
						android:paddingTop="1dp"
						style="@style/Select_1" />
				</LinearLayout>
				<Space
					android:layout_columnSpan="2"
					android:layout_columnWeight="1"
					android:layout_height="6dp"
					android:layout_width="match_parent" />
				<TextView
					android:id="@+id/textview_7"
					android:layout_columnWeight="0"
					android:layout_height="wrap_content"
					android:layout_marginRight="5dp"
					android:layout_width="100dp"
					android:paddingTop="3dp"
					android:text="@string/series"
					style="@style/Label_1" />
				<Spinner
					android:id="@+id/series"
					android:background="@drawable/select_hour"
					android:entries="@array/series_array"
					android:layout_columnWeight="0"
					android:layout_height="wrap_content"
					android:layout_width="203dp"
					android:minWidth="37dp"
					android:paddingBottom="2dp"
					android:paddingTop="1dp"
					style="@style/Select_1" />
				<Space
					android:layout_columnSpan="2"
					android:layout_columnWeight="1"
					android:layout_height="6dp"
					android:layout_width="match_parent" />
				<TextView
					android:id="@+id/textview_8"
					android:layout_columnWeight="0"
					android:layout_height="wrap_content"
					android:layout_marginRight="5dp"
					android:layout_width="100dp"
					android:paddingTop="3dp"
					android:text="@string/subset"
					style="@style/Label_1" />
				<Spinner
					android:id="@+id/subset"
					android:background="@drawable/select_hour"
					android:entries="@array/subset_array"
					android:layout_height="wrap_content"
					android:layout_width="wrap_content"
					android:minWidth="37dp"
					android:paddingBottom="2dp"
					android:paddingTop="1dp"
					style="@style/Select_1" />
				<Space
					android:layout_columnSpan="2"
					android:layout_columnWeight="1"
					android:layout_height="6dp"
					android:layout_width="match_parent" />
				<TextView
					android:id="@+id/textview_9"
					android:layout_columnWeight="0"
					android:layout_height="wrap_content"
					android:layout_marginRight="5dp"
					android:layout_width="100dp"
					android:paddingTop="3dp"
					android:text="@string/active"
					style="@style/Label_1" />
				<Spinner
					android:id="@+id/entryactive"
					android:background="@drawable/select_hour"
					android:entries="@array/entryactive_array"
					android:layout_height="wrap_content"
					android:layout_width="wrap_content"
					android:minWidth="37dp"
					android:paddingBottom="2dp"
					android:paddingTop="1dp"
					style="@style/Select_1" />
				<Space
					android:layout_columnSpan="2"
					android:layout_columnWeight="1"
					android:layout_height="6dp"
					android:layout_width="match_parent" />
			</GridLayout>
			<Button
				android:id="@+id/button_1"
				android:background="@drawable/input_button_1"
				android:layout_height="wrap_content"
				android:layout_marginTop="20dp"
				android:layout_weight="0"
				android:layout_width="wrap_content"
				android:paddingHorizontal="6dp"
				android:paddingVertical="1dp"
				android:text="@string/add"
				android:textSize="12sp"
				style="@style/Input_1.Input_2" />
		</LinearLayout>
	</ScrollView>
	<GridLayout
		android:id="@+id/gridlayout_2"
		android:columnCount="2"
		android:layout_height="wrap_content"
		android:layout_marginBottom="12dp"
		android:layout_marginTop="24dp"
		android:layout_width="match_parent"
		android:paddingHorizontal="10dp"
		android:paddingVertical="10dp">
		<TextView
			android:id="@+id/textview_10"
			android:layout_columnWeight="0"
			android:layout_height="wrap_content"
			android:layout_marginRight="5dp"
			android:layout_width="100dp"
			android:paddingTop="3dp"
			android:text="@string/series"
			style="@style/Label_1" />
		<Spinner
			android:id="@+id/series_1"
			android:background="@drawable/select_hour"
			android:entries="@array/series_1_array"
			android:layout_columnWeight="0"
			android:layout_height="wrap_content"
			android:layout_width="203dp"
			android:minWidth="37dp"
			android:paddingBottom="2dp"
			android:paddingTop="1dp"
			style="@style/Select_1" />
		<Space
			android:layout_columnSpan="2"
			android:layout_columnWeight="1"
			android:layout_height="6dp"
			android:layout_width="match_parent" />
		<TextView
			android:id="@+id/textview_11"
			android:layout_columnWeight="0"
			android:layout_height="wrap_content"
			android:layout_marginRight="5dp"
			android:layout_width="100dp"
			android:paddingTop="3dp"
			android:text="@string/subset"
			style="@style/Label_1" />
		<Spinner
			android:id="@+id/subset_1"
			android:background="@drawable/select_hour"
			android:entries="@array/subset_1_array"
			android:layout_height="wrap_content"
			android:layout_width="wrap_content"
			android:minWidth="37dp"
			android:paddingBottom="2dp"
			android:paddingTop="1dp"
			style="@style/Select_1" />
		<Space
			android:layout_columnSpan="2"
			android:layout_columnWeight="1"
			android:layout_height="6dp"
			android:layout_width="match_parent" />
		<TextView
			android:id="@+id/textview_12"
			android:layout_columnWeight="0"
			android:layout_height="wrap_content"
			android:layout_marginRight="5dp"
			android:layout_width="100dp"
			android:paddingTop="3dp"
			android:text="@string/entries"
			style="@style/Label_1" />
		<LinearLayout
			android:id="@+id/linearlayout_4"
			android:layout_columnWeight="1"
			android:layout_height="wrap_content"
			android:layout_width="0dp"
			android:orientation="horizontal">
			<Spinner
				android:id="@+id/entry_1"
				android:background="@drawable/select_hour"
				android:layout_height="match_parent"
				android:layout_width="277dp"
				android:minWidth="37dp"
				android:paddingBottom="2dp"
				android:paddingTop="1dp"
				style="@style/Select_1" />
			<Button
				android:id="@+id/button_2"
				android:background="@drawable/input_button_1"
				android:layout_height="wrap_content"
				android:layout_marginLeft="3dp"
				android:layout_width="wrap_content"
				android:paddingHorizontal="6dp"
				android:paddingVertical="1dp"
				android:text="@string/open"
				style="@style/Input_1.Input_5" />
			<Button
				android:id="@+id/button_3"
				android:background="@drawable/input_button_1"
				android:layout_height="wrap_content"
				android:layout_marginLeft="4dp"
				android:layout_width="wrap_content"
				android:paddingHorizontal="6dp"
				android:paddingVertical="1dp"
				android:text="@string/all"
				style="@style/Input_1.Input_5" />
		</LinearLayout>
		<Space
			android:layout_columnSpan="2"
			android:layout_columnWeight="1"
			android:layout_height="6dp"
			android:layout_width="match_parent" />
		<TextView
			android:id="@+id/textview_13"
			android:layout_columnWeight="0"
			android:layout_height="wrap_content"
			android:layout_marginRight="5dp"
			android:layout_width="100dp"
			android:paddingTop="3dp"
			android:text="@string/mode"
			style="@style/Label_1" />
		<Spinner
			android:id="@+id/mode"
			android:background="@drawable/select_hour"
			android:entries="@array/mode_array"
			android:layout_height="wrap_content"
			android:layout_width="wrap_content"
			android:minWidth="37dp"
			android:paddingBottom="2dp"
			android:paddingTop="1dp"
			style="@style/Select_1" />
		<Space
			android:layout_columnSpan="2"
			android:layout_columnWeight="1"
			android:layout_height="6dp"
			android:layout_width="match_parent" />
		<TextView
			android:id="@+id/textview_14"
			android:layout_columnWeight="0"
			android:layout_height="wrap_content"
			android:layout_marginRight="5dp"
			android:layout_width="100dp"
			android:paddingTop="3dp"
			android:text="@string/style"
			style="@style/Label_1" />
		<Spinner
			android:id="@+id/style1"
			android:background="@drawable/select_hour"
			android:layout_height="wrap_content"
			android:layout_width="wrap_content"
			android:minWidth="37dp"
			android:paddingBottom="2dp"
			android:paddingTop="1dp"
			style="@style/Select_1" />
		<Space
			android:layout_columnSpan="2"
			android:layout_columnWeight="1"
			android:layout_height="6dp"
			android:layout_width="match_parent" />
		<TextView
			android:id="@+id/textview_15"
			android:layout_columnWeight="0"
			android:layout_height="wrap_content"
			android:layout_marginRight="5dp"
			android:layout_width="100dp"
			android:paddingTop="3dp"
			android:text="@string/calendar"
			style="@style/Label_1" />
		<Spinner
			android:id="@+id/calendar"
			android:background="@drawable/select_hour"
			android:entries="@array/calendar_array"
			android:layout_height="wrap_content"
			android:layout_width="wrap_content"
			android:minWidth="37dp"
			android:paddingBottom="2dp"
			android:paddingTop="1dp"
			style="@style/Select_1" />
		<Space
			android:layout_columnSpan="2"
			android:layout_columnWeight="1"
			android:layout_height="6dp"
			android:layout_width="match_parent" />
		<TextView
			android:id="@+id/textview_16"
			android:layout_columnWeight="0"
			android:layout_height="wrap_content"
			android:layout_marginRight="5dp"
			android:layout_width="100dp"
			android:paddingTop="3dp"
			android:text="@string/version"
			style="@style/Label_1" />
		<LinearLayout
			android:id="@+id/linearlayout_5"
			android:layout_columnWeight="1"
			android:layout_height="wrap_content"
			android:layout_width="0dp"
			android:orientation="horizontal">
			<Spinner
				android:id="@+id/version"
				android:background="@drawable/select_hour"
				android:entries="@array/version_array"
				android:layout_height="match_parent"
				android:layout_width="wrap_content"
				android:minWidth="37dp"
				android:paddingBottom="2dp"
				android:paddingTop="1dp"
				style="@style/Select_1" />
			<Spinner
				android:id="@+id/version_update"
				android:background="@drawable/select_hour"
				android:entries="@array/version_update_array"
				android:layout_height="match_parent"
				android:layout_marginLeft="3dp"
				android:layout_width="wrap_content"
				android:minWidth="37dp"
				android:paddingBottom="2dp"
				android:paddingTop="1dp"
				style="@style/Select_1" />
			<Button
				android:id="@+id/button_4"
				android:background="@drawable/input_button_1"
				android:layout_height="wrap_content"
				android:layout_marginLeft="4dp"
				android:layout_width="wrap_content"
				android:paddingHorizontal="6dp"
				android:paddingVertical="1dp"
				android:text="@string/update"
				style="@style/Input_1.Input_2" />
		</LinearLayout>
		<Space
			android:layout_columnSpan="2"
			android:layout_columnWeight="1"
			android:layout_height="6dp"
			android:layout_width="match_parent" />
		<TextView
			android:id="@+id/textview_17"
			android:layout_columnWeight="0"
			android:layout_height="wrap_content"
			android:layout_marginRight="5dp"
			android:layout_width="100dp"
			android:paddingTop="3dp"
			android:text="@string/branch"
			style="@style/Label_1" />
		<LinearLayout
			android:id="@+id/linearlayout_6"
			android:layout_columnWeight="1"
			android:layout_height="wrap_content"
			android:layout_width="0dp"
			android:orientation="horizontal">
			<Spinner
				android:id="@+id/branch"
				android:background="@drawable/select_hour"
				android:entries="@array/branch_array"
				android:layout_height="match_parent"
				android:layout_width="wrap_content"
				android:minWidth="37dp"
				android:paddingBottom="2dp"
				android:paddingTop="1dp"
				style="@style/Select_1" />
			<Spinner
				android:id="@+id/branch_update"
				android:background="@drawable/select_hour"
				android:entries="@array/branch_update_array"
				android:layout_height="match_parent"
				android:layout_marginLeft="3dp"
				android:layout_width="wrap_content"
				android:minWidth="37dp"
				android:paddingBottom="2dp"
				android:paddingTop="1dp"
				style="@style/Select_1" />
			<Button
				android:id="@+id/button_5"
				android:background="@drawable/input_button_1"
				android:layout_height="wrap_content"
				android:layout_marginLeft="4dp"
				android:layout_width="wrap_content"
				android:paddingHorizontal="6dp"
				android:paddingVertical="1dp"
				android:text="@string/update"
				style="@style/Input_1.Input_2" />
			<Button
				android:id="@+id/button_6"
				android:background="@drawable/input_button_1"
				android:layout_height="wrap_content"
				android:layout_marginLeft="4dp"
				android:layout_width="wrap_content"
				android:paddingHorizontal="6dp"
				android:paddingVertical="1dp"
				android:text="@string/clone"
				style="@style/Input_1.Input_2" />
		</LinearLayout>
		<Space
			android:layout_columnSpan="2"
			android:layout_columnWeight="1"
			android:layout_height="6dp"
			android:layout_width="match_parent" />
		<TextView
			android:id="@+id/textview_18"
			android:layout_columnWeight="0"
			android:layout_height="wrap_content"
			android:layout_marginRight="5dp"
			android:layout_width="100dp"
			android:paddingTop="3dp"
			android:text="@string/custom_add"
			style="@style/Label_1" />
		<LinearLayout
			android:id="@+id/linearlayout_7"
			android:layout_columnWeight="1"
			android:layout_height="wrap_content"
			android:layout_width="0dp"
			android:orientation="horizontal">
			<EditText
				android:id="@+id/customname0"
				android:background="@drawable/input_order"
				android:layout_height="wrap_content"
				android:layout_marginRight="5dp"
				android:layout_width="130dp"
				android:paddingVertical="1dp"
				style="@style/Input_1.Input_3" />
			<Spinner
				android:id="@+id/custommonth0"
				android:background="@drawable/select_hour"
				android:entries="@array/custommonth0_array"
				android:layout_height="wrap_content"
				android:layout_marginLeft="3dp"
				android:layout_width="wrap_content"
				android:minWidth="37dp"
				android:paddingBottom="2dp"
				android:paddingTop="1dp"
				style="@style/Select_1" />
			<Spinner
				android:id="@+id/customday0"
				android:background="@drawable/select_hour"
				android:entries="@array/customday0_array"
				android:layout_height="wrap_content"
				android:layout_marginLeft="4dp"
				android:layout_width="wrap_content"
				android:minWidth="37dp"
				android:paddingBottom="2dp"
				android:paddingTop="1dp"
				style="@style/Select_1" />
			<EditText
				android:id="@+id/customyear0"
				android:background="@drawable/input_order"
				android:layout_height="wrap_content"
				android:layout_marginLeft="3dp"
				android:layout_width="40dp"
				android:paddingVertical="1dp"
				style="@style/Input_1.Input_3" />
		</LinearLayout>
		<Space
			android:layout_columnSpan="2"
			android:layout_columnWeight="1"
			android:layout_height="6dp"
			android:layout_width="match_parent" />
		<TextView
			android:id="@+id/textview_19"
			android:layout_columnWeight="0"
			android:layout_height="wrap_content"
			android:layout_marginRight="5dp"
			android:layout_width="100dp"
			android:paddingTop="3dp"
			android:text="@string/conclusion"
			style="@style/Label_1" />
		<LinearLayout
			android:id="@+id/linearlayout_8"
			android:layout_columnWeight="1"
			android:layout_height="wrap_content"
			android:layout_width="0dp"
			android:orientation="horizontal">
			<Spinner
				android:id="@+id/person"
				android:background="@drawable/select_hour"
				android:layout_height="match_parent"
				android:layout_width="133dp"
				android:minWidth="37dp"
				android:paddingBottom="2dp"
				android:paddingTop="1dp"
				style="@style/Select_1" />
			<RadioGroup
				android:id="@+id/radiogroup_1"
				android:checkedButton="@id+/c2"
				android:layout_height="wrap_content"
				android:layout_marginLeft="3dp"
				android:layout_width="wrap_content"
				android:orientation="horizontal">
				<RadioButton
					android:id="@+id/c2"
					android:layout_height="match_parent"
					android:layout_marginLeft="5dp"
					android:layout_marginRight="3dp"
					android:layout_marginTop="3dp"
					android:layout_weight="0"
					android:layout_width="wrap_content"
					android:text="@string/birth"
					style="@style/Input_1.Input_4" />
				<RadioButton
					android:id="@+id/c3"
					android:layout_height="match_parent"
					android:layout_marginLeft="7dp"
					android:layout_marginRight="3dp"
					android:layout_marginTop="3dp"
					android:layout_weight="0"
					android:layout_width="wrap_content"
					android:text="@string/death"
					style="@style/Input_1.Input_4" />
			</RadioGroup>
			<CheckBox
				android:id="@+id/c4"
				android:layout_height="match_parent"
				android:layout_marginLeft="4dp"
				android:layout_marginRight="3dp"
				android:layout_marginVertical="3dp"
				android:layout_width="wrap_content"
				android:text="@string/none"
				style="@style/Input_1.Input_4" />
			<Button
				android:id="@+id/button_7"
				android:background="@drawable/input_button_1"
				android:layout_height="wrap_content"
				android:layout_marginLeft="4dp"
				android:layout_width="wrap_content"
				android:paddingHorizontal="6dp"
				android:paddingVertical="1dp"
				android:text="@string/update"
				style="@style/Input_1.Input_2" />
		</LinearLayout>
		<Space
			android:layout_columnSpan="2"
			android:layout_columnWeight="1"
			android:layout_height="6dp"
			android:layout_width="match_parent" />
	</GridLayout>
</LinearLayout>

auto-generated string resources

Partial output of the string resources.

<?xml version="1.0" encoding="utf-8"?>
<resources>
	<string name="active">Active:</string>
	<string name="add">Add</string>
	<string name="all">All</string>
	<string name="birth">Birth</string>
	<string name="branch">Branch:</string>
	<string name="calendar">Calendar:</string>
	<string name="clone">Clone</string>
	<string name="conclusion">Conclusion:</string>
	<string name="custom_add">Custom (<a href="#">Add</a>):</string>
	<string name="date_add">Date (<a href="#">Add</a>):</string>
	<string name="death">Death</string>
	<string name="entries">Entries:</string>
	<string name="entry">Entry</string>
	<string name="mode">Mode:</string>
	<string name="next">Next</string>
	<string name="no">No</string>
	<string name="none">None</string>
	<string name="open">Open</string>
	<string name="order">Order:</string>
	<string name="predefined">Predefined</string>
	<string name="series">Series:</string>
	<string name="style">Style:</string>
	<string name="subset">Subset:</string>
	<string name="time">Time:</string>
	<string name="topic_add">Topic (<a href="#">Add</a>):</string>
	<string name="type">Type:</string>
	<string name="update">Update</string>
	<string name="variant">Variant</string>
	<string name="version">Version:</string>
	<string name="yes">Yes</string>
</resources>

auto-generated styles and themes

Styles are grouped by HTML element name and then by common properties. These styles were modified to demonstrate the grouping capabilities although it is not completely accurate with the sample picture.

<?xml version="1.0" encoding="utf-8"?>
<resources>
	<style name="H2_1">
		<item name="android:fontFamily">Arial, Helvetica, Tahoma</item>
		<item name="android:textSize">14sp</item>
		<item name="android:fontWeight">400</item>
		<item name="android:textStyle">normal</item>
		<item name="android:textColor">@color/white</item>
		<item name="android:background">@color/slate_gray</item>
	<style>
	<style name="Input_1">
		<item name="android:fontFamily">Arial</item>
	<style>
	<style name="Input_2">
		<item name="android:fontWeight">400</item>
		<item name="android:textColor">@color/black</item>
		<item name="android:textSize">13sp</item>
		<item name="android:textStyle">normal</item>
	<style>
	<style name="Input_3">
		<item name="android:background">@color/white_smoke1</item>
		<item name="android:fontWeight">400</item>
		<item name="android:textSize">11sp</item>
		<item name="android:textStyle">normal</item>
	<style>
</resources>
<!-- filename: res/values/styles.xml -->

auto-generated color resources

Color names from the X11 and CSS3 specification are used to choose the nearest color for these color resources.

<?xml version="1.0" encoding="utf-8"?>
<resources>
	<color name="#000000">black</color>
	<color name="#708090">slate_gray</color>
	<color name="#808080">gray</color>
	<color name="#A9A9A9">dark_gray</color>
	<color name="#CCCCCC">light_gray_1</color>
	<color name="#DDDDDD">white_smoke_1</color>
	<color name="#FFFFFF">white</color>
</resources>
<!-- filename: res/values/colors.xml -->

auto-generated drawable resources

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle">
	<stroke android:width="1dp" android:color="@color/light_gray_1" />
</shape>
<!-- filename: res/drawable/form_entry.xml -->

<?xml version="1.0" encoding="utf-8"?>
<layer-list>
	<item>
		<shape android:shape="rectangle">
			<solid android:color="@color/white_smoke_1" />
		</shape>
	</item>
	<item>
		<shape android:shape="rectangle">
			<stroke android:width="2dp" android:color="@color/white_smoke_1" />
		</shape>
	</item>
</layer-list>
<!-- filename: res/drawable/input_button1.xml -->

<?xml version="1.0" encoding="utf-8"?>
<layer-list>
	<item>
		<shape android:shape="rectangle">
			<solid android:color="@color/white" />
		</shape>
	</item>
	<item>
		<shape android:shape="rectangle">
			<stroke android:width="2dp" android:color="@color/black" />
		</shape>
	</item>
</layer-list>
<!-- filename: res/drawable/input_order.xml -->

#2

Hi! I don’t have an opinion on your work, but I was wondering which relevance with NativeScript you see as NativeScript doesn’t use the Android XML layout system to create the UI.


#3

I know they don’t use HTML but it might be possible for them to use HTML to design their layouts and then import the Android XML to create their UI. HTML is really popular and probably the best way to design a UI. More people might try out NativeScript if it used HTML with Angular.


#4

It’s interesting! Do you have a blogpost on the topic that I can read?


#5

I don’t have a blog or anything really other than what you see on GitHub. I was reading some books on Xamarin and thought of trying something similar in terms of at least creating a universal UI designer built inside Chrome. If you design something using the basic HTML and CSS features needed for mobile devices than it can generate a very accurate layout. Its a nice utility to have in any case for people who start out as a HTML and Javascript programmer to ease their transition to mobile programming.


#6

I finally loaded it in Android Studio yesterday. Here is the “native” xml.