Android - Using a linear or tabular layout

Question

I would like to know how best to use Linear Layout or Table Layout to design the attached Android screen.

I use linear layout as the main layout, and then add auxiliary linear layouts and table layouts to it. Is this the best way to do ???

Answer 1

Use RelativeLayout or GridLayout (ICS and above).

This should help you get started. This is not exactly what you want, but hopefully close. I have not tested the code, so I don’t even know if it was compiled. However, don't stand too far from the final code. :)

<RelativeLayout> <!-- Image, may want to size this as a square using dp pixels say, 64dpx64dp --> <ImageView android:id="@+id/PhotoImageView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_alignParentLeft="true" /> <!-- TextViews at the right of the image. Stacked, caution this might end up being taller than the ImageView itself. --> <TextView android:id="@+id/PersonNameTextView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_toRightOf="@id/PhotoImageView" /> <TextView android:id="@+id/TitleTextView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_toRightOf="@id/PhotoImageView" android:layout_below="@id/PersonNameTextView" /> <!-- Stacked TextViews below, you can split this out to side by side TextViews but that more work. --> <TextView android:id="@+id/PhoneTextView" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/PhotoImageView" /> <TextView android:id="@+id/EmailTextView" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/PhoneTextView" /> <!-- Delete button placed at the bottom. --> <Button android:id="@+id/DeleteButton" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" /> </RelativeLayout>