It shouldn't be hard at all.
But I'd recommend doing it with HTML and using PhoneGap (or similar) to convert it, to avoid really icky XML.
Here's a quick example - if you want to do this with Android:
The Android UI example code for that is this:
XML code: <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:id="@+id/label"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Type here:"/>
<EditText
android:id="@+id/entry"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@android:drawable/editbox_background"
android:layout_below="@id/label"/>
<Button
android:id="@+id/ok"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/entry"
android:layout_alignParentRight="true"
android:layout_marginLeft="10dip"
android:text="OK" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="@id/ok"
android:layout_alignTop="@id/ok"
android:text="Cancel" />
</RelativeLayout>
All those silly android:layout_ bits do my head in.
A far nicer (though still not perfect) way would have been:
XML code: <RelativeLayout layout="width:fill;height:fill">
<Text id="label" text="Type Here:" />
<Edit id="entry" />
<Button id="ok" text="OK" />
<Button id="cancel" text="Cancel" />
<Layout>
#label
{
width:fill; height:wrap;
}
#entry
{
width:fill; height:wrap;
below:#label;
}
#ok
{
width:wrap; height:wrap;
below:#id;
alignRight:parent;
marginLeft:10dip;
}
#cancel
{
width:wrap; height:wrap;
toLeftOf:#ok;
alignTop:#ok;
}
</Layout>
</RelativeLayout>
Which could be compared to a HTML+CSS equivalent:
HTML code: <body style="width:100%;height:100%">
<label id="label">Type Here:</div>
<input type="text" id="entry" />
<button id="ok">OK</button>
<button id="cancel">Cancel</button>
<style>
#label
{
width:100%; height:auto;
display:block;
}
#entry
{
width:100%; height:auto;
display:block;
}
#ok
{
width:auto; height:auto;
float:right; clear: right;
margin-left:10px;
}
#cancel
{
width:auto; height:auto;
float:right; clear: none;
}
</style>
</body>
But anyway, that's just me ranting and not really what you asked. :S |
