Whilst the mac is away we play with android.

Seeing as my mac is temporarily indisposed seeing as it no longer charges from the magsafe connector I’ve been fiddling with android/eclipse getting a rudimentary chef book app running there. I must say the layout of interfaces comes as a bit of a shock after using IB. But it’s OK once you pretend you’re designing web pages in xml….

Case in point… I might have been wrong about there being margins but padding is there. If you add an image that’s say 32px wide you do this:

<ImageView android:id=”@+id/imgIcon”

android:layout_width=”32dp”

android:layout_height=”fill_parent”

android:src=”@drawable/logo” >

in your xml. You launch it and find that it’s all a bit cramped so you want to space it out by 10px. So you do this:

<ImageView android:id=”@+id/imgIcon”

android:layout_width=”32dp”

android:layout_height=”fill_parent”

android:src=”@drawable/logo”

android:padding=”10px”>

Right? Wrong…. as in html padding, unlike margins, are inside the view and thus take away from the width/height. So you end up with your logo being a paltry 12px, 10px removed by padding on each side. So you have to write this instead:

<ImageView android:id=”@+id/imgIcon”

android:layout_width=”52dp”

android:layout_height=”fill_parent”

android:src=”@drawable/logo”

android:padding=”10px”>

To layout a cell with an image on the left, centered and padded, followed by two rows of text on the right aligned vertically you need all this:

<?xml version=”1.0″ encoding=”utf-8″?><LinearLayout  xmlns:android=”http://schemas.android.com/apk/res/android”

android:layout_width=”fill_parent”

android:layout_height=”wrap_content”

android:orientation=”horizontal”

android:gravity=”center_vertical”>

<ImageView android:id=”@+id/imgIcon”

android:layout_width=”52dp”

android:layout_height=”fill_parent”

android:src=”@drawable/logo”

android:padding=”10px”>

</ImageView>

<LinearLayout   xmlns:android=”http://schemas.android.com/apk/res/android”

android:layout_width=”fill_parent”

android:layout_height=”wrap_content”

android:orientation=”vertical”

android:gravity=”center_vertical”>

<TextView android:id=”@+id/txtTitle”

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:gravity=”center_vertical”

android:focusable=”false”>

</TextView>

<TextView android:id=”@+id/txtDesc”

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:gravity=”center_vertical”

android:focusable=”false”>

</TextView>

</LinearLayout>

</LinearLayout>

It’s a lot of typing. Of course if you did this with some kind of gui all of your layouts would end up being done with the absolute layout manager. I have no idea if that’s considered inefficient. Thankfully a lot of the above can be cut and paste coding. Of course in the above the image is hard coded you’d need to remove the android:src=”@drawable/logo” line and populate the image in your code. It’s worth noting that wrap_content as an option for layout_height/width means make the container JUST big enough to encase the content. For the image view the image I chose is 200x200px so using wrap content when I only want it to be 32px would be wrong. My use of fill_parent for the height there is probably incorrect also but OK as the image is square and I’m forcing the width. It should probably be set manually like the width is.