Android - XML layout vs programmatic

Question

I'm trying to use relative layout with a custom class that extends view, and a couple of buttons. This is what I eventually want it to look like:

http://imgur.com/B5MtdJ7

(forgive me for posting a link rather than an image, apparently I'm not cool enough yet)

Currently this is hardcoded with heights in dp (see XML below), and there are two problems with this:

• It only looks acceptable on my Nexus 7 screen, and no other device
• Both custom views' onDraw method still provides a canvas with height and width that exactly match the resolution of the device

If I try to set layout_height to wrap_content, each custom view attempts to take up the whole screen, which seems consistent with bullet point 2, but clearly is not what I want.

What I want to achieve is a Relative Layout with two custom views, that looks exactly as shown in the picture, but will scale itself to the dimensions of the screen it's sitting on AND the custom views canvas actually knows how big a part of the screen it sits on. How do I do this?

Edit: the reason this is "vs programmatic" is that I think overriding on measure wouldn't be a bad shout, but I have no idea how that would interact with the XML. I'd rather have the layout definition in one place, too.

My XML is below:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".TrajectoryView" >

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="0.5" >

    <com.sportsim.virtualcricket.view.SideProfileView
        android:id="@+id/side_profile_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    </com.sportsim.virtualcricket.view.SideProfileView>
</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="0.5" >

    <com.sportsim.virtualcricket.view.BirdsEyeView
        android:id="@+id/birds_eye_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="0.25"
    android:orientation="horizontal" >

    <Button
        android:id="@+id/button1"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="0.5"
        android:text="Button" />

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="0.5"
        android:text="Button" />
</LinearLayout>

Answer 1

This would be fairly easy using LinearLayout and weights. I've given an example below but I can't test it at the moment. It should provide some direction though.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".TrajectoryView" >

<com.sportsim.virtualcricket.view.SideProfileView
    android:id="@+id/side_profile_view"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="0.5"/>

<com.sportsim.virtualcricket.view.BirdsEyeView
    android:id="@+id/birds_eye_view"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="0.25" />

<LinearLayout 
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="0.25"
    android:orientation="horizontal">

<Button
    android:id="@+id/button1"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="0.5"
    android:text="Button" />

<Button
    android:id="@+id/button2"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="0.5"
    android:text="Button" />

</LinearLayout>
</LinearLayout>