Question

I have a layout like this in which I want to display a label above a view and then repeat it below.

Here is my code…

<RelativeLayout
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/speedLbl"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:text="@string/speed"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <View
        android:id="@+id/speedGraph"
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="4dp"
        android:layout_below="@+id/speedLbl"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:background="@color/blueColour" />

    <TextView
        android:id="@+id/distanceLbl"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_below="@+id/speedGraph"
        android:text="@string/distance"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <View
        android:id="@+id/distanceGraph"
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/distanceLbl"
        android:layout_marginBottom="4dp"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:background="@color/blueColour" />

</RelativeLayout>

The problem is I don’t want to set a height for the two views as I want them to dynamically change depending on the screen size.
I tried using layout_weight but it doesn’t like the fact that its nested inside another.

Can anyone see another solution for this problem??

Answer 1

You could avoid the double weights issue with a small trick. You could set an empty View at the vertical center of the parent RelativeLayout and position the two groups above and below that View, something like this:

<RelativeLayout
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:orientation="vertical" >

    <View android:id="@+id/anchor" 
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_centerVertical="true/>

    <TextView
        android:id="@+id/speedLbl"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:text="@string/speed"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <View
        android:id="@+id/speedGraph"
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="4dp"
        android:layout_below="@id/speedLbl"
        android:layout_above="@id/anchor"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:background="@color/blueColour" />

    <TextView
        android:id="@+id/distanceLbl"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_below="@id/anchor"
        android:text="@string/distance"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <View
        android:id="@+id/distanceGraph"
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/distanceLbl"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="4dp"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:background="@color/blueColour" />

</RelativeLayout>

Also you should use the @+id/... notation only when you first declare that id, on the next id occurrence you should use @id/....