Javascript + Android = HTML?


#1

I was surprised to see there isn’t a HTML to Android XML layout converter built into Android Studio since Google is fully loaded with HTML and Javascript programmers. No company reminds me of HTML and Javascript more than Google.

I started prototyping the concept and it is currently presentable. I can take it a lot further and to the point where it could be pixel to pixel accurate although that depends on there being a need for this tool in the open source community. Currently I am not sure if there is a need after doing some Google searches but I decided to do it anyway in my free time. You can download it from GitHub.

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/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_constraintLeft_toLeftOf="parent"
						app:layout_constraintRight_toRightOf="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" />
				</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>
<?xml version="1.0" encoding="utf-8"?>
<resources>
	<array name="branch_array">
		<item>0</item>
		<item>1</item>
		<item>2</item>
		<item>3</item>
		<item>4</item>
		<item>5</item>
		<item>6</item>
		<item>7</item>
		<item>8</item>
		<item>9</item>
		<item>10</item>
	</array>
	<array name="branch_update_array">
		<item>0</item>
		<item>1</item>
		<item>2</item>
		<item>3</item>
		<item>4</item>
		<item>5</item>
		<item>6</item>
		<item>7</item>
		<item>8</item>
		<item>9</item>
		<item>10</item>
		<item>11</item>
		<item>12</item>
		<item>13</item>
	</array>
	<array name="calendar_array">
		<item name="1">@string/birth</item>
		<item name="2">@string/death</item>
	</array>
	<array name="entryactive_array">
		<item name="1">@string/yes</item>
		<item name="0">@string/no</item>
	</array>
	<array name="mode_array">
		<item name="1">@string/variant</item>
		<item name="2">@string/predefined</item>
	</array>
	<array name="prominence0_array">
		<item>0</item>
		<item>1</item>
	</array>
	<array name="year0_array">
		<item>2001</item>
		<item>2002</item>
		<item>2003</item>
		<item>2004</item>
		<item>2005</item>
		<item>2006</item>
		<item>2007</item>
		<item>2008</item>
		<item>2009</item>
		<item>2010</item>
		<item>2011</item>
		<item>2012</item>
		<item>2013</item>
		<item>2014</item>
		<item>2015</item>
		<item>2016</item>
		<item>2017</item>
		<item>2018</item>
	</array>
</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="A_1">
		<item name="android:fontFamily">Arial, Helvetica, Tahoma</item>
		<item name="android:textSize">12sp</item>
		<item name="android:fontWeight">400</item>
		<item name="android:textStyle">normal</item>
		<item name="android:textColor">@color/blue</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_smoke_1</item>
		<item name="android:fontWeight">400</item>
		<item name="android:textSize">11sp</item>
		<item name="android:textStyle">normal</item>
	<style>
	<style name="Input_4">
		<item name="android:background">@color/white</item>
		<item name="android:textSize">13sp</item>
	<style>
	<style name="Input_5">
		<item name="android:textColor">@color/black</item>
		<item name="android:textSize">11sp</item>
	<style>
	<style name="Input_6">
		<item name="android:background">@color/white_smoke_1</item>
		<item name="android:fontWeight">400</item>
		<item name="android:textColor">@color/black</item>
		<item name="android:textSize">12sp</item>
		<item name="android:textStyle">normal</item>
	<style>
	<style name="Input_7">
		<item name="android:textColor">@color/gray</item>
		<item name="android:textSize">11sp</item>
	<style>
	<style name="Label_1">
		<item name="android:fontFamily">Arial, Helvetica, Tahoma</item>
		<item name="android:textSize">12sp</item>
		<item name="android:fontWeight">400</item>
		<item name="android:textStyle">normal</item>
		<item name="android:textColor">@color/black</item>
	<style>
	<style name="Select_1">
		<item name="android:fontFamily">Arial</item>
		<item name="android:textSize">12sp</item>
		<item name="android:fontWeight">400</item>
		<item name="android:textStyle">normal</item>
		<item name="android:textColor">@color/black</item>
		<item name="android:background">@color/white</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 -->

<?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="1dp" android:color="@color/dark_gray" />
		</shape>
	</item>
</layer-list>
<!-- filename: res/drawable/select_hour.xml -->

#2

I like it!
Only question: Why did you post this on a Kotlin-site?


#3

kotlin = android + javascript

what it might be missing is html in order to convert the HTML and Javascript programmers into the mobile industry. if you take out one component of the equation it then is twice as easy to make the transition.


#4

The post might have been better in the Intelli J forum. Android Studio should have a convert from HTML feature one day and they are going towards Kotlin.